projects / raphael / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 1df44c2)
Documentation update
authorDmitry Baranovskiy <Dmitry@Baranovskiy.com>
Sun, 20 Mar 2011 22:03:26 +0000 (09:03 +1100)
committerDmitry Baranovskiy <Dmitry@Baranovskiy.com>
Sun, 20 Mar 2011 22:03:26 +0000 (09:03 +1100)
dr.css patch | blob | history
raphael-src.html patch | blob | history
reference.html patch | blob | history

diff --git a/dr.css b/dr.css
index 88b8454..c189499 100644 (file)
--- a/dr.css
+++ b/dr.css
@@ -1,7 +1,13 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+}
 #dr-js {
     background: #999;
     margin: 0;
     padding: 0;
+    overflow-y: hidden;
 }
 #src-dr-js {
     background: #000;
@@ -10,11 +16,39 @@
 }
 .dr-doc {
     background: #eee;
+    border-right: solid #eee 3px;
+    float: right;
     font: 300 100.01%/1.4 "Myriad Pro", "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
+    height: 100%;
+    margin: 0;
+    overflow: auto;
+    padding: 0 2em;
     width: 60em;
-    padding: 0 2em 2em;
+}
+.dr-toc {
+    margin: 0;
+    padding: 0 1em;
+    background: #ddd;
+    list-style: none;
+    font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
+    overflow: auto;
+    border-right: solid #ddd 3px;
+    height: 100%;
+    float: right;
+    width: 15em;
+}
+#dr {
     margin: 0 auto;
-    position: relative;
+    width: 82em;
+    height: 100%;
+}
+::-moz-selection {
+    background: #c00;
+    color: #fff;
+}
+::selection {
+    background: #c00;
+    color: #fff;
 }
 .dr-doc code,
 .dr-type em,
@@ -81,22 +115,19 @@ dd.dr-description {
 .dr-type em,
 .dr-returns em,
 .dr-property em {
-    -webkit-border-radius: .3em;
-    -webkit-border-radius: .3em;
-    -moz-border-radius: .3em;
     -moz-border-radius: .3em;
+    -webkit-border-radius: .3em;
     background: #ccc;
     border-radius: .3em;
-    border-radius: .3em;
-    float: left;
     display: block;
+    float: left;
     font-size: .75em;
     font-style: normal;
     font-weight: 700;
     margin: .2em .5em .2em 0;
+    min-width: 5em;
     padding: .1em .5em;
     text-align: center;
-    min-width: 5em;
 }
 .dr-property em.dr-type {
     margin: .23em 1em 0 0;
@@ -128,6 +159,24 @@ em.dr-type-array {
 dd.dr-optional {
     display: none;
 }
+ol.dr-json {
+    background: #ddd;
+    list-style: none;
+    margin: 0 -2em;
+    padding: 1em 2em;
+}
+ol.dr-json .dr-json-key {
+    float: left;
+    min-width: 3em;
+    margin-right: 1em;
+}
+ol.dr-json .dr-json-description {
+    display: table;
+}
+ol.dr-json ol.dr-json  {
+    margin: 0;
+    padding: 0 0 0 3em;
+}
 h1 {
     font-weight: 400;
     font-size: 2.6em;
@@ -175,21 +224,6 @@ p.header {
     margin-right: 1em;
     width: 10em;
 }
-.dr-toc {
-    -webkit-border-bottom-left-radius: 1em;
-    -webkit-border-bottom-right-radius: 1em;
-    -moz-border-radius-bottomleft: 1em;
-    -moz-border-radius-bottomright: 1em;
-    border-bottom-left-radius: 1em;
-    border-bottom-right-radius: 1em;
-    float: right;
-    margin: -3px 0 1em 1em;
-    padding: 1em;
-    background: #ddd;
-    list-style: none;
-    border: solid 3px #999;
-    font-family: Menlo, Consolas, Monaco, "Lucida Console", monospace;
-}
 .dr-toc a {
     display: block;
     text-decoration: none;
@@ -236,13 +270,9 @@ a.dr-sourceline {
     -webkit-transition: opacity 0.2s linear;
     color: #333;
     font-family: Menlo, "Arial Unicode MS", sans-serif;
-/*    left: -20px;*/
-/*    line-height: 1;*/
     margin: 0 0 0 .3em;
-/*    overflow: hidden;*/
     opacity: 0;
     text-decoration: none;
-/*    width: 1em;*/
 }
 a.dr-link {
     position: relative;
@@ -288,7 +318,6 @@ p {
     padding: 5px;
 }
 #src-dr-js code {
-    -webkit-transition: background 0.2s linear;
     background: #000;
     display: block;
     color: #fff;
@@ -299,12 +328,49 @@ p {
     line-height: 1.2;
 }
 #src-dr-js code:hover {
-    background: #666;
+    background: #333;
+}
+#src-dr-js code:hover .ln {
+/*    background: #666;*/
+    color: #fff;
 }
 #src-dr-js code .ln {
     position: absolute;
     left: 0;
-    color: #000;
+    color: #333;
     width: 70px;
     text-align: right;
+}
+
+/*Scrollbar*/
+.dr-doc::-webkit-scrollbar,
+.dr-toc::-webkit-scrollbar {
+    width: 7px;
+    height: 9px;
+}
+.dr-doc::-webkit-scrollbar-button:start:decrement, 
+.dr-doc::-webkit-scrollbar-button:end:increment,
+.dr-toc::-webkit-scrollbar-button:start:decrement, 
+.dr-toc::-webkit-scrollbar-button:end:increment {
+    display: block;
+    height: 0;
+    background-color: transparent;
+}
+.dr-doc::-webkit-scrollbar-track-piece,
+.dr-toc::-webkit-scrollbar-track-piece {
+    -webkit-border-radius: 0;
+    -webkit-border-bottom-right-radius: 4px;
+    -webkit-border-bottom-left-radius: 4px;
+}
+.dr-doc::-webkit-scrollbar-thumb:vertical,
+.dr-toc::-webkit-scrollbar-thumb:vertical {
+    height: 50px;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
+}
+.dr-doc::-webkit-scrollbar-thumb:horizontal,
+.dr-toc::-webkit-scrollbar-thumb:horizontal {
+    width: 50px;
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-border-radius: 4px;
 }
\ No newline at end of file
diff --git a/raphael-src.html b/raphael-src.html
index 96fba8a..8a100f1 100644 (file)
--- a/raphael-src.html
+++ b/raphael-src.html
@@ -31,28 +31,28 @@
 </span></code><code id="L29"><span class="ln">29</span><span class="c">    <span class="s"> - </span>onReadyCallback (<b>function</b>) <b>function</b> that is going to be called on DOM ready event. You can also subscribe to <b>this</b> event via Eve’s “DOMLoad” event. In <b>this</b> <b>case</b> method returns `<b>undefined</b>`.
 </span></code><code id="L30"><span class="ln">30</span><span class="c">    <span class="s"> = </span>(object) @Paper
 </span></code><code id="L31"><span class="ln">31</span><span class="c">     > Usage
-</span></code><code id="L32"><span class="ln">32</span><span class="c">     | <span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
-</span></code><code id="L33"><span class="ln">33</span><span class="c">     | <span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
-</span></code><code id="L34"><span class="ln">34</span><span class="c">     | <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
-</span></code><code id="L35"><span class="ln">35</span><span class="c">     | <span class="c">// Canvas is created at the top left corner of the #notepad element</span>
-</span></code><code id="L36"><span class="ln">36</span><span class="c">     | <span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
-</span></code><code id="L37"><span class="ln">37</span><span class="c">     | <b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
-</span></code><code id="L38"><span class="ln">38</span><span class="c">     | <span class="c">// Same as above</span>
-</span></code><code id="L39"><span class="ln">39</span><span class="c">     | <b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
-</span></code><code id="L40"><span class="ln">40</span><span class="c">     | <span class="c">// Image dump</span>
-</span></code><code id="L41"><span class="ln">41</span><span class="c">     | <b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
-</span></code><code id="L42"><span class="ln">42</span><span class="c">     |     type: <i>"rect"</i>,
-</span></code><code id="L43"><span class="ln">43</span><span class="c">     |     x: <span class="d">10</span>,
-</span></code><code id="L44"><span class="ln">44</span><span class="c">     |     y: <span class="d">10</span>,
-</span></code><code id="L45"><span class="ln">45</span><span class="c">     |     width: <span class="d">25</span>,
-</span></code><code id="L46"><span class="ln">46</span><span class="c">     |     height: <span class="d">25</span>,
-</span></code><code id="L47"><span class="ln">47</span><span class="c">     |     stroke: <i>"#f00"</i>
-</span></code><code id="L48"><span class="ln">48</span><span class="c">     | }, {
-</span></code><code id="L49"><span class="ln">49</span><span class="c">     |     type: <i>"text"</i>,
-</span></code><code id="L50"><span class="ln">50</span><span class="c">     |     x: <span class="d">30</span>,
-</span></code><code id="L51"><span class="ln">51</span><span class="c">     |     y: <span class="d">40</span>,
-</span></code><code id="L52"><span class="ln">52</span><span class="c">     |     text: <i>"Dump"</i>
-</span></code><code id="L53"><span class="ln">53</span><span class="c">     | }]);
+</span></code><code id="L32"><span class="ln">32</span><span class="c">    <span class="s"> | </span><span class="c">// Each of the following examples create a canvas that is 320px wide by 200px high</span>
+</span></code><code id="L33"><span class="ln">33</span><span class="c">    <span class="s"> | </span><span class="c">// Canvas is created at the viewport’s <span class="d">10</span>,<span class="d">50</span> coordinate</span>
+</span></code><code id="L34"><span class="ln">34</span><span class="c">    <span class="s"> | </span><b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">50</span>, <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L35"><span class="ln">35</span><span class="c">    <span class="s"> | </span><span class="c">// Canvas is created at the top left corner of the #notepad element</span>
+</span></code><code id="L36"><span class="ln">36</span><span class="c">    <span class="s"> | </span><span class="c">// (or its top right corner <b>in</b> dir=<i>"rtl"</i> elements)</span>
+</span></code><code id="L37"><span class="ln">37</span><span class="c">    <span class="s"> | </span><b>var</b> paper<span class="s"> = </span>Raphael(document.getElementById(<i>"notepad"</i>), <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L38"><span class="ln">38</span><span class="c">    <span class="s"> | </span><span class="c">// Same as above</span>
+</span></code><code id="L39"><span class="ln">39</span><span class="c">    <span class="s"> | </span><b>var</b> paper<span class="s"> = </span>Raphael(<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>);
+</span></code><code id="L40"><span class="ln">40</span><span class="c">    <span class="s"> | </span><span class="c">// Image dump</span>
+</span></code><code id="L41"><span class="ln">41</span><span class="c">    <span class="s"> | </span><b>var</b> set<span class="s"> = </span>Raphael([<i>"notepad"</i>, <span class="d">320</span>, <span class="d">200</span>, {
+</span></code><code id="L42"><span class="ln">42</span><span class="c">    <span class="s"> | </span>    type: <i>"rect"</i>,
+</span></code><code id="L43"><span class="ln">43</span><span class="c">    <span class="s"> | </span>    x: <span class="d">10</span>,
+</span></code><code id="L44"><span class="ln">44</span><span class="c">    <span class="s"> | </span>    y: <span class="d">10</span>,
+</span></code><code id="L45"><span class="ln">45</span><span class="c">    <span class="s"> | </span>    width: <span class="d">25</span>,
+</span></code><code id="L46"><span class="ln">46</span><span class="c">    <span class="s"> | </span>    height: <span class="d">25</span>,
+</span></code><code id="L47"><span class="ln">47</span><span class="c">    <span class="s"> | </span>    stroke: <i>"#f00"</i>
+</span></code><code id="L48"><span class="ln">48</span><span class="c">    <span class="s"> | </span>}, {
+</span></code><code id="L49"><span class="ln">49</span><span class="c">    <span class="s"> | </span>    type: <i>"text"</i>,
+</span></code><code id="L50"><span class="ln">50</span><span class="c">    <span class="s"> | </span>    x: <span class="d">30</span>,
+</span></code><code id="L51"><span class="ln">51</span><span class="c">    <span class="s"> | </span>    y: <span class="d">40</span>,
+</span></code><code id="L52"><span class="ln">52</span><span class="c">    <span class="s"> | </span>    text: <i>"Dump"</i>
+</span></code><code id="L53"><span class="ln">53</span><span class="c">    <span class="s"> | </span>}]);
 </span></code><code id="L54"><span class="ln">54</span><span class="c">    \*/</span>
 </code><code id="L55"><span class="ln">55</span>    <b>function</b> R(first) {
 </code><code id="L56"><span class="ln">56</span>        <b>if</b> (R.is(first, <i>"<b>function</b>"</i>)) {
@@ -66,7 +66,7 @@
 </code><code id="L64"><span class="ln">64</span>                j;
 </code><code id="L65"><span class="ln">65</span>            <b>for</b> (; i &lt; ii; i++) {
 </code><code id="L66"><span class="ln">66</span>                j<span class="s"> = </span>a[i]<span class="s"> || </span>{};
-</code><code id="L67"><span class="ln">67</span>                elements[has](j.type) &amp;&amp; res.push(cnv[j.type]().attr(j));
+</code><code id="L67"><span class="ln">67</span>                elements[has](j.type)<span class="s"> &amp;&amp; </span>res.push(cnv[j.type]().attr(j));
 </code><code id="L68"><span class="ln">68</span>            }
 </code><code id="L69"><span class="ln">69</span>            <b>return</b> res;
 </code><code id="L70"><span class="ln">70</span>        }
@@ -117,7 +117,7 @@
 </code><code id="L115"><span class="ln">115</span>        objectToString<span class="s"> = </span>Object.prototype.toString,
 </code><code id="L116"><span class="ln">116</span>        paper<span class="s"> = </span>{},
 </code><code id="L117"><span class="ln">117</span>        push<span class="s"> = </span><i>"push"</i>,
-</code><code id="L118"><span class="ln">118</span>        ISURL<span class="s"> = </span>/^url\(['<i>"]?([^\)]+?)['"</i>]?\)$/i,
+</code><code id="L118"><span class="ln">118</span>        ISURL<span class="s"> = </span>/^url\([<i>'"]?([^\)]+?)['</i>"]?\)$/i,
 </code><code id="L119"><span class="ln">119</span>        colourRegExp<span class="s"> = </span>/^\s*((#[a-f\d]{<span class="d">6</span>})|(#[a-f\d]{<span class="d">3</span>})|rgba?\(\s*([\d\.]+%?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\)|hsba?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\)|hsla?\(\s*([\d\.]+(?:deg|\xb0|%)?\s*,\s*[\d\.]+%?\s*,\s*[\d\.]+(?:%?\s*,\s*[\d\.]+)?)%?\s*\))\s*$/i,
 </code><code id="L120"><span class="ln">120</span>        isnan<span class="s"> = </span>{<i>"NaN"</i>: <span class="d">1</span>, <i>"Infinity"</i>: <span class="d">1</span>, <i>"-Infinity"</i>: <span class="d">1</span>},
 </code><code id="L121"><span class="ln">121</span>        bezierrg<span class="s"> = </span>/^(?:cubic-)?bezier\(([^,]+),([^,]+),([^,]+),([^\)]+)\)/,
@@ -127,7 +127,7 @@
 </code><code id="L125"><span class="ln">125</span>        toInt<span class="s"> = </span>parseInt,
 </code><code id="L126"><span class="ln">126</span>        ms<span class="s"> = </span><i>" progid:DXImageTransform.Microsoft"</i>,
 </code><code id="L127"><span class="ln">127</span>        upperCase<span class="s"> = </span>Str.prototype.toUpperCase,
-</code><code id="L128"><span class="ln">128</span>        availableAttrs<span class="s"> = </span>{<i>"arrow-end"</i>: <i>"none"</i>, <i>"arrow-start"</i>: <i>"none"</i>, blur: <span class="d">0</span>, <i>"clip-rect"</i>: <i>"<span class="d">0</span> <span class="d">0</span> <span class="d">1e9</span> <span class="d">1e9</span>"</i>, cursor: <i>"<b>default</b>"</i>, cx: <span class="d">0</span>, cy: <span class="d">0</span>, fill: <i>"#fff"</i>, <i>"fill-opacity"</i>: <span class="d">1</span>, font: '10px <i>"Arial"</i>', <i>"font-family"</i>: '<i>"Arial"</i>', <i>"font-size"</i>: <i>"<span class="d">10</span>"</i>, <i>"font-style"</i>: <i>"normal"</i>, <i>"font-weight"</i>: <span class="d">400</span>, gradient: <span class="d">0</span>, height: <span class="d">0</span>, href: <i>"http:<span class="c">//raphaeljs.com/"</i>, opacity: <span class="d">1</span>, path: <i>"M0,<span class="d">0</span>"</i>, r: <span class="d">0</span>, rx: <span class="d">0</span>, ry: <span class="d">0</span>, src: <i>""</i>, stroke: <i>"#<span class="d">000</span>"</i>, <i>"stroke-dasharray"</i>: <i>""</i>, <i>"stroke-linecap"</i>: <i>"butt"</i>, <i>"stroke-linejoin"</i>: <i>"butt"</i>, <i>"stroke-miterlimit"</i>: <span class="d">0</span>, <i>"stroke-opacity"</i>: <span class="d">1</span>, <i>"stroke-width"</i>: <span class="d">1</span>, target: <i>"_blank"</i>, <i>"text-anchor"</i>: <i>"middle"</i>, title: <i>"Raphael"</i>, transform: <i>""</i>, width: <span class="d">0</span>, x: <span class="d">0</span>, y: <span class="d">0</span>},</span>
+</code><code id="L128"><span class="ln">128</span>        availableAttrs<span class="s"> = </span>{<i>"arrow-end"</i>: <i>"none"</i>, <i>"arrow-start"</i>: <i>"none"</i>, blur: <span class="d">0</span>, <i>"clip-rect"</i>: <i>"<span class="d">0</span> <span class="d">0</span> <span class="d">1e9</span> <span class="d">1e9</span>"</i>, cursor: <i>"<b>default</b>"</i>, cx: <span class="d">0</span>, cy: <span class="d">0</span>, fill: <i>"#fff"</i>, <i>"fill-opacity"</i>: <span class="d">1</span>, font: <i>'10px "Arial"'</i>, <i>"font-family"</i>: <i>'"Arial"'</i>, <i>"font-size"</i>: <i>"<span class="d">10</span>"</i>, <i>"font-style"</i>: <i>"normal"</i>, <i>"font-weight"</i>: <span class="d">400</span>, gradient: <span class="d">0</span>, height: <span class="d">0</span>, href: <i>"http:<span class="c">//raphaeljs.com/"</i>, opacity: <span class="d">1</span>, path: <i>"M0,<span class="d">0</span>"</i>, r: <span class="d">0</span>, rx: <span class="d">0</span>, ry: <span class="d">0</span>, src: <i>""</i>, stroke: <i>"#<span class="d">000</span>"</i>, <i>"stroke-dasharray"</i>: <i>""</i>, <i>"stroke-linecap"</i>: <i>"butt"</i>, <i>"stroke-linejoin"</i>: <i>"butt"</i>, <i>"stroke-miterlimit"</i>: <span class="d">0</span>, <i>"stroke-opacity"</i>: <span class="d">1</span>, <i>"stroke-width"</i>: <span class="d">1</span>, target: <i>"_blank"</i>, <i>"text-anchor"</i>: <i>"middle"</i>, title: <i>"Raphael"</i>, transform: <i>""</i>, width: <span class="d">0</span>, x: <span class="d">0</span>, y: <span class="d">0</span>},</span>
 </code><code id="L129"><span class="ln">129</span>        availableAnimAttrs<span class="s"> = </span>{blur: nu, <i>"clip-rect"</i>: <i>"csv"</i>, cx: nu, cy: nu, fill: <i>"colour"</i>, <i>"fill-opacity"</i>: nu, <i>"font-size"</i>: nu, height: nu, opacity: nu, path: <i>"path"</i>, r: nu, rx: nu, ry: nu, stroke: <i>"colour"</i>, <i>"stroke-opacity"</i>: nu, <i>"stroke-width"</i>: nu, transform: <i>"transform"</i>, width: nu, x: nu, y: nu},
 </code><code id="L130"><span class="ln">130</span>        commaSpaces<span class="s"> = </span>/\s*,\s*/,
 </code><code id="L131"><span class="ln">131</span>        hsrg<span class="s"> = </span>{hs: <span class="d">1</span>, rg: <span class="d">1</span>},
@@ -211,10 +211,10 @@
 </code><code id="L209"><span class="ln">209</span>    <b>if</b> (R.type<span class="s"> == </span><i>"VML"</i>) {
 </code><code id="L210"><span class="ln">210</span>        <b>var</b> d<span class="s"> = </span>g.doc.createElement(<i>"div"</i>),
 </code><code id="L211"><span class="ln">211</span>            b;
-</code><code id="L212"><span class="ln">212</span>        d.innerHTML<span class="s"> = </span>'&lt;v:shape adj=<i>"<span class="d">1</span>"</i>/>';
+</code><code id="L212"><span class="ln">212</span>        d.innerHTML<span class="s"> = </span><i>'&lt;v:shape adj="<span class="d">1</span>"/>'</i>;
 </code><code id="L213"><span class="ln">213</span>        b<span class="s"> = </span>d.firstChild;
 </code><code id="L214"><span class="ln">214</span>        b.style.behavior<span class="s"> = </span><i>"url(#<b>default</b>#VML)"</i>;
-</code><code id="L215"><span class="ln">215</span>        <b>if</b> (!(b &amp;&amp; <b>typeof</b> b.adj<span class="s"> == </span><i>"object"</i>)) {
+</code><code id="L215"><span class="ln">215</span>        <b>if</b> (!(b<span class="s"> &amp;&amp; </span><b>typeof</b> b.adj<span class="s"> == </span><i>"object"</i>)) {
 </code><code id="L216"><span class="ln">216</span>            <b>return</b> R.type<span class="s"> = </span>E;
 </code><code id="L217"><span class="ln">217</span>        }
 </code><code id="L218"><span class="ln">218</span>        d<span class="s"> = </span><b>null</b>;
@@ -233,5273 +233,5699 @@
 </span></code><code id="L231"><span class="ln">231</span><span class="c">    \*/</span>
 </code><code id="L232"><span class="ln">232</span>    R.svg<span class="s"> = </span>!(R.vml<span class="s"> = </span>R.type<span class="s"> == </span><i>"VML"</i>);
 </code><code id="L233"><span class="ln">233</span>    paperproto<span class="s"> = </span>Paper.prototype<span class="s"> = </span>R.prototype;
-</code><code id="L234"><span class="ln">234</span>    paperproto.customAttributes<span class="s"> = </span>{};
-</code><code id="L235"><span class="ln">235</span>    R._id<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L236"><span class="ln">236</span>    R._oid<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L237"><span class="ln">237</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L238"><span class="ln">238</span><span class="c">    <span class="s"> * </span>Raphael.fn
-</span></code><code id="L239"><span class="ln">239</span><span class="c">     [ property (object) ]
-</span></code><code id="L240"><span class="ln">240</span><span class="c">     **
-</span></code><code id="L241"><span class="ln">241</span><span class="c">    <span class="s"> * </span>You can add your own method to the canvas. For example <b>if</b> you want to draw pie chart,
-</span></code><code id="L242"><span class="ln">242</span><span class="c">    <span class="s"> * </span>you can create your own pie chart <b>function</b> and ship it as a Raphaël plugin. To <b>do</b> <b>this</b>
-</span></code><code id="L243"><span class="ln">243</span><span class="c">    <span class="s"> * </span>you need to extend `Raphael.fn` object. Please note that you can create your own namespaces
-</span></code><code id="L244"><span class="ln">244</span><span class="c">    <span class="s"> * </span>inside `fn` object. Methods will be run <b>in</b> context of canvas anyway. You should alter `fn`
-</span></code><code id="L245"><span class="ln">245</span><span class="c">    <span class="s"> * </span>object before Raphaël instance was created, otherwise it will take no effect.
-</span></code><code id="L246"><span class="ln">246</span><span class="c">     > Usage
-</span></code><code id="L247"><span class="ln">247</span><span class="c">     | Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
-</span></code><code id="L248"><span class="ln">248</span><span class="c">     |     <b>return</b> <b>this</b>.path( ... );
-</span></code><code id="L249"><span class="ln">249</span><span class="c">     | };
-</span></code><code id="L250"><span class="ln">250</span><span class="c">     | <span class="c">// or create namespace</span>
-</span></code><code id="L251"><span class="ln">251</span><span class="c">     | Raphael.fn.mystuff<span class="s"> = </span>{
-</span></code><code id="L252"><span class="ln">252</span><span class="c">     |     arrow: <b>function</b> () {…},
-</span></code><code id="L253"><span class="ln">253</span><span class="c">     |     star: <b>function</b> () {…},
-</span></code><code id="L254"><span class="ln">254</span><span class="c">     |     <span class="c">// etc…</span>
-</span></code><code id="L255"><span class="ln">255</span><span class="c">     | };
-</span></code><code id="L256"><span class="ln">256</span><span class="c">     | <b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
-</span></code><code id="L257"><span class="ln">257</span><span class="c">     | <span class="c">// then use it</span>
-</span></code><code id="L258"><span class="ln">258</span><span class="c">     | paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
-</span></code><code id="L259"><span class="ln">259</span><span class="c">     | paper.mystuff.arrow();
-</span></code><code id="L260"><span class="ln">260</span><span class="c">     | paper.mystuff.star();
-</span></code><code id="L261"><span class="ln">261</span><span class="c">    \*/</span>
-</code><code id="L262"><span class="ln">262</span>    R.fn<span class="s"> = </span>{};
+</code><code id="L234"><span class="ln">234</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L235"><span class="ln">235</span><span class="c">    <span class="s"> * </span>Paper.customAttributes
+</span></code><code id="L236"><span class="ln">236</span><span class="c">     [ property (object) ]
+</span></code><code id="L237"><span class="ln">237</span><span class="c">     **
+</span></code><code id="L238"><span class="ln">238</span><span class="c">    <span class="s"> * </span>If you have a set of attributes that you would like to represent
+</span></code><code id="L239"><span class="ln">239</span><span class="c">    <span class="s"> * </span>as a <b>function</b> of some number you can <b>do</b> it easily <b>with</b> custom attributes:
+</span></code><code id="L240"><span class="ln">240</span><span class="c">     > Usage
+</span></code><code id="L241"><span class="ln">241</span><span class="c">    <span class="s"> | </span>paper.customAttributes.hue<span class="s"> = </span><b>function</b> (num) {
+</span></code><code id="L242"><span class="ln">242</span><span class="c">    <span class="s"> | </span>    num<span class="s"> = </span>num<span class="s"> % </span><span class="d">1</span>;
+</span></code><code id="L243"><span class="ln">243</span><span class="c">    <span class="s"> | </span>    <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>num<span class="s"> + </span><i>", <span class="d">.75</span>, <span class="d">1</span>)"</i>};
+</span></code><code id="L244"><span class="ln">244</span><span class="c">    <span class="s"> | </span>};
+</span></code><code id="L245"><span class="ln">245</span><span class="c">    <span class="s"> | </span><span class="c">// Custom attribute “hue” will change fill</span>
+</span></code><code id="L246"><span class="ln">246</span><span class="c">    <span class="s"> | </span><span class="c">// to be given hue <b>with</b> fixed saturation and brightness.</span>
+</span></code><code id="L247"><span class="ln">247</span><span class="c">    <span class="s"> | </span><span class="c">// Now you can use it like <b>this</b>:</span>
+</span></code><code id="L248"><span class="ln">248</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>).attr({hue: <span class="d">.45</span>});
+</span></code><code id="L249"><span class="ln">249</span><span class="c">    <span class="s"> | </span><span class="c">// or even like <b>this</b>:</span>
+</span></code><code id="L250"><span class="ln">250</span><span class="c">    <span class="s"> | </span>c.animate({hue: <span class="d">1</span>}, <span class="d">1e3</span>);
+</span></code><code id="L251"><span class="ln">251</span><span class="c">    <span class="s"> | </span>
+</span></code><code id="L252"><span class="ln">252</span><span class="c">    <span class="s"> | </span><span class="c">// You could also create custom attribute</span>
+</span></code><code id="L253"><span class="ln">253</span><span class="c">    <span class="s"> | </span><span class="c">// <b>with</b> multiple parameters:</span>
+</span></code><code id="L254"><span class="ln">254</span><span class="c">    <span class="s"> | </span>paper.customAttributes.hsb<span class="s"> = </span><b>function</b> (h, s, b) {
+</span></code><code id="L255"><span class="ln">255</span><span class="c">    <span class="s"> | </span>    <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>[h, s, b].join(<i>","</i>)<span class="s"> + </span><i>")"</i>};
+</span></code><code id="L256"><span class="ln">256</span><span class="c">    <span class="s"> | </span>};
+</span></code><code id="L257"><span class="ln">257</span><span class="c">    <span class="s"> | </span>c.attr({hsb: <i>"<span class="d">.5</span> <span class="d">.8</span> <span class="d">1</span>"</i>});
+</span></code><code id="L258"><span class="ln">258</span><span class="c">    <span class="s"> | </span>c.animate({hsb: <i>"<span class="d">1</span> <span class="d">0</span> <span class="d">.5</span>"</i>}, <span class="d">1e3</span>);
+</span></code><code id="L259"><span class="ln">259</span><span class="c">    \*/</span>
+</code><code id="L260"><span class="ln">260</span>    paperproto.customAttributes<span class="s"> = </span>{};
+</code><code id="L261"><span class="ln">261</span>    R._id<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L262"><span class="ln">262</span>    R._oid<span class="s"> = </span><span class="d">0</span>;
 </code><code id="L263"><span class="ln">263</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L264"><span class="ln">264</span><span class="c">    <span class="s"> * </span>Raphael.is
-</span></code><code id="L265"><span class="ln">265</span><span class="c">     [ method ]
+</span></code><code id="L264"><span class="ln">264</span><span class="c">    <span class="s"> * </span>Raphael.fn
+</span></code><code id="L265"><span class="ln">265</span><span class="c">     [ property (object) ]
 </span></code><code id="L266"><span class="ln">266</span><span class="c">     **
-</span></code><code id="L267"><span class="ln">267</span><span class="c">    <span class="s"> * </span>Handfull replacement <b>for</b> `<b>typeof</b>` operator.
-</span></code><code id="L268"><span class="ln">268</span><span class="c">     > Parameters
-</span></code><code id="L269"><span class="ln">269</span><span class="c">    <span class="s"> - </span>o (…) any object or primitive
-</span></code><code id="L270"><span class="ln">270</span><span class="c">    <span class="s"> - </span>type (string) name of the type, i.e. “string”, “<b>function</b>”, “number”, etc.
-</span></code><code id="L271"><span class="ln">271</span><span class="c">    <span class="s"> = </span>(<b>boolean</b>) is given value is of given type
-</span></code><code id="L272"><span class="ln">272</span><span class="c">    \*/</span>
-</code><code id="L273"><span class="ln">273</span>    R.is<span class="s"> = </span><b>function</b> (o, type) {
-</code><code id="L274"><span class="ln">274</span>        type<span class="s"> = </span>lowerCase.call(type);
-</code><code id="L275"><span class="ln">275</span>        <b>if</b> (type<span class="s"> == </span><i>"finite"</i>) {
-</code><code id="L276"><span class="ln">276</span>            <b>return</b> !isnan[has](+o);
-</code><code id="L277"><span class="ln">277</span>        }
-</code><code id="L278"><span class="ln">278</span>        <b>return</b>  (type<span class="s"> == </span><i>"<b>null</b>"</i> &amp;&amp; o<span class="s"> === </span><b>null</b>) ||
-</code><code id="L279"><span class="ln">279</span>                (type<span class="s"> == </span><b>typeof</b> o) ||
-</code><code id="L280"><span class="ln">280</span>                (type<span class="s"> == </span><i>"object"</i> &amp;&amp; o<span class="s"> === </span>Object(o)) ||
-</code><code id="L281"><span class="ln">281</span>                (type<span class="s"> == </span><i>"array"</i> &amp;&amp; Array.isArray &amp;&amp; Array.isArray(o)) ||
-</code><code id="L282"><span class="ln">282</span>                objectToString.call(o).slice(<span class="d">8</span>, -<span class="d">1</span>).toLowerCase()<span class="s"> == </span>type;
-</code><code id="L283"><span class="ln">283</span>    };
-</code><code id="L284"><span class="ln">284</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L285"><span class="ln">285</span><span class="c">    <span class="s"> * </span>Raphael.angle
-</span></code><code id="L286"><span class="ln">286</span><span class="c">     [ method ]
-</span></code><code id="L287"><span class="ln">287</span><span class="c">     **
-</span></code><code id="L288"><span class="ln">288</span><span class="c">    <span class="s"> * </span>Returns angle between two or three points
-</span></code><code id="L289"><span class="ln">289</span><span class="c">     > Parameters
-</span></code><code id="L290"><span class="ln">290</span><span class="c">    <span class="s"> - </span>x1 (number) x coord of first point
-</span></code><code id="L291"><span class="ln">291</span><span class="c">    <span class="s"> - </span>y1 (number) y coord of first point
-</span></code><code id="L292"><span class="ln">292</span><span class="c">    <span class="s"> - </span>x2 (number) x coord of second point
-</span></code><code id="L293"><span class="ln">293</span><span class="c">    <span class="s"> - </span>y2 (number) y coord of second point
-</span></code><code id="L294"><span class="ln">294</span><span class="c">    <span class="s"> - </span>x3 (number) #optional x coord of third point
-</span></code><code id="L295"><span class="ln">295</span><span class="c">    <span class="s"> - </span>y3 (number) #optional y coord of third point
-</span></code><code id="L296"><span class="ln">296</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> degrees.
-</span></code><code id="L297"><span class="ln">297</span><span class="c">    \*/</span>
-</code><code id="L298"><span class="ln">298</span>    R.angle<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, x3, y3) {
-</code><code id="L299"><span class="ln">299</span>        <b>if</b> (x3<span class="s"> == </span><b>null</b>) {
-</code><code id="L300"><span class="ln">300</span>            <b>var</b> x<span class="s"> = </span>x1<span class="s"> - </span>x2,
-</code><code id="L301"><span class="ln">301</span>                y<span class="s"> = </span>y1<span class="s"> - </span>y2;
-</code><code id="L302"><span class="ln">302</span>            <b>if</b> (!x &amp;&amp; !y) {
-</code><code id="L303"><span class="ln">303</span>                <b>return</b> <span class="d">0</span>;
-</code><code id="L304"><span class="ln">304</span>            }
-</code><code id="L305"><span class="ln">305</span>            <b>return</b> (<span class="d">180</span><span class="s"> + </span>math.atan2(-y, -x)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI<span class="s"> + </span><span class="d">360</span>) % <span class="d">360</span>;
-</code><code id="L306"><span class="ln">306</span>        } <b>else</b> {
-</code><code id="L307"><span class="ln">307</span>            <b>return</b> R.angle(x1, y1, x3, y3)<span class="s"> - </span>R.angle(x2, y2, x3, y3);
-</code><code id="L308"><span class="ln">308</span>        }
+</span></code><code id="L267"><span class="ln">267</span><span class="c">    <span class="s"> * </span>You can add your own method to the canvas. For example <b>if</b> you want to draw pie chart,
+</span></code><code id="L268"><span class="ln">268</span><span class="c">    <span class="s"> * </span>you can create your own pie chart <b>function</b> and ship it as a Raphaël plugin. To <b>do</b> <b>this</b>
+</span></code><code id="L269"><span class="ln">269</span><span class="c">    <span class="s"> * </span>you need to extend `Raphael.fn` object. Please note that you can create your own namespaces
+</span></code><code id="L270"><span class="ln">270</span><span class="c">    <span class="s"> * </span>inside `fn` object. Methods will be run <b>in</b> context of canvas anyway. You should alter `fn`
+</span></code><code id="L271"><span class="ln">271</span><span class="c">    <span class="s"> * </span>object before Raphaël instance was created, otherwise it will take no effect.
+</span></code><code id="L272"><span class="ln">272</span><span class="c">     > Usage
+</span></code><code id="L273"><span class="ln">273</span><span class="c">    <span class="s"> | </span>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
+</span></code><code id="L274"><span class="ln">274</span><span class="c">    <span class="s"> | </span>    <b>return</b> <b>this</b>.path( ... );
+</span></code><code id="L275"><span class="ln">275</span><span class="c">    <span class="s"> | </span>};
+</span></code><code id="L276"><span class="ln">276</span><span class="c">    <span class="s"> | </span><span class="c">// or create namespace</span>
+</span></code><code id="L277"><span class="ln">277</span><span class="c">    <span class="s"> | </span>Raphael.fn.mystuff<span class="s"> = </span>{
+</span></code><code id="L278"><span class="ln">278</span><span class="c">    <span class="s"> | </span>    arrow: <b>function</b> () {…},
+</span></code><code id="L279"><span class="ln">279</span><span class="c">    <span class="s"> | </span>    star: <b>function</b> () {…},
+</span></code><code id="L280"><span class="ln">280</span><span class="c">    <span class="s"> | </span>    <span class="c">// etc…</span>
+</span></code><code id="L281"><span class="ln">281</span><span class="c">    <span class="s"> | </span>};
+</span></code><code id="L282"><span class="ln">282</span><span class="c">    <span class="s"> | </span><b>var</b> paper<span class="s"> = </span>Raphael(<span class="d">10</span>, <span class="d">10</span>, <span class="d">630</span>, <span class="d">480</span>);
+</span></code><code id="L283"><span class="ln">283</span><span class="c">    <span class="s"> | </span><span class="c">// then use it</span>
+</span></code><code id="L284"><span class="ln">284</span><span class="c">    <span class="s"> | </span>paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d">30</span>, <span class="d">30</span>, <span class="d">5</span>).attr({fill: <i>"#f00"</i>});
+</span></code><code id="L285"><span class="ln">285</span><span class="c">    <span class="s"> | </span>paper.mystuff.arrow();
+</span></code><code id="L286"><span class="ln">286</span><span class="c">    <span class="s"> | </span>paper.mystuff.star();
+</span></code><code id="L287"><span class="ln">287</span><span class="c">    \*/</span>
+</code><code id="L288"><span class="ln">288</span>    R.fn<span class="s"> = </span>{};
+</code><code id="L289"><span class="ln">289</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L290"><span class="ln">290</span><span class="c">    <span class="s"> * </span>Raphael.is
+</span></code><code id="L291"><span class="ln">291</span><span class="c">     [ method ]
+</span></code><code id="L292"><span class="ln">292</span><span class="c">     **
+</span></code><code id="L293"><span class="ln">293</span><span class="c">    <span class="s"> * </span>Handfull replacement <b>for</b> `<b>typeof</b>` operator.
+</span></code><code id="L294"><span class="ln">294</span><span class="c">     > Parameters
+</span></code><code id="L295"><span class="ln">295</span><span class="c">    <span class="s"> - </span>o (…) any object or primitive
+</span></code><code id="L296"><span class="ln">296</span><span class="c">    <span class="s"> - </span>type (string) name of the type, i.e. “string”, “<b>function</b>”, “number”, etc.
+</span></code><code id="L297"><span class="ln">297</span><span class="c">    <span class="s"> = </span>(<b>boolean</b>) is given value is of given type
+</span></code><code id="L298"><span class="ln">298</span><span class="c">    \*/</span>
+</code><code id="L299"><span class="ln">299</span>    R.is<span class="s"> = </span><b>function</b> (o, type) {
+</code><code id="L300"><span class="ln">300</span>        type<span class="s"> = </span>lowerCase.call(type);
+</code><code id="L301"><span class="ln">301</span>        <b>if</b> (type<span class="s"> == </span><i>"finite"</i>) {
+</code><code id="L302"><span class="ln">302</span>            <b>return</b> !isnan[has](+o);
+</code><code id="L303"><span class="ln">303</span>        }
+</code><code id="L304"><span class="ln">304</span>        <b>return</b>  (type<span class="s"> == </span><i>"<b>null</b>"</i><span class="s"> &amp;&amp; </span>o<span class="s"> === </span><b>null</b>) ||
+</code><code id="L305"><span class="ln">305</span>                (type<span class="s"> == </span><b>typeof</b> o) ||
+</code><code id="L306"><span class="ln">306</span>                (type<span class="s"> == </span><i>"object"</i><span class="s"> &amp;&amp; </span>o<span class="s"> === </span>Object(o)) ||
+</code><code id="L307"><span class="ln">307</span>                (type<span class="s"> == </span><i>"array"</i><span class="s"> &amp;&amp; </span>Array.isArray<span class="s"> &amp;&amp; </span>Array.isArray(o)) ||
+</code><code id="L308"><span class="ln">308</span>                objectToString.call(o).slice(<span class="d">8</span>, -<span class="d">1</span>).toLowerCase()<span class="s"> == </span>type;
 </code><code id="L309"><span class="ln">309</span>    };
 </code><code id="L310"><span class="ln">310</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L311"><span class="ln">311</span><span class="c">    <span class="s"> * </span>Raphael.rad
+</span></code><code id="L311"><span class="ln">311</span><span class="c">    <span class="s"> * </span>Raphael.angle
 </span></code><code id="L312"><span class="ln">312</span><span class="c">     [ method ]
 </span></code><code id="L313"><span class="ln">313</span><span class="c">     **
-</span></code><code id="L314"><span class="ln">314</span><span class="c">    <span class="s"> * </span>Transform angle to radians
+</span></code><code id="L314"><span class="ln">314</span><span class="c">    <span class="s"> * </span>Returns angle between two or three points
 </span></code><code id="L315"><span class="ln">315</span><span class="c">     > Parameters
-</span></code><code id="L316"><span class="ln">316</span><span class="c">    <span class="s"> - </span>deg (number) angle <b>in</b> degrees
-</span></code><code id="L317"><span class="ln">317</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> radians.
-</span></code><code id="L318"><span class="ln">318</span><span class="c">    \*/</span>
-</code><code id="L319"><span class="ln">319</span>    R.rad<span class="s"> = </span><b>function</b> (deg) {
-</code><code id="L320"><span class="ln">320</span>        <b>return</b> deg % <span class="d">360</span><span class="s"> * </span>PI<span class="s"> / </span><span class="d">180</span>;
-</code><code id="L321"><span class="ln">321</span>    };
-</code><code id="L322"><span class="ln">322</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L323"><span class="ln">323</span><span class="c">    <span class="s"> * </span>Raphael.deg
-</span></code><code id="L324"><span class="ln">324</span><span class="c">     [ method ]
-</span></code><code id="L325"><span class="ln">325</span><span class="c">     **
-</span></code><code id="L326"><span class="ln">326</span><span class="c">    <span class="s"> * </span>Transform angle to degrees
-</span></code><code id="L327"><span class="ln">327</span><span class="c">     > Parameters
-</span></code><code id="L328"><span class="ln">328</span><span class="c">    <span class="s"> - </span>deg (number) angle <b>in</b> radians
-</span></code><code id="L329"><span class="ln">329</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> degrees.
-</span></code><code id="L330"><span class="ln">330</span><span class="c">    \*/</span>
-</code><code id="L331"><span class="ln">331</span>    R.deg<span class="s"> = </span><b>function</b> (rad) {
-</code><code id="L332"><span class="ln">332</span>        <b>return</b> rad<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI % <span class="d">360</span>;
-</code><code id="L333"><span class="ln">333</span>    };
-</code><code id="L334"><span class="ln">334</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L335"><span class="ln">335</span><span class="c">    <span class="s"> * </span>Raphael.snapTo
-</span></code><code id="L336"><span class="ln">336</span><span class="c">     [ method ]
-</span></code><code id="L337"><span class="ln">337</span><span class="c">     **
-</span></code><code id="L338"><span class="ln">338</span><span class="c">    <span class="s"> * </span>Snaps given value to given grid.
-</span></code><code id="L339"><span class="ln">339</span><span class="c">     > Parameters
-</span></code><code id="L340"><span class="ln">340</span><span class="c">    <span class="s"> - </span>values (array|number) given array of values or step of the grid
-</span></code><code id="L341"><span class="ln">341</span><span class="c">    <span class="s"> - </span>value (number) value to adjust
-</span></code><code id="L342"><span class="ln">342</span><span class="c">    <span class="s"> - </span>tolerance (number) #optional tolerance <b>for</b> snapping. Default is `<span class="d">10</span>`.
-</span></code><code id="L343"><span class="ln">343</span><span class="c">    <span class="s"> = </span>(number) adjusted value.
+</span></code><code id="L316"><span class="ln">316</span><span class="c">    <span class="s"> - </span>x1 (number) x coord of first point
+</span></code><code id="L317"><span class="ln">317</span><span class="c">    <span class="s"> - </span>y1 (number) y coord of first point
+</span></code><code id="L318"><span class="ln">318</span><span class="c">    <span class="s"> - </span>x2 (number) x coord of second point
+</span></code><code id="L319"><span class="ln">319</span><span class="c">    <span class="s"> - </span>y2 (number) y coord of second point
+</span></code><code id="L320"><span class="ln">320</span><span class="c">    <span class="s"> - </span>x3 (number) #optional x coord of third point
+</span></code><code id="L321"><span class="ln">321</span><span class="c">    <span class="s"> - </span>y3 (number) #optional y coord of third point
+</span></code><code id="L322"><span class="ln">322</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> degrees.
+</span></code><code id="L323"><span class="ln">323</span><span class="c">    \*/</span>
+</code><code id="L324"><span class="ln">324</span>    R.angle<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, x3, y3) {
+</code><code id="L325"><span class="ln">325</span>        <b>if</b> (x3<span class="s"> == </span><b>null</b>) {
+</code><code id="L326"><span class="ln">326</span>            <b>var</b> x<span class="s"> = </span>x1<span class="s"> - </span>x2,
+</code><code id="L327"><span class="ln">327</span>                y<span class="s"> = </span>y1<span class="s"> - </span>y2;
+</code><code id="L328"><span class="ln">328</span>            <b>if</b> (!x<span class="s"> &amp;&amp; </span>!y) {
+</code><code id="L329"><span class="ln">329</span>                <b>return</b> <span class="d">0</span>;
+</code><code id="L330"><span class="ln">330</span>            }
+</code><code id="L331"><span class="ln">331</span>            <b>return</b> (<span class="d">180</span><span class="s"> + </span>math.atan2(-y, -x)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI<span class="s"> + </span><span class="d">360</span>)<span class="s"> % </span><span class="d">360</span>;
+</code><code id="L332"><span class="ln">332</span>        } <b>else</b> {
+</code><code id="L333"><span class="ln">333</span>            <b>return</b> R.angle(x1, y1, x3, y3)<span class="s"> - </span>R.angle(x2, y2, x3, y3);
+</code><code id="L334"><span class="ln">334</span>        }
+</code><code id="L335"><span class="ln">335</span>    };
+</code><code id="L336"><span class="ln">336</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L337"><span class="ln">337</span><span class="c">    <span class="s"> * </span>Raphael.rad
+</span></code><code id="L338"><span class="ln">338</span><span class="c">     [ method ]
+</span></code><code id="L339"><span class="ln">339</span><span class="c">     **
+</span></code><code id="L340"><span class="ln">340</span><span class="c">    <span class="s"> * </span>Transform angle to radians
+</span></code><code id="L341"><span class="ln">341</span><span class="c">     > Parameters
+</span></code><code id="L342"><span class="ln">342</span><span class="c">    <span class="s"> - </span>deg (number) angle <b>in</b> degrees
+</span></code><code id="L343"><span class="ln">343</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> radians.
 </span></code><code id="L344"><span class="ln">344</span><span class="c">    \*/</span>
-</code><code id="L345"><span class="ln">345</span>    R.snapTo<span class="s"> = </span><b>function</b> (values, value, tolerance) {
-</code><code id="L346"><span class="ln">346</span>        tolerance<span class="s"> = </span>R.is(tolerance, <i>"finite"</i>) ? tolerance : <span class="d">10</span>;
-</code><code id="L347"><span class="ln">347</span>        <b>if</b> (R.is(values, array)) {
-</code><code id="L348"><span class="ln">348</span>            <b>var</b> i<span class="s"> = </span>values.length;
-</code><code id="L349"><span class="ln">349</span>            <b>while</b> (i--) <b>if</b> (abs(values[i]<span class="s"> - </span>value) &lt;= tolerance) {
-</code><code id="L350"><span class="ln">350</span>                <b>return</b> values[i];
-</code><code id="L351"><span class="ln">351</span>            }
-</code><code id="L352"><span class="ln">352</span>        } <b>else</b> {
-</code><code id="L353"><span class="ln">353</span>            values<span class="s"> = </span>+values;
-</code><code id="L354"><span class="ln">354</span>            <b>var</b> rem<span class="s"> = </span>value % values;
-</code><code id="L355"><span class="ln">355</span>            <b>if</b> (rem &lt; tolerance) {
-</code><code id="L356"><span class="ln">356</span>                <b>return</b> value<span class="s"> - </span>rem;
-</code><code id="L357"><span class="ln">357</span>            }
-</code><code id="L358"><span class="ln">358</span>            <b>if</b> (rem > values<span class="s"> - </span>tolerance) {
-</code><code id="L359"><span class="ln">359</span>                <b>return</b> value<span class="s"> - </span>rem<span class="s"> + </span>values;
-</code><code id="L360"><span class="ln">360</span>            }
-</code><code id="L361"><span class="ln">361</span>        }
-</code><code id="L362"><span class="ln">362</span>        <b>return</b> value;
-</code><code id="L363"><span class="ln">363</span>    };
-</code><code id="L364"><span class="ln">364</span>    
-</code><code id="L365"><span class="ln">365</span>    <b>var</b> createUUID<span class="s"> = </span>(<b>function</b> (uuidRegEx, uuidReplacer) {
-</code><code id="L366"><span class="ln">366</span>        <b>return</b> <b>function</b> () {
-</code><code id="L367"><span class="ln">367</span>            <b>return</b> <i>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"</i>.replace(uuidRegEx, uuidReplacer).toUpperCase();
-</code><code id="L368"><span class="ln">368</span>        };
-</code><code id="L369"><span class="ln">369</span>    })(/[xy]/g, <b>function</b> (c) {
-</code><code id="L370"><span class="ln">370</span>        <b>var</b> r<span class="s"> = </span>math.random()<span class="s"> * </span><span class="d">16</span> | <span class="d">0</span>,
-</code><code id="L371"><span class="ln">371</span>            v<span class="s"> = </span>c<span class="s"> == </span><i>"x"</i> ? r : (r &amp; <span class="d">3</span> | <span class="d">8</span>);
-</code><code id="L372"><span class="ln">372</span>        <b>return</b> v.toString(<span class="d">16</span>);
-</code><code id="L373"><span class="ln">373</span>    });
-</code><code id="L374"><span class="ln">374</span>
-</code><code id="L375"><span class="ln">375</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L376"><span class="ln">376</span><span class="c">    <span class="s"> * </span>Raphael.setWindow
-</span></code><code id="L377"><span class="ln">377</span><span class="c">     [ method ]
-</span></code><code id="L378"><span class="ln">378</span><span class="c">     **
-</span></code><code id="L379"><span class="ln">379</span><span class="c">    <span class="s"> * </span>Used when you need to draw <b>in</b> `&lt;iframe>`. Switched window to the iframe one.
-</span></code><code id="L380"><span class="ln">380</span><span class="c">     > Parameters
-</span></code><code id="L381"><span class="ln">381</span><span class="c">    <span class="s"> - </span>newwin (window) <b>new</b> window object
-</span></code><code id="L382"><span class="ln">382</span><span class="c">    \*/</span>
-</code><code id="L383"><span class="ln">383</span>    R.setWindow<span class="s"> = </span><b>function</b> (newwin) {
-</code><code id="L384"><span class="ln">384</span>        eve(<i>"setWindow"</i>, R, g.win, newwin);
-</code><code id="L385"><span class="ln">385</span>        g.win<span class="s"> = </span>newwin;
-</code><code id="L386"><span class="ln">386</span>        g.doc<span class="s"> = </span>g.win.document;
-</code><code id="L387"><span class="ln">387</span>        <b>if</b> (initWin) {
-</code><code id="L388"><span class="ln">388</span>            initWin(g.win);
-</code><code id="L389"><span class="ln">389</span>        }
-</code><code id="L390"><span class="ln">390</span>    };
-</code><code id="L391"><span class="ln">391</span>    <span class="c">// colour utilities</span>
-</code><code id="L392"><span class="ln">392</span>    <b>var</b> toHex<span class="s"> = </span><b>function</b> (color) {
-</code><code id="L393"><span class="ln">393</span>        <b>if</b> (R.vml) {
-</code><code id="L394"><span class="ln">394</span>            <span class="c">// http://dean.edwards.name/weblog/<span class="d">2009</span>/<span class="d">10</span>/convert-any-colour-value-to-hex-<b>in</b>-msie/</span>
-</code><code id="L395"><span class="ln">395</span>            <b>var</b> trim<span class="s"> = </span>/^\s+|\s+$/g;
-</code><code id="L396"><span class="ln">396</span>            <b>var</b> bod;
-</code><code id="L397"><span class="ln">397</span>            <b>try</b> {
-</code><code id="L398"><span class="ln">398</span>                <b>var</b> docum<span class="s"> = </span><b>new</b> ActiveXObject(<i>"htmlfile"</i>);
-</code><code id="L399"><span class="ln">399</span>                docum.write(<i>"&lt;body>"</i>);
-</code><code id="L400"><span class="ln">400</span>                docum.close();
-</code><code id="L401"><span class="ln">401</span>                bod<span class="s"> = </span>docum.body;
-</code><code id="L402"><span class="ln">402</span>            } <b>catch</b>(e) {
-</code><code id="L403"><span class="ln">403</span>                bod<span class="s"> = </span>createPopup().document.body;
-</code><code id="L404"><span class="ln">404</span>            }
-</code><code id="L405"><span class="ln">405</span>            <b>var</b> range<span class="s"> = </span>bod.createTextRange();
-</code><code id="L406"><span class="ln">406</span>            toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
-</code><code id="L407"><span class="ln">407</span>                <b>try</b> {
-</code><code id="L408"><span class="ln">408</span>                    bod.style.color<span class="s"> = </span>Str(color).replace(trim, E);
-</code><code id="L409"><span class="ln">409</span>                    <b>var</b> value<span class="s"> = </span>range.queryCommandValue(<i>"ForeColor"</i>);
-</code><code id="L410"><span class="ln">410</span>                    value<span class="s"> = </span>((value &amp; <span class="d">255</span>) &lt;&lt; <span class="d">16</span>) | (value &amp; <span class="d">65280</span>) | ((value &amp; <span class="d">16711680</span>) >>> <span class="d">16</span>);
-</code><code id="L411"><span class="ln">411</span>                    <b>return</b> <i>"#"</i><span class="s"> + </span>(<i>"<span class="d">000000</span>"</i><span class="s"> + </span>value.toString(<span class="d">16</span>)).slice(-<span class="d">6</span>);
-</code><code id="L412"><span class="ln">412</span>                } <b>catch</b>(e) {
-</code><code id="L413"><span class="ln">413</span>                    <b>return</b> <i>"none"</i>;
-</code><code id="L414"><span class="ln">414</span>                }
-</code><code id="L415"><span class="ln">415</span>            });
-</code><code id="L416"><span class="ln">416</span>        } <b>else</b> {
-</code><code id="L417"><span class="ln">417</span>            <b>var</b> i<span class="s"> = </span>g.doc.createElement(<i>"i"</i>);
-</code><code id="L418"><span class="ln">418</span>            i.title<span class="s"> = </span><i>"Rapha\xebl Colour Picker"</i>;
-</code><code id="L419"><span class="ln">419</span>            i.style.display<span class="s"> = </span><i>"none"</i>;
-</code><code id="L420"><span class="ln">420</span>            g.doc.body.appendChild(i);
-</code><code id="L421"><span class="ln">421</span>            toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
-</code><code id="L422"><span class="ln">422</span>                i.style.color<span class="s"> = </span>color;
-</code><code id="L423"><span class="ln">423</span>                <b>return</b> g.doc.defaultView.getComputedStyle(i, E).getPropertyValue(<i>"color"</i>);
-</code><code id="L424"><span class="ln">424</span>            });
-</code><code id="L425"><span class="ln">425</span>        }
-</code><code id="L426"><span class="ln">426</span>        <b>return</b> toHex(color);
-</code><code id="L427"><span class="ln">427</span>    },
-</code><code id="L428"><span class="ln">428</span>    hsbtoString<span class="s"> = </span><b>function</b> () {
-</code><code id="L429"><span class="ln">429</span>        <b>return</b> <i>"hsb("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.b]<span class="s"> + </span><i>")"</i>;
-</code><code id="L430"><span class="ln">430</span>    },
-</code><code id="L431"><span class="ln">431</span>    hsltoString<span class="s"> = </span><b>function</b> () {
-</code><code id="L432"><span class="ln">432</span>        <b>return</b> <i>"hsl("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.l]<span class="s"> + </span><i>")"</i>;
-</code><code id="L433"><span class="ln">433</span>    },
-</code><code id="L434"><span class="ln">434</span>    rgbtoString<span class="s"> = </span><b>function</b> () {
-</code><code id="L435"><span class="ln">435</span>        <b>return</b> <b>this</b>.hex;
-</code><code id="L436"><span class="ln">436</span>    },
-</code><code id="L437"><span class="ln">437</span>    prepareRGB<span class="s"> = </span><b>function</b> (r, g, b) {
-</code><code id="L438"><span class="ln">438</span>        <b>if</b> (g<span class="s"> == </span><b>null</b> &amp;&amp; R.is(r, <i>"object"</i>) &amp;&amp; <i>"r"</i> <b>in</b> r &amp;&amp; <i>"g"</i> <b>in</b> r &amp;&amp; <i>"b"</i> <b>in</b> r) {
-</code><code id="L439"><span class="ln">439</span>            b<span class="s"> = </span>r.b;
-</code><code id="L440"><span class="ln">440</span>            g<span class="s"> = </span>r.g;
-</code><code id="L441"><span class="ln">441</span>            r<span class="s"> = </span>r.r;
-</code><code id="L442"><span class="ln">442</span>        }
-</code><code id="L443"><span class="ln">443</span>        <b>if</b> (g<span class="s"> == </span><b>null</b> &amp;&amp; R.is(r, string)) {
-</code><code id="L444"><span class="ln">444</span>            <b>var</b> clr<span class="s"> = </span>R.getRGB(r);
-</code><code id="L445"><span class="ln">445</span>            r<span class="s"> = </span>clr.r;
-</code><code id="L446"><span class="ln">446</span>            g<span class="s"> = </span>clr.g;
-</code><code id="L447"><span class="ln">447</span>            b<span class="s"> = </span>clr.b;
-</code><code id="L448"><span class="ln">448</span>        }
-</code><code id="L449"><span class="ln">449</span>        <b>if</b> (r > <span class="d">1</span><span class="s"> || </span>g > <span class="d">1</span><span class="s"> || </span>b > <span class="d">1</span>) {
-</code><code id="L450"><span class="ln">450</span>            r /= <span class="d">255</span>;
-</code><code id="L451"><span class="ln">451</span>            g /= <span class="d">255</span>;
-</code><code id="L452"><span class="ln">452</span>            b /= <span class="d">255</span>;
-</code><code id="L453"><span class="ln">453</span>        }
-</code><code id="L454"><span class="ln">454</span>        
-</code><code id="L455"><span class="ln">455</span>        <b>return</b> [r, g, b];
+</code><code id="L345"><span class="ln">345</span>    R.rad<span class="s"> = </span><b>function</b> (deg) {
+</code><code id="L346"><span class="ln">346</span>        <b>return</b> deg<span class="s"> % </span><span class="d">360</span><span class="s"> * </span>PI<span class="s"> / </span><span class="d">180</span>;
+</code><code id="L347"><span class="ln">347</span>    };
+</code><code id="L348"><span class="ln">348</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L349"><span class="ln">349</span><span class="c">    <span class="s"> * </span>Raphael.deg
+</span></code><code id="L350"><span class="ln">350</span><span class="c">     [ method ]
+</span></code><code id="L351"><span class="ln">351</span><span class="c">     **
+</span></code><code id="L352"><span class="ln">352</span><span class="c">    <span class="s"> * </span>Transform angle to degrees
+</span></code><code id="L353"><span class="ln">353</span><span class="c">     > Parameters
+</span></code><code id="L354"><span class="ln">354</span><span class="c">    <span class="s"> - </span>deg (number) angle <b>in</b> radians
+</span></code><code id="L355"><span class="ln">355</span><span class="c">    <span class="s"> = </span>(number) angle <b>in</b> degrees.
+</span></code><code id="L356"><span class="ln">356</span><span class="c">    \*/</span>
+</code><code id="L357"><span class="ln">357</span>    R.deg<span class="s"> = </span><b>function</b> (rad) {
+</code><code id="L358"><span class="ln">358</span>        <b>return</b> rad<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI<span class="s"> % </span><span class="d">360</span>;
+</code><code id="L359"><span class="ln">359</span>    };
+</code><code id="L360"><span class="ln">360</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L361"><span class="ln">361</span><span class="c">    <span class="s"> * </span>Raphael.snapTo
+</span></code><code id="L362"><span class="ln">362</span><span class="c">     [ method ]
+</span></code><code id="L363"><span class="ln">363</span><span class="c">     **
+</span></code><code id="L364"><span class="ln">364</span><span class="c">    <span class="s"> * </span>Snaps given value to given grid.
+</span></code><code id="L365"><span class="ln">365</span><span class="c">     > Parameters
+</span></code><code id="L366"><span class="ln">366</span><span class="c">    <span class="s"> - </span>values (array|number) given array of values or step of the grid
+</span></code><code id="L367"><span class="ln">367</span><span class="c">    <span class="s"> - </span>value (number) value to adjust
+</span></code><code id="L368"><span class="ln">368</span><span class="c">    <span class="s"> - </span>tolerance (number) #optional tolerance <b>for</b> snapping. Default is `<span class="d">10</span>`.
+</span></code><code id="L369"><span class="ln">369</span><span class="c">    <span class="s"> = </span>(number) adjusted value.
+</span></code><code id="L370"><span class="ln">370</span><span class="c">    \*/</span>
+</code><code id="L371"><span class="ln">371</span>    R.snapTo<span class="s"> = </span><b>function</b> (values, value, tolerance) {
+</code><code id="L372"><span class="ln">372</span>        tolerance<span class="s"> = </span>R.is(tolerance, <i>"finite"</i>) ? tolerance : <span class="d">10</span>;
+</code><code id="L373"><span class="ln">373</span>        <b>if</b> (R.is(values, array)) {
+</code><code id="L374"><span class="ln">374</span>            <b>var</b> i<span class="s"> = </span>values.length;
+</code><code id="L375"><span class="ln">375</span>            <b>while</b> (i--) <b>if</b> (abs(values[i]<span class="s"> - </span>value) &lt;= tolerance) {
+</code><code id="L376"><span class="ln">376</span>                <b>return</b> values[i];
+</code><code id="L377"><span class="ln">377</span>            }
+</code><code id="L378"><span class="ln">378</span>        } <b>else</b> {
+</code><code id="L379"><span class="ln">379</span>            values<span class="s"> = </span>+values;
+</code><code id="L380"><span class="ln">380</span>            <b>var</b> rem<span class="s"> = </span>value<span class="s"> % </span>values;
+</code><code id="L381"><span class="ln">381</span>            <b>if</b> (rem &lt; tolerance) {
+</code><code id="L382"><span class="ln">382</span>                <b>return</b> value<span class="s"> - </span>rem;
+</code><code id="L383"><span class="ln">383</span>            }
+</code><code id="L384"><span class="ln">384</span>            <b>if</b> (rem > values<span class="s"> - </span>tolerance) {
+</code><code id="L385"><span class="ln">385</span>                <b>return</b> value<span class="s"> - </span>rem<span class="s"> + </span>values;
+</code><code id="L386"><span class="ln">386</span>            }
+</code><code id="L387"><span class="ln">387</span>        }
+</code><code id="L388"><span class="ln">388</span>        <b>return</b> value;
+</code><code id="L389"><span class="ln">389</span>    };
+</code><code id="L390"><span class="ln">390</span>    
+</code><code id="L391"><span class="ln">391</span>    <b>var</b> createUUID<span class="s"> = </span>(<b>function</b> (uuidRegEx, uuidReplacer) {
+</code><code id="L392"><span class="ln">392</span>        <b>return</b> <b>function</b> () {
+</code><code id="L393"><span class="ln">393</span>            <b>return</b> <i>"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"</i>.replace(uuidRegEx, uuidReplacer).toUpperCase();
+</code><code id="L394"><span class="ln">394</span>        };
+</code><code id="L395"><span class="ln">395</span>    })(/[xy]/g, <b>function</b> (c) {
+</code><code id="L396"><span class="ln">396</span>        <b>var</b> r<span class="s"> = </span>math.random()<span class="s"> * </span><span class="d">16</span><span class="s"> | </span><span class="d">0</span>,
+</code><code id="L397"><span class="ln">397</span>            v<span class="s"> = </span>c<span class="s"> == </span><i>"x"</i> ? r : (r<span class="s"> &amp; </span><span class="d">3</span><span class="s"> | </span><span class="d">8</span>);
+</code><code id="L398"><span class="ln">398</span>        <b>return</b> v.toString(<span class="d">16</span>);
+</code><code id="L399"><span class="ln">399</span>    });
+</code><code id="L400"><span class="ln">400</span>
+</code><code id="L401"><span class="ln">401</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L402"><span class="ln">402</span><span class="c">    <span class="s"> * </span>Raphael.setWindow
+</span></code><code id="L403"><span class="ln">403</span><span class="c">     [ method ]
+</span></code><code id="L404"><span class="ln">404</span><span class="c">     **
+</span></code><code id="L405"><span class="ln">405</span><span class="c">    <span class="s"> * </span>Used when you need to draw <b>in</b> `&lt;iframe>`. Switched window to the iframe one.
+</span></code><code id="L406"><span class="ln">406</span><span class="c">     > Parameters
+</span></code><code id="L407"><span class="ln">407</span><span class="c">    <span class="s"> - </span>newwin (window) <b>new</b> window object
+</span></code><code id="L408"><span class="ln">408</span><span class="c">    \*/</span>
+</code><code id="L409"><span class="ln">409</span>    R.setWindow<span class="s"> = </span><b>function</b> (newwin) {
+</code><code id="L410"><span class="ln">410</span>        eve(<i>"setWindow"</i>, R, g.win, newwin);
+</code><code id="L411"><span class="ln">411</span>        g.win<span class="s"> = </span>newwin;
+</code><code id="L412"><span class="ln">412</span>        g.doc<span class="s"> = </span>g.win.document;
+</code><code id="L413"><span class="ln">413</span>        <b>if</b> (initWin) {
+</code><code id="L414"><span class="ln">414</span>            initWin(g.win);
+</code><code id="L415"><span class="ln">415</span>        }
+</code><code id="L416"><span class="ln">416</span>    };
+</code><code id="L417"><span class="ln">417</span>    <span class="c">// colour utilities</span>
+</code><code id="L418"><span class="ln">418</span>    <b>var</b> toHex<span class="s"> = </span><b>function</b> (color) {
+</code><code id="L419"><span class="ln">419</span>        <b>if</b> (R.vml) {
+</code><code id="L420"><span class="ln">420</span>            <span class="c">// http://dean.edwards.name/weblog/<span class="d">2009</span>/<span class="d">10</span>/convert-any-colour-value-to-hex-<b>in</b>-msie/</span>
+</code><code id="L421"><span class="ln">421</span>            <b>var</b> trim<span class="s"> = </span>/^\s+|\s+$/g;
+</code><code id="L422"><span class="ln">422</span>            <b>var</b> bod;
+</code><code id="L423"><span class="ln">423</span>            <b>try</b> {
+</code><code id="L424"><span class="ln">424</span>                <b>var</b> docum<span class="s"> = </span><b>new</b> ActiveXObject(<i>"htmlfile"</i>);
+</code><code id="L425"><span class="ln">425</span>                docum.write(<i>"&lt;body>"</i>);
+</code><code id="L426"><span class="ln">426</span>                docum.close();
+</code><code id="L427"><span class="ln">427</span>                bod<span class="s"> = </span>docum.body;
+</code><code id="L428"><span class="ln">428</span>            } <b>catch</b>(e) {
+</code><code id="L429"><span class="ln">429</span>                bod<span class="s"> = </span>createPopup().document.body;
+</code><code id="L430"><span class="ln">430</span>            }
+</code><code id="L431"><span class="ln">431</span>            <b>var</b> range<span class="s"> = </span>bod.createTextRange();
+</code><code id="L432"><span class="ln">432</span>            toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
+</code><code id="L433"><span class="ln">433</span>                <b>try</b> {
+</code><code id="L434"><span class="ln">434</span>                    bod.style.color<span class="s"> = </span>Str(color).replace(trim, E);
+</code><code id="L435"><span class="ln">435</span>                    <b>var</b> value<span class="s"> = </span>range.queryCommandValue(<i>"ForeColor"</i>);
+</code><code id="L436"><span class="ln">436</span>                    value<span class="s"> = </span>((value<span class="s"> &amp; </span><span class="d">255</span>) &lt;&lt; <span class="d">16</span>)<span class="s"> | </span>(value<span class="s"> &amp; </span><span class="d">65280</span>)<span class="s"> | </span>((value<span class="s"> &amp; </span><span class="d">16711680</span>) >>> <span class="d">16</span>);
+</code><code id="L437"><span class="ln">437</span>                    <b>return</b> <i>"#"</i><span class="s"> + </span>(<i>"<span class="d">000000</span>"</i><span class="s"> + </span>value.toString(<span class="d">16</span>)).slice(-<span class="d">6</span>);
+</code><code id="L438"><span class="ln">438</span>                } <b>catch</b>(e) {
+</code><code id="L439"><span class="ln">439</span>                    <b>return</b> <i>"none"</i>;
+</code><code id="L440"><span class="ln">440</span>                }
+</code><code id="L441"><span class="ln">441</span>            });
+</code><code id="L442"><span class="ln">442</span>        } <b>else</b> {
+</code><code id="L443"><span class="ln">443</span>            <b>var</b> i<span class="s"> = </span>g.doc.createElement(<i>"i"</i>);
+</code><code id="L444"><span class="ln">444</span>            i.title<span class="s"> = </span><i>"Rapha\xebl Colour Picker"</i>;
+</code><code id="L445"><span class="ln">445</span>            i.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L446"><span class="ln">446</span>            g.doc.body.appendChild(i);
+</code><code id="L447"><span class="ln">447</span>            toHex<span class="s"> = </span>cacher(<b>function</b> (color) {
+</code><code id="L448"><span class="ln">448</span>                i.style.color<span class="s"> = </span>color;
+</code><code id="L449"><span class="ln">449</span>                <b>return</b> g.doc.defaultView.getComputedStyle(i, E).getPropertyValue(<i>"color"</i>);
+</code><code id="L450"><span class="ln">450</span>            });
+</code><code id="L451"><span class="ln">451</span>        }
+</code><code id="L452"><span class="ln">452</span>        <b>return</b> toHex(color);
+</code><code id="L453"><span class="ln">453</span>    },
+</code><code id="L454"><span class="ln">454</span>    hsbtoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L455"><span class="ln">455</span>        <b>return</b> <i>"hsb("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.b]<span class="s"> + </span><i>")"</i>;
 </code><code id="L456"><span class="ln">456</span>    },
-</code><code id="L457"><span class="ln">457</span>    packageRGB<span class="s"> = </span><b>function</b> (r, g, b, o) {
-</code><code id="L458"><span class="ln">458</span>        r *= <span class="d">255</span>;
-</code><code id="L459"><span class="ln">459</span>        g *= <span class="d">255</span>;
-</code><code id="L460"><span class="ln">460</span>        b *= <span class="d">255</span>;
-</code><code id="L461"><span class="ln">461</span>        <b>var</b> rgb<span class="s"> = </span>{
-</code><code id="L462"><span class="ln">462</span>            r: r,
-</code><code id="L463"><span class="ln">463</span>            g: g,
-</code><code id="L464"><span class="ln">464</span>            b: b,
-</code><code id="L465"><span class="ln">465</span>            hex: R.rgb(r, g, b),
-</code><code id="L466"><span class="ln">466</span>            toString: rgbtoString
-</code><code id="L467"><span class="ln">467</span>        };
-</code><code id="L468"><span class="ln">468</span>        R.is(o, <i>"finite"</i>) &amp;&amp; (rgb.opacity<span class="s"> = </span>o);
-</code><code id="L469"><span class="ln">469</span>        <b>return</b> rgb;
-</code><code id="L470"><span class="ln">470</span>    };
-</code><code id="L471"><span class="ln">471</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L472"><span class="ln">472</span><span class="c">    <span class="s"> * </span>Raphael.hsb2rgb
-</span></code><code id="L473"><span class="ln">473</span><span class="c">     [ method ]
-</span></code><code id="L474"><span class="ln">474</span><span class="c">     **
-</span></code><code id="L475"><span class="ln">475</span><span class="c">    <span class="s"> * </span>Converts HSB values to RGB object.
-</span></code><code id="L476"><span class="ln">476</span><span class="c">     > Parameters
-</span></code><code id="L477"><span class="ln">477</span><span class="c">    <span class="s"> - </span>h (number) hue
-</span></code><code id="L478"><span class="ln">478</span><span class="c">    <span class="s"> - </span>s (number) saturation
-</span></code><code id="L479"><span class="ln">479</span><span class="c">    <span class="s"> - </span>v (number) value or brightness
-</span></code><code id="L480"><span class="ln">480</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
-</span></code><code id="L481"><span class="ln">481</span><span class="c">     | {
-</span></code><code id="L482"><span class="ln">482</span><span class="c">     |     r: <span class="c">// red,</span>
-</span></code><code id="L483"><span class="ln">483</span><span class="c">     |     g: <span class="c">// green,</span>
-</span></code><code id="L484"><span class="ln">484</span><span class="c">     |     b: <span class="c">// blue</span>
-</span></code><code id="L485"><span class="ln">485</span><span class="c">     |     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-</span></code><code id="L486"><span class="ln">486</span><span class="c">     | }
-</span></code><code id="L487"><span class="ln">487</span><span class="c">    \*/</span>
-</code><code id="L488"><span class="ln">488</span>    R.hsb2rgb<span class="s"> = </span><b>function</b> (h, s, v, o) {
-</code><code id="L489"><span class="ln">489</span>        <b>if</b> (<b>this</b>.is(h, <i>"object"</i>) &amp;&amp; <i>"h"</i> <b>in</b> h &amp;&amp; <i>"s"</i> <b>in</b> h &amp;&amp; <i>"b"</i> <b>in</b> h) {
-</code><code id="L490"><span class="ln">490</span>            v<span class="s"> = </span>h.b;
-</code><code id="L491"><span class="ln">491</span>            s<span class="s"> = </span>h.s;
-</code><code id="L492"><span class="ln">492</span>            h<span class="s"> = </span>h.h;
-</code><code id="L493"><span class="ln">493</span>            o<span class="s"> = </span>h.o;
-</code><code id="L494"><span class="ln">494</span>        }
-</code><code id="L495"><span class="ln">495</span>        h *= <span class="d">360</span>;
-</code><code id="L496"><span class="ln">496</span>        <b>var</b> R, G, B, X, C;
-</code><code id="L497"><span class="ln">497</span>        h<span class="s"> = </span>(h % <span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
-</code><code id="L498"><span class="ln">498</span>        C<span class="s"> = </span>v<span class="s"> * </span>s;
-</code><code id="L499"><span class="ln">499</span>        X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h % <span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
-</code><code id="L500"><span class="ln">500</span>        R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>v<span class="s"> - </span>C;
-</code><code id="L501"><span class="ln">501</span>
-</code><code id="L502"><span class="ln">502</span>        h<span class="s"> = </span>~~h;
-</code><code id="L503"><span class="ln">503</span>        R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
-</code><code id="L504"><span class="ln">504</span>        G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
-</code><code id="L505"><span class="ln">505</span>        B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
-</code><code id="L506"><span class="ln">506</span>        <b>return</b> packageRGB(R, G, B, o);
-</code><code id="L507"><span class="ln">507</span>    };
-</code><code id="L508"><span class="ln">508</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L509"><span class="ln">509</span><span class="c">    <span class="s"> * </span>Raphael.hsl2rgb
-</span></code><code id="L510"><span class="ln">510</span><span class="c">     [ method ]
-</span></code><code id="L511"><span class="ln">511</span><span class="c">     **
-</span></code><code id="L512"><span class="ln">512</span><span class="c">    <span class="s"> * </span>Converts HSL values to RGB object.
-</span></code><code id="L513"><span class="ln">513</span><span class="c">     > Parameters
-</span></code><code id="L514"><span class="ln">514</span><span class="c">    <span class="s"> - </span>h (number) hue
-</span></code><code id="L515"><span class="ln">515</span><span class="c">    <span class="s"> - </span>s (number) saturation
-</span></code><code id="L516"><span class="ln">516</span><span class="c">    <span class="s"> - </span>l (number) luminosity
-</span></code><code id="L517"><span class="ln">517</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
-</span></code><code id="L518"><span class="ln">518</span><span class="c">     | {
-</span></code><code id="L519"><span class="ln">519</span><span class="c">     |     r: <span class="c">// red,</span>
-</span></code><code id="L520"><span class="ln">520</span><span class="c">     |     g: <span class="c">// green,</span>
-</span></code><code id="L521"><span class="ln">521</span><span class="c">     |     b: <span class="c">// blue</span>
-</span></code><code id="L522"><span class="ln">522</span><span class="c">     |     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-</span></code><code id="L523"><span class="ln">523</span><span class="c">     | }
-</span></code><code id="L524"><span class="ln">524</span><span class="c">    \*/</span>
-</code><code id="L525"><span class="ln">525</span>    R.hsl2rgb<span class="s"> = </span><b>function</b> (h, s, l, o) {
-</code><code id="L526"><span class="ln">526</span>        <b>if</b> (<b>this</b>.is(h, <i>"object"</i>) &amp;&amp; <i>"h"</i> <b>in</b> h &amp;&amp; <i>"s"</i> <b>in</b> h &amp;&amp; <i>"l"</i> <b>in</b> h) {
-</code><code id="L527"><span class="ln">527</span>            l<span class="s"> = </span>h.l;
-</code><code id="L528"><span class="ln">528</span>            s<span class="s"> = </span>h.s;
-</code><code id="L529"><span class="ln">529</span>            h<span class="s"> = </span>h.h;
-</code><code id="L530"><span class="ln">530</span>        }
-</code><code id="L531"><span class="ln">531</span>        <b>if</b> (h > <span class="d">1</span><span class="s"> || </span>s > <span class="d">1</span><span class="s"> || </span>l > <span class="d">1</span>) {
-</code><code id="L532"><span class="ln">532</span>            h /= <span class="d">360</span>;
-</code><code id="L533"><span class="ln">533</span>            s /= <span class="d">100</span>;
-</code><code id="L534"><span class="ln">534</span>            l /= <span class="d">100</span>;
-</code><code id="L535"><span class="ln">535</span>        }
-</code><code id="L536"><span class="ln">536</span>        h *= <span class="d">360</span>;
-</code><code id="L537"><span class="ln">537</span>        <b>var</b> R, G, B, X, C;
-</code><code id="L538"><span class="ln">538</span>        h<span class="s"> = </span>(h % <span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
-</code><code id="L539"><span class="ln">539</span>        C<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>s<span class="s"> * </span>(l &lt; <span class="d">.5</span> ? l : <span class="d">1</span><span class="s"> - </span>l);
-</code><code id="L540"><span class="ln">540</span>        X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h % <span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
-</code><code id="L541"><span class="ln">541</span>        R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>l<span class="s"> - </span>C<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L542"><span class="ln">542</span>
-</code><code id="L543"><span class="ln">543</span>        h<span class="s"> = </span>~~h;
-</code><code id="L544"><span class="ln">544</span>        R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
-</code><code id="L545"><span class="ln">545</span>        G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
-</code><code id="L546"><span class="ln">546</span>        B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
-</code><code id="L547"><span class="ln">547</span>        <b>return</b> packageRGB(R, G, B, o);
-</code><code id="L548"><span class="ln">548</span>    };
-</code><code id="L549"><span class="ln">549</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L550"><span class="ln">550</span><span class="c">    <span class="s"> * </span>Raphael.rgb2hsb
-</span></code><code id="L551"><span class="ln">551</span><span class="c">     [ method ]
-</span></code><code id="L552"><span class="ln">552</span><span class="c">     **
-</span></code><code id="L553"><span class="ln">553</span><span class="c">    <span class="s"> * </span>Converts RGB values to HSB object.
-</span></code><code id="L554"><span class="ln">554</span><span class="c">     > Parameters
-</span></code><code id="L555"><span class="ln">555</span><span class="c">    <span class="s"> - </span>r (number) red
-</span></code><code id="L556"><span class="ln">556</span><span class="c">    <span class="s"> - </span>g (number) green
-</span></code><code id="L557"><span class="ln">557</span><span class="c">    <span class="s"> - </span>b (number) blue
-</span></code><code id="L558"><span class="ln">558</span><span class="c">    <span class="s"> = </span>(object) HSB object <b>in</b> format:
-</span></code><code id="L559"><span class="ln">559</span><span class="c">     | {
-</span></code><code id="L560"><span class="ln">560</span><span class="c">     |     h: <span class="c">// hue,</span>
-</span></code><code id="L561"><span class="ln">561</span><span class="c">     |     s: <span class="c">// saturation,</span>
-</span></code><code id="L562"><span class="ln">562</span><span class="c">     |     b: <span class="c">// brightness</span>
-</span></code><code id="L563"><span class="ln">563</span><span class="c">     | }
-</span></code><code id="L564"><span class="ln">564</span><span class="c">    \*/</span>
-</code><code id="L565"><span class="ln">565</span>    R.rgb2hsb<span class="s"> = </span><b>function</b> (r, g, b) {
-</code><code id="L566"><span class="ln">566</span>        b<span class="s"> = </span>prepareRGB(r, g, b);
-</code><code id="L567"><span class="ln">567</span>        r<span class="s"> = </span>b[<span class="d">0</span>];
-</code><code id="L568"><span class="ln">568</span>        g<span class="s"> = </span>b[<span class="d">1</span>];
-</code><code id="L569"><span class="ln">569</span>        b<span class="s"> = </span>b[<span class="d">2</span>];
-</code><code id="L570"><span class="ln">570</span>
-</code><code id="L571"><span class="ln">571</span>        <b>var</b> H, S, V, C;
-</code><code id="L572"><span class="ln">572</span>        V<span class="s"> = </span>mmax(r, g, b);
-</code><code id="L573"><span class="ln">573</span>        C<span class="s"> = </span>V<span class="s"> - </span>mmin(r, g, b);
-</code><code id="L574"><span class="ln">574</span>        H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
-</code><code id="L575"><span class="ln">575</span>             V<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
-</code><code id="L576"><span class="ln">576</span>             V<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
-</code><code id="L577"><span class="ln">577</span>                      (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
-</code><code id="L578"><span class="ln">578</span>        H<span class="s"> = </span>(H % <span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
-</code><code id="L579"><span class="ln">579</span>        S<span class="s"> = </span>C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> : C<span class="s"> / </span>V;
-</code><code id="L580"><span class="ln">580</span>        <b>return</b> {h: H, s: S, b: V, toString: hsbtoString};
-</code><code id="L581"><span class="ln">581</span>    };
-</code><code id="L582"><span class="ln">582</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L583"><span class="ln">583</span><span class="c">    <span class="s"> * </span>Raphael.rgb2hsl
-</span></code><code id="L584"><span class="ln">584</span><span class="c">     [ method ]
-</span></code><code id="L585"><span class="ln">585</span><span class="c">     **
-</span></code><code id="L586"><span class="ln">586</span><span class="c">    <span class="s"> * </span>Converts RGB values to HSL object.
-</span></code><code id="L587"><span class="ln">587</span><span class="c">     > Parameters
-</span></code><code id="L588"><span class="ln">588</span><span class="c">    <span class="s"> - </span>r (number) red
-</span></code><code id="L589"><span class="ln">589</span><span class="c">    <span class="s"> - </span>g (number) green
-</span></code><code id="L590"><span class="ln">590</span><span class="c">    <span class="s"> - </span>b (number) blue
-</span></code><code id="L591"><span class="ln">591</span><span class="c">    <span class="s"> = </span>(object) HSL object <b>in</b> format:
-</span></code><code id="L592"><span class="ln">592</span><span class="c">     | {
-</span></code><code id="L593"><span class="ln">593</span><span class="c">     |     h: <span class="c">// hue,</span>
-</span></code><code id="L594"><span class="ln">594</span><span class="c">     |     s: <span class="c">// saturation,</span>
-</span></code><code id="L595"><span class="ln">595</span><span class="c">     |     l: <span class="c">// luminosity</span>
-</span></code><code id="L596"><span class="ln">596</span><span class="c">     | }
-</span></code><code id="L597"><span class="ln">597</span><span class="c">    \*/</span>
-</code><code id="L598"><span class="ln">598</span>    R.rgb2hsl<span class="s"> = </span><b>function</b> (r, g, b) {
-</code><code id="L599"><span class="ln">599</span>        b<span class="s"> = </span>prepareRGB(r, g, b);
-</code><code id="L600"><span class="ln">600</span>        r<span class="s"> = </span>b[<span class="d">0</span>];
-</code><code id="L601"><span class="ln">601</span>        g<span class="s"> = </span>b[<span class="d">1</span>];
-</code><code id="L602"><span class="ln">602</span>        b<span class="s"> = </span>b[<span class="d">2</span>];
-</code><code id="L603"><span class="ln">603</span>
-</code><code id="L604"><span class="ln">604</span>        <b>var</b> H, S, L, M, m, C;
-</code><code id="L605"><span class="ln">605</span>        M<span class="s"> = </span>mmax(r, g, b);
-</code><code id="L606"><span class="ln">606</span>        m<span class="s"> = </span>mmin(r, g, b);
-</code><code id="L607"><span class="ln">607</span>        C<span class="s"> = </span>M<span class="s"> - </span>m;
-</code><code id="L608"><span class="ln">608</span>        H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
-</code><code id="L609"><span class="ln">609</span>             M<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
-</code><code id="L610"><span class="ln">610</span>             M<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
-</code><code id="L611"><span class="ln">611</span>                      (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
-</code><code id="L612"><span class="ln">612</span>        H<span class="s"> = </span>(H % <span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
-</code><code id="L613"><span class="ln">613</span>        L<span class="s"> = </span>(M<span class="s"> + </span>m)<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L614"><span class="ln">614</span>        S<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> :
-</code><code id="L615"><span class="ln">615</span>             L &lt; <span class="d">.5</span> ? C<span class="s"> / </span>(<span class="d">2</span><span class="s"> * </span>L) :
-</code><code id="L616"><span class="ln">616</span>                      C<span class="s"> / </span>(<span class="d">2</span><span class="s"> - </span><span class="d">2</span><span class="s"> * </span>L));
-</code><code id="L617"><span class="ln">617</span>        <b>return</b> {h: H, s: S, l: L, toString: hsltoString};
-</code><code id="L618"><span class="ln">618</span>    };
-</code><code id="L619"><span class="ln">619</span>    R._path2string<span class="s"> = </span><b>function</b> () {
-</code><code id="L620"><span class="ln">620</span>        <b>return</b> <b>this</b>.join(<i>","</i>).replace(p2s, <i>"$<span class="d">1</span>"</i>);
-</code><code id="L621"><span class="ln">621</span>    };
-</code><code id="L622"><span class="ln">622</span>    <b>function</b> cacher(f, scope, postprocessor) {
-</code><code id="L623"><span class="ln">623</span>        <b>function</b> newf() {
-</code><code id="L624"><span class="ln">624</span>            <b>var</b> arg<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">0</span>),
-</code><code id="L625"><span class="ln">625</span>                args<span class="s"> = </span>arg.join(<i>"\u2400"</i>),
-</code><code id="L626"><span class="ln">626</span>                cache<span class="s"> = </span>newf.cache<span class="s"> = </span>newf.cache<span class="s"> || </span>{},
-</code><code id="L627"><span class="ln">627</span>                count<span class="s"> = </span>newf.count<span class="s"> = </span>newf.count<span class="s"> || </span>[];
-</code><code id="L628"><span class="ln">628</span>            <b>if</b> (cache[has](args)) {
-</code><code id="L629"><span class="ln">629</span>                <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
-</code><code id="L630"><span class="ln">630</span>            }
-</code><code id="L631"><span class="ln">631</span>            count.length >= <span class="d">1e3</span> &amp;&amp; <b>delete</b> cache[count.shift()];
-</code><code id="L632"><span class="ln">632</span>            count.push(args);
-</code><code id="L633"><span class="ln">633</span>            cache[args]<span class="s"> = </span>f[apply](scope, arg);
-</code><code id="L634"><span class="ln">634</span>            <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
-</code><code id="L635"><span class="ln">635</span>        }
-</code><code id="L636"><span class="ln">636</span>        <b>return</b> newf;
-</code><code id="L637"><span class="ln">637</span>    }
-</code><code id="L638"><span class="ln">638</span>
-</code><code id="L639"><span class="ln">639</span>    <b>function</b> preload(src, f) {
-</code><code id="L640"><span class="ln">640</span>        <b>var</b> img<span class="s"> = </span>g.doc.createElement(<i>"img"</i>);
-</code><code id="L641"><span class="ln">641</span>        img.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top-9999em"</i>;
-</code><code id="L642"><span class="ln">642</span>        img.onload<span class="s"> = </span><b>function</b> () {
-</code><code id="L643"><span class="ln">643</span>            f.call(<b>this</b>);
-</code><code id="L644"><span class="ln">644</span>            <b>this</b>.onload<span class="s"> = </span><b>null</b>;
-</code><code id="L645"><span class="ln">645</span>            g.doc.body.removeChild(<b>this</b>);
-</code><code id="L646"><span class="ln">646</span>        };
-</code><code id="L647"><span class="ln">647</span>        img.onerror<span class="s"> = </span><b>function</b> () {
-</code><code id="L648"><span class="ln">648</span>            g.doc.body.removeChild(<b>this</b>);
-</code><code id="L649"><span class="ln">649</span>        };
-</code><code id="L650"><span class="ln">650</span>        g.doc.body.appendChild(img);
-</code><code id="L651"><span class="ln">651</span>        img.src<span class="s"> = </span>src;
-</code><code id="L652"><span class="ln">652</span>    }
-</code><code id="L653"><span class="ln">653</span>
-</code><code id="L654"><span class="ln">654</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L655"><span class="ln">655</span><span class="c">    <span class="s"> * </span>Raphael.getRGB
-</span></code><code id="L656"><span class="ln">656</span><span class="c">     [ method ]
-</span></code><code id="L657"><span class="ln">657</span><span class="c">     **
-</span></code><code id="L658"><span class="ln">658</span><span class="c">    <span class="s"> * </span>Parses colour string as RGB object
-</span></code><code id="L659"><span class="ln">659</span><span class="c">     > Parameters
-</span></code><code id="L660"><span class="ln">660</span><span class="c">    <span class="s"> - </span>colour (string) colour string <b>in</b> one of formats:
-</span></code><code id="L661"><span class="ln">661</span><span class="c">     &lt;ul>
-</span></code><code id="L662"><span class="ln">662</span><span class="c">         &lt;li>Colour name (“&lt;samp>red&lt;/samp>”, “&lt;samp>green&lt;/samp>”, “&lt;samp>cornflowerblue&lt;/samp>”, etc)&lt;/li>
-</span></code><code id="L663"><span class="ln">663</span><span class="c">         &lt;li>#••• — shortened HTML colour: (“&lt;samp>#<span class="d">000</span>&lt;/samp>”, “&lt;samp>#fc0&lt;/samp>”, etc)&lt;/li>
-</span></code><code id="L664"><span class="ln">664</span><span class="c">         &lt;li>#•••••• — full length HTML colour: (“&lt;samp>#<span class="d">000000</span>&lt;/samp>”, “&lt;samp>#bd2300&lt;/samp>”)&lt;/li>
-</span></code><code id="L665"><span class="ln">665</span><span class="c">         &lt;li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“&lt;samp>rgb(<span class="d">200</span>,&nbsp;<span class="d">100</span>,&nbsp;<span class="d">0</span>)&lt;/samp>”)&lt;/li>
-</span></code><code id="L666"><span class="ln">666</span><span class="c">         &lt;li>rgb(•••%, •••%, •••%) — same as above, but <b>in</b> %: (“&lt;samp>rgb(<span class="d">100</span>%,&nbsp;<span class="d">175</span>%,&nbsp;<span class="d">0</span>%)&lt;/samp>”)&lt;/li>
-</span></code><code id="L667"><span class="ln">667</span><span class="c">         &lt;li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“&lt;samp>hsb(<span class="d">0.5</span>,&nbsp;<span class="d">0.25</span>,&nbsp;<span class="d">1</span>)&lt;/samp>”)&lt;/li>
-</span></code><code id="L668"><span class="ln">668</span><span class="c">         &lt;li>hsb(•••%, •••%, •••%) — same as above, but <b>in</b> %&lt;/li>
-</span></code><code id="L669"><span class="ln">669</span><span class="c">         &lt;li>hsl(•••, •••, •••) — same as hsb&lt;/li>
-</span></code><code id="L670"><span class="ln">670</span><span class="c">         &lt;li>hsl(•••%, •••%, •••%) — same as hsb&lt;/li>
-</span></code><code id="L671"><span class="ln">671</span><span class="c">     &lt;/ul>
-</span></code><code id="L672"><span class="ln">672</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
-</span></code><code id="L673"><span class="ln">673</span><span class="c">     | {
-</span></code><code id="L674"><span class="ln">674</span><span class="c">     |     r: <span class="c">// red,</span>
-</span></code><code id="L675"><span class="ln">675</span><span class="c">     |     g: <span class="c">// green,</span>
-</span></code><code id="L676"><span class="ln">676</span><span class="c">     |     b: <span class="c">// blue</span>
-</span></code><code id="L677"><span class="ln">677</span><span class="c">     |     hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
-</span></code><code id="L678"><span class="ln">678</span><span class="c">     |     error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
-</span></code><code id="L679"><span class="ln">679</span><span class="c">     | }
-</span></code><code id="L680"><span class="ln">680</span><span class="c">    \*/</span>
-</code><code id="L681"><span class="ln">681</span>    R.getRGB<span class="s"> = </span>cacher(<b>function</b> (colour) {
-</code><code id="L682"><span class="ln">682</span>        <b>if</b> (!colour<span class="s"> || </span>!!((colour<span class="s"> = </span>Str(colour)).indexOf(<i>"-"</i>)<span class="s"> + </span><span class="d">1</span>)) {
-</code><code id="L683"><span class="ln">683</span>            <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
-</code><code id="L684"><span class="ln">684</span>        }
-</code><code id="L685"><span class="ln">685</span>        <b>if</b> (colour<span class="s"> == </span><i>"none"</i>) {
-</code><code id="L686"><span class="ln">686</span>            <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>};
-</code><code id="L687"><span class="ln">687</span>        }
-</code><code id="L688"><span class="ln">688</span>        !(hsrg[has](colour.toLowerCase().substring(<span class="d">0</span>, <span class="d">2</span>))<span class="s"> || </span>colour.charAt()<span class="s"> == </span><i>"#"</i>) &amp;&amp; (colour<span class="s"> = </span>toHex(colour));
-</code><code id="L689"><span class="ln">689</span>        <b>var</b> res,
-</code><code id="L690"><span class="ln">690</span>            red,
-</code><code id="L691"><span class="ln">691</span>            green,
-</code><code id="L692"><span class="ln">692</span>            blue,
-</code><code id="L693"><span class="ln">693</span>            opacity,
-</code><code id="L694"><span class="ln">694</span>            t,
-</code><code id="L695"><span class="ln">695</span>            values,
-</code><code id="L696"><span class="ln">696</span>            rgb<span class="s"> = </span>colour.match(colourRegExp);
-</code><code id="L697"><span class="ln">697</span>        <b>if</b> (rgb) {
-</code><code id="L698"><span class="ln">698</span>            <b>if</b> (rgb[<span class="d">2</span>]) {
-</code><code id="L699"><span class="ln">699</span>                blue<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">5</span>), <span class="d">16</span>);
-</code><code id="L700"><span class="ln">700</span>                green<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">3</span>, <span class="d">5</span>), <span class="d">16</span>);
-</code><code id="L701"><span class="ln">701</span>                red<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">1</span>, <span class="d">3</span>), <span class="d">16</span>);
-</code><code id="L702"><span class="ln">702</span>            }
-</code><code id="L703"><span class="ln">703</span>            <b>if</b> (rgb[<span class="d">3</span>]) {
-</code><code id="L704"><span class="ln">704</span>                blue<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">3</span>))<span class="s"> + </span>t, <span class="d">16</span>);
-</code><code id="L705"><span class="ln">705</span>                green<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">2</span>))<span class="s"> + </span>t, <span class="d">16</span>);
-</code><code id="L706"><span class="ln">706</span>                red<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">1</span>))<span class="s"> + </span>t, <span class="d">16</span>);
-</code><code id="L707"><span class="ln">707</span>            }
-</code><code id="L708"><span class="ln">708</span>            <b>if</b> (rgb[<span class="d">4</span>]) {
-</code><code id="L709"><span class="ln">709</span>                values<span class="s"> = </span>rgb[<span class="d">4</span>].split(commaSpaces);
-</code><code id="L710"><span class="ln">710</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
-</code><code id="L711"><span class="ln">711</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (red *= <span class="d">2.55</span>);
-</code><code id="L712"><span class="ln">712</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
-</code><code id="L713"><span class="ln">713</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (green *= <span class="d">2.55</span>);
-</code><code id="L714"><span class="ln">714</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
-</code><code id="L715"><span class="ln">715</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (blue *= <span class="d">2.55</span>);
-</code><code id="L716"><span class="ln">716</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"rgba"</i> &amp;&amp; (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
-</code><code id="L717"><span class="ln">717</span>                values[<span class="d">3</span>] &amp;&amp; values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (opacity /= <span class="d">100</span>);
-</code><code id="L718"><span class="ln">718</span>            }
-</code><code id="L719"><span class="ln">719</span>            <b>if</b> (rgb[<span class="d">5</span>]) {
-</code><code id="L720"><span class="ln">720</span>                values<span class="s"> = </span>rgb[<span class="d">5</span>].split(commaSpaces);
-</code><code id="L721"><span class="ln">721</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
-</code><code id="L722"><span class="ln">722</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (red *= <span class="d">2.55</span>);
-</code><code id="L723"><span class="ln">723</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
-</code><code id="L724"><span class="ln">724</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (green *= <span class="d">2.55</span>);
-</code><code id="L725"><span class="ln">725</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
-</code><code id="L726"><span class="ln">726</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (blue *= <span class="d">2.55</span>);
-</code><code id="L727"><span class="ln">727</span>                (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>) &amp;&amp; (red /= <span class="d">360</span>);
-</code><code id="L728"><span class="ln">728</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsba"</i> &amp;&amp; (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
-</code><code id="L729"><span class="ln">729</span>                values[<span class="d">3</span>] &amp;&amp; values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (opacity /= <span class="d">100</span>);
-</code><code id="L730"><span class="ln">730</span>                <b>return</b> R.hsb2rgb(red, green, blue, opacity);
-</code><code id="L731"><span class="ln">731</span>            }
-</code><code id="L732"><span class="ln">732</span>            <b>if</b> (rgb[<span class="d">6</span>]) {
-</code><code id="L733"><span class="ln">733</span>                values<span class="s"> = </span>rgb[<span class="d">6</span>].split(commaSpaces);
-</code><code id="L734"><span class="ln">734</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
-</code><code id="L735"><span class="ln">735</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (red *= <span class="d">2.55</span>);
-</code><code id="L736"><span class="ln">736</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
-</code><code id="L737"><span class="ln">737</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (green *= <span class="d">2.55</span>);
-</code><code id="L738"><span class="ln">738</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
-</code><code id="L739"><span class="ln">739</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (blue *= <span class="d">2.55</span>);
-</code><code id="L740"><span class="ln">740</span>                (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>) &amp;&amp; (red /= <span class="d">360</span>);
-</code><code id="L741"><span class="ln">741</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsla"</i> &amp;&amp; (opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
-</code><code id="L742"><span class="ln">742</span>                values[<span class="d">3</span>] &amp;&amp; values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i> &amp;&amp; (opacity /= <span class="d">100</span>);
-</code><code id="L743"><span class="ln">743</span>                <b>return</b> R.hsl2rgb(red, green, blue, opacity);
+</code><code id="L457"><span class="ln">457</span>    hsltoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L458"><span class="ln">458</span>        <b>return</b> <i>"hsl("</i><span class="s"> + </span>[<b>this</b>.h, <b>this</b>.s, <b>this</b>.l]<span class="s"> + </span><i>")"</i>;
+</code><code id="L459"><span class="ln">459</span>    },
+</code><code id="L460"><span class="ln">460</span>    rgbtoString<span class="s"> = </span><b>function</b> () {
+</code><code id="L461"><span class="ln">461</span>        <b>return</b> <b>this</b>.hex;
+</code><code id="L462"><span class="ln">462</span>    },
+</code><code id="L463"><span class="ln">463</span>    prepareRGB<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L464"><span class="ln">464</span>        <b>if</b> (g<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(r, <i>"object"</i>)<span class="s"> &amp;&amp; </span><i>"r"</i> <b>in</b> r<span class="s"> &amp;&amp; </span><i>"g"</i> <b>in</b> r<span class="s"> &amp;&amp; </span><i>"b"</i> <b>in</b> r) {
+</code><code id="L465"><span class="ln">465</span>            b<span class="s"> = </span>r.b;
+</code><code id="L466"><span class="ln">466</span>            g<span class="s"> = </span>r.g;
+</code><code id="L467"><span class="ln">467</span>            r<span class="s"> = </span>r.r;
+</code><code id="L468"><span class="ln">468</span>        }
+</code><code id="L469"><span class="ln">469</span>        <b>if</b> (g<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(r, string)) {
+</code><code id="L470"><span class="ln">470</span>            <b>var</b> clr<span class="s"> = </span>R.getRGB(r);
+</code><code id="L471"><span class="ln">471</span>            r<span class="s"> = </span>clr.r;
+</code><code id="L472"><span class="ln">472</span>            g<span class="s"> = </span>clr.g;
+</code><code id="L473"><span class="ln">473</span>            b<span class="s"> = </span>clr.b;
+</code><code id="L474"><span class="ln">474</span>        }
+</code><code id="L475"><span class="ln">475</span>        <b>if</b> (r > <span class="d">1</span><span class="s"> || </span>g > <span class="d">1</span><span class="s"> || </span>b > <span class="d">1</span>) {
+</code><code id="L476"><span class="ln">476</span>            r /= <span class="d">255</span>;
+</code><code id="L477"><span class="ln">477</span>            g /= <span class="d">255</span>;
+</code><code id="L478"><span class="ln">478</span>            b /= <span class="d">255</span>;
+</code><code id="L479"><span class="ln">479</span>        }
+</code><code id="L480"><span class="ln">480</span>        
+</code><code id="L481"><span class="ln">481</span>        <b>return</b> [r, g, b];
+</code><code id="L482"><span class="ln">482</span>    },
+</code><code id="L483"><span class="ln">483</span>    packageRGB<span class="s"> = </span><b>function</b> (r, g, b, o) {
+</code><code id="L484"><span class="ln">484</span>        r *= <span class="d">255</span>;
+</code><code id="L485"><span class="ln">485</span>        g *= <span class="d">255</span>;
+</code><code id="L486"><span class="ln">486</span>        b *= <span class="d">255</span>;
+</code><code id="L487"><span class="ln">487</span>        <b>var</b> rgb<span class="s"> = </span>{
+</code><code id="L488"><span class="ln">488</span>            r: r,
+</code><code id="L489"><span class="ln">489</span>            g: g,
+</code><code id="L490"><span class="ln">490</span>            b: b,
+</code><code id="L491"><span class="ln">491</span>            hex: R.rgb(r, g, b),
+</code><code id="L492"><span class="ln">492</span>            toString: rgbtoString
+</code><code id="L493"><span class="ln">493</span>        };
+</code><code id="L494"><span class="ln">494</span>        R.is(o, <i>"finite"</i>)<span class="s"> &amp;&amp; </span>(rgb.opacity<span class="s"> = </span>o);
+</code><code id="L495"><span class="ln">495</span>        <b>return</b> rgb;
+</code><code id="L496"><span class="ln">496</span>    };
+</code><code id="L497"><span class="ln">497</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L498"><span class="ln">498</span><span class="c">    <span class="s"> * </span>Raphael.hsb2rgb
+</span></code><code id="L499"><span class="ln">499</span><span class="c">     [ method ]
+</span></code><code id="L500"><span class="ln">500</span><span class="c">     **
+</span></code><code id="L501"><span class="ln">501</span><span class="c">    <span class="s"> * </span>Converts HSB values to RGB object.
+</span></code><code id="L502"><span class="ln">502</span><span class="c">     > Parameters
+</span></code><code id="L503"><span class="ln">503</span><span class="c">    <span class="s"> - </span>h (number) hue
+</span></code><code id="L504"><span class="ln">504</span><span class="c">    <span class="s"> - </span>s (number) saturation
+</span></code><code id="L505"><span class="ln">505</span><span class="c">    <span class="s"> - </span>v (number) value or brightness
+</span></code><code id="L506"><span class="ln">506</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L507"><span class="ln">507</span><span class="c">     o {
+</span></code><code id="L508"><span class="ln">508</span><span class="c">     o     r (number) red,
+</span></code><code id="L509"><span class="ln">509</span><span class="c">     o     g (number) green,
+</span></code><code id="L510"><span class="ln">510</span><span class="c">     o     b (number) blue,
+</span></code><code id="L511"><span class="ln">511</span><span class="c">     o     hex (string) color <b>in</b> HTML/CSS format: #••••••
+</span></code><code id="L512"><span class="ln">512</span><span class="c">     o }
+</span></code><code id="L513"><span class="ln">513</span><span class="c">    \*/</span>
+</code><code id="L514"><span class="ln">514</span>    R.hsb2rgb<span class="s"> = </span><b>function</b> (h, s, v, o) {
+</code><code id="L515"><span class="ln">515</span>        <b>if</b> (<b>this</b>.is(h, <i>"object"</i>)<span class="s"> &amp;&amp; </span><i>"h"</i> <b>in</b> h<span class="s"> &amp;&amp; </span><i>"s"</i> <b>in</b> h<span class="s"> &amp;&amp; </span><i>"b"</i> <b>in</b> h) {
+</code><code id="L516"><span class="ln">516</span>            v<span class="s"> = </span>h.b;
+</code><code id="L517"><span class="ln">517</span>            s<span class="s"> = </span>h.s;
+</code><code id="L518"><span class="ln">518</span>            h<span class="s"> = </span>h.h;
+</code><code id="L519"><span class="ln">519</span>            o<span class="s"> = </span>h.o;
+</code><code id="L520"><span class="ln">520</span>        }
+</code><code id="L521"><span class="ln">521</span>        h *= <span class="d">360</span>;
+</code><code id="L522"><span class="ln">522</span>        <b>var</b> R, G, B, X, C;
+</code><code id="L523"><span class="ln">523</span>        h<span class="s"> = </span>(h<span class="s"> % </span><span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
+</code><code id="L524"><span class="ln">524</span>        C<span class="s"> = </span>v<span class="s"> * </span>s;
+</code><code id="L525"><span class="ln">525</span>        X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h<span class="s"> % </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
+</code><code id="L526"><span class="ln">526</span>        R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>v<span class="s"> - </span>C;
+</code><code id="L527"><span class="ln">527</span>
+</code><code id="L528"><span class="ln">528</span>        h<span class="s"> = </span>~~h;
+</code><code id="L529"><span class="ln">529</span>        R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
+</code><code id="L530"><span class="ln">530</span>        G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
+</code><code id="L531"><span class="ln">531</span>        B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
+</code><code id="L532"><span class="ln">532</span>        <b>return</b> packageRGB(R, G, B, o);
+</code><code id="L533"><span class="ln">533</span>    };
+</code><code id="L534"><span class="ln">534</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L535"><span class="ln">535</span><span class="c">    <span class="s"> * </span>Raphael.hsl2rgb
+</span></code><code id="L536"><span class="ln">536</span><span class="c">     [ method ]
+</span></code><code id="L537"><span class="ln">537</span><span class="c">     **
+</span></code><code id="L538"><span class="ln">538</span><span class="c">    <span class="s"> * </span>Converts HSL values to RGB object.
+</span></code><code id="L539"><span class="ln">539</span><span class="c">     > Parameters
+</span></code><code id="L540"><span class="ln">540</span><span class="c">    <span class="s"> - </span>h (number) hue
+</span></code><code id="L541"><span class="ln">541</span><span class="c">    <span class="s"> - </span>s (number) saturation
+</span></code><code id="L542"><span class="ln">542</span><span class="c">    <span class="s"> - </span>l (number) luminosity
+</span></code><code id="L543"><span class="ln">543</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L544"><span class="ln">544</span><span class="c">     o {
+</span></code><code id="L545"><span class="ln">545</span><span class="c">     o     r (number) red,
+</span></code><code id="L546"><span class="ln">546</span><span class="c">     o     g (number) green,
+</span></code><code id="L547"><span class="ln">547</span><span class="c">     o     b (number) blue,
+</span></code><code id="L548"><span class="ln">548</span><span class="c">     o     hex (string) color <b>in</b> HTML/CSS format: #••••••
+</span></code><code id="L549"><span class="ln">549</span><span class="c">     o }
+</span></code><code id="L550"><span class="ln">550</span><span class="c">    \*/</span>
+</code><code id="L551"><span class="ln">551</span>    R.hsl2rgb<span class="s"> = </span><b>function</b> (h, s, l, o) {
+</code><code id="L552"><span class="ln">552</span>        <b>if</b> (<b>this</b>.is(h, <i>"object"</i>)<span class="s"> &amp;&amp; </span><i>"h"</i> <b>in</b> h<span class="s"> &amp;&amp; </span><i>"s"</i> <b>in</b> h<span class="s"> &amp;&amp; </span><i>"l"</i> <b>in</b> h) {
+</code><code id="L553"><span class="ln">553</span>            l<span class="s"> = </span>h.l;
+</code><code id="L554"><span class="ln">554</span>            s<span class="s"> = </span>h.s;
+</code><code id="L555"><span class="ln">555</span>            h<span class="s"> = </span>h.h;
+</code><code id="L556"><span class="ln">556</span>        }
+</code><code id="L557"><span class="ln">557</span>        <b>if</b> (h > <span class="d">1</span><span class="s"> || </span>s > <span class="d">1</span><span class="s"> || </span>l > <span class="d">1</span>) {
+</code><code id="L558"><span class="ln">558</span>            h /= <span class="d">360</span>;
+</code><code id="L559"><span class="ln">559</span>            s /= <span class="d">100</span>;
+</code><code id="L560"><span class="ln">560</span>            l /= <span class="d">100</span>;
+</code><code id="L561"><span class="ln">561</span>        }
+</code><code id="L562"><span class="ln">562</span>        h *= <span class="d">360</span>;
+</code><code id="L563"><span class="ln">563</span>        <b>var</b> R, G, B, X, C;
+</code><code id="L564"><span class="ln">564</span>        h<span class="s"> = </span>(h<span class="s"> % </span><span class="d">360</span>)<span class="s"> / </span><span class="d">60</span>;
+</code><code id="L565"><span class="ln">565</span>        C<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>s<span class="s"> * </span>(l &lt; <span class="d">.5</span> ? l : <span class="d">1</span><span class="s"> - </span>l);
+</code><code id="L566"><span class="ln">566</span>        X<span class="s"> = </span>C<span class="s"> * </span>(<span class="d">1</span><span class="s"> - </span>abs(h<span class="s"> % </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>));
+</code><code id="L567"><span class="ln">567</span>        R<span class="s"> = </span>G<span class="s"> = </span>B<span class="s"> = </span>l<span class="s"> - </span>C<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L568"><span class="ln">568</span>
+</code><code id="L569"><span class="ln">569</span>        h<span class="s"> = </span>~~h;
+</code><code id="L570"><span class="ln">570</span>        R += [C, X, <span class="d">0</span>, <span class="d">0</span>, X, C][h];
+</code><code id="L571"><span class="ln">571</span>        G += [X, C, C, X, <span class="d">0</span>, <span class="d">0</span>][h];
+</code><code id="L572"><span class="ln">572</span>        B += [<span class="d">0</span>, <span class="d">0</span>, X, C, C, X][h];
+</code><code id="L573"><span class="ln">573</span>        <b>return</b> packageRGB(R, G, B, o);
+</code><code id="L574"><span class="ln">574</span>    };
+</code><code id="L575"><span class="ln">575</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L576"><span class="ln">576</span><span class="c">    <span class="s"> * </span>Raphael.rgb2hsb
+</span></code><code id="L577"><span class="ln">577</span><span class="c">     [ method ]
+</span></code><code id="L578"><span class="ln">578</span><span class="c">     **
+</span></code><code id="L579"><span class="ln">579</span><span class="c">    <span class="s"> * </span>Converts RGB values to HSB object.
+</span></code><code id="L580"><span class="ln">580</span><span class="c">     > Parameters
+</span></code><code id="L581"><span class="ln">581</span><span class="c">    <span class="s"> - </span>r (number) red
+</span></code><code id="L582"><span class="ln">582</span><span class="c">    <span class="s"> - </span>g (number) green
+</span></code><code id="L583"><span class="ln">583</span><span class="c">    <span class="s"> - </span>b (number) blue
+</span></code><code id="L584"><span class="ln">584</span><span class="c">    <span class="s"> = </span>(object) HSB object <b>in</b> format:
+</span></code><code id="L585"><span class="ln">585</span><span class="c">     o {
+</span></code><code id="L586"><span class="ln">586</span><span class="c">     o     h (number) hue
+</span></code><code id="L587"><span class="ln">587</span><span class="c">     o     s (number) saturation
+</span></code><code id="L588"><span class="ln">588</span><span class="c">     o     b (number) brightness
+</span></code><code id="L589"><span class="ln">589</span><span class="c">     o }
+</span></code><code id="L590"><span class="ln">590</span><span class="c">    \*/</span>
+</code><code id="L591"><span class="ln">591</span>    R.rgb2hsb<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L592"><span class="ln">592</span>        b<span class="s"> = </span>prepareRGB(r, g, b);
+</code><code id="L593"><span class="ln">593</span>        r<span class="s"> = </span>b[<span class="d">0</span>];
+</code><code id="L594"><span class="ln">594</span>        g<span class="s"> = </span>b[<span class="d">1</span>];
+</code><code id="L595"><span class="ln">595</span>        b<span class="s"> = </span>b[<span class="d">2</span>];
+</code><code id="L596"><span class="ln">596</span>
+</code><code id="L597"><span class="ln">597</span>        <b>var</b> H, S, V, C;
+</code><code id="L598"><span class="ln">598</span>        V<span class="s"> = </span>mmax(r, g, b);
+</code><code id="L599"><span class="ln">599</span>        C<span class="s"> = </span>V<span class="s"> - </span>mmin(r, g, b);
+</code><code id="L600"><span class="ln">600</span>        H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
+</code><code id="L601"><span class="ln">601</span>             V<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
+</code><code id="L602"><span class="ln">602</span>             V<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
+</code><code id="L603"><span class="ln">603</span>                      (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
+</code><code id="L604"><span class="ln">604</span>        H<span class="s"> = </span>(H<span class="s"> % </span><span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
+</code><code id="L605"><span class="ln">605</span>        S<span class="s"> = </span>C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> : C<span class="s"> / </span>V;
+</code><code id="L606"><span class="ln">606</span>        <b>return</b> {h: H, s: S, b: V, toString: hsbtoString};
+</code><code id="L607"><span class="ln">607</span>    };
+</code><code id="L608"><span class="ln">608</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L609"><span class="ln">609</span><span class="c">    <span class="s"> * </span>Raphael.rgb2hsl
+</span></code><code id="L610"><span class="ln">610</span><span class="c">     [ method ]
+</span></code><code id="L611"><span class="ln">611</span><span class="c">     **
+</span></code><code id="L612"><span class="ln">612</span><span class="c">    <span class="s"> * </span>Converts RGB values to HSL object.
+</span></code><code id="L613"><span class="ln">613</span><span class="c">     > Parameters
+</span></code><code id="L614"><span class="ln">614</span><span class="c">    <span class="s"> - </span>r (number) red
+</span></code><code id="L615"><span class="ln">615</span><span class="c">    <span class="s"> - </span>g (number) green
+</span></code><code id="L616"><span class="ln">616</span><span class="c">    <span class="s"> - </span>b (number) blue
+</span></code><code id="L617"><span class="ln">617</span><span class="c">    <span class="s"> = </span>(object) HSL object <b>in</b> format:
+</span></code><code id="L618"><span class="ln">618</span><span class="c">     o {
+</span></code><code id="L619"><span class="ln">619</span><span class="c">     o     h (number) hue
+</span></code><code id="L620"><span class="ln">620</span><span class="c">     o     s (number) saturation
+</span></code><code id="L621"><span class="ln">621</span><span class="c">     o     l (number) luminosity
+</span></code><code id="L622"><span class="ln">622</span><span class="c">     o }
+</span></code><code id="L623"><span class="ln">623</span><span class="c">    \*/</span>
+</code><code id="L624"><span class="ln">624</span>    R.rgb2hsl<span class="s"> = </span><b>function</b> (r, g, b) {
+</code><code id="L625"><span class="ln">625</span>        b<span class="s"> = </span>prepareRGB(r, g, b);
+</code><code id="L626"><span class="ln">626</span>        r<span class="s"> = </span>b[<span class="d">0</span>];
+</code><code id="L627"><span class="ln">627</span>        g<span class="s"> = </span>b[<span class="d">1</span>];
+</code><code id="L628"><span class="ln">628</span>        b<span class="s"> = </span>b[<span class="d">2</span>];
+</code><code id="L629"><span class="ln">629</span>
+</code><code id="L630"><span class="ln">630</span>        <b>var</b> H, S, L, M, m, C;
+</code><code id="L631"><span class="ln">631</span>        M<span class="s"> = </span>mmax(r, g, b);
+</code><code id="L632"><span class="ln">632</span>        m<span class="s"> = </span>mmin(r, g, b);
+</code><code id="L633"><span class="ln">633</span>        C<span class="s"> = </span>M<span class="s"> - </span>m;
+</code><code id="L634"><span class="ln">634</span>        H<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <b>null</b> :
+</code><code id="L635"><span class="ln">635</span>             M<span class="s"> == </span>r ? (g<span class="s"> - </span>b)<span class="s"> / </span>C :
+</code><code id="L636"><span class="ln">636</span>             M<span class="s"> == </span>g ? (b<span class="s"> - </span>r)<span class="s"> / </span>C<span class="s"> + </span><span class="d">2</span> :
+</code><code id="L637"><span class="ln">637</span>                      (r<span class="s"> - </span>g)<span class="s"> / </span>C<span class="s"> + </span><span class="d">4</span>);
+</code><code id="L638"><span class="ln">638</span>        H<span class="s"> = </span>(H<span class="s"> % </span><span class="d">6</span>)<span class="s"> * </span><span class="d">60</span>;
+</code><code id="L639"><span class="ln">639</span>        L<span class="s"> = </span>(M<span class="s"> + </span>m)<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L640"><span class="ln">640</span>        S<span class="s"> = </span>(C<span class="s"> == </span><span class="d">0</span> ? <span class="d">0</span> :
+</code><code id="L641"><span class="ln">641</span>             L &lt; <span class="d">.5</span> ? C<span class="s"> / </span>(<span class="d">2</span><span class="s"> * </span>L) :
+</code><code id="L642"><span class="ln">642</span>                      C<span class="s"> / </span>(<span class="d">2</span><span class="s"> - </span><span class="d">2</span><span class="s"> * </span>L));
+</code><code id="L643"><span class="ln">643</span>        <b>return</b> {h: H, s: S, l: L, toString: hsltoString};
+</code><code id="L644"><span class="ln">644</span>    };
+</code><code id="L645"><span class="ln">645</span>    R._path2string<span class="s"> = </span><b>function</b> () {
+</code><code id="L646"><span class="ln">646</span>        <b>return</b> <b>this</b>.join(<i>","</i>).replace(p2s, <i>"$<span class="d">1</span>"</i>);
+</code><code id="L647"><span class="ln">647</span>    };
+</code><code id="L648"><span class="ln">648</span>    <b>function</b> cacher(f, scope, postprocessor) {
+</code><code id="L649"><span class="ln">649</span>        <b>function</b> newf() {
+</code><code id="L650"><span class="ln">650</span>            <b>var</b> arg<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">0</span>),
+</code><code id="L651"><span class="ln">651</span>                args<span class="s"> = </span>arg.join(<i>"\u2400"</i>),
+</code><code id="L652"><span class="ln">652</span>                cache<span class="s"> = </span>newf.cache<span class="s"> = </span>newf.cache<span class="s"> || </span>{},
+</code><code id="L653"><span class="ln">653</span>                count<span class="s"> = </span>newf.count<span class="s"> = </span>newf.count<span class="s"> || </span>[];
+</code><code id="L654"><span class="ln">654</span>            <b>if</b> (cache[has](args)) {
+</code><code id="L655"><span class="ln">655</span>                <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
+</code><code id="L656"><span class="ln">656</span>            }
+</code><code id="L657"><span class="ln">657</span>            count.length >= <span class="d">1e3</span><span class="s"> &amp;&amp; </span><b>delete</b> cache[count.shift()];
+</code><code id="L658"><span class="ln">658</span>            count.push(args);
+</code><code id="L659"><span class="ln">659</span>            cache[args]<span class="s"> = </span>f[apply](scope, arg);
+</code><code id="L660"><span class="ln">660</span>            <b>return</b> postprocessor ? postprocessor(cache[args]) : cache[args];
+</code><code id="L661"><span class="ln">661</span>        }
+</code><code id="L662"><span class="ln">662</span>        <b>return</b> newf;
+</code><code id="L663"><span class="ln">663</span>    }
+</code><code id="L664"><span class="ln">664</span>
+</code><code id="L665"><span class="ln">665</span>    <b>function</b> preload(src, f) {
+</code><code id="L666"><span class="ln">666</span>        <b>var</b> img<span class="s"> = </span>g.doc.createElement(<i>"img"</i>);
+</code><code id="L667"><span class="ln">667</span>        img.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top-9999em"</i>;
+</code><code id="L668"><span class="ln">668</span>        img.onload<span class="s"> = </span><b>function</b> () {
+</code><code id="L669"><span class="ln">669</span>            f.call(<b>this</b>);
+</code><code id="L670"><span class="ln">670</span>            <b>this</b>.onload<span class="s"> = </span><b>null</b>;
+</code><code id="L671"><span class="ln">671</span>            g.doc.body.removeChild(<b>this</b>);
+</code><code id="L672"><span class="ln">672</span>        };
+</code><code id="L673"><span class="ln">673</span>        img.onerror<span class="s"> = </span><b>function</b> () {
+</code><code id="L674"><span class="ln">674</span>            g.doc.body.removeChild(<b>this</b>);
+</code><code id="L675"><span class="ln">675</span>        };
+</code><code id="L676"><span class="ln">676</span>        g.doc.body.appendChild(img);
+</code><code id="L677"><span class="ln">677</span>        img.src<span class="s"> = </span>src;
+</code><code id="L678"><span class="ln">678</span>    }
+</code><code id="L679"><span class="ln">679</span>
+</code><code id="L680"><span class="ln">680</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L681"><span class="ln">681</span><span class="c">    <span class="s"> * </span>Raphael.getRGB
+</span></code><code id="L682"><span class="ln">682</span><span class="c">     [ method ]
+</span></code><code id="L683"><span class="ln">683</span><span class="c">     **
+</span></code><code id="L684"><span class="ln">684</span><span class="c">    <span class="s"> * </span>Parses colour string as RGB object
+</span></code><code id="L685"><span class="ln">685</span><span class="c">     > Parameters
+</span></code><code id="L686"><span class="ln">686</span><span class="c">    <span class="s"> - </span>colour (string) colour string <b>in</b> one of formats:
+</span></code><code id="L687"><span class="ln">687</span><span class="c">     &lt;ul>
+</span></code><code id="L688"><span class="ln">688</span><span class="c">         &lt;li>Colour name (“&lt;samp>red&lt;/samp>”, “&lt;samp>green&lt;/samp>”, “&lt;samp>cornflowerblue&lt;/samp>”, etc)&lt;/li>
+</span></code><code id="L689"><span class="ln">689</span><span class="c">         &lt;li>#••• — shortened HTML colour: (“&lt;samp>#<span class="d">000</span>&lt;/samp>”, “&lt;samp>#fc0&lt;/samp>”, etc)&lt;/li>
+</span></code><code id="L690"><span class="ln">690</span><span class="c">         &lt;li>#•••••• — full length HTML colour: (“&lt;samp>#<span class="d">000000</span>&lt;/samp>”, “&lt;samp>#bd2300&lt;/samp>”)&lt;/li>
+</span></code><code id="L691"><span class="ln">691</span><span class="c">         &lt;li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“&lt;samp>rgb(<span class="d">200</span>,&nbsp;<span class="d">100</span>,&nbsp;<span class="d">0</span>)&lt;/samp>”)&lt;/li>
+</span></code><code id="L692"><span class="ln">692</span><span class="c">         &lt;li>rgb(•••%, •••%, •••%) — same as above, but <b>in</b> %: (“&lt;samp>rgb(<span class="d">100</span>%,&nbsp;<span class="d">175</span>%,&nbsp;<span class="d">0</span>%)&lt;/samp>”)&lt;/li>
+</span></code><code id="L693"><span class="ln">693</span><span class="c">         &lt;li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“&lt;samp>hsb(<span class="d">0.5</span>,&nbsp;<span class="d">0.25</span>,&nbsp;<span class="d">1</span>)&lt;/samp>”)&lt;/li>
+</span></code><code id="L694"><span class="ln">694</span><span class="c">         &lt;li>hsb(•••%, •••%, •••%) — same as above, but <b>in</b> %&lt;/li>
+</span></code><code id="L695"><span class="ln">695</span><span class="c">         &lt;li>hsl(•••, •••, •••) — same as hsb&lt;/li>
+</span></code><code id="L696"><span class="ln">696</span><span class="c">         &lt;li>hsl(•••%, •••%, •••%) — same as hsb&lt;/li>
+</span></code><code id="L697"><span class="ln">697</span><span class="c">     &lt;/ul>
+</span></code><code id="L698"><span class="ln">698</span><span class="c">    <span class="s"> = </span>(object) RGB object <b>in</b> format:
+</span></code><code id="L699"><span class="ln">699</span><span class="c">     o {
+</span></code><code id="L700"><span class="ln">700</span><span class="c">     o     r (number) red,
+</span></code><code id="L701"><span class="ln">701</span><span class="c">     o     g (number) green,
+</span></code><code id="L702"><span class="ln">702</span><span class="c">     o     b (number) blue
+</span></code><code id="L703"><span class="ln">703</span><span class="c">     o     hex (string) color <b>in</b> HTML/CSS format: #••••••,
+</span></code><code id="L704"><span class="ln">704</span><span class="c">     o     error (<b>boolean</b>) <b>true</b> <b>if</b> string can’t be parsed
+</span></code><code id="L705"><span class="ln">705</span><span class="c">     o }
+</span></code><code id="L706"><span class="ln">706</span><span class="c">    \*/</span>
+</code><code id="L707"><span class="ln">707</span>    R.getRGB<span class="s"> = </span>cacher(<b>function</b> (colour) {
+</code><code id="L708"><span class="ln">708</span>        <b>if</b> (!colour<span class="s"> || </span>!!((colour<span class="s"> = </span>Str(colour)).indexOf(<i>"-"</i>)<span class="s"> + </span><span class="d">1</span>)) {
+</code><code id="L709"><span class="ln">709</span>            <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
+</code><code id="L710"><span class="ln">710</span>        }
+</code><code id="L711"><span class="ln">711</span>        <b>if</b> (colour<span class="s"> == </span><i>"none"</i>) {
+</code><code id="L712"><span class="ln">712</span>            <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>};
+</code><code id="L713"><span class="ln">713</span>        }
+</code><code id="L714"><span class="ln">714</span>        !(hsrg[has](colour.toLowerCase().substring(<span class="d">0</span>, <span class="d">2</span>))<span class="s"> || </span>colour.charAt()<span class="s"> == </span><i>"#"</i>)<span class="s"> &amp;&amp; </span>(colour<span class="s"> = </span>toHex(colour));
+</code><code id="L715"><span class="ln">715</span>        <b>var</b> res,
+</code><code id="L716"><span class="ln">716</span>            red,
+</code><code id="L717"><span class="ln">717</span>            green,
+</code><code id="L718"><span class="ln">718</span>            blue,
+</code><code id="L719"><span class="ln">719</span>            opacity,
+</code><code id="L720"><span class="ln">720</span>            t,
+</code><code id="L721"><span class="ln">721</span>            values,
+</code><code id="L722"><span class="ln">722</span>            rgb<span class="s"> = </span>colour.match(colourRegExp);
+</code><code id="L723"><span class="ln">723</span>        <b>if</b> (rgb) {
+</code><code id="L724"><span class="ln">724</span>            <b>if</b> (rgb[<span class="d">2</span>]) {
+</code><code id="L725"><span class="ln">725</span>                blue<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">5</span>), <span class="d">16</span>);
+</code><code id="L726"><span class="ln">726</span>                green<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">3</span>, <span class="d">5</span>), <span class="d">16</span>);
+</code><code id="L727"><span class="ln">727</span>                red<span class="s"> = </span>toInt(rgb[<span class="d">2</span>].substring(<span class="d">1</span>, <span class="d">3</span>), <span class="d">16</span>);
+</code><code id="L728"><span class="ln">728</span>            }
+</code><code id="L729"><span class="ln">729</span>            <b>if</b> (rgb[<span class="d">3</span>]) {
+</code><code id="L730"><span class="ln">730</span>                blue<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">3</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L731"><span class="ln">731</span>                green<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">2</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L732"><span class="ln">732</span>                red<span class="s"> = </span>toInt((t<span class="s"> = </span>rgb[<span class="d">3</span>].charAt(<span class="d">1</span>))<span class="s"> + </span>t, <span class="d">16</span>);
+</code><code id="L733"><span class="ln">733</span>            }
+</code><code id="L734"><span class="ln">734</span>            <b>if</b> (rgb[<span class="d">4</span>]) {
+</code><code id="L735"><span class="ln">735</span>                values<span class="s"> = </span>rgb[<span class="d">4</span>].split(commaSpaces);
+</code><code id="L736"><span class="ln">736</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L737"><span class="ln">737</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(red *= <span class="d">2.55</span>);
+</code><code id="L738"><span class="ln">738</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L739"><span class="ln">739</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(green *= <span class="d">2.55</span>);
+</code><code id="L740"><span class="ln">740</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L741"><span class="ln">741</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(blue *= <span class="d">2.55</span>);
+</code><code id="L742"><span class="ln">742</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"rgba"</i><span class="s"> &amp;&amp; </span>(opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L743"><span class="ln">743</span>                values[<span class="d">3</span>]<span class="s"> &amp;&amp; </span>values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(opacity /= <span class="d">100</span>);
 </code><code id="L744"><span class="ln">744</span>            }
-</code><code id="L745"><span class="ln">745</span>            rgb<span class="s"> = </span>{r: red, g: green, b: blue};
-</code><code id="L746"><span class="ln">746</span>            rgb.hex<span class="s"> = </span><i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span> | blue | (green &lt;&lt; <span class="d">8</span>) | (red &lt;&lt; <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
-</code><code id="L747"><span class="ln">747</span>            R.is(opacity, <i>"finite"</i>) &amp;&amp; (rgb.opacity<span class="s"> = </span>opacity);
-</code><code id="L748"><span class="ln">748</span>            <b>return</b> rgb;
-</code><code id="L749"><span class="ln">749</span>        }
-</code><code id="L750"><span class="ln">750</span>        <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
-</code><code id="L751"><span class="ln">751</span>    }, R);
-</code><code id="L752"><span class="ln">752</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L753"><span class="ln">753</span><span class="c">    <span class="s"> * </span>Raphael.hsb
-</span></code><code id="L754"><span class="ln">754</span><span class="c">     [ method ]
-</span></code><code id="L755"><span class="ln">755</span><span class="c">     **
-</span></code><code id="L756"><span class="ln">756</span><span class="c">    <span class="s"> * </span>Converts HSB values to hex representation of the colour.
-</span></code><code id="L757"><span class="ln">757</span><span class="c">     > Parameters
-</span></code><code id="L758"><span class="ln">758</span><span class="c">    <span class="s"> - </span>h (number) hue
-</span></code><code id="L759"><span class="ln">759</span><span class="c">    <span class="s"> - </span>s (number) saturation
-</span></code><code id="L760"><span class="ln">760</span><span class="c">    <span class="s"> - </span>b (number) value or brightness
-</span></code><code id="L761"><span class="ln">761</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
-</span></code><code id="L762"><span class="ln">762</span><span class="c">    \*/</span>
-</code><code id="L763"><span class="ln">763</span>    R.hsb<span class="s"> = </span>cacher(<b>function</b> (h, s, b) {
-</code><code id="L764"><span class="ln">764</span>        <b>return</b> R.hsb2rgb(h, s, b).hex;
-</code><code id="L765"><span class="ln">765</span>    });
-</code><code id="L766"><span class="ln">766</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L767"><span class="ln">767</span><span class="c">    <span class="s"> * </span>Raphael.hsl
-</span></code><code id="L768"><span class="ln">768</span><span class="c">     [ method ]
-</span></code><code id="L769"><span class="ln">769</span><span class="c">     **
-</span></code><code id="L770"><span class="ln">770</span><span class="c">    <span class="s"> * </span>Converts HSL values to hex representation of the colour.
-</span></code><code id="L771"><span class="ln">771</span><span class="c">     > Parameters
-</span></code><code id="L772"><span class="ln">772</span><span class="c">    <span class="s"> - </span>h (number) hue
-</span></code><code id="L773"><span class="ln">773</span><span class="c">    <span class="s"> - </span>s (number) saturation
-</span></code><code id="L774"><span class="ln">774</span><span class="c">    <span class="s"> - </span>l (number) luminosity
-</span></code><code id="L775"><span class="ln">775</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
-</span></code><code id="L776"><span class="ln">776</span><span class="c">    \*/</span>
-</code><code id="L777"><span class="ln">777</span>    R.hsl<span class="s"> = </span>cacher(<b>function</b> (h, s, l) {
-</code><code id="L778"><span class="ln">778</span>        <b>return</b> R.hsl2rgb(h, s, l).hex;
-</code><code id="L779"><span class="ln">779</span>    });
-</code><code id="L780"><span class="ln">780</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L781"><span class="ln">781</span><span class="c">    <span class="s"> * </span>Raphael.rgb
-</span></code><code id="L782"><span class="ln">782</span><span class="c">     [ method ]
-</span></code><code id="L783"><span class="ln">783</span><span class="c">     **
-</span></code><code id="L784"><span class="ln">784</span><span class="c">    <span class="s"> * </span>Converts RGB values to hex representation of the colour.
-</span></code><code id="L785"><span class="ln">785</span><span class="c">     > Parameters
-</span></code><code id="L786"><span class="ln">786</span><span class="c">    <span class="s"> - </span>r (number) red
-</span></code><code id="L787"><span class="ln">787</span><span class="c">    <span class="s"> - </span>g (number) green
-</span></code><code id="L788"><span class="ln">788</span><span class="c">    <span class="s"> - </span>b (number) blue
-</span></code><code id="L789"><span class="ln">789</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
-</span></code><code id="L790"><span class="ln">790</span><span class="c">    \*/</span>
-</code><code id="L791"><span class="ln">791</span>    R.rgb<span class="s"> = </span>cacher(<b>function</b> (r, g, b) {
-</code><code id="L792"><span class="ln">792</span>        <b>return</b> <i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span> | b | (g &lt;&lt; <span class="d">8</span>) | (r &lt;&lt; <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
-</code><code id="L793"><span class="ln">793</span>    });
-</code><code id="L794"><span class="ln">794</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L795"><span class="ln">795</span><span class="c">    <span class="s"> * </span>Raphael.getColor
-</span></code><code id="L796"><span class="ln">796</span><span class="c">     [ method ]
-</span></code><code id="L797"><span class="ln">797</span><span class="c">     **
-</span></code><code id="L798"><span class="ln">798</span><span class="c">    <span class="s"> * </span>On each call returns next colour <b>in</b> the spectrum. To reset it back to red call @Raphael.getColor.reset
-</span></code><code id="L799"><span class="ln">799</span><span class="c">     > Parameters
-</span></code><code id="L800"><span class="ln">800</span><span class="c">    <span class="s"> - </span>value (number) #optional brightness, <b>default</b> is `<span class="d">0.75</span>`
+</code><code id="L745"><span class="ln">745</span>            <b>if</b> (rgb[<span class="d">5</span>]) {
+</code><code id="L746"><span class="ln">746</span>                values<span class="s"> = </span>rgb[<span class="d">5</span>].split(commaSpaces);
+</code><code id="L747"><span class="ln">747</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L748"><span class="ln">748</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(red *= <span class="d">2.55</span>);
+</code><code id="L749"><span class="ln">749</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L750"><span class="ln">750</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(green *= <span class="d">2.55</span>);
+</code><code id="L751"><span class="ln">751</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L752"><span class="ln">752</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(blue *= <span class="d">2.55</span>);
+</code><code id="L753"><span class="ln">753</span>                (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>)<span class="s"> &amp;&amp; </span>(red /= <span class="d">360</span>);
+</code><code id="L754"><span class="ln">754</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsba"</i><span class="s"> &amp;&amp; </span>(opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L755"><span class="ln">755</span>                values[<span class="d">3</span>]<span class="s"> &amp;&amp; </span>values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(opacity /= <span class="d">100</span>);
+</code><code id="L756"><span class="ln">756</span>                <b>return</b> R.hsb2rgb(red, green, blue, opacity);
+</code><code id="L757"><span class="ln">757</span>            }
+</code><code id="L758"><span class="ln">758</span>            <b>if</b> (rgb[<span class="d">6</span>]) {
+</code><code id="L759"><span class="ln">759</span>                values<span class="s"> = </span>rgb[<span class="d">6</span>].split(commaSpaces);
+</code><code id="L760"><span class="ln">760</span>                red<span class="s"> = </span>toFloat(values[<span class="d">0</span>]);
+</code><code id="L761"><span class="ln">761</span>                values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(red *= <span class="d">2.55</span>);
+</code><code id="L762"><span class="ln">762</span>                green<span class="s"> = </span>toFloat(values[<span class="d">1</span>]);
+</code><code id="L763"><span class="ln">763</span>                values[<span class="d">1</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(green *= <span class="d">2.55</span>);
+</code><code id="L764"><span class="ln">764</span>                blue<span class="s"> = </span>toFloat(values[<span class="d">2</span>]);
+</code><code id="L765"><span class="ln">765</span>                values[<span class="d">2</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(blue *= <span class="d">2.55</span>);
+</code><code id="L766"><span class="ln">766</span>                (values[<span class="d">0</span>].slice(-<span class="d">3</span>)<span class="s"> == </span><i>"deg"</i><span class="s"> || </span>values[<span class="d">0</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"\xb0"</i>)<span class="s"> &amp;&amp; </span>(red /= <span class="d">360</span>);
+</code><code id="L767"><span class="ln">767</span>                rgb[<span class="d">1</span>].toLowerCase().slice(<span class="d">0</span>, <span class="d">4</span>)<span class="s"> == </span><i>"hsla"</i><span class="s"> &amp;&amp; </span>(opacity<span class="s"> = </span>toFloat(values[<span class="d">3</span>]));
+</code><code id="L768"><span class="ln">768</span>                values[<span class="d">3</span>]<span class="s"> &amp;&amp; </span>values[<span class="d">3</span>].slice(-<span class="d">1</span>)<span class="s"> == </span><i>"%"</i><span class="s"> &amp;&amp; </span>(opacity /= <span class="d">100</span>);
+</code><code id="L769"><span class="ln">769</span>                <b>return</b> R.hsl2rgb(red, green, blue, opacity);
+</code><code id="L770"><span class="ln">770</span>            }
+</code><code id="L771"><span class="ln">771</span>            rgb<span class="s"> = </span>{r: red, g: green, b: blue};
+</code><code id="L772"><span class="ln">772</span>            rgb.hex<span class="s"> = </span><i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span><span class="s"> | </span>blue<span class="s"> | </span>(green &lt;&lt; <span class="d">8</span>)<span class="s"> | </span>(red &lt;&lt; <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
+</code><code id="L773"><span class="ln">773</span>            R.is(opacity, <i>"finite"</i>)<span class="s"> &amp;&amp; </span>(rgb.opacity<span class="s"> = </span>opacity);
+</code><code id="L774"><span class="ln">774</span>            <b>return</b> rgb;
+</code><code id="L775"><span class="ln">775</span>        }
+</code><code id="L776"><span class="ln">776</span>        <b>return</b> {r: -<span class="d">1</span>, g: -<span class="d">1</span>, b: -<span class="d">1</span>, hex: <i>"none"</i>, error: <span class="d">1</span>};
+</code><code id="L777"><span class="ln">777</span>    }, R);
+</code><code id="L778"><span class="ln">778</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L779"><span class="ln">779</span><span class="c">    <span class="s"> * </span>Raphael.hsb
+</span></code><code id="L780"><span class="ln">780</span><span class="c">     [ method ]
+</span></code><code id="L781"><span class="ln">781</span><span class="c">     **
+</span></code><code id="L782"><span class="ln">782</span><span class="c">    <span class="s"> * </span>Converts HSB values to hex representation of the colour.
+</span></code><code id="L783"><span class="ln">783</span><span class="c">     > Parameters
+</span></code><code id="L784"><span class="ln">784</span><span class="c">    <span class="s"> - </span>h (number) hue
+</span></code><code id="L785"><span class="ln">785</span><span class="c">    <span class="s"> - </span>s (number) saturation
+</span></code><code id="L786"><span class="ln">786</span><span class="c">    <span class="s"> - </span>b (number) value or brightness
+</span></code><code id="L787"><span class="ln">787</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L788"><span class="ln">788</span><span class="c">    \*/</span>
+</code><code id="L789"><span class="ln">789</span>    R.hsb<span class="s"> = </span>cacher(<b>function</b> (h, s, b) {
+</code><code id="L790"><span class="ln">790</span>        <b>return</b> R.hsb2rgb(h, s, b).hex;
+</code><code id="L791"><span class="ln">791</span>    });
+</code><code id="L792"><span class="ln">792</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L793"><span class="ln">793</span><span class="c">    <span class="s"> * </span>Raphael.hsl
+</span></code><code id="L794"><span class="ln">794</span><span class="c">     [ method ]
+</span></code><code id="L795"><span class="ln">795</span><span class="c">     **
+</span></code><code id="L796"><span class="ln">796</span><span class="c">    <span class="s"> * </span>Converts HSL values to hex representation of the colour.
+</span></code><code id="L797"><span class="ln">797</span><span class="c">     > Parameters
+</span></code><code id="L798"><span class="ln">798</span><span class="c">    <span class="s"> - </span>h (number) hue
+</span></code><code id="L799"><span class="ln">799</span><span class="c">    <span class="s"> - </span>s (number) saturation
+</span></code><code id="L800"><span class="ln">800</span><span class="c">    <span class="s"> - </span>l (number) luminosity
 </span></code><code id="L801"><span class="ln">801</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
 </span></code><code id="L802"><span class="ln">802</span><span class="c">    \*/</span>
-</code><code id="L803"><span class="ln">803</span>    R.getColor<span class="s"> = </span><b>function</b> (value) {
-</code><code id="L804"><span class="ln">804</span>        <b>var</b> start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> || </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: value<span class="s"> || </span><span class="d">.75</span>},
-</code><code id="L805"><span class="ln">805</span>            rgb<span class="s"> = </span><b>this</b>.hsb2rgb(start.h, start.s, start.b);
-</code><code id="L806"><span class="ln">806</span>        start.h += <span class="d">.075</span>;
-</code><code id="L807"><span class="ln">807</span>        <b>if</b> (start.h > <span class="d">1</span>) {
-</code><code id="L808"><span class="ln">808</span>            start.h<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L809"><span class="ln">809</span>            start.s -= <span class="d">.2</span>;
-</code><code id="L810"><span class="ln">810</span>            start.s &lt;= <span class="d">0</span> &amp;&amp; (<b>this</b>.getColor.start<span class="s"> = </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: start.b});
-</code><code id="L811"><span class="ln">811</span>        }
-</code><code id="L812"><span class="ln">812</span>        <b>return</b> rgb.hex;
-</code><code id="L813"><span class="ln">813</span>    };
-</code><code id="L814"><span class="ln">814</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L815"><span class="ln">815</span><span class="c">    <span class="s"> * </span>Raphael.getColor.reset
-</span></code><code id="L816"><span class="ln">816</span><span class="c">     [ method ]
-</span></code><code id="L817"><span class="ln">817</span><span class="c">     **
-</span></code><code id="L818"><span class="ln">818</span><span class="c">    <span class="s"> * </span>Resets spectrum position <b>for</b> @Raphael.getColor back to red.
-</span></code><code id="L819"><span class="ln">819</span><span class="c">    \*/</span>
-</code><code id="L820"><span class="ln">820</span>    R.getColor.reset<span class="s"> = </span><b>function</b> () {
-</code><code id="L821"><span class="ln">821</span>        <b>delete</b> <b>this</b>.start;
-</code><code id="L822"><span class="ln">822</span>    };
-</code><code id="L823"><span class="ln">823</span>
-</code><code id="L824"><span class="ln">824</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L825"><span class="ln">825</span><span class="c">    <span class="s"> * </span>Raphael.parsePathString
-</span></code><code id="L826"><span class="ln">826</span><span class="c">     [ method ]
-</span></code><code id="L827"><span class="ln">827</span><span class="c">     **
-</span></code><code id="L828"><span class="ln">828</span><span class="c">    <span class="s"> * </span>Utility method
-</span></code><code id="L829"><span class="ln">829</span><span class="c">     **
-</span></code><code id="L830"><span class="ln">830</span><span class="c">    <span class="s"> * </span>Parses given path string into an array of arrays of path segments.
-</span></code><code id="L831"><span class="ln">831</span><span class="c">     > Parameters
-</span></code><code id="L832"><span class="ln">832</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments (<b>in</b> the last <b>case</b> it will be returned stright away)
-</span></code><code id="L833"><span class="ln">833</span><span class="c">    <span class="s"> = </span>(array) array of segments.
-</span></code><code id="L834"><span class="ln">834</span><span class="c">    \*/</span>
-</code><code id="L835"><span class="ln">835</span>    R.parsePathString<span class="s"> = </span>cacher(<b>function</b> (pathString) {
-</code><code id="L836"><span class="ln">836</span>        <b>if</b> (!pathString) {
-</code><code id="L837"><span class="ln">837</span>            <b>return</b> <b>null</b>;
-</code><code id="L838"><span class="ln">838</span>        }
-</code><code id="L839"><span class="ln">839</span>        <b>var</b> paramCounts<span class="s"> = </span>{a: <span class="d">7</span>, c: <span class="d">6</span>, h: <span class="d">1</span>, l: <span class="d">2</span>, m: <span class="d">2</span>, q: <span class="d">4</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, v: <span class="d">1</span>, z: <span class="d">0</span>},
-</code><code id="L840"><span class="ln">840</span>            data<span class="s"> = </span>[];
-</code><code id="L841"><span class="ln">841</span>        <b>if</b> (R.is(pathString, array) &amp;&amp; R.is(pathString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
-</code><code id="L842"><span class="ln">842</span>            data<span class="s"> = </span>pathClone(pathString);
-</code><code id="L843"><span class="ln">843</span>        }
-</code><code id="L844"><span class="ln">844</span>        <b>if</b> (!data.length) {
-</code><code id="L845"><span class="ln">845</span>            Str(pathString).replace(pathCommand, <b>function</b> (a, b, c) {
-</code><code id="L846"><span class="ln">846</span>                <b>var</b> params<span class="s"> = </span>[],
-</code><code id="L847"><span class="ln">847</span>                    name<span class="s"> = </span>lowerCase.call(b);
-</code><code id="L848"><span class="ln">848</span>                c.replace(pathValues, <b>function</b> (a, b) {
-</code><code id="L849"><span class="ln">849</span>                    b &amp;&amp; params.push(+b);
-</code><code id="L850"><span class="ln">850</span>                });
-</code><code id="L851"><span class="ln">851</span>                <b>if</b> (name<span class="s"> == </span><i>"m"</i> &amp;&amp; params.length > <span class="d">2</span>) {
-</code><code id="L852"><span class="ln">852</span>                    data.push([b][concat](params.splice(<span class="d">0</span>, <span class="d">2</span>)));
-</code><code id="L853"><span class="ln">853</span>                    name<span class="s"> = </span><i>"l"</i>;
-</code><code id="L854"><span class="ln">854</span>                    b<span class="s"> = </span>b<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>;
-</code><code id="L855"><span class="ln">855</span>                }
-</code><code id="L856"><span class="ln">856</span>                <b>while</b> (params.length >= paramCounts[name]) {
-</code><code id="L857"><span class="ln">857</span>                    data.push([b][concat](params.splice(<span class="d">0</span>, paramCounts[name])));
-</code><code id="L858"><span class="ln">858</span>                    <b>if</b> (!paramCounts[name]) {
-</code><code id="L859"><span class="ln">859</span>                        <b>break</b>;
-</code><code id="L860"><span class="ln">860</span>                    }
-</code><code id="L861"><span class="ln">861</span>                }
-</code><code id="L862"><span class="ln">862</span>            });
-</code><code id="L863"><span class="ln">863</span>        }
-</code><code id="L864"><span class="ln">864</span>        data.toString<span class="s"> = </span>R._path2string;
-</code><code id="L865"><span class="ln">865</span>        <b>return</b> data;
-</code><code id="L866"><span class="ln">866</span>    });
-</code><code id="L867"><span class="ln">867</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L868"><span class="ln">868</span><span class="c">    <span class="s"> * </span>Raphael.parseTransformString
-</span></code><code id="L869"><span class="ln">869</span><span class="c">     [ method ]
-</span></code><code id="L870"><span class="ln">870</span><span class="c">     **
-</span></code><code id="L871"><span class="ln">871</span><span class="c">    <span class="s"> * </span>Utility method
-</span></code><code id="L872"><span class="ln">872</span><span class="c">     **
-</span></code><code id="L873"><span class="ln">873</span><span class="c">    <span class="s"> * </span>Parses given path string into an array of transformations.
-</span></code><code id="L874"><span class="ln">874</span><span class="c">     > Parameters
-</span></code><code id="L875"><span class="ln">875</span><span class="c">    <span class="s"> - </span>TString (string|array) transform string or array of transformations (<b>in</b> the last <b>case</b> it will be returned stright away)
-</span></code><code id="L876"><span class="ln">876</span><span class="c">    <span class="s"> = </span>(array) array of transformations.
-</span></code><code id="L877"><span class="ln">877</span><span class="c">    \*/</span>
-</code><code id="L878"><span class="ln">878</span>    R.parseTransformString<span class="s"> = </span>cacher(<b>function</b> (TString) {
-</code><code id="L879"><span class="ln">879</span>        <b>if</b> (!TString) {
-</code><code id="L880"><span class="ln">880</span>            <b>return</b> <b>null</b>;
-</code><code id="L881"><span class="ln">881</span>        }
-</code><code id="L882"><span class="ln">882</span>        <b>var</b> paramCounts<span class="s"> = </span>{r: <span class="d">3</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, m: <span class="d">6</span>},
-</code><code id="L883"><span class="ln">883</span>            data<span class="s"> = </span>[];
-</code><code id="L884"><span class="ln">884</span>        <b>if</b> (R.is(TString, array) &amp;&amp; R.is(TString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
-</code><code id="L885"><span class="ln">885</span>            data<span class="s"> = </span>pathClone(TString);
-</code><code id="L886"><span class="ln">886</span>        }
-</code><code id="L887"><span class="ln">887</span>        <b>if</b> (!data.length) {
-</code><code id="L888"><span class="ln">888</span>            Str(TString).replace(tCommand, <b>function</b> (a, b, c) {
-</code><code id="L889"><span class="ln">889</span>                <b>var</b> params<span class="s"> = </span>[],
-</code><code id="L890"><span class="ln">890</span>                    name<span class="s"> = </span>lowerCase.call(b);
-</code><code id="L891"><span class="ln">891</span>                c.replace(pathValues, <b>function</b> (a, b) {
-</code><code id="L892"><span class="ln">892</span>                    b &amp;&amp; params.push(+b);
-</code><code id="L893"><span class="ln">893</span>                });
-</code><code id="L894"><span class="ln">894</span>                data.push([name][concat](params));
-</code><code id="L895"><span class="ln">895</span>            });
-</code><code id="L896"><span class="ln">896</span>        }
-</code><code id="L897"><span class="ln">897</span>        data.toString<span class="s"> = </span>R._path2string;
-</code><code id="L898"><span class="ln">898</span>        <b>return</b> data;
-</code><code id="L899"><span class="ln">899</span>    });
-</code><code id="L900"><span class="ln">900</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L901"><span class="ln">901</span><span class="c">    <span class="s"> * </span>Raphael.findDotsAtSegment
-</span></code><code id="L902"><span class="ln">902</span><span class="c">     [ method ]
-</span></code><code id="L903"><span class="ln">903</span><span class="c">     **
-</span></code><code id="L904"><span class="ln">904</span><span class="c">    <span class="s"> * </span>Utility method
-</span></code><code id="L905"><span class="ln">905</span><span class="c">     **
-</span></code><code id="L906"><span class="ln">906</span><span class="c">    <span class="s"> * </span>Find dot coordinates on the given cubic bezier curve at the given t.
-</span></code><code id="L907"><span class="ln">907</span><span class="c">     > Parameters
-</span></code><code id="L908"><span class="ln">908</span><span class="c">    <span class="s"> - </span>p1x (number) x of the first point of the curve
-</span></code><code id="L909"><span class="ln">909</span><span class="c">    <span class="s"> - </span>p1y (number) y of the first point of the curve
-</span></code><code id="L910"><span class="ln">910</span><span class="c">    <span class="s"> - </span>c1x (number) x of the first anchor of the curve
-</span></code><code id="L911"><span class="ln">911</span><span class="c">    <span class="s"> - </span>c1y (number) y of the first anchor of the curve
-</span></code><code id="L912"><span class="ln">912</span><span class="c">    <span class="s"> - </span>c2x (number) x of the second anchor of the curve
-</span></code><code id="L913"><span class="ln">913</span><span class="c">    <span class="s"> - </span>c2y (number) y of the second anchor of the curve
-</span></code><code id="L914"><span class="ln">914</span><span class="c">    <span class="s"> - </span>p2x (number) x of the second point of the curve
-</span></code><code id="L915"><span class="ln">915</span><span class="c">    <span class="s"> - </span>p2y (number) y of the second point of the curve
-</span></code><code id="L916"><span class="ln">916</span><span class="c">    <span class="s"> - </span>t (number) position on the curve (<span class="d">0</span>.<span class="d">.1</span>)
-</span></code><code id="L917"><span class="ln">917</span><span class="c">    <span class="s"> = </span>(object) point information <b>in</b> format:
-</span></code><code id="L918"><span class="ln">918</span><span class="c">     | {
-</span></code><code id="L919"><span class="ln">919</span><span class="c">     |     x: <span class="c">// x coordinate of the point,</span>
-</span></code><code id="L920"><span class="ln">920</span><span class="c">     |     y: <span class="c">// y coordinate of the point,</span>
-</span></code><code id="L921"><span class="ln">921</span><span class="c">     |     m: {
-</span></code><code id="L922"><span class="ln">922</span><span class="c">     |         x: <span class="c">// x coordinate of the left anchor,</span>
-</span></code><code id="L923"><span class="ln">923</span><span class="c">     |         y: <span class="c">// y coordinate of the left anchor</span>
-</span></code><code id="L924"><span class="ln">924</span><span class="c">     |     },
-</span></code><code id="L925"><span class="ln">925</span><span class="c">     |     n: {
-</span></code><code id="L926"><span class="ln">926</span><span class="c">     |         x: <span class="c">// x coordinate of the right anchor,</span>
-</span></code><code id="L927"><span class="ln">927</span><span class="c">     |         y: <span class="c">// y coordinate of the right anchor</span>
-</span></code><code id="L928"><span class="ln">928</span><span class="c">     |     },
-</span></code><code id="L929"><span class="ln">929</span><span class="c">     |     start: {
-</span></code><code id="L930"><span class="ln">930</span><span class="c">     |         x: <span class="c">// x coordinate of the start of the curve,</span>
-</span></code><code id="L931"><span class="ln">931</span><span class="c">     |         y: <span class="c">// y coordinate of the start of the curve</span>
-</span></code><code id="L932"><span class="ln">932</span><span class="c">     |     },
-</span></code><code id="L933"><span class="ln">933</span><span class="c">     |     end: {
-</span></code><code id="L934"><span class="ln">934</span><span class="c">     |         x: <span class="c">// x coordinate of the end of the curve,</span>
-</span></code><code id="L935"><span class="ln">935</span><span class="c">     |         y: <span class="c">// y coordinate of the end of the curve</span>
-</span></code><code id="L936"><span class="ln">936</span><span class="c">     |     },
-</span></code><code id="L937"><span class="ln">937</span><span class="c">     |     alpha: <span class="c">// angle of the curve derivative at the point.</span>
-</span></code><code id="L938"><span class="ln">938</span><span class="c">     | }
-</span></code><code id="L939"><span class="ln">939</span><span class="c">    \*/</span>
-</code><code id="L940"><span class="ln">940</span>    R.findDotsAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
-</code><code id="L941"><span class="ln">941</span>        <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t,
-</code><code id="L942"><span class="ln">942</span>            x<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
-</code><code id="L943"><span class="ln">943</span>            y<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y,
-</code><code id="L944"><span class="ln">944</span>            mx<span class="s"> = </span>p1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x),
-</code><code id="L945"><span class="ln">945</span>            my<span class="s"> = </span>p1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y),
-</code><code id="L946"><span class="ln">946</span>            nx<span class="s"> = </span>c1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span>c1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
-</code><code id="L947"><span class="ln">947</span>            ny<span class="s"> = </span>c1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span>c1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y),
-</code><code id="L948"><span class="ln">948</span>            ax<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1x<span class="s"> + </span>t<span class="s"> * </span>c1x,
-</code><code id="L949"><span class="ln">949</span>            ay<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1y<span class="s"> + </span>t<span class="s"> * </span>c1y,
-</code><code id="L950"><span class="ln">950</span>            cx<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2x<span class="s"> + </span>t<span class="s"> * </span>p2x,
-</code><code id="L951"><span class="ln">951</span>            cy<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2y<span class="s"> + </span>t<span class="s"> * </span>p2y,
-</code><code id="L952"><span class="ln">952</span>            alpha<span class="s"> = </span>(<span class="d">90</span><span class="s"> - </span>math.atan2(mx<span class="s"> - </span>nx, my<span class="s"> - </span>ny)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI);
-</code><code id="L953"><span class="ln">953</span>        (mx > nx<span class="s"> || </span>my &lt; ny) &amp;&amp; (alpha += <span class="d">180</span>);
-</code><code id="L954"><span class="ln">954</span>        <b>return</b> {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}, alpha: alpha};
-</code><code id="L955"><span class="ln">955</span>    };
-</code><code id="L956"><span class="ln">956</span>    <b>var</b> pathDimensions<span class="s"> = </span>cacher(<b>function</b> (path) {
-</code><code id="L957"><span class="ln">957</span>        <b>if</b> (!path) {
-</code><code id="L958"><span class="ln">958</span>            <b>return</b> {x: <span class="d">0</span>, y: <span class="d">0</span>, width: <span class="d">0</span>, height: <span class="d">0</span>};
-</code><code id="L959"><span class="ln">959</span>        }
-</code><code id="L960"><span class="ln">960</span>        path<span class="s"> = </span>path2curve(path);
-</code><code id="L961"><span class="ln">961</span>        <b>var</b> x<span class="s"> = </span><span class="d">0</span>, 
-</code><code id="L962"><span class="ln">962</span>            y<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L963"><span class="ln">963</span>            X<span class="s"> = </span>[],
-</code><code id="L964"><span class="ln">964</span>            Y<span class="s"> = </span>[],
-</code><code id="L965"><span class="ln">965</span>            p;
-</code><code id="L966"><span class="ln">966</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i &lt; ii; i++) {
-</code><code id="L967"><span class="ln">967</span>            p<span class="s"> = </span>path[i];
-</code><code id="L968"><span class="ln">968</span>            <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
-</code><code id="L969"><span class="ln">969</span>                x<span class="s"> = </span>p[<span class="d">1</span>];
-</code><code id="L970"><span class="ln">970</span>                y<span class="s"> = </span>p[<span class="d">2</span>];
-</code><code id="L971"><span class="ln">971</span>                X.push(x);
-</code><code id="L972"><span class="ln">972</span>                Y.push(y);
-</code><code id="L973"><span class="ln">973</span>            } <b>else</b> {
-</code><code id="L974"><span class="ln">974</span>                <b>var</b> dim<span class="s"> = </span>curveDim(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
-</code><code id="L975"><span class="ln">975</span>                X<span class="s"> = </span>X[concat](dim.min.x, dim.max.x);
-</code><code id="L976"><span class="ln">976</span>                Y<span class="s"> = </span>Y[concat](dim.min.y, dim.max.y);
-</code><code id="L977"><span class="ln">977</span>                x<span class="s"> = </span>p[<span class="d">5</span>];
-</code><code id="L978"><span class="ln">978</span>                y<span class="s"> = </span>p[<span class="d">6</span>];
-</code><code id="L979"><span class="ln">979</span>            }
-</code><code id="L980"><span class="ln">980</span>        }
-</code><code id="L981"><span class="ln">981</span>        <b>var</b> xmin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, X),
-</code><code id="L982"><span class="ln">982</span>            ymin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, Y);
-</code><code id="L983"><span class="ln">983</span>        <b>return</b> {
-</code><code id="L984"><span class="ln">984</span>            x: xmin,
-</code><code id="L985"><span class="ln">985</span>            y: ymin,
-</code><code id="L986"><span class="ln">986</span>            width: mmax[apply](<span class="d">0</span>, X)<span class="s"> - </span>xmin,
-</code><code id="L987"><span class="ln">987</span>            height: mmax[apply](<span class="d">0</span>, Y)<span class="s"> - </span>ymin
-</code><code id="L988"><span class="ln">988</span>        };
-</code><code id="L989"><span class="ln">989</span>    }),
-</code><code id="L990"><span class="ln">990</span>        pathClone<span class="s"> = </span><b>function</b> (pathArray) {
-</code><code id="L991"><span class="ln">991</span>            <b>var</b> res<span class="s"> = </span>[];
-</code><code id="L992"><span class="ln">992</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray &amp;&amp; pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
-</code><code id="L993"><span class="ln">993</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
-</code><code id="L994"><span class="ln">994</span>            }
-</code><code id="L995"><span class="ln">995</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
-</code><code id="L996"><span class="ln">996</span>                res[i]<span class="s"> = </span>[];
-</code><code id="L997"><span class="ln">997</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>pathArray[i].length; j &lt; jj; j++) {
-</code><code id="L998"><span class="ln">998</span>                    res[i][j]<span class="s"> = </span>pathArray[i][j];
-</code><code id="L999"><span class="ln">999</span>                }
-</code><code id="L1000"><span class="ln">1000</span>            }
-</code><code id="L1001"><span class="ln">1001</span>            res.toString<span class="s"> = </span>R._path2string;
-</code><code id="L1002"><span class="ln">1002</span>            <b>return</b> res;
-</code><code id="L1003"><span class="ln">1003</span>        },
-</code><code id="L1004"><span class="ln">1004</span>        pathToRelative<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
-</code><code id="L1005"><span class="ln">1005</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray &amp;&amp; pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
-</code><code id="L1006"><span class="ln">1006</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
-</code><code id="L1007"><span class="ln">1007</span>            }
-</code><code id="L1008"><span class="ln">1008</span>            <b>var</b> res<span class="s"> = </span>[],
-</code><code id="L1009"><span class="ln">1009</span>                x<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1010"><span class="ln">1010</span>                y<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1011"><span class="ln">1011</span>                mx<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1012"><span class="ln">1012</span>                my<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1013"><span class="ln">1013</span>                start<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1014"><span class="ln">1014</span>            <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
-</code><code id="L1015"><span class="ln">1015</span>                x<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">1</span>];
-</code><code id="L1016"><span class="ln">1016</span>                y<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">2</span>];
-</code><code id="L1017"><span class="ln">1017</span>                mx<span class="s"> = </span>x;
-</code><code id="L1018"><span class="ln">1018</span>                my<span class="s"> = </span>y;
-</code><code id="L1019"><span class="ln">1019</span>                start++;
-</code><code id="L1020"><span class="ln">1020</span>                res.push([<i>"M"</i>, x, y]);
-</code><code id="L1021"><span class="ln">1021</span>            }
-</code><code id="L1022"><span class="ln">1022</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
-</code><code id="L1023"><span class="ln">1023</span>                <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
-</code><code id="L1024"><span class="ln">1024</span>                    pa<span class="s"> = </span>pathArray[i];
-</code><code id="L1025"><span class="ln">1025</span>                <b>if</b> (pa[<span class="d">0</span>] != lowerCase.call(pa[<span class="d">0</span>])) {
-</code><code id="L1026"><span class="ln">1026</span>                    r[<span class="d">0</span>]<span class="s"> = </span>lowerCase.call(pa[<span class="d">0</span>]);
-</code><code id="L1027"><span class="ln">1027</span>                    <b>switch</b> (r[<span class="d">0</span>]) {
-</code><code id="L1028"><span class="ln">1028</span>                        <b>case</b> <i>"a"</i>:
-</code><code id="L1029"><span class="ln">1029</span>                            r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
-</code><code id="L1030"><span class="ln">1030</span>                            r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
-</code><code id="L1031"><span class="ln">1031</span>                            r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
-</code><code id="L1032"><span class="ln">1032</span>                            r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
-</code><code id="L1033"><span class="ln">1033</span>                            r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
-</code><code id="L1034"><span class="ln">1034</span>                            r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> - </span>x).toFixed(<span class="d">3</span>);
-</code><code id="L1035"><span class="ln">1035</span>                            r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
-</code><code id="L1036"><span class="ln">1036</span>                            <b>break</b>;
-</code><code id="L1037"><span class="ln">1037</span>                        <b>case</b> <i>"v"</i>:
-</code><code id="L1038"><span class="ln">1038</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+(pa[<span class="d">1</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
-</code><code id="L1039"><span class="ln">1039</span>                            <b>break</b>;
-</code><code id="L1040"><span class="ln">1040</span>                        <b>case</b> <i>"m"</i>:
-</code><code id="L1041"><span class="ln">1041</span>                            mx<span class="s"> = </span>pa[<span class="d">1</span>];
-</code><code id="L1042"><span class="ln">1042</span>                            my<span class="s"> = </span>pa[<span class="d">2</span>];
-</code><code id="L1043"><span class="ln">1043</span>                        <b>default</b>:
-</code><code id="L1044"><span class="ln">1044</span>                            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j &lt; jj; j++) {
-</code><code id="L1045"><span class="ln">1045</span>                                r[j]<span class="s"> = </span>+(pa[j]<span class="s"> - </span>((j % <span class="d">2</span>) ? x : y)).toFixed(<span class="d">3</span>);
-</code><code id="L1046"><span class="ln">1046</span>                            }
-</code><code id="L1047"><span class="ln">1047</span>                    }
-</code><code id="L1048"><span class="ln">1048</span>                } <b>else</b> {
-</code><code id="L1049"><span class="ln">1049</span>                    r<span class="s"> = </span>res[i]<span class="s"> = </span>[];
-</code><code id="L1050"><span class="ln">1050</span>                    <b>if</b> (pa[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i>) {
-</code><code id="L1051"><span class="ln">1051</span>                        mx<span class="s"> = </span>pa[<span class="d">1</span>]<span class="s"> + </span>x;
-</code><code id="L1052"><span class="ln">1052</span>                        my<span class="s"> = </span>pa[<span class="d">2</span>]<span class="s"> + </span>y;
-</code><code id="L1053"><span class="ln">1053</span>                    }
-</code><code id="L1054"><span class="ln">1054</span>                    <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k &lt; kk; k++) {
-</code><code id="L1055"><span class="ln">1055</span>                        res[i][k]<span class="s"> = </span>pa[k];
-</code><code id="L1056"><span class="ln">1056</span>                    }
-</code><code id="L1057"><span class="ln">1057</span>                }
-</code><code id="L1058"><span class="ln">1058</span>                <b>var</b> len<span class="s"> = </span>res[i].length;
-</code><code id="L1059"><span class="ln">1059</span>                <b>switch</b> (res[i][<span class="d">0</span>]) {
-</code><code id="L1060"><span class="ln">1060</span>                    <b>case</b> <i>"z"</i>:
-</code><code id="L1061"><span class="ln">1061</span>                        x<span class="s"> = </span>mx;
-</code><code id="L1062"><span class="ln">1062</span>                        y<span class="s"> = </span>my;
-</code><code id="L1063"><span class="ln">1063</span>                        <b>break</b>;
-</code><code id="L1064"><span class="ln">1064</span>                    <b>case</b> <i>"h"</i>:
-</code><code id="L1065"><span class="ln">1065</span>                        x += +res[i][len<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1066"><span class="ln">1066</span>                        <b>break</b>;
-</code><code id="L1067"><span class="ln">1067</span>                    <b>case</b> <i>"v"</i>:
-</code><code id="L1068"><span class="ln">1068</span>                        y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1069"><span class="ln">1069</span>                        <b>break</b>;
-</code><code id="L1070"><span class="ln">1070</span>                    <b>default</b>:
-</code><code id="L1071"><span class="ln">1071</span>                        x += +res[i][len<span class="s"> - </span><span class="d">2</span>];
-</code><code id="L1072"><span class="ln">1072</span>                        y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1073"><span class="ln">1073</span>                }
-</code><code id="L1074"><span class="ln">1074</span>            }
-</code><code id="L1075"><span class="ln">1075</span>            res.toString<span class="s"> = </span>R._path2string;
-</code><code id="L1076"><span class="ln">1076</span>            <b>return</b> res;
-</code><code id="L1077"><span class="ln">1077</span>        }, <span class="d">0</span>, pathClone),
-</code><code id="L1078"><span class="ln">1078</span>        pathToAbsolute<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
-</code><code id="L1079"><span class="ln">1079</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray &amp;&amp; pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
-</code><code id="L1080"><span class="ln">1080</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
-</code><code id="L1081"><span class="ln">1081</span>            }
-</code><code id="L1082"><span class="ln">1082</span>            <b>var</b> res<span class="s"> = </span>[],
-</code><code id="L1083"><span class="ln">1083</span>                x<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1084"><span class="ln">1084</span>                y<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1085"><span class="ln">1085</span>                mx<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1086"><span class="ln">1086</span>                my<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1087"><span class="ln">1087</span>                start<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1088"><span class="ln">1088</span>            <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
-</code><code id="L1089"><span class="ln">1089</span>                x<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">1</span>];
-</code><code id="L1090"><span class="ln">1090</span>                y<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">2</span>];
-</code><code id="L1091"><span class="ln">1091</span>                mx<span class="s"> = </span>x;
-</code><code id="L1092"><span class="ln">1092</span>                my<span class="s"> = </span>y;
-</code><code id="L1093"><span class="ln">1093</span>                start++;
-</code><code id="L1094"><span class="ln">1094</span>                res[<span class="d">0</span>]<span class="s"> = </span>[<i>"M"</i>, x, y];
-</code><code id="L1095"><span class="ln">1095</span>            }
-</code><code id="L1096"><span class="ln">1096</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
-</code><code id="L1097"><span class="ln">1097</span>                <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
-</code><code id="L1098"><span class="ln">1098</span>                    pa<span class="s"> = </span>pathArray[i];
-</code><code id="L1099"><span class="ln">1099</span>                <b>if</b> (pa[<span class="d">0</span>] != upperCase.call(pa[<span class="d">0</span>])) {
-</code><code id="L1100"><span class="ln">1100</span>                    r[<span class="d">0</span>]<span class="s"> = </span>upperCase.call(pa[<span class="d">0</span>]);
-</code><code id="L1101"><span class="ln">1101</span>                    <b>switch</b> (r[<span class="d">0</span>]) {
-</code><code id="L1102"><span class="ln">1102</span>                        <b>case</b> <i>"A"</i>:
-</code><code id="L1103"><span class="ln">1103</span>                            r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
-</code><code id="L1104"><span class="ln">1104</span>                            r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
-</code><code id="L1105"><span class="ln">1105</span>                            r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
-</code><code id="L1106"><span class="ln">1106</span>                            r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
-</code><code id="L1107"><span class="ln">1107</span>                            r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
-</code><code id="L1108"><span class="ln">1108</span>                            r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> + </span>x);
-</code><code id="L1109"><span class="ln">1109</span>                            r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> + </span>y);
-</code><code id="L1110"><span class="ln">1110</span>                            <b>break</b>;
-</code><code id="L1111"><span class="ln">1111</span>                        <b>case</b> <i>"V"</i>:
-</code><code id="L1112"><span class="ln">1112</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>y;
-</code><code id="L1113"><span class="ln">1113</span>                            <b>break</b>;
-</code><code id="L1114"><span class="ln">1114</span>                        <b>case</b> <i>"H"</i>:
-</code><code id="L1115"><span class="ln">1115</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
-</code><code id="L1116"><span class="ln">1116</span>                            <b>break</b>;
-</code><code id="L1117"><span class="ln">1117</span>                        <b>case</b> <i>"M"</i>:
-</code><code id="L1118"><span class="ln">1118</span>                            mx<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
-</code><code id="L1119"><span class="ln">1119</span>                            my<span class="s"> = </span>+pa[<span class="d">2</span>]<span class="s"> + </span>y;
-</code><code id="L1120"><span class="ln">1120</span>                        <b>default</b>:
-</code><code id="L1121"><span class="ln">1121</span>                            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j &lt; jj; j++) {
-</code><code id="L1122"><span class="ln">1122</span>                                r[j]<span class="s"> = </span>+pa[j]<span class="s"> + </span>((j % <span class="d">2</span>) ? x : y);
-</code><code id="L1123"><span class="ln">1123</span>                            }
-</code><code id="L1124"><span class="ln">1124</span>                    }
-</code><code id="L1125"><span class="ln">1125</span>                } <b>else</b> {
-</code><code id="L1126"><span class="ln">1126</span>                    <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k &lt; kk; k++) {
-</code><code id="L1127"><span class="ln">1127</span>                        res[i][k]<span class="s"> = </span>pa[k];
-</code><code id="L1128"><span class="ln">1128</span>                    }
-</code><code id="L1129"><span class="ln">1129</span>                }
-</code><code id="L1130"><span class="ln">1130</span>                <b>switch</b> (r[<span class="d">0</span>]) {
-</code><code id="L1131"><span class="ln">1131</span>                    <b>case</b> <i>"Z"</i>:
-</code><code id="L1132"><span class="ln">1132</span>                        x<span class="s"> = </span>mx;
-</code><code id="L1133"><span class="ln">1133</span>                        y<span class="s"> = </span>my;
-</code><code id="L1134"><span class="ln">1134</span>                        <b>break</b>;
-</code><code id="L1135"><span class="ln">1135</span>                    <b>case</b> <i>"H"</i>:
-</code><code id="L1136"><span class="ln">1136</span>                        x<span class="s"> = </span>r[<span class="d">1</span>];
-</code><code id="L1137"><span class="ln">1137</span>                        <b>break</b>;
-</code><code id="L1138"><span class="ln">1138</span>                    <b>case</b> <i>"V"</i>:
-</code><code id="L1139"><span class="ln">1139</span>                        y<span class="s"> = </span>r[<span class="d">1</span>];
-</code><code id="L1140"><span class="ln">1140</span>                        <b>break</b>;
-</code><code id="L1141"><span class="ln">1141</span>                    <b>case</b> <i>"M"</i>:
-</code><code id="L1142"><span class="ln">1142</span>                        mx<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
-</code><code id="L1143"><span class="ln">1143</span>                        my<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1144"><span class="ln">1144</span>                    <b>default</b>:
-</code><code id="L1145"><span class="ln">1145</span>                        x<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
-</code><code id="L1146"><span class="ln">1146</span>                        y<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1147"><span class="ln">1147</span>                }
-</code><code id="L1148"><span class="ln">1148</span>            }
-</code><code id="L1149"><span class="ln">1149</span>            res.toString<span class="s"> = </span>R._path2string;
-</code><code id="L1150"><span class="ln">1150</span>            <b>return</b> res;
-</code><code id="L1151"><span class="ln">1151</span>        }, <b>null</b>, pathClone),
-</code><code id="L1152"><span class="ln">1152</span>        l2c<span class="s"> = </span><b>function</b> (x1, y1, x2, y2) {
-</code><code id="L1153"><span class="ln">1153</span>            <b>return</b> [x1, y1, x2, y2, x2, y2];
-</code><code id="L1154"><span class="ln">1154</span>        },
-</code><code id="L1155"><span class="ln">1155</span>        q2c<span class="s"> = </span><b>function</b> (x1, y1, ax, ay, x2, y2) {
-</code><code id="L1156"><span class="ln">1156</span>            <b>var</b> _13<span class="s"> = </span><span class="d">1</span><span class="s"> / </span><span class="d">3</span>,
-</code><code id="L1157"><span class="ln">1157</span>                _23<span class="s"> = </span><span class="d">2</span><span class="s"> / </span><span class="d">3</span>;
-</code><code id="L1158"><span class="ln">1158</span>            <b>return</b> [
-</code><code id="L1159"><span class="ln">1159</span>                    _13<span class="s"> * </span>x1<span class="s"> + </span>_23<span class="s"> * </span>ax,
-</code><code id="L1160"><span class="ln">1160</span>                    _13<span class="s"> * </span>y1<span class="s"> + </span>_23<span class="s"> * </span>ay,
-</code><code id="L1161"><span class="ln">1161</span>                    _13<span class="s"> * </span>x2<span class="s"> + </span>_23<span class="s"> * </span>ax,
-</code><code id="L1162"><span class="ln">1162</span>                    _13<span class="s"> * </span>y2<span class="s"> + </span>_23<span class="s"> * </span>ay,
-</code><code id="L1163"><span class="ln">1163</span>                    x2,
-</code><code id="L1164"><span class="ln">1164</span>                    y2
-</code><code id="L1165"><span class="ln">1165</span>                ];
-</code><code id="L1166"><span class="ln">1166</span>        },
-</code><code id="L1167"><span class="ln">1167</span>        a2c<span class="s"> = </span><b>function</b> (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
-</code><code id="L1168"><span class="ln">1168</span>            <span class="c">// <b>for</b> more information of where <b>this</b> math came from visit:</span>
-</code><code id="L1169"><span class="ln">1169</span>            <span class="c">// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes</span>
-</code><code id="L1170"><span class="ln">1170</span>            <b>var</b> _120<span class="s"> = </span>PI<span class="s"> * </span><span class="d">120</span><span class="s"> / </span><span class="d">180</span>,
-</code><code id="L1171"><span class="ln">1171</span>                rad<span class="s"> = </span>PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>(+angle<span class="s"> || </span><span class="d">0</span>),
-</code><code id="L1172"><span class="ln">1172</span>                res<span class="s"> = </span>[],
-</code><code id="L1173"><span class="ln">1173</span>                xy,
-</code><code id="L1174"><span class="ln">1174</span>                rotate<span class="s"> = </span>cacher(<b>function</b> (x, y, rad) {
-</code><code id="L1175"><span class="ln">1175</span>                    <b>var</b> X<span class="s"> = </span>x<span class="s"> * </span>math.cos(rad)<span class="s"> - </span>y<span class="s"> * </span>math.sin(rad),
-</code><code id="L1176"><span class="ln">1176</span>                        Y<span class="s"> = </span>x<span class="s"> * </span>math.sin(rad)<span class="s"> + </span>y<span class="s"> * </span>math.cos(rad);
-</code><code id="L1177"><span class="ln">1177</span>                    <b>return</b> {x: X, y: Y};
-</code><code id="L1178"><span class="ln">1178</span>                });
-</code><code id="L1179"><span class="ln">1179</span>            <b>if</b> (!recursive) {
-</code><code id="L1180"><span class="ln">1180</span>                xy<span class="s"> = </span>rotate(x1, y1, -rad);
-</code><code id="L1181"><span class="ln">1181</span>                x1<span class="s"> = </span>xy.x;
-</code><code id="L1182"><span class="ln">1182</span>                y1<span class="s"> = </span>xy.y;
-</code><code id="L1183"><span class="ln">1183</span>                xy<span class="s"> = </span>rotate(x2, y2, -rad);
-</code><code id="L1184"><span class="ln">1184</span>                x2<span class="s"> = </span>xy.x;
-</code><code id="L1185"><span class="ln">1185</span>                y2<span class="s"> = </span>xy.y;
-</code><code id="L1186"><span class="ln">1186</span>                <b>var</b> cos<span class="s"> = </span>math.cos(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
-</code><code id="L1187"><span class="ln">1187</span>                    sin<span class="s"> = </span>math.sin(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
-</code><code id="L1188"><span class="ln">1188</span>                    x<span class="s"> = </span>(x1<span class="s"> - </span>x2)<span class="s"> / </span><span class="d">2</span>,
-</code><code id="L1189"><span class="ln">1189</span>                    y<span class="s"> = </span>(y1<span class="s"> - </span>y2)<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L1190"><span class="ln">1190</span>                <b>var</b> h<span class="s"> = </span>(x<span class="s"> * </span>x)<span class="s"> / </span>(rx<span class="s"> * </span>rx)<span class="s"> + </span>(y<span class="s"> * </span>y)<span class="s"> / </span>(ry<span class="s"> * </span>ry);
-</code><code id="L1191"><span class="ln">1191</span>                <b>if</b> (h > <span class="d">1</span>) {
-</code><code id="L1192"><span class="ln">1192</span>                    h<span class="s"> = </span>math.sqrt(h);
-</code><code id="L1193"><span class="ln">1193</span>                    rx<span class="s"> = </span>h<span class="s"> * </span>rx;
-</code><code id="L1194"><span class="ln">1194</span>                    ry<span class="s"> = </span>h<span class="s"> * </span>ry;
-</code><code id="L1195"><span class="ln">1195</span>                }
-</code><code id="L1196"><span class="ln">1196</span>                <b>var</b> rx2<span class="s"> = </span>rx<span class="s"> * </span>rx,
-</code><code id="L1197"><span class="ln">1197</span>                    ry2<span class="s"> = </span>ry<span class="s"> * </span>ry,
-</code><code id="L1198"><span class="ln">1198</span>                    k<span class="s"> = </span>(large_arc_flag<span class="s"> == </span>sweep_flag ? -<span class="d">1</span> : <span class="d">1</span>) *
-</code><code id="L1199"><span class="ln">1199</span>                        math.sqrt(abs((rx2<span class="s"> * </span>ry2<span class="s"> - </span>rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> - </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x)<span class="s"> / </span>(rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> + </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x))),
-</code><code id="L1200"><span class="ln">1200</span>                    cx<span class="s"> = </span>k<span class="s"> * </span>rx<span class="s"> * </span>y<span class="s"> / </span>ry<span class="s"> + </span>(x1<span class="s"> + </span>x2)<span class="s"> / </span><span class="d">2</span>,
-</code><code id="L1201"><span class="ln">1201</span>                    cy<span class="s"> = </span>k<span class="s"> * </span>-ry<span class="s"> * </span>x<span class="s"> / </span>rx<span class="s"> + </span>(y1<span class="s"> + </span>y2)<span class="s"> / </span><span class="d">2</span>,
-</code><code id="L1202"><span class="ln">1202</span>                    f1<span class="s"> = </span>math.asin(((y1<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>)),
-</code><code id="L1203"><span class="ln">1203</span>                    f2<span class="s"> = </span>math.asin(((y2<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>));
-</code><code id="L1204"><span class="ln">1204</span>
-</code><code id="L1205"><span class="ln">1205</span>                f1<span class="s"> = </span>x1 &lt; cx ? PI<span class="s"> - </span>f1 : f1;
-</code><code id="L1206"><span class="ln">1206</span>                f2<span class="s"> = </span>x2 &lt; cx ? PI<span class="s"> - </span>f2 : f2;
-</code><code id="L1207"><span class="ln">1207</span>                f1 &lt; <span class="d">0</span> &amp;&amp; (f1<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f1);
-</code><code id="L1208"><span class="ln">1208</span>                f2 &lt; <span class="d">0</span> &amp;&amp; (f2<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f2);
-</code><code id="L1209"><span class="ln">1209</span>                <b>if</b> (sweep_flag &amp;&amp; f1 > f2) {
-</code><code id="L1210"><span class="ln">1210</span>                    f1<span class="s"> = </span>f1<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
-</code><code id="L1211"><span class="ln">1211</span>                }
-</code><code id="L1212"><span class="ln">1212</span>                <b>if</b> (!sweep_flag &amp;&amp; f2 > f1) {
-</code><code id="L1213"><span class="ln">1213</span>                    f2<span class="s"> = </span>f2<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
-</code><code id="L1214"><span class="ln">1214</span>                }
-</code><code id="L1215"><span class="ln">1215</span>            } <b>else</b> {
-</code><code id="L1216"><span class="ln">1216</span>                f1<span class="s"> = </span>recursive[<span class="d">0</span>];
-</code><code id="L1217"><span class="ln">1217</span>                f2<span class="s"> = </span>recursive[<span class="d">1</span>];
-</code><code id="L1218"><span class="ln">1218</span>                cx<span class="s"> = </span>recursive[<span class="d">2</span>];
-</code><code id="L1219"><span class="ln">1219</span>                cy<span class="s"> = </span>recursive[<span class="d">3</span>];
-</code><code id="L1220"><span class="ln">1220</span>            }
-</code><code id="L1221"><span class="ln">1221</span>            <b>var</b> df<span class="s"> = </span>f2<span class="s"> - </span>f1;
-</code><code id="L1222"><span class="ln">1222</span>            <b>if</b> (abs(df) > _120) {
-</code><code id="L1223"><span class="ln">1223</span>                <b>var</b> f2old<span class="s"> = </span>f2,
-</code><code id="L1224"><span class="ln">1224</span>                    x2old<span class="s"> = </span>x2,
-</code><code id="L1225"><span class="ln">1225</span>                    y2old<span class="s"> = </span>y2;
-</code><code id="L1226"><span class="ln">1226</span>                f2<span class="s"> = </span>f1<span class="s"> + </span>_120<span class="s"> * </span>(sweep_flag &amp;&amp; f2 > f1 ? <span class="d">1</span> : -<span class="d">1</span>);
-</code><code id="L1227"><span class="ln">1227</span>                x2<span class="s"> = </span>cx<span class="s"> + </span>rx<span class="s"> * </span>math.cos(f2);
-</code><code id="L1228"><span class="ln">1228</span>                y2<span class="s"> = </span>cy<span class="s"> + </span>ry<span class="s"> * </span>math.sin(f2);
-</code><code id="L1229"><span class="ln">1229</span>                res<span class="s"> = </span>a2c(x2, y2, rx, ry, angle, <span class="d">0</span>, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
-</code><code id="L1230"><span class="ln">1230</span>            }
-</code><code id="L1231"><span class="ln">1231</span>            df<span class="s"> = </span>f2<span class="s"> - </span>f1;
-</code><code id="L1232"><span class="ln">1232</span>            <b>var</b> c1<span class="s"> = </span>math.cos(f1),
-</code><code id="L1233"><span class="ln">1233</span>                s1<span class="s"> = </span>math.sin(f1),
-</code><code id="L1234"><span class="ln">1234</span>                c2<span class="s"> = </span>math.cos(f2),
-</code><code id="L1235"><span class="ln">1235</span>                s2<span class="s"> = </span>math.sin(f2),
-</code><code id="L1236"><span class="ln">1236</span>                t<span class="s"> = </span>math.tan(df<span class="s"> / </span><span class="d">4</span>),
-</code><code id="L1237"><span class="ln">1237</span>                hx<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>rx<span class="s"> * </span>t,
-</code><code id="L1238"><span class="ln">1238</span>                hy<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>ry<span class="s"> * </span>t,
-</code><code id="L1239"><span class="ln">1239</span>                m1<span class="s"> = </span>[x1, y1],
-</code><code id="L1240"><span class="ln">1240</span>                m2<span class="s"> = </span>[x1<span class="s"> + </span>hx<span class="s"> * </span>s1, y1<span class="s"> - </span>hy<span class="s"> * </span>c1],
-</code><code id="L1241"><span class="ln">1241</span>                m3<span class="s"> = </span>[x2<span class="s"> + </span>hx<span class="s"> * </span>s2, y2<span class="s"> - </span>hy<span class="s"> * </span>c2],
-</code><code id="L1242"><span class="ln">1242</span>                m4<span class="s"> = </span>[x2, y2];
-</code><code id="L1243"><span class="ln">1243</span>            m2[<span class="d">0</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">0</span>]<span class="s"> - </span>m2[<span class="d">0</span>];
-</code><code id="L1244"><span class="ln">1244</span>            m2[<span class="d">1</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">1</span>]<span class="s"> - </span>m2[<span class="d">1</span>];
-</code><code id="L1245"><span class="ln">1245</span>            <b>if</b> (recursive) {
-</code><code id="L1246"><span class="ln">1246</span>                <b>return</b> [m2, m3, m4][concat](res);
-</code><code id="L1247"><span class="ln">1247</span>            } <b>else</b> {
-</code><code id="L1248"><span class="ln">1248</span>                res<span class="s"> = </span>[m2, m3, m4][concat](res).join().split(<i>","</i>);
-</code><code id="L1249"><span class="ln">1249</span>                <b>var</b> newres<span class="s"> = </span>[];
-</code><code id="L1250"><span class="ln">1250</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>res.length; i &lt; ii; i++) {
-</code><code id="L1251"><span class="ln">1251</span>                    newres[i]<span class="s"> = </span>i % <span class="d">2</span> ? rotate(res[i<span class="s"> - </span><span class="d">1</span>], res[i], rad).y : rotate(res[i], res[i<span class="s"> + </span><span class="d">1</span>], rad).x;
-</code><code id="L1252"><span class="ln">1252</span>                }
-</code><code id="L1253"><span class="ln">1253</span>                <b>return</b> newres;
-</code><code id="L1254"><span class="ln">1254</span>            }
-</code><code id="L1255"><span class="ln">1255</span>        },
-</code><code id="L1256"><span class="ln">1256</span>        findDotAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
-</code><code id="L1257"><span class="ln">1257</span>            <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t;
-</code><code id="L1258"><span class="ln">1258</span>            <b>return</b> {
-</code><code id="L1259"><span class="ln">1259</span>                x: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
-</code><code id="L1260"><span class="ln">1260</span>                y: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y
-</code><code id="L1261"><span class="ln">1261</span>            };
-</code><code id="L1262"><span class="ln">1262</span>        },
-</code><code id="L1263"><span class="ln">1263</span>        curveDim<span class="s"> = </span>cacher(<b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
-</code><code id="L1264"><span class="ln">1264</span>            <b>var</b> a<span class="s"> = </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x)<span class="s"> - </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
-</code><code id="L1265"><span class="ln">1265</span>                b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2x<span class="s"> - </span>c1x),
-</code><code id="L1266"><span class="ln">1266</span>                c<span class="s"> = </span>p1x<span class="s"> - </span>c1x,
-</code><code id="L1267"><span class="ln">1267</span>                t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
-</code><code id="L1268"><span class="ln">1268</span>                t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
-</code><code id="L1269"><span class="ln">1269</span>                y<span class="s"> = </span>[p1y, p2y],
-</code><code id="L1270"><span class="ln">1270</span>                x<span class="s"> = </span>[p1x, p2x],
-</code><code id="L1271"><span class="ln">1271</span>                dot;
-</code><code id="L1272"><span class="ln">1272</span>            abs(t1) > <i>"<span class="d">1e12</span>"</i> &amp;&amp; (t1<span class="s"> = </span><span class="d">.5</span>);
-</code><code id="L1273"><span class="ln">1273</span>            abs(t2) > <i>"<span class="d">1e12</span>"</i> &amp;&amp; (t2<span class="s"> = </span><span class="d">.5</span>);
-</code><code id="L1274"><span class="ln">1274</span>            <b>if</b> (t1 > <span class="d">0</span> &amp;&amp; t1 &lt; <span class="d">1</span>) {
-</code><code id="L1275"><span class="ln">1275</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
-</code><code id="L1276"><span class="ln">1276</span>                x.push(dot.x);
-</code><code id="L1277"><span class="ln">1277</span>                y.push(dot.y);
-</code><code id="L1278"><span class="ln">1278</span>            }
-</code><code id="L1279"><span class="ln">1279</span>            <b>if</b> (t2 > <span class="d">0</span> &amp;&amp; t2 &lt; <span class="d">1</span>) {
-</code><code id="L1280"><span class="ln">1280</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
-</code><code id="L1281"><span class="ln">1281</span>                x.push(dot.x);
-</code><code id="L1282"><span class="ln">1282</span>                y.push(dot.y);
-</code><code id="L1283"><span class="ln">1283</span>            }
-</code><code id="L1284"><span class="ln">1284</span>            a<span class="s"> = </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y)<span class="s"> - </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y);
-</code><code id="L1285"><span class="ln">1285</span>            b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2y<span class="s"> - </span>c1y);
-</code><code id="L1286"><span class="ln">1286</span>            c<span class="s"> = </span>p1y<span class="s"> - </span>c1y;
-</code><code id="L1287"><span class="ln">1287</span>            t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
-</code><code id="L1288"><span class="ln">1288</span>            t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
-</code><code id="L1289"><span class="ln">1289</span>            abs(t1) > <i>"<span class="d">1e12</span>"</i> &amp;&amp; (t1<span class="s"> = </span><span class="d">.5</span>);
-</code><code id="L1290"><span class="ln">1290</span>            abs(t2) > <i>"<span class="d">1e12</span>"</i> &amp;&amp; (t2<span class="s"> = </span><span class="d">.5</span>);
-</code><code id="L1291"><span class="ln">1291</span>            <b>if</b> (t1 > <span class="d">0</span> &amp;&amp; t1 &lt; <span class="d">1</span>) {
-</code><code id="L1292"><span class="ln">1292</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
-</code><code id="L1293"><span class="ln">1293</span>                x.push(dot.x);
-</code><code id="L1294"><span class="ln">1294</span>                y.push(dot.y);
-</code><code id="L1295"><span class="ln">1295</span>            }
-</code><code id="L1296"><span class="ln">1296</span>            <b>if</b> (t2 > <span class="d">0</span> &amp;&amp; t2 &lt; <span class="d">1</span>) {
-</code><code id="L1297"><span class="ln">1297</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
-</code><code id="L1298"><span class="ln">1298</span>                x.push(dot.x);
-</code><code id="L1299"><span class="ln">1299</span>                y.push(dot.y);
-</code><code id="L1300"><span class="ln">1300</span>            }
-</code><code id="L1301"><span class="ln">1301</span>            <b>return</b> {
-</code><code id="L1302"><span class="ln">1302</span>                min: {x: mmin[apply](<span class="d">0</span>, x), y: mmin[apply](<span class="d">0</span>, y)},
-</code><code id="L1303"><span class="ln">1303</span>                max: {x: mmax[apply](<span class="d">0</span>, x), y: mmax[apply](<span class="d">0</span>, y)}
-</code><code id="L1304"><span class="ln">1304</span>            };
-</code><code id="L1305"><span class="ln">1305</span>        }),
-</code><code id="L1306"><span class="ln">1306</span>        path2curve<span class="s"> = </span>cacher(<b>function</b> (path, path2) {
-</code><code id="L1307"><span class="ln">1307</span>            <b>var</b> p<span class="s"> = </span>pathToAbsolute(path),
-</code><code id="L1308"><span class="ln">1308</span>                p2<span class="s"> = </span>path2 &amp;&amp; pathToAbsolute(path2),
-</code><code id="L1309"><span class="ln">1309</span>                attrs<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
-</code><code id="L1310"><span class="ln">1310</span>                attrs2<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
-</code><code id="L1311"><span class="ln">1311</span>                processPath<span class="s"> = </span><b>function</b> (path, d) {
-</code><code id="L1312"><span class="ln">1312</span>                    <b>var</b> nx, ny;
-</code><code id="L1313"><span class="ln">1313</span>                    <b>if</b> (!path) {
-</code><code id="L1314"><span class="ln">1314</span>                        <b>return</b> [<i>"C"</i>, d.x, d.y, d.x, d.y, d.x, d.y];
-</code><code id="L1315"><span class="ln">1315</span>                    }
-</code><code id="L1316"><span class="ln">1316</span>                    !(path[<span class="d">0</span>] <b>in</b> {T:<span class="d">1</span>, Q:<span class="d">1</span>}) &amp;&amp; (d.qx<span class="s"> = </span>d.qy<span class="s"> = </span><b>null</b>);
-</code><code id="L1317"><span class="ln">1317</span>                    <b>switch</b> (path[<span class="d">0</span>]) {
-</code><code id="L1318"><span class="ln">1318</span>                        <b>case</b> <i>"M"</i>:
-</code><code id="L1319"><span class="ln">1319</span>                            d.X<span class="s"> = </span>path[<span class="d">1</span>];
-</code><code id="L1320"><span class="ln">1320</span>                            d.Y<span class="s"> = </span>path[<span class="d">2</span>];
-</code><code id="L1321"><span class="ln">1321</span>                            <b>break</b>;
-</code><code id="L1322"><span class="ln">1322</span>                        <b>case</b> <i>"A"</i>:
-</code><code id="L1323"><span class="ln">1323</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](a2c[apply](<span class="d">0</span>, [d.x, d.y][concat](path.slice(<span class="d">1</span>))));
-</code><code id="L1324"><span class="ln">1324</span>                            <b>break</b>;
-</code><code id="L1325"><span class="ln">1325</span>                        <b>case</b> <i>"S"</i>:
-</code><code id="L1326"><span class="ln">1326</span>                            nx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.bx<span class="s"> || </span>d.x));
-</code><code id="L1327"><span class="ln">1327</span>                            ny<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.by<span class="s"> || </span>d.y));
-</code><code id="L1328"><span class="ln">1328</span>                            path<span class="s"> = </span>[<i>"C"</i>, nx, ny][concat](path.slice(<span class="d">1</span>));
-</code><code id="L1329"><span class="ln">1329</span>                            <b>break</b>;
-</code><code id="L1330"><span class="ln">1330</span>                        <b>case</b> <i>"T"</i>:
-</code><code id="L1331"><span class="ln">1331</span>                            d.qx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.qx<span class="s"> || </span>d.x));
-</code><code id="L1332"><span class="ln">1332</span>                            d.qy<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.qy<span class="s"> || </span>d.y));
-</code><code id="L1333"><span class="ln">1333</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, d.qx, d.qy, path[<span class="d">1</span>], path[<span class="d">2</span>]));
-</code><code id="L1334"><span class="ln">1334</span>                            <b>break</b>;
-</code><code id="L1335"><span class="ln">1335</span>                        <b>case</b> <i>"Q"</i>:
-</code><code id="L1336"><span class="ln">1336</span>                            d.qx<span class="s"> = </span>path[<span class="d">1</span>];
-</code><code id="L1337"><span class="ln">1337</span>                            d.qy<span class="s"> = </span>path[<span class="d">2</span>];
-</code><code id="L1338"><span class="ln">1338</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>], path[<span class="d">3</span>], path[<span class="d">4</span>]));
-</code><code id="L1339"><span class="ln">1339</span>                            <b>break</b>;
-</code><code id="L1340"><span class="ln">1340</span>                        <b>case</b> <i>"L"</i>:
-</code><code id="L1341"><span class="ln">1341</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>]));
-</code><code id="L1342"><span class="ln">1342</span>                            <b>break</b>;
-</code><code id="L1343"><span class="ln">1343</span>                        <b>case</b> <i>"H"</i>:
-</code><code id="L1344"><span class="ln">1344</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], d.y));
-</code><code id="L1345"><span class="ln">1345</span>                            <b>break</b>;
-</code><code id="L1346"><span class="ln">1346</span>                        <b>case</b> <i>"V"</i>:
-</code><code id="L1347"><span class="ln">1347</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.x, path[<span class="d">1</span>]));
-</code><code id="L1348"><span class="ln">1348</span>                            <b>break</b>;
-</code><code id="L1349"><span class="ln">1349</span>                        <b>case</b> <i>"Z"</i>:
-</code><code id="L1350"><span class="ln">1350</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.X, d.Y));
-</code><code id="L1351"><span class="ln">1351</span>                            <b>break</b>;
-</code><code id="L1352"><span class="ln">1352</span>                    }
-</code><code id="L1353"><span class="ln">1353</span>                    <b>return</b> path;
-</code><code id="L1354"><span class="ln">1354</span>                },
-</code><code id="L1355"><span class="ln">1355</span>                fixArc<span class="s"> = </span><b>function</b> (pp, i) {
-</code><code id="L1356"><span class="ln">1356</span>                    <b>if</b> (pp[i].length > <span class="d">7</span>) {
-</code><code id="L1357"><span class="ln">1357</span>                        pp[i].shift();
-</code><code id="L1358"><span class="ln">1358</span>                        <b>var</b> pi<span class="s"> = </span>pp[i];
-</code><code id="L1359"><span class="ln">1359</span>                        <b>while</b> (pi.length) {
-</code><code id="L1360"><span class="ln">1360</span>                            pp.splice(i++, <span class="d">0</span>, [<i>"C"</i>][concat](pi.splice(<span class="d">0</span>, <span class="d">6</span>)));
-</code><code id="L1361"><span class="ln">1361</span>                        }
-</code><code id="L1362"><span class="ln">1362</span>                        pp.splice(i, <span class="d">1</span>);
-</code><code id="L1363"><span class="ln">1363</span>                        ii<span class="s"> = </span>mmax(p.length, p2 &amp;&amp; p2.length<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L1364"><span class="ln">1364</span>                    }
-</code><code id="L1365"><span class="ln">1365</span>                },
-</code><code id="L1366"><span class="ln">1366</span>                fixM<span class="s"> = </span><b>function</b> (path1, path2, a1, a2, i) {
-</code><code id="L1367"><span class="ln">1367</span>                    <b>if</b> (path1 &amp;&amp; path2 &amp;&amp; path1[i][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i> &amp;&amp; path2[i][<span class="d">0</span>] != <i>"M"</i>) {
-</code><code id="L1368"><span class="ln">1368</span>                        path2.splice(i, <span class="d">0</span>, [<i>"M"</i>, a2.x, a2.y]);
-</code><code id="L1369"><span class="ln">1369</span>                        a1.bx<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1370"><span class="ln">1370</span>                        a1.by<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1371"><span class="ln">1371</span>                        a1.x<span class="s"> = </span>path1[i][<span class="d">1</span>];
-</code><code id="L1372"><span class="ln">1372</span>                        a1.y<span class="s"> = </span>path1[i][<span class="d">2</span>];
-</code><code id="L1373"><span class="ln">1373</span>                        ii<span class="s"> = </span>mmax(p.length, p2 &amp;&amp; p2.length<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L1374"><span class="ln">1374</span>                    }
-</code><code id="L1375"><span class="ln">1375</span>                };
-</code><code id="L1376"><span class="ln">1376</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>mmax(p.length, p2 &amp;&amp; p2.length<span class="s"> || </span><span class="d">0</span>); i &lt; ii; i++) {
-</code><code id="L1377"><span class="ln">1377</span>                p[i]<span class="s"> = </span>processPath(p[i], attrs);
-</code><code id="L1378"><span class="ln">1378</span>                fixArc(p, i);
-</code><code id="L1379"><span class="ln">1379</span>                p2 &amp;&amp; (p2[i]<span class="s"> = </span>processPath(p2[i], attrs2));
-</code><code id="L1380"><span class="ln">1380</span>                p2 &amp;&amp; fixArc(p2, i);
-</code><code id="L1381"><span class="ln">1381</span>                fixM(p, p2, attrs, attrs2, i);
-</code><code id="L1382"><span class="ln">1382</span>                fixM(p2, p, attrs2, attrs, i);
-</code><code id="L1383"><span class="ln">1383</span>                <b>var</b> seg<span class="s"> = </span>p[i],
-</code><code id="L1384"><span class="ln">1384</span>                    seg2<span class="s"> = </span>p2 &amp;&amp; p2[i],
-</code><code id="L1385"><span class="ln">1385</span>                    seglen<span class="s"> = </span>seg.length,
-</code><code id="L1386"><span class="ln">1386</span>                    seg2len<span class="s"> = </span>p2 &amp;&amp; seg2.length;
-</code><code id="L1387"><span class="ln">1387</span>                attrs.x<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">2</span>];
-</code><code id="L1388"><span class="ln">1388</span>                attrs.y<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1389"><span class="ln">1389</span>                attrs.bx<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs.x;
-</code><code id="L1390"><span class="ln">1390</span>                attrs.by<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs.y;
-</code><code id="L1391"><span class="ln">1391</span>                attrs2.bx<span class="s"> = </span>p2 &amp;&amp; (toFloat(seg2[seg2len<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs2.x);
-</code><code id="L1392"><span class="ln">1392</span>                attrs2.by<span class="s"> = </span>p2 &amp;&amp; (toFloat(seg2[seg2len<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs2.y);
-</code><code id="L1393"><span class="ln">1393</span>                attrs2.x<span class="s"> = </span>p2 &amp;&amp; seg2[seg2len<span class="s"> - </span><span class="d">2</span>];
-</code><code id="L1394"><span class="ln">1394</span>                attrs2.y<span class="s"> = </span>p2 &amp;&amp; seg2[seg2len<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1395"><span class="ln">1395</span>            }
-</code><code id="L1396"><span class="ln">1396</span>            <b>return</b> p2 ? [p, p2] : p;
-</code><code id="L1397"><span class="ln">1397</span>        }, <b>null</b>, pathClone),
-</code><code id="L1398"><span class="ln">1398</span>        parseDots<span class="s"> = </span>cacher(<b>function</b> (gradient) {
-</code><code id="L1399"><span class="ln">1399</span>            <b>var</b> dots<span class="s"> = </span>[];
-</code><code id="L1400"><span class="ln">1400</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>gradient.length; i &lt; ii; i++) {
-</code><code id="L1401"><span class="ln">1401</span>                <b>var</b> dot<span class="s"> = </span>{},
-</code><code id="L1402"><span class="ln">1402</span>                    par<span class="s"> = </span>gradient[i].match(/^([^:]*):?([\d\.]*)/);
-</code><code id="L1403"><span class="ln">1403</span>                dot.color<span class="s"> = </span>R.getRGB(par[<span class="d">1</span>]);
-</code><code id="L1404"><span class="ln">1404</span>                <b>if</b> (dot.color.error) {
-</code><code id="L1405"><span class="ln">1405</span>                    <b>return</b> <b>null</b>;
-</code><code id="L1406"><span class="ln">1406</span>                }
-</code><code id="L1407"><span class="ln">1407</span>                dot.color<span class="s"> = </span>dot.color.hex;
-</code><code id="L1408"><span class="ln">1408</span>                par[<span class="d">2</span>] &amp;&amp; (dot.offset<span class="s"> = </span>par[<span class="d">2</span>]<span class="s"> + </span><i>"%"</i>);
-</code><code id="L1409"><span class="ln">1409</span>                dots.push(dot);
-</code><code id="L1410"><span class="ln">1410</span>            }
-</code><code id="L1411"><span class="ln">1411</span>            <b>for</b> (i<span class="s"> = </span><span class="d">1</span>, ii<span class="s"> = </span>dots.length<span class="s"> - </span><span class="d">1</span>; i &lt; ii; i++) {
-</code><code id="L1412"><span class="ln">1412</span>                <b>if</b> (!dots[i].offset) {
-</code><code id="L1413"><span class="ln">1413</span>                    <b>var</b> start<span class="s"> = </span>toFloat(dots[i<span class="s"> - </span><span class="d">1</span>].offset<span class="s"> || </span><span class="d">0</span>),
-</code><code id="L1414"><span class="ln">1414</span>                        end<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1415"><span class="ln">1415</span>                    <b>for</b> (<b>var</b> j<span class="s"> = </span>i<span class="s"> + </span><span class="d">1</span>; j &lt; ii; j++) {
-</code><code id="L1416"><span class="ln">1416</span>                        <b>if</b> (dots[j].offset) {
-</code><code id="L1417"><span class="ln">1417</span>                            end<span class="s"> = </span>dots[j].offset;
-</code><code id="L1418"><span class="ln">1418</span>                            <b>break</b>;
-</code><code id="L1419"><span class="ln">1419</span>                        }
-</code><code id="L1420"><span class="ln">1420</span>                    }
-</code><code id="L1421"><span class="ln">1421</span>                    <b>if</b> (!end) {
-</code><code id="L1422"><span class="ln">1422</span>                        end<span class="s"> = </span><span class="d">100</span>;
-</code><code id="L1423"><span class="ln">1423</span>                        j<span class="s"> = </span>ii;
-</code><code id="L1424"><span class="ln">1424</span>                    }
-</code><code id="L1425"><span class="ln">1425</span>                    end<span class="s"> = </span>toFloat(end);
-</code><code id="L1426"><span class="ln">1426</span>                    <b>var</b> d<span class="s"> = </span>(end<span class="s"> - </span>start)<span class="s"> / </span>(j<span class="s"> - </span>i<span class="s"> + </span><span class="d">1</span>);
-</code><code id="L1427"><span class="ln">1427</span>                    <b>for</b> (; i &lt; j; i++) {
-</code><code id="L1428"><span class="ln">1428</span>                        start += d;
-</code><code id="L1429"><span class="ln">1429</span>                        dots[i].offset<span class="s"> = </span>start<span class="s"> + </span><i>"%"</i>;
-</code><code id="L1430"><span class="ln">1430</span>                    }
-</code><code id="L1431"><span class="ln">1431</span>                }
-</code><code id="L1432"><span class="ln">1432</span>            }
-</code><code id="L1433"><span class="ln">1433</span>            <b>return</b> dots;
-</code><code id="L1434"><span class="ln">1434</span>        }),
-</code><code id="L1435"><span class="ln">1435</span>        getContainer<span class="s"> = </span><b>function</b> (x, y, w, h) {
-</code><code id="L1436"><span class="ln">1436</span>            <b>var</b> container;
-</code><code id="L1437"><span class="ln">1437</span>            <b>if</b> (R.is(x, string)<span class="s"> || </span>R.is(x, <i>"object"</i>)) {
-</code><code id="L1438"><span class="ln">1438</span>                container<span class="s"> = </span>h<span class="s"> == </span><b>null</b> ? g.doc.getElementById(x) : x;
-</code><code id="L1439"><span class="ln">1439</span>                <b>if</b> (container<span class="s"> == </span><b>null</b>) {
-</code><code id="L1440"><span class="ln">1440</span>                    <b>return</b>;
-</code><code id="L1441"><span class="ln">1441</span>                }
-</code><code id="L1442"><span class="ln">1442</span>                <b>if</b> (container.tagName) {
-</code><code id="L1443"><span class="ln">1443</span>                    <b>if</b> (y<span class="s"> == </span><b>null</b>) {
-</code><code id="L1444"><span class="ln">1444</span>                        <b>return</b> {
-</code><code id="L1445"><span class="ln">1445</span>                            container: container,
-</code><code id="L1446"><span class="ln">1446</span>                            width: container.style.pixelWidth<span class="s"> || </span>container.offsetWidth,
-</code><code id="L1447"><span class="ln">1447</span>                            height: container.style.pixelHeight<span class="s"> || </span>container.offsetHeight
-</code><code id="L1448"><span class="ln">1448</span>                        };
-</code><code id="L1449"><span class="ln">1449</span>                    } <b>else</b> {
-</code><code id="L1450"><span class="ln">1450</span>                        <b>return</b> {container: container, width: y, height: w};
-</code><code id="L1451"><span class="ln">1451</span>                    }
-</code><code id="L1452"><span class="ln">1452</span>                }
-</code><code id="L1453"><span class="ln">1453</span>            }
-</code><code id="L1454"><span class="ln">1454</span>            <b>return</b> {container: <span class="d">1</span>, x: x, y: y, width: w, height: h};
-</code><code id="L1455"><span class="ln">1455</span>        },
-</code><code id="L1456"><span class="ln">1456</span>        plugins<span class="s"> = </span><b>function</b> (con, add) {
-</code><code id="L1457"><span class="ln">1457</span>            <b>var</b> that<span class="s"> = </span><b>this</b>;
-</code><code id="L1458"><span class="ln">1458</span>            <b>for</b> (<b>var</b> prop <b>in</b> add) {
-</code><code id="L1459"><span class="ln">1459</span>                <b>if</b> (add[has](prop) &amp;&amp; !(prop <b>in</b> con)) {
-</code><code id="L1460"><span class="ln">1460</span>                    <b>switch</b> (<b>typeof</b> add[prop]) {
-</code><code id="L1461"><span class="ln">1461</span>                        <b>case</b> <i>"<b>function</b>"</i>:
-</code><code id="L1462"><span class="ln">1462</span>                            (<b>function</b> (f) {
-</code><code id="L1463"><span class="ln">1463</span>                                con[prop]<span class="s"> = </span>con<span class="s"> === </span>that ? f : <b>function</b> () { <b>return</b> f[apply](that, arguments); };
-</code><code id="L1464"><span class="ln">1464</span>                            })(add[prop]);
-</code><code id="L1465"><span class="ln">1465</span>                        <b>break</b>;
-</code><code id="L1466"><span class="ln">1466</span>                        <b>case</b> <i>"object"</i>:
-</code><code id="L1467"><span class="ln">1467</span>                            con[prop]<span class="s"> = </span>con[prop]<span class="s"> || </span>{};
-</code><code id="L1468"><span class="ln">1468</span>                            plugins.call(<b>this</b>, con[prop], add[prop]);
-</code><code id="L1469"><span class="ln">1469</span>                        <b>break</b>;
-</code><code id="L1470"><span class="ln">1470</span>                        <b>default</b>:
-</code><code id="L1471"><span class="ln">1471</span>                            con[prop]<span class="s"> = </span>add[prop];
-</code><code id="L1472"><span class="ln">1472</span>                        <b>break</b>;
-</code><code id="L1473"><span class="ln">1473</span>                    }
-</code><code id="L1474"><span class="ln">1474</span>                }
-</code><code id="L1475"><span class="ln">1475</span>            }
-</code><code id="L1476"><span class="ln">1476</span>        },
-</code><code id="L1477"><span class="ln">1477</span>        tear<span class="s"> = </span><b>function</b> (el, paper) {
-</code><code id="L1478"><span class="ln">1478</span>            el<span class="s"> == </span>paper.top &amp;&amp; (paper.top<span class="s"> = </span>el.prev);
-</code><code id="L1479"><span class="ln">1479</span>            el<span class="s"> == </span>paper.bottom &amp;&amp; (paper.bottom<span class="s"> = </span>el.next);
-</code><code id="L1480"><span class="ln">1480</span>            el.next &amp;&amp; (el.next.prev<span class="s"> = </span>el.prev);
-</code><code id="L1481"><span class="ln">1481</span>            el.prev &amp;&amp; (el.prev.next<span class="s"> = </span>el.next);
-</code><code id="L1482"><span class="ln">1482</span>        },
-</code><code id="L1483"><span class="ln">1483</span>        tofront<span class="s"> = </span><b>function</b> (el, paper) {
-</code><code id="L1484"><span class="ln">1484</span>            <b>if</b> (paper.top<span class="s"> === </span>el) {
-</code><code id="L1485"><span class="ln">1485</span>                <b>return</b>;
-</code><code id="L1486"><span class="ln">1486</span>            }
-</code><code id="L1487"><span class="ln">1487</span>            tear(el, paper);
-</code><code id="L1488"><span class="ln">1488</span>            el.next<span class="s"> = </span><b>null</b>;
-</code><code id="L1489"><span class="ln">1489</span>            el.prev<span class="s"> = </span>paper.top;
-</code><code id="L1490"><span class="ln">1490</span>            paper.top.next<span class="s"> = </span>el;
-</code><code id="L1491"><span class="ln">1491</span>            paper.top<span class="s"> = </span>el;
-</code><code id="L1492"><span class="ln">1492</span>        },
-</code><code id="L1493"><span class="ln">1493</span>        toback<span class="s"> = </span><b>function</b> (el, paper) {
-</code><code id="L1494"><span class="ln">1494</span>            <b>if</b> (paper.bottom<span class="s"> === </span>el) {
-</code><code id="L1495"><span class="ln">1495</span>                <b>return</b>;
-</code><code id="L1496"><span class="ln">1496</span>            }
-</code><code id="L1497"><span class="ln">1497</span>            tear(el, paper);
-</code><code id="L1498"><span class="ln">1498</span>            el.next<span class="s"> = </span>paper.bottom;
-</code><code id="L1499"><span class="ln">1499</span>            el.prev<span class="s"> = </span><b>null</b>;
-</code><code id="L1500"><span class="ln">1500</span>            paper.bottom.prev<span class="s"> = </span>el;
-</code><code id="L1501"><span class="ln">1501</span>            paper.bottom<span class="s"> = </span>el;
-</code><code id="L1502"><span class="ln">1502</span>        },
-</code><code id="L1503"><span class="ln">1503</span>        insertafter<span class="s"> = </span><b>function</b> (el, el2, paper) {
-</code><code id="L1504"><span class="ln">1504</span>            tear(el, paper);
-</code><code id="L1505"><span class="ln">1505</span>            el2<span class="s"> == </span>paper.top &amp;&amp; (paper.top<span class="s"> = </span>el);
-</code><code id="L1506"><span class="ln">1506</span>            el2.next &amp;&amp; (el2.next.prev<span class="s"> = </span>el);
-</code><code id="L1507"><span class="ln">1507</span>            el.next<span class="s"> = </span>el2.next;
-</code><code id="L1508"><span class="ln">1508</span>            el.prev<span class="s"> = </span>el2;
-</code><code id="L1509"><span class="ln">1509</span>            el2.next<span class="s"> = </span>el;
-</code><code id="L1510"><span class="ln">1510</span>        },
-</code><code id="L1511"><span class="ln">1511</span>        insertbefore<span class="s"> = </span><b>function</b> (el, el2, paper) {
-</code><code id="L1512"><span class="ln">1512</span>            tear(el, paper);
-</code><code id="L1513"><span class="ln">1513</span>            el2<span class="s"> == </span>paper.bottom &amp;&amp; (paper.bottom<span class="s"> = </span>el);
-</code><code id="L1514"><span class="ln">1514</span>            el2.prev &amp;&amp; (el2.prev.next<span class="s"> = </span>el);
-</code><code id="L1515"><span class="ln">1515</span>            el.prev<span class="s"> = </span>el2.prev;
-</code><code id="L1516"><span class="ln">1516</span>            el2.prev<span class="s"> = </span>el;
-</code><code id="L1517"><span class="ln">1517</span>            el.next<span class="s"> = </span>el2;
-</code><code id="L1518"><span class="ln">1518</span>        },
-</code><code id="L1519"><span class="ln">1519</span>        removed<span class="s"> = </span><b>function</b> (methodname) {
-</code><code id="L1520"><span class="ln">1520</span>            <b>return</b> <b>function</b> () {
-</code><code id="L1521"><span class="ln">1521</span>                <b>throw</b> <b>new</b> Error(<i>"Rapha\xebl: you are calling to method \u201c"</i><span class="s"> + </span>methodname<span class="s"> + </span><i>"\u201d of removed object"</i>);
-</code><code id="L1522"><span class="ln">1522</span>            };
-</code><code id="L1523"><span class="ln">1523</span>        },
-</code><code id="L1524"><span class="ln">1524</span>        extractTransform<span class="s"> = </span><b>function</b> (el, tstr) {
-</code><code id="L1525"><span class="ln">1525</span>            <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
-</code><code id="L1526"><span class="ln">1526</span>                <b>return</b> el._.transform;
-</code><code id="L1527"><span class="ln">1527</span>            }
-</code><code id="L1528"><span class="ln">1528</span>            tstr<span class="s"> = </span>Str(tstr).replace(/\.{<span class="d">3</span>}|\u2026/g, el._.transform<span class="s"> || </span>E);
-</code><code id="L1529"><span class="ln">1529</span>            <b>var</b> tdata<span class="s"> = </span>R.parseTransformString(tstr),
-</code><code id="L1530"><span class="ln">1530</span>                deg<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1531"><span class="ln">1531</span>                dx<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1532"><span class="ln">1532</span>                dy<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L1533"><span class="ln">1533</span>                sx<span class="s"> = </span><span class="d">1</span>,
-</code><code id="L1534"><span class="ln">1534</span>                sy<span class="s"> = </span><span class="d">1</span>,
-</code><code id="L1535"><span class="ln">1535</span>                _<span class="s"> = </span>el._,
-</code><code id="L1536"><span class="ln">1536</span>                m<span class="s"> = </span><b>new</b> Matrix;
-</code><code id="L1537"><span class="ln">1537</span>            _.transform<span class="s"> = </span>tdata<span class="s"> || </span>[];
-</code><code id="L1538"><span class="ln">1538</span>            <b>if</b> (tdata) {
-</code><code id="L1539"><span class="ln">1539</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tdata.length; i &lt; ii; i++) {
-</code><code id="L1540"><span class="ln">1540</span>                    <b>var</b> t<span class="s"> = </span>tdata[i],
-</code><code id="L1541"><span class="ln">1541</span>                        tlen<span class="s"> = </span>t.length,
-</code><code id="L1542"><span class="ln">1542</span>                        bb;
-</code><code id="L1543"><span class="ln">1543</span>                    t[<span class="d">0</span>]<span class="s"> = </span>Str(t[<span class="d">0</span>]).toLowerCase();
-</code><code id="L1544"><span class="ln">1544</span>                    <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"t"</i> &amp;&amp; tlen<span class="s"> == </span><span class="d">3</span>) {
-</code><code id="L1545"><span class="ln">1545</span>                        m.translate(t[<span class="d">1</span>], t[<span class="d">2</span>]);
-</code><code id="L1546"><span class="ln">1546</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i>) {
-</code><code id="L1547"><span class="ln">1547</span>                        <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span>) {
-</code><code id="L1548"><span class="ln">1548</span>                            bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
-</code><code id="L1549"><span class="ln">1549</span>                            m.rotate(t[<span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
-</code><code id="L1550"><span class="ln">1550</span>                            deg += t[<span class="d">1</span>];
-</code><code id="L1551"><span class="ln">1551</span>                        } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">4</span>) {
-</code><code id="L1552"><span class="ln">1552</span>                            m.rotate(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>]);
-</code><code id="L1553"><span class="ln">1553</span>                            deg += t[<span class="d">1</span>];
-</code><code id="L1554"><span class="ln">1554</span>                        }
-</code><code id="L1555"><span class="ln">1555</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i>) {
-</code><code id="L1556"><span class="ln">1556</span>                        <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span><span class="s"> || </span>tlen<span class="s"> == </span><span class="d">3</span>) {
-</code><code id="L1557"><span class="ln">1557</span>                            bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
-</code><code id="L1558"><span class="ln">1558</span>                            m.scale(t[<span class="d">1</span>], t[tlen<span class="s"> - </span><span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
-</code><code id="L1559"><span class="ln">1559</span>                            sx *= t[<span class="d">1</span>];
-</code><code id="L1560"><span class="ln">1560</span>                            sy *= t[tlen<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L1561"><span class="ln">1561</span>                        } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">5</span>) {
-</code><code id="L1562"><span class="ln">1562</span>                            m.scale(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>]);
-</code><code id="L1563"><span class="ln">1563</span>                            sx *= t[<span class="d">1</span>];
-</code><code id="L1564"><span class="ln">1564</span>                            sy *= t[<span class="d">2</span>];
-</code><code id="L1565"><span class="ln">1565</span>                        }
-</code><code id="L1566"><span class="ln">1566</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i> &amp;&amp; tlen<span class="s"> == </span><span class="d">7</span>) {
-</code><code id="L1567"><span class="ln">1567</span>                        m.add(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>], t[<span class="d">5</span>], t[<span class="d">6</span>]);
-</code><code id="L1568"><span class="ln">1568</span>                    }
-</code><code id="L1569"><span class="ln">1569</span>                    _.dirtyT<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1570"><span class="ln">1570</span>                    el.matrix<span class="s"> = </span>m;
-</code><code id="L1571"><span class="ln">1571</span>                }
-</code><code id="L1572"><span class="ln">1572</span>            }
-</code><code id="L1573"><span class="ln">1573</span>
-</code><code id="L1574"><span class="ln">1574</span>            el.matrix<span class="s"> = </span>m;
-</code><code id="L1575"><span class="ln">1575</span>
-</code><code id="L1576"><span class="ln">1576</span>            _.sx<span class="s"> = </span>sx;
-</code><code id="L1577"><span class="ln">1577</span>            _.sy<span class="s"> = </span>sy;
-</code><code id="L1578"><span class="ln">1578</span>            _.deg<span class="s"> = </span>deg;
-</code><code id="L1579"><span class="ln">1579</span>            _.dx<span class="s"> = </span>dx<span class="s"> = </span>m.m[<span class="d">0</span>][<span class="d">2</span>];
-</code><code id="L1580"><span class="ln">1580</span>            _.dy<span class="s"> = </span>dy<span class="s"> = </span>m.m[<span class="d">1</span>][<span class="d">2</span>];
-</code><code id="L1581"><span class="ln">1581</span>
-</code><code id="L1582"><span class="ln">1582</span>            <b>if</b> (sx<span class="s"> == </span><span class="d">1</span> &amp;&amp; sy<span class="s"> == </span><span class="d">1</span> &amp;&amp; !deg &amp;&amp; _.bbox) {
-</code><code id="L1583"><span class="ln">1583</span>                _.bbox.x += +dx;
-</code><code id="L1584"><span class="ln">1584</span>                _.bbox.y += +dy;
-</code><code id="L1585"><span class="ln">1585</span>            } <b>else</b> {
-</code><code id="L1586"><span class="ln">1586</span>                _.dirtyT<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1587"><span class="ln">1587</span>            }
-</code><code id="L1588"><span class="ln">1588</span>        },
-</code><code id="L1589"><span class="ln">1589</span>        getEmpty<span class="s"> = </span><b>function</b> (item) {
-</code><code id="L1590"><span class="ln">1590</span>            <b>switch</b> (item[<span class="d">0</span>]) {
-</code><code id="L1591"><span class="ln">1591</span>                <b>case</b> <i>"t"</i>: <b>return</b> [<i>"t"</i>, <span class="d">0</span>, <span class="d">0</span>];
-</code><code id="L1592"><span class="ln">1592</span>                <b>case</b> <i>"m"</i>: <b>return</b> [<i>"m"</i>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>];
-</code><code id="L1593"><span class="ln">1593</span>                <b>case</b> <i>"r"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">4</span>) {
-</code><code id="L1594"><span class="ln">1594</span>                    <b>return</b> [<i>"r"</i>, <span class="d">0</span>, item[<span class="d">2</span>], item[<span class="d">3</span>]];
-</code><code id="L1595"><span class="ln">1595</span>                } <b>else</b> {
-</code><code id="L1596"><span class="ln">1596</span>                    <b>return</b> [<i>"r"</i>, <span class="d">0</span>];
-</code><code id="L1597"><span class="ln">1597</span>                }
-</code><code id="L1598"><span class="ln">1598</span>                <b>case</b> <i>"s"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">5</span>) {
-</code><code id="L1599"><span class="ln">1599</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>, item[<span class="d">3</span>], item[<span class="d">4</span>]];
-</code><code id="L1600"><span class="ln">1600</span>                } <b>else</b> <b>if</b> (item.length<span class="s"> == </span><span class="d">3</span>) {
-</code><code id="L1601"><span class="ln">1601</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>];
-</code><code id="L1602"><span class="ln">1602</span>                } <b>else</b> {
-</code><code id="L1603"><span class="ln">1603</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>];
-</code><code id="L1604"><span class="ln">1604</span>                }
-</code><code id="L1605"><span class="ln">1605</span>            }
-</code><code id="L1606"><span class="ln">1606</span>        },
-</code><code id="L1607"><span class="ln">1607</span>        equaliseTransform<span class="s"> = </span><b>function</b> (t1, t2) {
-</code><code id="L1608"><span class="ln">1608</span>            t1<span class="s"> = </span>R.parseTransformString(t1)<span class="s"> || </span>[];
-</code><code id="L1609"><span class="ln">1609</span>            t2<span class="s"> = </span>R.parseTransformString(t2)<span class="s"> || </span>[];
-</code><code id="L1610"><span class="ln">1610</span>            <b>var</b> maxlength<span class="s"> = </span>mmax(t1.length, t2.length),
-</code><code id="L1611"><span class="ln">1611</span>                from<span class="s"> = </span>[],
-</code><code id="L1612"><span class="ln">1612</span>                to<span class="s"> = </span>[],
-</code><code id="L1613"><span class="ln">1613</span>                i<span class="s"> = </span><span class="d">0</span>, j, jj,
-</code><code id="L1614"><span class="ln">1614</span>                tt1, tt2;
-</code><code id="L1615"><span class="ln">1615</span>            <b>for</b> (; i &lt; maxlength; i++) {
-</code><code id="L1616"><span class="ln">1616</span>                tt1<span class="s"> = </span>t1[i]<span class="s"> || </span>getEmpty(t2[i]);
-</code><code id="L1617"><span class="ln">1617</span>                tt2<span class="s"> = </span>t2[i]<span class="s"> || </span>getEmpty(tt1);
-</code><code id="L1618"><span class="ln">1618</span>                <b>if</b> (    (tt1[<span class="d">0</span>] != tt2[<span class="d">0</span>]) ||
-</code><code id="L1619"><span class="ln">1619</span>                        (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i> &amp;&amp; (tt1[<span class="d">2</span>] != tt2[<span class="d">2</span>]<span class="s"> || </span>tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>])) ||
-</code><code id="L1620"><span class="ln">1620</span>                        (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i> &amp;&amp; (tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>]<span class="s"> || </span>tt1[<span class="d">4</span>] != tt2[<span class="d">4</span>]))
-</code><code id="L1621"><span class="ln">1621</span>                    ) {
-</code><code id="L1622"><span class="ln">1622</span>                    <b>return</b>;
-</code><code id="L1623"><span class="ln">1623</span>                }
-</code><code id="L1624"><span class="ln">1624</span>                from[i]<span class="s"> = </span>[];
-</code><code id="L1625"><span class="ln">1625</span>                to[i]<span class="s"> = </span>[];
-</code><code id="L1626"><span class="ln">1626</span>                <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>mmax(tt1.length, tt2.length); j &lt; jj; j++) {
-</code><code id="L1627"><span class="ln">1627</span>                    j <b>in</b> tt1 &amp;&amp; (from[i][j]<span class="s"> = </span>tt1[j]);
-</code><code id="L1628"><span class="ln">1628</span>                    j <b>in</b> tt2 &amp;&amp; (to[i][j]<span class="s"> = </span>tt2[j]);
-</code><code id="L1629"><span class="ln">1629</span>                }
-</code><code id="L1630"><span class="ln">1630</span>            }
-</code><code id="L1631"><span class="ln">1631</span>            <b>return</b> {
-</code><code id="L1632"><span class="ln">1632</span>                from: from,
-</code><code id="L1633"><span class="ln">1633</span>                to: to
-</code><code id="L1634"><span class="ln">1634</span>            };
-</code><code id="L1635"><span class="ln">1635</span>        };
-</code><code id="L1636"><span class="ln">1636</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L1637"><span class="ln">1637</span><span class="c">    <span class="s"> * </span>Raphael.pathToRelative
-</span></code><code id="L1638"><span class="ln">1638</span><span class="c">     [ method ]
-</span></code><code id="L1639"><span class="ln">1639</span><span class="c">     **
-</span></code><code id="L1640"><span class="ln">1640</span><span class="c">    <span class="s"> * </span>Utility method
-</span></code><code id="L1641"><span class="ln">1641</span><span class="c">     **
-</span></code><code id="L1642"><span class="ln">1642</span><span class="c">    <span class="s"> * </span>Converts path to relative form
-</span></code><code id="L1643"><span class="ln">1643</span><span class="c">     > Parameters
-</span></code><code id="L1644"><span class="ln">1644</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments
-</span></code><code id="L1645"><span class="ln">1645</span><span class="c">    <span class="s"> = </span>(array) array of segments.
-</span></code><code id="L1646"><span class="ln">1646</span><span class="c">    \*/</span>
-</code><code id="L1647"><span class="ln">1647</span>    R.pathToRelative<span class="s"> = </span>pathToRelative;
-</code><code id="L1648"><span class="ln">1648</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L1649"><span class="ln">1649</span><span class="c">    <span class="s"> * </span>Raphael.path2curve
-</span></code><code id="L1650"><span class="ln">1650</span><span class="c">     [ method ]
-</span></code><code id="L1651"><span class="ln">1651</span><span class="c">     **
-</span></code><code id="L1652"><span class="ln">1652</span><span class="c">    <span class="s"> * </span>Utility method
-</span></code><code id="L1653"><span class="ln">1653</span><span class="c">     **
-</span></code><code id="L1654"><span class="ln">1654</span><span class="c">    <span class="s"> * </span>Converts path to path where all segments are cubic bezier curves.
-</span></code><code id="L1655"><span class="ln">1655</span><span class="c">     > Parameters
-</span></code><code id="L1656"><span class="ln">1656</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments
-</span></code><code id="L1657"><span class="ln">1657</span><span class="c">    <span class="s"> = </span>(array) array of segments.
-</span></code><code id="L1658"><span class="ln">1658</span><span class="c">    \*/</span>
-</code><code id="L1659"><span class="ln">1659</span>    R.path2curve<span class="s"> = </span>path2curve;
-</code><code id="L1660"><span class="ln">1660</span>    <span class="c">// Matrix</span>
-</code><code id="L1661"><span class="ln">1661</span>    <span class="c">// <b>var</b> m<span class="s"> = </span>document.createElementNS(<i>"http://www.w3.org/<span class="d">2000</span>/svg"</i>, <i>"svg"</i>).createSVGMatrix();</span>
-</code><code id="L1662"><span class="ln">1662</span>    <b>function</b> Matrix(a, b, c, d, e, f) {
-</code><code id="L1663"><span class="ln">1663</span>        <b>if</b> (a != <b>null</b>) {
-</code><code id="L1664"><span class="ln">1664</span>            <b>this</b>.m<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
-</code><code id="L1665"><span class="ln">1665</span>        } <b>else</b> {
-</code><code id="L1666"><span class="ln">1666</span>            <b>this</b>.m<span class="s"> = </span>[[<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
-</code><code id="L1667"><span class="ln">1667</span>        }
-</code><code id="L1668"><span class="ln">1668</span>    }
-</code><code id="L1669"><span class="ln">1669</span>    <b>var</b> matrixproto<span class="s"> = </span>Matrix.prototype;
-</code><code id="L1670"><span class="ln">1670</span>    matrixproto.add<span class="s"> = </span><b>function</b> (a, b, c, d, e, f) {
-</code><code id="L1671"><span class="ln">1671</span>        <b>var</b> out<span class="s"> = </span>[[], [], []],
-</code><code id="L1672"><span class="ln">1672</span>            matrix<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]],
-</code><code id="L1673"><span class="ln">1673</span>            x, y, z, res;
-</code><code id="L1674"><span class="ln">1674</span>
-</code><code id="L1675"><span class="ln">1675</span>        <b>for</b> (x<span class="s"> = </span><span class="d">0</span>; x &lt; <span class="d">3</span>; x++) {
-</code><code id="L1676"><span class="ln">1676</span>            <b>for</b> (y<span class="s"> = </span><span class="d">0</span>; y &lt; <span class="d">3</span>; y++) {
-</code><code id="L1677"><span class="ln">1677</span>                res<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1678"><span class="ln">1678</span>                <b>for</b> (z<span class="s"> = </span><span class="d">0</span>; z &lt; <span class="d">3</span>; z++) {
-</code><code id="L1679"><span class="ln">1679</span>                    res += <b>this</b>.m[x][z]<span class="s"> * </span>matrix[z][y];
-</code><code id="L1680"><span class="ln">1680</span>                }
-</code><code id="L1681"><span class="ln">1681</span>                out[x][y]<span class="s"> = </span>res;
-</code><code id="L1682"><span class="ln">1682</span>            }
-</code><code id="L1683"><span class="ln">1683</span>        }
-</code><code id="L1684"><span class="ln">1684</span>        <b>this</b>.m<span class="s"> = </span>out;
-</code><code id="L1685"><span class="ln">1685</span>    };
-</code><code id="L1686"><span class="ln">1686</span>    matrixproto.invert<span class="s"> = </span><b>function</b> () {
-</code><code id="L1687"><span class="ln">1687</span>        <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
-</code><code id="L1688"><span class="ln">1688</span>            b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
-</code><code id="L1689"><span class="ln">1689</span>            c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
-</code><code id="L1690"><span class="ln">1690</span>            d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
-</code><code id="L1691"><span class="ln">1691</span>            e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
-</code><code id="L1692"><span class="ln">1692</span>            f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>],
-</code><code id="L1693"><span class="ln">1693</span>            x<span class="s"> = </span>a<span class="s"> * </span>d<span class="s"> - </span>b<span class="s"> * </span>c;
-</code><code id="L1694"><span class="ln">1694</span>        <b>return</b> <b>new</b> Matrix(d<span class="s"> / </span>x, -b<span class="s"> / </span>x, -c<span class="s"> / </span>x, a<span class="s"> / </span>x, (c<span class="s"> * </span>f<span class="s"> - </span>d<span class="s"> * </span>e)<span class="s"> / </span>x, (b<span class="s"> * </span>e<span class="s"> - </span>a<span class="s"> * </span>f)<span class="s"> / </span>x);
-</code><code id="L1695"><span class="ln">1695</span>    };
-</code><code id="L1696"><span class="ln">1696</span>    matrixproto.clone<span class="s"> = </span><b>function</b> () {
-</code><code id="L1697"><span class="ln">1697</span>        <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
-</code><code id="L1698"><span class="ln">1698</span>            b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
-</code><code id="L1699"><span class="ln">1699</span>            c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
-</code><code id="L1700"><span class="ln">1700</span>            d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
-</code><code id="L1701"><span class="ln">1701</span>            e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
-</code><code id="L1702"><span class="ln">1702</span>            f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
-</code><code id="L1703"><span class="ln">1703</span>        <b>return</b> <b>new</b> Matrix(a, b, c, d, e, f);
-</code><code id="L1704"><span class="ln">1704</span>    };
-</code><code id="L1705"><span class="ln">1705</span>    matrixproto.translate<span class="s"> = </span><b>function</b> (x, y) {
-</code><code id="L1706"><span class="ln">1706</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, x, y);
-</code><code id="L1707"><span class="ln">1707</span>    };
-</code><code id="L1708"><span class="ln">1708</span>    matrixproto.scale<span class="s"> = </span><b>function</b> (x, y, cx, cy) {
-</code><code id="L1709"><span class="ln">1709</span>        y<span class="s"> == </span><b>null</b> &amp;&amp; (y<span class="s"> = </span>x);
-</code><code id="L1710"><span class="ln">1710</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, cx, cy);
-</code><code id="L1711"><span class="ln">1711</span>        <b>this</b>.add(x, <span class="d">0</span>, <span class="d">0</span>, y, <span class="d">0</span>, <span class="d">0</span>);
-</code><code id="L1712"><span class="ln">1712</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -cx, -cy);
-</code><code id="L1713"><span class="ln">1713</span>    };
-</code><code id="L1714"><span class="ln">1714</span>    matrixproto.rotate<span class="s"> = </span><b>function</b> (a, x, y) {
-</code><code id="L1715"><span class="ln">1715</span>        a<span class="s"> = </span>R.rad(a);
-</code><code id="L1716"><span class="ln">1716</span>        <b>var</b> cos<span class="s"> = </span>+math.cos(a).toFixed(<span class="d">9</span>),
-</code><code id="L1717"><span class="ln">1717</span>            sin<span class="s"> = </span>+math.sin(a).toFixed(<span class="d">9</span>);
-</code><code id="L1718"><span class="ln">1718</span>        <b>this</b>.add(cos, sin, -sin, cos, x, y);
-</code><code id="L1719"><span class="ln">1719</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -x, -y);
-</code><code id="L1720"><span class="ln">1720</span>    };
-</code><code id="L1721"><span class="ln">1721</span>    matrixproto.x<span class="s"> = </span><b>function</b> (x, y) {
-</code><code id="L1722"><span class="ln">1722</span>        <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>];
-</code><code id="L1723"><span class="ln">1723</span>    };
-</code><code id="L1724"><span class="ln">1724</span>    matrixproto.y<span class="s"> = </span><b>function</b> (x, y) {
-</code><code id="L1725"><span class="ln">1725</span>        <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
-</code><code id="L1726"><span class="ln">1726</span>    };
-</code><code id="L1727"><span class="ln">1727</span>    matrixproto.get<span class="s"> = </span><b>function</b> (i, j) {
-</code><code id="L1728"><span class="ln">1728</span>        <b>return</b> +<b>this</b>.m[i][j].toFixed(<span class="d">4</span>);
-</code><code id="L1729"><span class="ln">1729</span>    };
-</code><code id="L1730"><span class="ln">1730</span>    matrixproto.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L1731"><span class="ln">1731</span>        <b>return</b> R.svg ?
-</code><code id="L1732"><span class="ln">1732</span>            <i>"matrix("</i><span class="s"> + </span>[<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)].join()<span class="s"> + </span><i>")"</i> :
-</code><code id="L1733"><span class="ln">1733</span>            [<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>].join();
-</code><code id="L1734"><span class="ln">1734</span>    };
-</code><code id="L1735"><span class="ln">1735</span>    matrixproto.toFilter<span class="s"> = </span><b>function</b> () {
-</code><code id="L1736"><span class="ln">1736</span>        <b>return</b> <i>"progid:DXImageTransform.Microsoft.Matrix(M11="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>) +
-</code><code id="L1737"><span class="ln">1737</span>            <i>", M12="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>)<span class="s"> + </span><i>", M21="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>)<span class="s"> + </span><i>", M22="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>) +
-</code><code id="L1738"><span class="ln">1738</span>            <i>", Dx="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> + </span><i>", Dy="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)<span class="s"> + </span><i>", sizingmedthod='auto expand')"</i>;
-</code><code id="L1739"><span class="ln">1739</span>    };
-</code><code id="L1740"><span class="ln">1740</span>    matrixproto.offset<span class="s"> = </span><b>function</b> () {
-</code><code id="L1741"><span class="ln">1741</span>        <b>return</b> [<b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>), <b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>)];
-</code><code id="L1742"><span class="ln">1742</span>    };
-</code><code id="L1743"><span class="ln">1743</span>
-</code><code id="L1744"><span class="ln">1744</span>    R.Matrix<span class="s"> = </span>Matrix;
-</code><code id="L1745"><span class="ln">1745</span>
-</code><code id="L1746"><span class="ln">1746</span>    <span class="c">// SVG</span>
-</code><code id="L1747"><span class="ln">1747</span>    <b>if</b> (R.svg) {
-</code><code id="L1748"><span class="ln">1748</span>        <b>var</b> xlink<span class="s"> = </span><i>"http:<span class="c">//www.w3.org/<span class="d">1999</span>/xlink"</i>,</span>
-</code><code id="L1749"><span class="ln">1749</span>            markers<span class="s"> = </span>{
-</code><code id="L1750"><span class="ln">1750</span>                block: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,5z"</i>,
-</code><code id="L1751"><span class="ln">1751</span>                classic: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,<span class="d">5</span> <span class="d">3.5</span>,<span class="d">3</span> <span class="d">3.5</span>,2z"</i>,
-</code><code id="L1752"><span class="ln">1752</span>                diamond: <i>"M2<span class="d">.5</span>,<span class="d">0</span> <span class="d">5</span>,<span class="d">2.5</span> <span class="d">2.5</span>,<span class="d">5</span> <span class="d">0</span>,<span class="d">2</span>.5z"</i>,
-</code><code id="L1753"><span class="ln">1753</span>                open: <i>"M6,<span class="d">1</span> <span class="d">1</span>,<span class="d">3.5</span> <span class="d">6</span>,<span class="d">6</span>"</i>,
-</code><code id="L1754"><span class="ln">1754</span>                oval: <i>"M2<span class="d">.5</span>,0A2<span class="d">.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,<span class="d">5</span> <span class="d">2.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,0z"</i>
-</code><code id="L1755"><span class="ln">1755</span>            },
-</code><code id="L1756"><span class="ln">1756</span>            markerCounter<span class="s"> = </span>{};
-</code><code id="L1757"><span class="ln">1757</span>        round<span class="s"> = </span><b>function</b> (num) {
-</code><code id="L1758"><span class="ln">1758</span>            <b>return</b> +num<span class="s"> + </span>(~~num<span class="s"> === </span>num)<span class="s"> * </span><span class="d">.5</span>;
-</code><code id="L1759"><span class="ln">1759</span>        };
-</code><code id="L1760"><span class="ln">1760</span>        R.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L1761"><span class="ln">1761</span>            <b>return</b>  <i>"Your browser supports SVG.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
-</code><code id="L1762"><span class="ln">1762</span>        };
-</code><code id="L1763"><span class="ln">1763</span>        <b>var</b> $<span class="s"> = </span><b>function</b> (el, attr) {
-</code><code id="L1764"><span class="ln">1764</span>            <b>if</b> (attr) {
-</code><code id="L1765"><span class="ln">1765</span>                <b>if</b> (<b>typeof</b> el<span class="s"> == </span><i>"string"</i>) {
-</code><code id="L1766"><span class="ln">1766</span>                    el<span class="s"> = </span>$(el);
-</code><code id="L1767"><span class="ln">1767</span>                }
-</code><code id="L1768"><span class="ln">1768</span>                <b>for</b> (<b>var</b> key <b>in</b> attr) <b>if</b> (attr[has](key)) {
-</code><code id="L1769"><span class="ln">1769</span>                    <b>if</b> (key.substring(<span class="d">0</span>, <span class="d">6</span>)<span class="s"> == </span><i>"xlink:"</i>) {
-</code><code id="L1770"><span class="ln">1770</span>                        el.setAttributeNS(xlink, key.substring(<span class="d">6</span>), Str(attr[key]));
-</code><code id="L1771"><span class="ln">1771</span>                    } <b>else</b> {
-</code><code id="L1772"><span class="ln">1772</span>                        el[setAttribute](key, Str(attr[key]));
-</code><code id="L1773"><span class="ln">1773</span>                    }
-</code><code id="L1774"><span class="ln">1774</span>                }
-</code><code id="L1775"><span class="ln">1775</span>            } <b>else</b> {
-</code><code id="L1776"><span class="ln">1776</span>                el<span class="s"> = </span>g.doc.createElementNS(<i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i>, el);</span>
-</code><code id="L1777"><span class="ln">1777</span>                el.style &amp;&amp; (el.style.webkitTapHighlightColor<span class="s"> = </span><i>"rgba(<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>)"</i>);
-</code><code id="L1778"><span class="ln">1778</span>            }
-</code><code id="L1779"><span class="ln">1779</span>            <b>return</b> el;
-</code><code id="L1780"><span class="ln">1780</span>        },
-</code><code id="L1781"><span class="ln">1781</span>        thePath<span class="s"> = </span><b>function</b> (pathString, SVG) {
-</code><code id="L1782"><span class="ln">1782</span>            <b>var</b> el<span class="s"> = </span>$(<i>"path"</i>);
-</code><code id="L1783"><span class="ln">1783</span>            SVG.canvas &amp;&amp; SVG.canvas.appendChild(el);
-</code><code id="L1784"><span class="ln">1784</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, SVG);
-</code><code id="L1785"><span class="ln">1785</span>            p.type<span class="s"> = </span><i>"path"</i>;
-</code><code id="L1786"><span class="ln">1786</span>            setFillAndStroke(p, {fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>, path: pathString});
-</code><code id="L1787"><span class="ln">1787</span>            <b>return</b> p;
-</code><code id="L1788"><span class="ln">1788</span>        },
-</code><code id="L1789"><span class="ln">1789</span>        gradients<span class="s"> = </span>{},
-</code><code id="L1790"><span class="ln">1790</span>        rgGrad<span class="s"> = </span>/^url\(#(.*)\)$/,
-</code><code id="L1791"><span class="ln">1791</span>        removeGradientFill<span class="s"> = </span><b>function</b> (node, paper) {
-</code><code id="L1792"><span class="ln">1792</span>            <b>var</b> oid<span class="s"> = </span>node.getAttribute(fillString);
-</code><code id="L1793"><span class="ln">1793</span>            oid<span class="s"> = </span>oid &amp;&amp; oid.match(rgGrad);
-</code><code id="L1794"><span class="ln">1794</span>            <b>if</b> (oid &amp;&amp; !--gradients[oid[<span class="d">1</span>]]) {
-</code><code id="L1795"><span class="ln">1795</span>                <b>delete</b> gradients[oid[<span class="d">1</span>]];
-</code><code id="L1796"><span class="ln">1796</span>                paper.defs.removeChild(g.doc.getElementById(oid[<span class="d">1</span>]));
-</code><code id="L1797"><span class="ln">1797</span>            }
-</code><code id="L1798"><span class="ln">1798</span>        },
-</code><code id="L1799"><span class="ln">1799</span>        addGradientFill<span class="s"> = </span><b>function</b> (element, gradient) {
-</code><code id="L1800"><span class="ln">1800</span>            <b>var</b> type<span class="s"> = </span><i>"linear"</i>,
-</code><code id="L1801"><span class="ln">1801</span>                id<span class="s"> = </span>element.id<span class="s"> + </span>gradient,
-</code><code id="L1802"><span class="ln">1802</span>                fx<span class="s"> = </span><span class="d">.5</span>, fy<span class="s"> = </span><span class="d">.5</span>,
-</code><code id="L1803"><span class="ln">1803</span>                o<span class="s"> = </span>element.node,
-</code><code id="L1804"><span class="ln">1804</span>                SVG<span class="s"> = </span>element.paper,
-</code><code id="L1805"><span class="ln">1805</span>                s<span class="s"> = </span>o.style,
-</code><code id="L1806"><span class="ln">1806</span>                el<span class="s"> = </span>g.doc.getElementById(id);
-</code><code id="L1807"><span class="ln">1807</span>            <b>if</b> (!el) {
-</code><code id="L1808"><span class="ln">1808</span>                gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, _fx, _fy) {
-</code><code id="L1809"><span class="ln">1809</span>                    type<span class="s"> = </span><i>"radial"</i>;
-</code><code id="L1810"><span class="ln">1810</span>                    <b>if</b> (_fx &amp;&amp; _fy) {
-</code><code id="L1811"><span class="ln">1811</span>                        fx<span class="s"> = </span>toFloat(_fx);
-</code><code id="L1812"><span class="ln">1812</span>                        fy<span class="s"> = </span>toFloat(_fy);
-</code><code id="L1813"><span class="ln">1813</span>                        <b>var</b> dir<span class="s"> = </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>);
-</code><code id="L1814"><span class="ln">1814</span>                        pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span> &amp;&amp;
-</code><code id="L1815"><span class="ln">1815</span>                            (fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>dir<span class="s"> + </span><span class="d">.5</span>) &amp;&amp;
-</code><code id="L1816"><span class="ln">1816</span>                            fy != <span class="d">.5</span> &amp;&amp;
-</code><code id="L1817"><span class="ln">1817</span>                            (fy<span class="s"> = </span>fy.toFixed(<span class="d">5</span>)<span class="s"> - </span><span class="d">1e-5</span><span class="s"> * </span>dir);
-</code><code id="L1818"><span class="ln">1818</span>                    }
-</code><code id="L1819"><span class="ln">1819</span>                    <b>return</b> E;
-</code><code id="L1820"><span class="ln">1820</span>                });
-</code><code id="L1821"><span class="ln">1821</span>                gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
-</code><code id="L1822"><span class="ln">1822</span>                <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
-</code><code id="L1823"><span class="ln">1823</span>                    <b>var</b> angle<span class="s"> = </span>gradient.shift();
-</code><code id="L1824"><span class="ln">1824</span>                    angle<span class="s"> = </span>-toFloat(angle);
-</code><code id="L1825"><span class="ln">1825</span>                    <b>if</b> (isNaN(angle)) {
-</code><code id="L1826"><span class="ln">1826</span>                        <b>return</b> <b>null</b>;
-</code><code id="L1827"><span class="ln">1827</span>                    }
-</code><code id="L1828"><span class="ln">1828</span>                    <b>var</b> vector<span class="s"> = </span>[<span class="d">0</span>, <span class="d">0</span>, math.cos(R.rad(angle)), math.sin(R.rad(angle))],
-</code><code id="L1829"><span class="ln">1829</span>                        max<span class="s"> = </span><span class="d">1</span><span class="s"> / </span>(mmax(abs(vector[<span class="d">2</span>]), abs(vector[<span class="d">3</span>]))<span class="s"> || </span><span class="d">1</span>);
-</code><code id="L1830"><span class="ln">1830</span>                    vector[<span class="d">2</span>] *= max;
-</code><code id="L1831"><span class="ln">1831</span>                    vector[<span class="d">3</span>] *= max;
-</code><code id="L1832"><span class="ln">1832</span>                    <b>if</b> (vector[<span class="d">2</span>] &lt; <span class="d">0</span>) {
-</code><code id="L1833"><span class="ln">1833</span>                        vector[<span class="d">0</span>]<span class="s"> = </span>-vector[<span class="d">2</span>];
-</code><code id="L1834"><span class="ln">1834</span>                        vector[<span class="d">2</span>]<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L1835"><span class="ln">1835</span>                    }
-</code><code id="L1836"><span class="ln">1836</span>                    <b>if</b> (vector[<span class="d">3</span>] &lt; <span class="d">0</span>) {
-</code><code id="L1837"><span class="ln">1837</span>                        vector[<span class="d">1</span>]<span class="s"> = </span>-vector[<span class="d">3</span>];
-</code><code id="L1838"><span class="ln">1838</span>                        vector[<span class="d">3</span>]<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L803"><span class="ln">803</span>    R.hsl<span class="s"> = </span>cacher(<b>function</b> (h, s, l) {
+</code><code id="L804"><span class="ln">804</span>        <b>return</b> R.hsl2rgb(h, s, l).hex;
+</code><code id="L805"><span class="ln">805</span>    });
+</code><code id="L806"><span class="ln">806</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L807"><span class="ln">807</span><span class="c">    <span class="s"> * </span>Raphael.rgb
+</span></code><code id="L808"><span class="ln">808</span><span class="c">     [ method ]
+</span></code><code id="L809"><span class="ln">809</span><span class="c">     **
+</span></code><code id="L810"><span class="ln">810</span><span class="c">    <span class="s"> * </span>Converts RGB values to hex representation of the colour.
+</span></code><code id="L811"><span class="ln">811</span><span class="c">     > Parameters
+</span></code><code id="L812"><span class="ln">812</span><span class="c">    <span class="s"> - </span>r (number) red
+</span></code><code id="L813"><span class="ln">813</span><span class="c">    <span class="s"> - </span>g (number) green
+</span></code><code id="L814"><span class="ln">814</span><span class="c">    <span class="s"> - </span>b (number) blue
+</span></code><code id="L815"><span class="ln">815</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L816"><span class="ln">816</span><span class="c">    \*/</span>
+</code><code id="L817"><span class="ln">817</span>    R.rgb<span class="s"> = </span>cacher(<b>function</b> (r, g, b) {
+</code><code id="L818"><span class="ln">818</span>        <b>return</b> <i>"#"</i><span class="s"> + </span>(<span class="d">16777216</span><span class="s"> | </span>b<span class="s"> | </span>(g &lt;&lt; <span class="d">8</span>)<span class="s"> | </span>(r &lt;&lt; <span class="d">16</span>)).toString(<span class="d">16</span>).slice(<span class="d">1</span>);
+</code><code id="L819"><span class="ln">819</span>    });
+</code><code id="L820"><span class="ln">820</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L821"><span class="ln">821</span><span class="c">    <span class="s"> * </span>Raphael.getColor
+</span></code><code id="L822"><span class="ln">822</span><span class="c">     [ method ]
+</span></code><code id="L823"><span class="ln">823</span><span class="c">     **
+</span></code><code id="L824"><span class="ln">824</span><span class="c">    <span class="s"> * </span>On each call returns next colour <b>in</b> the spectrum. To reset it back to red call @Raphael.getColor.reset
+</span></code><code id="L825"><span class="ln">825</span><span class="c">     > Parameters
+</span></code><code id="L826"><span class="ln">826</span><span class="c">    <span class="s"> - </span>value (number) #optional brightness, <b>default</b> is `<span class="d">0.75</span>`
+</span></code><code id="L827"><span class="ln">827</span><span class="c">    <span class="s"> = </span>(string) hex representation of the colour.
+</span></code><code id="L828"><span class="ln">828</span><span class="c">    \*/</span>
+</code><code id="L829"><span class="ln">829</span>    R.getColor<span class="s"> = </span><b>function</b> (value) {
+</code><code id="L830"><span class="ln">830</span>        <b>var</b> start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> = </span><b>this</b>.getColor.start<span class="s"> || </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: value<span class="s"> || </span><span class="d">.75</span>},
+</code><code id="L831"><span class="ln">831</span>            rgb<span class="s"> = </span><b>this</b>.hsb2rgb(start.h, start.s, start.b);
+</code><code id="L832"><span class="ln">832</span>        start.h += <span class="d">.075</span>;
+</code><code id="L833"><span class="ln">833</span>        <b>if</b> (start.h > <span class="d">1</span>) {
+</code><code id="L834"><span class="ln">834</span>            start.h<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L835"><span class="ln">835</span>            start.s -= <span class="d">.2</span>;
+</code><code id="L836"><span class="ln">836</span>            start.s &lt;= <span class="d">0</span><span class="s"> &amp;&amp; </span>(<b>this</b>.getColor.start<span class="s"> = </span>{h: <span class="d">0</span>, s: <span class="d">1</span>, b: start.b});
+</code><code id="L837"><span class="ln">837</span>        }
+</code><code id="L838"><span class="ln">838</span>        <b>return</b> rgb.hex;
+</code><code id="L839"><span class="ln">839</span>    };
+</code><code id="L840"><span class="ln">840</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L841"><span class="ln">841</span><span class="c">    <span class="s"> * </span>Raphael.getColor.reset
+</span></code><code id="L842"><span class="ln">842</span><span class="c">     [ method ]
+</span></code><code id="L843"><span class="ln">843</span><span class="c">     **
+</span></code><code id="L844"><span class="ln">844</span><span class="c">    <span class="s"> * </span>Resets spectrum position <b>for</b> @Raphael.getColor back to red.
+</span></code><code id="L845"><span class="ln">845</span><span class="c">    \*/</span>
+</code><code id="L846"><span class="ln">846</span>    R.getColor.reset<span class="s"> = </span><b>function</b> () {
+</code><code id="L847"><span class="ln">847</span>        <b>delete</b> <b>this</b>.start;
+</code><code id="L848"><span class="ln">848</span>    };
+</code><code id="L849"><span class="ln">849</span>
+</code><code id="L850"><span class="ln">850</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L851"><span class="ln">851</span><span class="c">    <span class="s"> * </span>Raphael.parsePathString
+</span></code><code id="L852"><span class="ln">852</span><span class="c">     [ method ]
+</span></code><code id="L853"><span class="ln">853</span><span class="c">     **
+</span></code><code id="L854"><span class="ln">854</span><span class="c">    <span class="s"> * </span>Utility method
+</span></code><code id="L855"><span class="ln">855</span><span class="c">     **
+</span></code><code id="L856"><span class="ln">856</span><span class="c">    <span class="s"> * </span>Parses given path string into an array of arrays of path segments.
+</span></code><code id="L857"><span class="ln">857</span><span class="c">     > Parameters
+</span></code><code id="L858"><span class="ln">858</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments (<b>in</b> the last <b>case</b> it will be returned stright away)
+</span></code><code id="L859"><span class="ln">859</span><span class="c">    <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L860"><span class="ln">860</span><span class="c">    \*/</span>
+</code><code id="L861"><span class="ln">861</span>    R.parsePathString<span class="s"> = </span>cacher(<b>function</b> (pathString) {
+</code><code id="L862"><span class="ln">862</span>        <b>if</b> (!pathString) {
+</code><code id="L863"><span class="ln">863</span>            <b>return</b> <b>null</b>;
+</code><code id="L864"><span class="ln">864</span>        }
+</code><code id="L865"><span class="ln">865</span>        <b>var</b> paramCounts<span class="s"> = </span>{a: <span class="d">7</span>, c: <span class="d">6</span>, h: <span class="d">1</span>, l: <span class="d">2</span>, m: <span class="d">2</span>, q: <span class="d">4</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, v: <span class="d">1</span>, z: <span class="d">0</span>},
+</code><code id="L866"><span class="ln">866</span>            data<span class="s"> = </span>[];
+</code><code id="L867"><span class="ln">867</span>        <b>if</b> (R.is(pathString, array)<span class="s"> &amp;&amp; </span>R.is(pathString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L868"><span class="ln">868</span>            data<span class="s"> = </span>pathClone(pathString);
+</code><code id="L869"><span class="ln">869</span>        }
+</code><code id="L870"><span class="ln">870</span>        <b>if</b> (!data.length) {
+</code><code id="L871"><span class="ln">871</span>            Str(pathString).replace(pathCommand, <b>function</b> (a, b, c) {
+</code><code id="L872"><span class="ln">872</span>                <b>var</b> params<span class="s"> = </span>[],
+</code><code id="L873"><span class="ln">873</span>                    name<span class="s"> = </span>lowerCase.call(b);
+</code><code id="L874"><span class="ln">874</span>                c.replace(pathValues, <b>function</b> (a, b) {
+</code><code id="L875"><span class="ln">875</span>                    b<span class="s"> &amp;&amp; </span>params.push(+b);
+</code><code id="L876"><span class="ln">876</span>                });
+</code><code id="L877"><span class="ln">877</span>                <b>if</b> (name<span class="s"> == </span><i>"m"</i><span class="s"> &amp;&amp; </span>params.length > <span class="d">2</span>) {
+</code><code id="L878"><span class="ln">878</span>                    data.push([b][concat](params.splice(<span class="d">0</span>, <span class="d">2</span>)));
+</code><code id="L879"><span class="ln">879</span>                    name<span class="s"> = </span><i>"l"</i>;
+</code><code id="L880"><span class="ln">880</span>                    b<span class="s"> = </span>b<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>;
+</code><code id="L881"><span class="ln">881</span>                }
+</code><code id="L882"><span class="ln">882</span>                <b>while</b> (params.length >= paramCounts[name]) {
+</code><code id="L883"><span class="ln">883</span>                    data.push([b][concat](params.splice(<span class="d">0</span>, paramCounts[name])));
+</code><code id="L884"><span class="ln">884</span>                    <b>if</b> (!paramCounts[name]) {
+</code><code id="L885"><span class="ln">885</span>                        <b>break</b>;
+</code><code id="L886"><span class="ln">886</span>                    }
+</code><code id="L887"><span class="ln">887</span>                }
+</code><code id="L888"><span class="ln">888</span>            });
+</code><code id="L889"><span class="ln">889</span>        }
+</code><code id="L890"><span class="ln">890</span>        data.toString<span class="s"> = </span>R._path2string;
+</code><code id="L891"><span class="ln">891</span>        <b>return</b> data;
+</code><code id="L892"><span class="ln">892</span>    });
+</code><code id="L893"><span class="ln">893</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L894"><span class="ln">894</span><span class="c">    <span class="s"> * </span>Raphael.parseTransformString
+</span></code><code id="L895"><span class="ln">895</span><span class="c">     [ method ]
+</span></code><code id="L896"><span class="ln">896</span><span class="c">     **
+</span></code><code id="L897"><span class="ln">897</span><span class="c">    <span class="s"> * </span>Utility method
+</span></code><code id="L898"><span class="ln">898</span><span class="c">     **
+</span></code><code id="L899"><span class="ln">899</span><span class="c">    <span class="s"> * </span>Parses given path string into an array of transformations.
+</span></code><code id="L900"><span class="ln">900</span><span class="c">     > Parameters
+</span></code><code id="L901"><span class="ln">901</span><span class="c">    <span class="s"> - </span>TString (string|array) transform string or array of transformations (<b>in</b> the last <b>case</b> it will be returned stright away)
+</span></code><code id="L902"><span class="ln">902</span><span class="c">    <span class="s"> = </span>(array) array of transformations.
+</span></code><code id="L903"><span class="ln">903</span><span class="c">    \*/</span>
+</code><code id="L904"><span class="ln">904</span>    R.parseTransformString<span class="s"> = </span>cacher(<b>function</b> (TString) {
+</code><code id="L905"><span class="ln">905</span>        <b>if</b> (!TString) {
+</code><code id="L906"><span class="ln">906</span>            <b>return</b> <b>null</b>;
+</code><code id="L907"><span class="ln">907</span>        }
+</code><code id="L908"><span class="ln">908</span>        <b>var</b> paramCounts<span class="s"> = </span>{r: <span class="d">3</span>, s: <span class="d">4</span>, t: <span class="d">2</span>, m: <span class="d">6</span>},
+</code><code id="L909"><span class="ln">909</span>            data<span class="s"> = </span>[];
+</code><code id="L910"><span class="ln">910</span>        <b>if</b> (R.is(TString, array)<span class="s"> &amp;&amp; </span>R.is(TString[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L911"><span class="ln">911</span>            data<span class="s"> = </span>pathClone(TString);
+</code><code id="L912"><span class="ln">912</span>        }
+</code><code id="L913"><span class="ln">913</span>        <b>if</b> (!data.length) {
+</code><code id="L914"><span class="ln">914</span>            Str(TString).replace(tCommand, <b>function</b> (a, b, c) {
+</code><code id="L915"><span class="ln">915</span>                <b>var</b> params<span class="s"> = </span>[],
+</code><code id="L916"><span class="ln">916</span>                    name<span class="s"> = </span>lowerCase.call(b);
+</code><code id="L917"><span class="ln">917</span>                c.replace(pathValues, <b>function</b> (a, b) {
+</code><code id="L918"><span class="ln">918</span>                    b<span class="s"> &amp;&amp; </span>params.push(+b);
+</code><code id="L919"><span class="ln">919</span>                });
+</code><code id="L920"><span class="ln">920</span>                data.push([name][concat](params));
+</code><code id="L921"><span class="ln">921</span>            });
+</code><code id="L922"><span class="ln">922</span>        }
+</code><code id="L923"><span class="ln">923</span>        data.toString<span class="s"> = </span>R._path2string;
+</code><code id="L924"><span class="ln">924</span>        <b>return</b> data;
+</code><code id="L925"><span class="ln">925</span>    });
+</code><code id="L926"><span class="ln">926</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L927"><span class="ln">927</span><span class="c">    <span class="s"> * </span>Raphael.findDotsAtSegment
+</span></code><code id="L928"><span class="ln">928</span><span class="c">     [ method ]
+</span></code><code id="L929"><span class="ln">929</span><span class="c">     **
+</span></code><code id="L930"><span class="ln">930</span><span class="c">    <span class="s"> * </span>Utility method
+</span></code><code id="L931"><span class="ln">931</span><span class="c">     **
+</span></code><code id="L932"><span class="ln">932</span><span class="c">    <span class="s"> * </span>Find dot coordinates on the given cubic bezier curve at the given t.
+</span></code><code id="L933"><span class="ln">933</span><span class="c">     > Parameters
+</span></code><code id="L934"><span class="ln">934</span><span class="c">    <span class="s"> - </span>p1x (number) x of the first point of the curve
+</span></code><code id="L935"><span class="ln">935</span><span class="c">    <span class="s"> - </span>p1y (number) y of the first point of the curve
+</span></code><code id="L936"><span class="ln">936</span><span class="c">    <span class="s"> - </span>c1x (number) x of the first anchor of the curve
+</span></code><code id="L937"><span class="ln">937</span><span class="c">    <span class="s"> - </span>c1y (number) y of the first anchor of the curve
+</span></code><code id="L938"><span class="ln">938</span><span class="c">    <span class="s"> - </span>c2x (number) x of the second anchor of the curve
+</span></code><code id="L939"><span class="ln">939</span><span class="c">    <span class="s"> - </span>c2y (number) y of the second anchor of the curve
+</span></code><code id="L940"><span class="ln">940</span><span class="c">    <span class="s"> - </span>p2x (number) x of the second point of the curve
+</span></code><code id="L941"><span class="ln">941</span><span class="c">    <span class="s"> - </span>p2y (number) y of the second point of the curve
+</span></code><code id="L942"><span class="ln">942</span><span class="c">    <span class="s"> - </span>t (number) position on the curve (<span class="d">0</span>.<span class="d">.1</span>)
+</span></code><code id="L943"><span class="ln">943</span><span class="c">    <span class="s"> = </span>(object) point information <b>in</b> format:
+</span></code><code id="L944"><span class="ln">944</span><span class="c">     o {
+</span></code><code id="L945"><span class="ln">945</span><span class="c">     o     x: (number) x coordinate of the point
+</span></code><code id="L946"><span class="ln">946</span><span class="c">     o     y: (number) y coordinate of the point
+</span></code><code id="L947"><span class="ln">947</span><span class="c">     o     m: {
+</span></code><code id="L948"><span class="ln">948</span><span class="c">     o         x: (number) x coordinate of the left anchor
+</span></code><code id="L949"><span class="ln">949</span><span class="c">     o         y: (number) y coordinate of the left anchor
+</span></code><code id="L950"><span class="ln">950</span><span class="c">     o     }
+</span></code><code id="L951"><span class="ln">951</span><span class="c">     o     n: {
+</span></code><code id="L952"><span class="ln">952</span><span class="c">     o         x: (number) x coordinate of the right anchor
+</span></code><code id="L953"><span class="ln">953</span><span class="c">     o         y: (number) y coordinate of the right anchor
+</span></code><code id="L954"><span class="ln">954</span><span class="c">     o     }
+</span></code><code id="L955"><span class="ln">955</span><span class="c">     o     start: {
+</span></code><code id="L956"><span class="ln">956</span><span class="c">     o         x: (number) x coordinate of the start of the curve
+</span></code><code id="L957"><span class="ln">957</span><span class="c">     o         y: (number) y coordinate of the start of the curve
+</span></code><code id="L958"><span class="ln">958</span><span class="c">     o     }
+</span></code><code id="L959"><span class="ln">959</span><span class="c">     o     end: {
+</span></code><code id="L960"><span class="ln">960</span><span class="c">     o         x: (number) x coordinate of the end of the curve
+</span></code><code id="L961"><span class="ln">961</span><span class="c">     o         y: (number) y coordinate of the end of the curve
+</span></code><code id="L962"><span class="ln">962</span><span class="c">     o     }
+</span></code><code id="L963"><span class="ln">963</span><span class="c">     o     alpha: (number) angle of the curve derivative at the point
+</span></code><code id="L964"><span class="ln">964</span><span class="c">     o }
+</span></code><code id="L965"><span class="ln">965</span><span class="c">    \*/</span>
+</code><code id="L966"><span class="ln">966</span>    R.findDotsAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+</code><code id="L967"><span class="ln">967</span>        <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t,
+</code><code id="L968"><span class="ln">968</span>            x<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
+</code><code id="L969"><span class="ln">969</span>            y<span class="s"> = </span>pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y,
+</code><code id="L970"><span class="ln">970</span>            mx<span class="s"> = </span>p1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x),
+</code><code id="L971"><span class="ln">971</span>            my<span class="s"> = </span>p1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y),
+</code><code id="L972"><span class="ln">972</span>            nx<span class="s"> = </span>c1x<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2x<span class="s"> - </span>c1x)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
+</code><code id="L973"><span class="ln">973</span>            ny<span class="s"> = </span>c1y<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>t<span class="s"> * </span>(c2y<span class="s"> - </span>c1y)<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y),
+</code><code id="L974"><span class="ln">974</span>            ax<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1x<span class="s"> + </span>t<span class="s"> * </span>c1x,
+</code><code id="L975"><span class="ln">975</span>            ay<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>p1y<span class="s"> + </span>t<span class="s"> * </span>c1y,
+</code><code id="L976"><span class="ln">976</span>            cx<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2x<span class="s"> + </span>t<span class="s"> * </span>p2x,
+</code><code id="L977"><span class="ln">977</span>            cy<span class="s"> = </span>(<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span>c2y<span class="s"> + </span>t<span class="s"> * </span>p2y,
+</code><code id="L978"><span class="ln">978</span>            alpha<span class="s"> = </span>(<span class="d">90</span><span class="s"> - </span>math.atan2(mx<span class="s"> - </span>nx, my<span class="s"> - </span>ny)<span class="s"> * </span><span class="d">180</span><span class="s"> / </span>PI);
+</code><code id="L979"><span class="ln">979</span>        (mx > nx<span class="s"> || </span>my &lt; ny)<span class="s"> &amp;&amp; </span>(alpha += <span class="d">180</span>);
+</code><code id="L980"><span class="ln">980</span>        <b>return</b> {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}, alpha: alpha};
+</code><code id="L981"><span class="ln">981</span>    };
+</code><code id="L982"><span class="ln">982</span>    <b>var</b> pathDimensions<span class="s"> = </span>cacher(<b>function</b> (path) {
+</code><code id="L983"><span class="ln">983</span>        <b>if</b> (!path) {
+</code><code id="L984"><span class="ln">984</span>            <b>return</b> {x: <span class="d">0</span>, y: <span class="d">0</span>, width: <span class="d">0</span>, height: <span class="d">0</span>};
+</code><code id="L985"><span class="ln">985</span>        }
+</code><code id="L986"><span class="ln">986</span>        path<span class="s"> = </span>path2curve(path);
+</code><code id="L987"><span class="ln">987</span>        <b>var</b> x<span class="s"> = </span><span class="d">0</span>, 
+</code><code id="L988"><span class="ln">988</span>            y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L989"><span class="ln">989</span>            X<span class="s"> = </span>[],
+</code><code id="L990"><span class="ln">990</span>            Y<span class="s"> = </span>[],
+</code><code id="L991"><span class="ln">991</span>            p;
+</code><code id="L992"><span class="ln">992</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i &lt; ii; i++) {
+</code><code id="L993"><span class="ln">993</span>            p<span class="s"> = </span>path[i];
+</code><code id="L994"><span class="ln">994</span>            <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L995"><span class="ln">995</span>                x<span class="s"> = </span>p[<span class="d">1</span>];
+</code><code id="L996"><span class="ln">996</span>                y<span class="s"> = </span>p[<span class="d">2</span>];
+</code><code id="L997"><span class="ln">997</span>                X.push(x);
+</code><code id="L998"><span class="ln">998</span>                Y.push(y);
+</code><code id="L999"><span class="ln">999</span>            } <b>else</b> {
+</code><code id="L1000"><span class="ln">1000</span>                <b>var</b> dim<span class="s"> = </span>curveDim(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
+</code><code id="L1001"><span class="ln">1001</span>                X<span class="s"> = </span>X[concat](dim.min.x, dim.max.x);
+</code><code id="L1002"><span class="ln">1002</span>                Y<span class="s"> = </span>Y[concat](dim.min.y, dim.max.y);
+</code><code id="L1003"><span class="ln">1003</span>                x<span class="s"> = </span>p[<span class="d">5</span>];
+</code><code id="L1004"><span class="ln">1004</span>                y<span class="s"> = </span>p[<span class="d">6</span>];
+</code><code id="L1005"><span class="ln">1005</span>            }
+</code><code id="L1006"><span class="ln">1006</span>        }
+</code><code id="L1007"><span class="ln">1007</span>        <b>var</b> xmin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, X),
+</code><code id="L1008"><span class="ln">1008</span>            ymin<span class="s"> = </span>mmin[apply](<span class="d">0</span>, Y);
+</code><code id="L1009"><span class="ln">1009</span>        <b>return</b> {
+</code><code id="L1010"><span class="ln">1010</span>            x: xmin,
+</code><code id="L1011"><span class="ln">1011</span>            y: ymin,
+</code><code id="L1012"><span class="ln">1012</span>            width: mmax[apply](<span class="d">0</span>, X)<span class="s"> - </span>xmin,
+</code><code id="L1013"><span class="ln">1013</span>            height: mmax[apply](<span class="d">0</span>, Y)<span class="s"> - </span>ymin
+</code><code id="L1014"><span class="ln">1014</span>        };
+</code><code id="L1015"><span class="ln">1015</span>    }),
+</code><code id="L1016"><span class="ln">1016</span>        pathClone<span class="s"> = </span><b>function</b> (pathArray) {
+</code><code id="L1017"><span class="ln">1017</span>            <b>var</b> res<span class="s"> = </span>[];
+</code><code id="L1018"><span class="ln">1018</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray<span class="s"> &amp;&amp; </span>pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L1019"><span class="ln">1019</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L1020"><span class="ln">1020</span>            }
+</code><code id="L1021"><span class="ln">1021</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
+</code><code id="L1022"><span class="ln">1022</span>                res[i]<span class="s"> = </span>[];
+</code><code id="L1023"><span class="ln">1023</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>pathArray[i].length; j &lt; jj; j++) {
+</code><code id="L1024"><span class="ln">1024</span>                    res[i][j]<span class="s"> = </span>pathArray[i][j];
+</code><code id="L1025"><span class="ln">1025</span>                }
+</code><code id="L1026"><span class="ln">1026</span>            }
+</code><code id="L1027"><span class="ln">1027</span>            res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1028"><span class="ln">1028</span>            <b>return</b> res;
+</code><code id="L1029"><span class="ln">1029</span>        },
+</code><code id="L1030"><span class="ln">1030</span>        pathToRelative<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
+</code><code id="L1031"><span class="ln">1031</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray<span class="s"> &amp;&amp; </span>pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L1032"><span class="ln">1032</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L1033"><span class="ln">1033</span>            }
+</code><code id="L1034"><span class="ln">1034</span>            <b>var</b> res<span class="s"> = </span>[],
+</code><code id="L1035"><span class="ln">1035</span>                x<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1036"><span class="ln">1036</span>                y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1037"><span class="ln">1037</span>                mx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1038"><span class="ln">1038</span>                my<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1039"><span class="ln">1039</span>                start<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1040"><span class="ln">1040</span>            <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L1041"><span class="ln">1041</span>                x<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">1</span>];
+</code><code id="L1042"><span class="ln">1042</span>                y<span class="s"> = </span>pathArray[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1043"><span class="ln">1043</span>                mx<span class="s"> = </span>x;
+</code><code id="L1044"><span class="ln">1044</span>                my<span class="s"> = </span>y;
+</code><code id="L1045"><span class="ln">1045</span>                start++;
+</code><code id="L1046"><span class="ln">1046</span>                res.push([<i>"M"</i>, x, y]);
+</code><code id="L1047"><span class="ln">1047</span>            }
+</code><code id="L1048"><span class="ln">1048</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
+</code><code id="L1049"><span class="ln">1049</span>                <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
+</code><code id="L1050"><span class="ln">1050</span>                    pa<span class="s"> = </span>pathArray[i];
+</code><code id="L1051"><span class="ln">1051</span>                <b>if</b> (pa[<span class="d">0</span>] != lowerCase.call(pa[<span class="d">0</span>])) {
+</code><code id="L1052"><span class="ln">1052</span>                    r[<span class="d">0</span>]<span class="s"> = </span>lowerCase.call(pa[<span class="d">0</span>]);
+</code><code id="L1053"><span class="ln">1053</span>                    <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1054"><span class="ln">1054</span>                        <b>case</b> <i>"a"</i>:
+</code><code id="L1055"><span class="ln">1055</span>                            r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1056"><span class="ln">1056</span>                            r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1057"><span class="ln">1057</span>                            r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
+</code><code id="L1058"><span class="ln">1058</span>                            r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
+</code><code id="L1059"><span class="ln">1059</span>                            r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
+</code><code id="L1060"><span class="ln">1060</span>                            r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> - </span>x).toFixed(<span class="d">3</span>);
+</code><code id="L1061"><span class="ln">1061</span>                            r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
+</code><code id="L1062"><span class="ln">1062</span>                            <b>break</b>;
+</code><code id="L1063"><span class="ln">1063</span>                        <b>case</b> <i>"v"</i>:
+</code><code id="L1064"><span class="ln">1064</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+(pa[<span class="d">1</span>]<span class="s"> - </span>y).toFixed(<span class="d">3</span>);
+</code><code id="L1065"><span class="ln">1065</span>                            <b>break</b>;
+</code><code id="L1066"><span class="ln">1066</span>                        <b>case</b> <i>"m"</i>:
+</code><code id="L1067"><span class="ln">1067</span>                            mx<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1068"><span class="ln">1068</span>                            my<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1069"><span class="ln">1069</span>                        <b>default</b>:
+</code><code id="L1070"><span class="ln">1070</span>                            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j &lt; jj; j++) {
+</code><code id="L1071"><span class="ln">1071</span>                                r[j]<span class="s"> = </span>+(pa[j]<span class="s"> - </span>((j<span class="s"> % </span><span class="d">2</span>) ? x : y)).toFixed(<span class="d">3</span>);
+</code><code id="L1072"><span class="ln">1072</span>                            }
+</code><code id="L1073"><span class="ln">1073</span>                    }
+</code><code id="L1074"><span class="ln">1074</span>                } <b>else</b> {
+</code><code id="L1075"><span class="ln">1075</span>                    r<span class="s"> = </span>res[i]<span class="s"> = </span>[];
+</code><code id="L1076"><span class="ln">1076</span>                    <b>if</b> (pa[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i>) {
+</code><code id="L1077"><span class="ln">1077</span>                        mx<span class="s"> = </span>pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1078"><span class="ln">1078</span>                        my<span class="s"> = </span>pa[<span class="d">2</span>]<span class="s"> + </span>y;
+</code><code id="L1079"><span class="ln">1079</span>                    }
+</code><code id="L1080"><span class="ln">1080</span>                    <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k &lt; kk; k++) {
+</code><code id="L1081"><span class="ln">1081</span>                        res[i][k]<span class="s"> = </span>pa[k];
+</code><code id="L1082"><span class="ln">1082</span>                    }
+</code><code id="L1083"><span class="ln">1083</span>                }
+</code><code id="L1084"><span class="ln">1084</span>                <b>var</b> len<span class="s"> = </span>res[i].length;
+</code><code id="L1085"><span class="ln">1085</span>                <b>switch</b> (res[i][<span class="d">0</span>]) {
+</code><code id="L1086"><span class="ln">1086</span>                    <b>case</b> <i>"z"</i>:
+</code><code id="L1087"><span class="ln">1087</span>                        x<span class="s"> = </span>mx;
+</code><code id="L1088"><span class="ln">1088</span>                        y<span class="s"> = </span>my;
+</code><code id="L1089"><span class="ln">1089</span>                        <b>break</b>;
+</code><code id="L1090"><span class="ln">1090</span>                    <b>case</b> <i>"h"</i>:
+</code><code id="L1091"><span class="ln">1091</span>                        x += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1092"><span class="ln">1092</span>                        <b>break</b>;
+</code><code id="L1093"><span class="ln">1093</span>                    <b>case</b> <i>"v"</i>:
+</code><code id="L1094"><span class="ln">1094</span>                        y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1095"><span class="ln">1095</span>                        <b>break</b>;
+</code><code id="L1096"><span class="ln">1096</span>                    <b>default</b>:
+</code><code id="L1097"><span class="ln">1097</span>                        x += +res[i][len<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1098"><span class="ln">1098</span>                        y += +res[i][len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1099"><span class="ln">1099</span>                }
+</code><code id="L1100"><span class="ln">1100</span>            }
+</code><code id="L1101"><span class="ln">1101</span>            res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1102"><span class="ln">1102</span>            <b>return</b> res;
+</code><code id="L1103"><span class="ln">1103</span>        }, <span class="d">0</span>, pathClone),
+</code><code id="L1104"><span class="ln">1104</span>        pathToAbsolute<span class="s"> = </span>cacher(<b>function</b> (pathArray) {
+</code><code id="L1105"><span class="ln">1105</span>            <b>if</b> (!R.is(pathArray, array)<span class="s"> || </span>!R.is(pathArray<span class="s"> &amp;&amp; </span>pathArray[<span class="d">0</span>], array)) { <span class="c">// rough assumption</span>
+</code><code id="L1106"><span class="ln">1106</span>                pathArray<span class="s"> = </span>R.parsePathString(pathArray);
+</code><code id="L1107"><span class="ln">1107</span>            }
+</code><code id="L1108"><span class="ln">1108</span>            <b>var</b> res<span class="s"> = </span>[],
+</code><code id="L1109"><span class="ln">1109</span>                x<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1110"><span class="ln">1110</span>                y<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1111"><span class="ln">1111</span>                mx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1112"><span class="ln">1112</span>                my<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1113"><span class="ln">1113</span>                start<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1114"><span class="ln">1114</span>            <b>if</b> (pathArray[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L1115"><span class="ln">1115</span>                x<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">1</span>];
+</code><code id="L1116"><span class="ln">1116</span>                y<span class="s"> = </span>+pathArray[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1117"><span class="ln">1117</span>                mx<span class="s"> = </span>x;
+</code><code id="L1118"><span class="ln">1118</span>                my<span class="s"> = </span>y;
+</code><code id="L1119"><span class="ln">1119</span>                start++;
+</code><code id="L1120"><span class="ln">1120</span>                res[<span class="d">0</span>]<span class="s"> = </span>[<i>"M"</i>, x, y];
+</code><code id="L1121"><span class="ln">1121</span>            }
+</code><code id="L1122"><span class="ln">1122</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span>start, ii<span class="s"> = </span>pathArray.length; i &lt; ii; i++) {
+</code><code id="L1123"><span class="ln">1123</span>                <b>var</b> r<span class="s"> = </span>res[i]<span class="s"> = </span>[],
+</code><code id="L1124"><span class="ln">1124</span>                    pa<span class="s"> = </span>pathArray[i];
+</code><code id="L1125"><span class="ln">1125</span>                <b>if</b> (pa[<span class="d">0</span>] != upperCase.call(pa[<span class="d">0</span>])) {
+</code><code id="L1126"><span class="ln">1126</span>                    r[<span class="d">0</span>]<span class="s"> = </span>upperCase.call(pa[<span class="d">0</span>]);
+</code><code id="L1127"><span class="ln">1127</span>                    <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1128"><span class="ln">1128</span>                        <b>case</b> <i>"A"</i>:
+</code><code id="L1129"><span class="ln">1129</span>                            r[<span class="d">1</span>]<span class="s"> = </span>pa[<span class="d">1</span>];
+</code><code id="L1130"><span class="ln">1130</span>                            r[<span class="d">2</span>]<span class="s"> = </span>pa[<span class="d">2</span>];
+</code><code id="L1131"><span class="ln">1131</span>                            r[<span class="d">3</span>]<span class="s"> = </span>pa[<span class="d">3</span>];
+</code><code id="L1132"><span class="ln">1132</span>                            r[<span class="d">4</span>]<span class="s"> = </span>pa[<span class="d">4</span>];
+</code><code id="L1133"><span class="ln">1133</span>                            r[<span class="d">5</span>]<span class="s"> = </span>pa[<span class="d">5</span>];
+</code><code id="L1134"><span class="ln">1134</span>                            r[<span class="d">6</span>]<span class="s"> = </span>+(pa[<span class="d">6</span>]<span class="s"> + </span>x);
+</code><code id="L1135"><span class="ln">1135</span>                            r[<span class="d">7</span>]<span class="s"> = </span>+(pa[<span class="d">7</span>]<span class="s"> + </span>y);
+</code><code id="L1136"><span class="ln">1136</span>                            <b>break</b>;
+</code><code id="L1137"><span class="ln">1137</span>                        <b>case</b> <i>"V"</i>:
+</code><code id="L1138"><span class="ln">1138</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>y;
+</code><code id="L1139"><span class="ln">1139</span>                            <b>break</b>;
+</code><code id="L1140"><span class="ln">1140</span>                        <b>case</b> <i>"H"</i>:
+</code><code id="L1141"><span class="ln">1141</span>                            r[<span class="d">1</span>]<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1142"><span class="ln">1142</span>                            <b>break</b>;
+</code><code id="L1143"><span class="ln">1143</span>                        <b>case</b> <i>"M"</i>:
+</code><code id="L1144"><span class="ln">1144</span>                            mx<span class="s"> = </span>+pa[<span class="d">1</span>]<span class="s"> + </span>x;
+</code><code id="L1145"><span class="ln">1145</span>                            my<span class="s"> = </span>+pa[<span class="d">2</span>]<span class="s"> + </span>y;
+</code><code id="L1146"><span class="ln">1146</span>                        <b>default</b>:
+</code><code id="L1147"><span class="ln">1147</span>                            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>pa.length; j &lt; jj; j++) {
+</code><code id="L1148"><span class="ln">1148</span>                                r[j]<span class="s"> = </span>+pa[j]<span class="s"> + </span>((j<span class="s"> % </span><span class="d">2</span>) ? x : y);
+</code><code id="L1149"><span class="ln">1149</span>                            }
+</code><code id="L1150"><span class="ln">1150</span>                    }
+</code><code id="L1151"><span class="ln">1151</span>                } <b>else</b> {
+</code><code id="L1152"><span class="ln">1152</span>                    <b>for</b> (<b>var</b> k<span class="s"> = </span><span class="d">0</span>, kk<span class="s"> = </span>pa.length; k &lt; kk; k++) {
+</code><code id="L1153"><span class="ln">1153</span>                        res[i][k]<span class="s"> = </span>pa[k];
+</code><code id="L1154"><span class="ln">1154</span>                    }
+</code><code id="L1155"><span class="ln">1155</span>                }
+</code><code id="L1156"><span class="ln">1156</span>                <b>switch</b> (r[<span class="d">0</span>]) {
+</code><code id="L1157"><span class="ln">1157</span>                    <b>case</b> <i>"Z"</i>:
+</code><code id="L1158"><span class="ln">1158</span>                        x<span class="s"> = </span>mx;
+</code><code id="L1159"><span class="ln">1159</span>                        y<span class="s"> = </span>my;
+</code><code id="L1160"><span class="ln">1160</span>                        <b>break</b>;
+</code><code id="L1161"><span class="ln">1161</span>                    <b>case</b> <i>"H"</i>:
+</code><code id="L1162"><span class="ln">1162</span>                        x<span class="s"> = </span>r[<span class="d">1</span>];
+</code><code id="L1163"><span class="ln">1163</span>                        <b>break</b>;
+</code><code id="L1164"><span class="ln">1164</span>                    <b>case</b> <i>"V"</i>:
+</code><code id="L1165"><span class="ln">1165</span>                        y<span class="s"> = </span>r[<span class="d">1</span>];
+</code><code id="L1166"><span class="ln">1166</span>                        <b>break</b>;
+</code><code id="L1167"><span class="ln">1167</span>                    <b>case</b> <i>"M"</i>:
+</code><code id="L1168"><span class="ln">1168</span>                        mx<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1169"><span class="ln">1169</span>                        my<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1170"><span class="ln">1170</span>                    <b>default</b>:
+</code><code id="L1171"><span class="ln">1171</span>                        x<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1172"><span class="ln">1172</span>                        y<span class="s"> = </span>res[i][res[i].length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1173"><span class="ln">1173</span>                }
+</code><code id="L1174"><span class="ln">1174</span>            }
+</code><code id="L1175"><span class="ln">1175</span>            res.toString<span class="s"> = </span>R._path2string;
+</code><code id="L1176"><span class="ln">1176</span>            <b>return</b> res;
+</code><code id="L1177"><span class="ln">1177</span>        }, <b>null</b>, pathClone),
+</code><code id="L1178"><span class="ln">1178</span>        l2c<span class="s"> = </span><b>function</b> (x1, y1, x2, y2) {
+</code><code id="L1179"><span class="ln">1179</span>            <b>return</b> [x1, y1, x2, y2, x2, y2];
+</code><code id="L1180"><span class="ln">1180</span>        },
+</code><code id="L1181"><span class="ln">1181</span>        q2c<span class="s"> = </span><b>function</b> (x1, y1, ax, ay, x2, y2) {
+</code><code id="L1182"><span class="ln">1182</span>            <b>var</b> _13<span class="s"> = </span><span class="d">1</span><span class="s"> / </span><span class="d">3</span>,
+</code><code id="L1183"><span class="ln">1183</span>                _23<span class="s"> = </span><span class="d">2</span><span class="s"> / </span><span class="d">3</span>;
+</code><code id="L1184"><span class="ln">1184</span>            <b>return</b> [
+</code><code id="L1185"><span class="ln">1185</span>                    _13<span class="s"> * </span>x1<span class="s"> + </span>_23<span class="s"> * </span>ax,
+</code><code id="L1186"><span class="ln">1186</span>                    _13<span class="s"> * </span>y1<span class="s"> + </span>_23<span class="s"> * </span>ay,
+</code><code id="L1187"><span class="ln">1187</span>                    _13<span class="s"> * </span>x2<span class="s"> + </span>_23<span class="s"> * </span>ax,
+</code><code id="L1188"><span class="ln">1188</span>                    _13<span class="s"> * </span>y2<span class="s"> + </span>_23<span class="s"> * </span>ay,
+</code><code id="L1189"><span class="ln">1189</span>                    x2,
+</code><code id="L1190"><span class="ln">1190</span>                    y2
+</code><code id="L1191"><span class="ln">1191</span>                ];
+</code><code id="L1192"><span class="ln">1192</span>        },
+</code><code id="L1193"><span class="ln">1193</span>        a2c<span class="s"> = </span><b>function</b> (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
+</code><code id="L1194"><span class="ln">1194</span>            <span class="c">// <b>for</b> more information of where <b>this</b> math came from visit:</span>
+</code><code id="L1195"><span class="ln">1195</span>            <span class="c">// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes</span>
+</code><code id="L1196"><span class="ln">1196</span>            <b>var</b> _120<span class="s"> = </span>PI<span class="s"> * </span><span class="d">120</span><span class="s"> / </span><span class="d">180</span>,
+</code><code id="L1197"><span class="ln">1197</span>                rad<span class="s"> = </span>PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>(+angle<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L1198"><span class="ln">1198</span>                res<span class="s"> = </span>[],
+</code><code id="L1199"><span class="ln">1199</span>                xy,
+</code><code id="L1200"><span class="ln">1200</span>                rotate<span class="s"> = </span>cacher(<b>function</b> (x, y, rad) {
+</code><code id="L1201"><span class="ln">1201</span>                    <b>var</b> X<span class="s"> = </span>x<span class="s"> * </span>math.cos(rad)<span class="s"> - </span>y<span class="s"> * </span>math.sin(rad),
+</code><code id="L1202"><span class="ln">1202</span>                        Y<span class="s"> = </span>x<span class="s"> * </span>math.sin(rad)<span class="s"> + </span>y<span class="s"> * </span>math.cos(rad);
+</code><code id="L1203"><span class="ln">1203</span>                    <b>return</b> {x: X, y: Y};
+</code><code id="L1204"><span class="ln">1204</span>                });
+</code><code id="L1205"><span class="ln">1205</span>            <b>if</b> (!recursive) {
+</code><code id="L1206"><span class="ln">1206</span>                xy<span class="s"> = </span>rotate(x1, y1, -rad);
+</code><code id="L1207"><span class="ln">1207</span>                x1<span class="s"> = </span>xy.x;
+</code><code id="L1208"><span class="ln">1208</span>                y1<span class="s"> = </span>xy.y;
+</code><code id="L1209"><span class="ln">1209</span>                xy<span class="s"> = </span>rotate(x2, y2, -rad);
+</code><code id="L1210"><span class="ln">1210</span>                x2<span class="s"> = </span>xy.x;
+</code><code id="L1211"><span class="ln">1211</span>                y2<span class="s"> = </span>xy.y;
+</code><code id="L1212"><span class="ln">1212</span>                <b>var</b> cos<span class="s"> = </span>math.cos(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
+</code><code id="L1213"><span class="ln">1213</span>                    sin<span class="s"> = </span>math.sin(PI<span class="s"> / </span><span class="d">180</span><span class="s"> * </span>angle),
+</code><code id="L1214"><span class="ln">1214</span>                    x<span class="s"> = </span>(x1<span class="s"> - </span>x2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1215"><span class="ln">1215</span>                    y<span class="s"> = </span>(y1<span class="s"> - </span>y2)<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L1216"><span class="ln">1216</span>                <b>var</b> h<span class="s"> = </span>(x<span class="s"> * </span>x)<span class="s"> / </span>(rx<span class="s"> * </span>rx)<span class="s"> + </span>(y<span class="s"> * </span>y)<span class="s"> / </span>(ry<span class="s"> * </span>ry);
+</code><code id="L1217"><span class="ln">1217</span>                <b>if</b> (h > <span class="d">1</span>) {
+</code><code id="L1218"><span class="ln">1218</span>                    h<span class="s"> = </span>math.sqrt(h);
+</code><code id="L1219"><span class="ln">1219</span>                    rx<span class="s"> = </span>h<span class="s"> * </span>rx;
+</code><code id="L1220"><span class="ln">1220</span>                    ry<span class="s"> = </span>h<span class="s"> * </span>ry;
+</code><code id="L1221"><span class="ln">1221</span>                }
+</code><code id="L1222"><span class="ln">1222</span>                <b>var</b> rx2<span class="s"> = </span>rx<span class="s"> * </span>rx,
+</code><code id="L1223"><span class="ln">1223</span>                    ry2<span class="s"> = </span>ry<span class="s"> * </span>ry,
+</code><code id="L1224"><span class="ln">1224</span>                    k<span class="s"> = </span>(large_arc_flag<span class="s"> == </span>sweep_flag ? -<span class="d">1</span> : <span class="d">1</span>) *
+</code><code id="L1225"><span class="ln">1225</span>                        math.sqrt(abs((rx2<span class="s"> * </span>ry2<span class="s"> - </span>rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> - </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x)<span class="s"> / </span>(rx2<span class="s"> * </span>y<span class="s"> * </span>y<span class="s"> + </span>ry2<span class="s"> * </span>x<span class="s"> * </span>x))),
+</code><code id="L1226"><span class="ln">1226</span>                    cx<span class="s"> = </span>k<span class="s"> * </span>rx<span class="s"> * </span>y<span class="s"> / </span>ry<span class="s"> + </span>(x1<span class="s"> + </span>x2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1227"><span class="ln">1227</span>                    cy<span class="s"> = </span>k<span class="s"> * </span>-ry<span class="s"> * </span>x<span class="s"> / </span>rx<span class="s"> + </span>(y1<span class="s"> + </span>y2)<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L1228"><span class="ln">1228</span>                    f1<span class="s"> = </span>math.asin(((y1<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>)),
+</code><code id="L1229"><span class="ln">1229</span>                    f2<span class="s"> = </span>math.asin(((y2<span class="s"> - </span>cy)<span class="s"> / </span>ry).toFixed(<span class="d">9</span>));
+</code><code id="L1230"><span class="ln">1230</span>
+</code><code id="L1231"><span class="ln">1231</span>                f1<span class="s"> = </span>x1 &lt; cx ? PI<span class="s"> - </span>f1 : f1;
+</code><code id="L1232"><span class="ln">1232</span>                f2<span class="s"> = </span>x2 &lt; cx ? PI<span class="s"> - </span>f2 : f2;
+</code><code id="L1233"><span class="ln">1233</span>                f1 &lt; <span class="d">0</span><span class="s"> &amp;&amp; </span>(f1<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f1);
+</code><code id="L1234"><span class="ln">1234</span>                f2 &lt; <span class="d">0</span><span class="s"> &amp;&amp; </span>(f2<span class="s"> = </span>PI<span class="s"> * </span><span class="d">2</span><span class="s"> + </span>f2);
+</code><code id="L1235"><span class="ln">1235</span>                <b>if</b> (sweep_flag<span class="s"> &amp;&amp; </span>f1 > f2) {
+</code><code id="L1236"><span class="ln">1236</span>                    f1<span class="s"> = </span>f1<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L1237"><span class="ln">1237</span>                }
+</code><code id="L1238"><span class="ln">1238</span>                <b>if</b> (!sweep_flag<span class="s"> &amp;&amp; </span>f2 > f1) {
+</code><code id="L1239"><span class="ln">1239</span>                    f2<span class="s"> = </span>f2<span class="s"> - </span>PI<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L1240"><span class="ln">1240</span>                }
+</code><code id="L1241"><span class="ln">1241</span>            } <b>else</b> {
+</code><code id="L1242"><span class="ln">1242</span>                f1<span class="s"> = </span>recursive[<span class="d">0</span>];
+</code><code id="L1243"><span class="ln">1243</span>                f2<span class="s"> = </span>recursive[<span class="d">1</span>];
+</code><code id="L1244"><span class="ln">1244</span>                cx<span class="s"> = </span>recursive[<span class="d">2</span>];
+</code><code id="L1245"><span class="ln">1245</span>                cy<span class="s"> = </span>recursive[<span class="d">3</span>];
+</code><code id="L1246"><span class="ln">1246</span>            }
+</code><code id="L1247"><span class="ln">1247</span>            <b>var</b> df<span class="s"> = </span>f2<span class="s"> - </span>f1;
+</code><code id="L1248"><span class="ln">1248</span>            <b>if</b> (abs(df) > _120) {
+</code><code id="L1249"><span class="ln">1249</span>                <b>var</b> f2old<span class="s"> = </span>f2,
+</code><code id="L1250"><span class="ln">1250</span>                    x2old<span class="s"> = </span>x2,
+</code><code id="L1251"><span class="ln">1251</span>                    y2old<span class="s"> = </span>y2;
+</code><code id="L1252"><span class="ln">1252</span>                f2<span class="s"> = </span>f1<span class="s"> + </span>_120<span class="s"> * </span>(sweep_flag<span class="s"> &amp;&amp; </span>f2 > f1 ? <span class="d">1</span> : -<span class="d">1</span>);
+</code><code id="L1253"><span class="ln">1253</span>                x2<span class="s"> = </span>cx<span class="s"> + </span>rx<span class="s"> * </span>math.cos(f2);
+</code><code id="L1254"><span class="ln">1254</span>                y2<span class="s"> = </span>cy<span class="s"> + </span>ry<span class="s"> * </span>math.sin(f2);
+</code><code id="L1255"><span class="ln">1255</span>                res<span class="s"> = </span>a2c(x2, y2, rx, ry, angle, <span class="d">0</span>, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
+</code><code id="L1256"><span class="ln">1256</span>            }
+</code><code id="L1257"><span class="ln">1257</span>            df<span class="s"> = </span>f2<span class="s"> - </span>f1;
+</code><code id="L1258"><span class="ln">1258</span>            <b>var</b> c1<span class="s"> = </span>math.cos(f1),
+</code><code id="L1259"><span class="ln">1259</span>                s1<span class="s"> = </span>math.sin(f1),
+</code><code id="L1260"><span class="ln">1260</span>                c2<span class="s"> = </span>math.cos(f2),
+</code><code id="L1261"><span class="ln">1261</span>                s2<span class="s"> = </span>math.sin(f2),
+</code><code id="L1262"><span class="ln">1262</span>                t<span class="s"> = </span>math.tan(df<span class="s"> / </span><span class="d">4</span>),
+</code><code id="L1263"><span class="ln">1263</span>                hx<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>rx<span class="s"> * </span>t,
+</code><code id="L1264"><span class="ln">1264</span>                hy<span class="s"> = </span><span class="d">4</span><span class="s"> / </span><span class="d">3</span><span class="s"> * </span>ry<span class="s"> * </span>t,
+</code><code id="L1265"><span class="ln">1265</span>                m1<span class="s"> = </span>[x1, y1],
+</code><code id="L1266"><span class="ln">1266</span>                m2<span class="s"> = </span>[x1<span class="s"> + </span>hx<span class="s"> * </span>s1, y1<span class="s"> - </span>hy<span class="s"> * </span>c1],
+</code><code id="L1267"><span class="ln">1267</span>                m3<span class="s"> = </span>[x2<span class="s"> + </span>hx<span class="s"> * </span>s2, y2<span class="s"> - </span>hy<span class="s"> * </span>c2],
+</code><code id="L1268"><span class="ln">1268</span>                m4<span class="s"> = </span>[x2, y2];
+</code><code id="L1269"><span class="ln">1269</span>            m2[<span class="d">0</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">0</span>]<span class="s"> - </span>m2[<span class="d">0</span>];
+</code><code id="L1270"><span class="ln">1270</span>            m2[<span class="d">1</span>]<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>m1[<span class="d">1</span>]<span class="s"> - </span>m2[<span class="d">1</span>];
+</code><code id="L1271"><span class="ln">1271</span>            <b>if</b> (recursive) {
+</code><code id="L1272"><span class="ln">1272</span>                <b>return</b> [m2, m3, m4][concat](res);
+</code><code id="L1273"><span class="ln">1273</span>            } <b>else</b> {
+</code><code id="L1274"><span class="ln">1274</span>                res<span class="s"> = </span>[m2, m3, m4][concat](res).join().split(<i>","</i>);
+</code><code id="L1275"><span class="ln">1275</span>                <b>var</b> newres<span class="s"> = </span>[];
+</code><code id="L1276"><span class="ln">1276</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>res.length; i &lt; ii; i++) {
+</code><code id="L1277"><span class="ln">1277</span>                    newres[i]<span class="s"> = </span>i<span class="s"> % </span><span class="d">2</span> ? rotate(res[i<span class="s"> - </span><span class="d">1</span>], res[i], rad).y : rotate(res[i], res[i<span class="s"> + </span><span class="d">1</span>], rad).x;
+</code><code id="L1278"><span class="ln">1278</span>                }
+</code><code id="L1279"><span class="ln">1279</span>                <b>return</b> newres;
+</code><code id="L1280"><span class="ln">1280</span>            }
+</code><code id="L1281"><span class="ln">1281</span>        },
+</code><code id="L1282"><span class="ln">1282</span>        findDotAtSegment<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
+</code><code id="L1283"><span class="ln">1283</span>            <b>var</b> t1<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>t;
+</code><code id="L1284"><span class="ln">1284</span>            <b>return</b> {
+</code><code id="L1285"><span class="ln">1285</span>                x: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1x<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1x<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2x<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2x,
+</code><code id="L1286"><span class="ln">1286</span>                y: pow(t1, <span class="d">3</span>)<span class="s"> * </span>p1y<span class="s"> + </span>pow(t1, <span class="d">2</span>)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>c1y<span class="s"> + </span>t1<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> * </span>c2y<span class="s"> + </span>pow(t, <span class="d">3</span>)<span class="s"> * </span>p2y
+</code><code id="L1287"><span class="ln">1287</span>            };
+</code><code id="L1288"><span class="ln">1288</span>        },
+</code><code id="L1289"><span class="ln">1289</span>        curveDim<span class="s"> = </span>cacher(<b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
+</code><code id="L1290"><span class="ln">1290</span>            <b>var</b> a<span class="s"> = </span>(c2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1x<span class="s"> + </span>p1x)<span class="s"> - </span>(p2x<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2x<span class="s"> + </span>c1x),
+</code><code id="L1291"><span class="ln">1291</span>                b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1x<span class="s"> - </span>p1x)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2x<span class="s"> - </span>c1x),
+</code><code id="L1292"><span class="ln">1292</span>                c<span class="s"> = </span>p1x<span class="s"> - </span>c1x,
+</code><code id="L1293"><span class="ln">1293</span>                t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
+</code><code id="L1294"><span class="ln">1294</span>                t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a,
+</code><code id="L1295"><span class="ln">1295</span>                y<span class="s"> = </span>[p1y, p2y],
+</code><code id="L1296"><span class="ln">1296</span>                x<span class="s"> = </span>[p1x, p2x],
+</code><code id="L1297"><span class="ln">1297</span>                dot;
+</code><code id="L1298"><span class="ln">1298</span>            abs(t1) > <i>"<span class="d">1e12</span>"</i><span class="s"> &amp;&amp; </span>(t1<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1299"><span class="ln">1299</span>            abs(t2) > <i>"<span class="d">1e12</span>"</i><span class="s"> &amp;&amp; </span>(t2<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1300"><span class="ln">1300</span>            <b>if</b> (t1 > <span class="d">0</span><span class="s"> &amp;&amp; </span>t1 &lt; <span class="d">1</span>) {
+</code><code id="L1301"><span class="ln">1301</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+</code><code id="L1302"><span class="ln">1302</span>                x.push(dot.x);
+</code><code id="L1303"><span class="ln">1303</span>                y.push(dot.y);
+</code><code id="L1304"><span class="ln">1304</span>            }
+</code><code id="L1305"><span class="ln">1305</span>            <b>if</b> (t2 > <span class="d">0</span><span class="s"> &amp;&amp; </span>t2 &lt; <span class="d">1</span>) {
+</code><code id="L1306"><span class="ln">1306</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+</code><code id="L1307"><span class="ln">1307</span>                x.push(dot.x);
+</code><code id="L1308"><span class="ln">1308</span>                y.push(dot.y);
+</code><code id="L1309"><span class="ln">1309</span>            }
+</code><code id="L1310"><span class="ln">1310</span>            a<span class="s"> = </span>(c2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c1y<span class="s"> + </span>p1y)<span class="s"> - </span>(p2y<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>c2y<span class="s"> + </span>c1y);
+</code><code id="L1311"><span class="ln">1311</span>            b<span class="s"> = </span><span class="d">2</span><span class="s"> * </span>(c1y<span class="s"> - </span>p1y)<span class="s"> - </span><span class="d">2</span><span class="s"> * </span>(c2y<span class="s"> - </span>c1y);
+</code><code id="L1312"><span class="ln">1312</span>            c<span class="s"> = </span>p1y<span class="s"> - </span>c1y;
+</code><code id="L1313"><span class="ln">1313</span>            t1<span class="s"> = </span>(-b<span class="s"> + </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
+</code><code id="L1314"><span class="ln">1314</span>            t2<span class="s"> = </span>(-b<span class="s"> - </span>math.sqrt(b<span class="s"> * </span>b<span class="s"> - </span><span class="d">4</span><span class="s"> * </span>a<span class="s"> * </span>c))<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>a;
+</code><code id="L1315"><span class="ln">1315</span>            abs(t1) > <i>"<span class="d">1e12</span>"</i><span class="s"> &amp;&amp; </span>(t1<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1316"><span class="ln">1316</span>            abs(t2) > <i>"<span class="d">1e12</span>"</i><span class="s"> &amp;&amp; </span>(t2<span class="s"> = </span><span class="d">.5</span>);
+</code><code id="L1317"><span class="ln">1317</span>            <b>if</b> (t1 > <span class="d">0</span><span class="s"> &amp;&amp; </span>t1 &lt; <span class="d">1</span>) {
+</code><code id="L1318"><span class="ln">1318</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1);
+</code><code id="L1319"><span class="ln">1319</span>                x.push(dot.x);
+</code><code id="L1320"><span class="ln">1320</span>                y.push(dot.y);
+</code><code id="L1321"><span class="ln">1321</span>            }
+</code><code id="L1322"><span class="ln">1322</span>            <b>if</b> (t2 > <span class="d">0</span><span class="s"> &amp;&amp; </span>t2 &lt; <span class="d">1</span>) {
+</code><code id="L1323"><span class="ln">1323</span>                dot<span class="s"> = </span>findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2);
+</code><code id="L1324"><span class="ln">1324</span>                x.push(dot.x);
+</code><code id="L1325"><span class="ln">1325</span>                y.push(dot.y);
+</code><code id="L1326"><span class="ln">1326</span>            }
+</code><code id="L1327"><span class="ln">1327</span>            <b>return</b> {
+</code><code id="L1328"><span class="ln">1328</span>                min: {x: mmin[apply](<span class="d">0</span>, x), y: mmin[apply](<span class="d">0</span>, y)},
+</code><code id="L1329"><span class="ln">1329</span>                max: {x: mmax[apply](<span class="d">0</span>, x), y: mmax[apply](<span class="d">0</span>, y)}
+</code><code id="L1330"><span class="ln">1330</span>            };
+</code><code id="L1331"><span class="ln">1331</span>        }),
+</code><code id="L1332"><span class="ln">1332</span>        path2curve<span class="s"> = </span>cacher(<b>function</b> (path, path2) {
+</code><code id="L1333"><span class="ln">1333</span>            <b>var</b> p<span class="s"> = </span>pathToAbsolute(path),
+</code><code id="L1334"><span class="ln">1334</span>                p2<span class="s"> = </span>path2<span class="s"> &amp;&amp; </span>pathToAbsolute(path2),
+</code><code id="L1335"><span class="ln">1335</span>                attrs<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
+</code><code id="L1336"><span class="ln">1336</span>                attrs2<span class="s"> = </span>{x: <span class="d">0</span>, y: <span class="d">0</span>, bx: <span class="d">0</span>, by: <span class="d">0</span>, X: <span class="d">0</span>, Y: <span class="d">0</span>, qx: <b>null</b>, qy: <b>null</b>},
+</code><code id="L1337"><span class="ln">1337</span>                processPath<span class="s"> = </span><b>function</b> (path, d) {
+</code><code id="L1338"><span class="ln">1338</span>                    <b>var</b> nx, ny;
+</code><code id="L1339"><span class="ln">1339</span>                    <b>if</b> (!path) {
+</code><code id="L1340"><span class="ln">1340</span>                        <b>return</b> [<i>"C"</i>, d.x, d.y, d.x, d.y, d.x, d.y];
+</code><code id="L1341"><span class="ln">1341</span>                    }
+</code><code id="L1342"><span class="ln">1342</span>                    !(path[<span class="d">0</span>] <b>in</b> {T:<span class="d">1</span>, Q:<span class="d">1</span>})<span class="s"> &amp;&amp; </span>(d.qx<span class="s"> = </span>d.qy<span class="s"> = </span><b>null</b>);
+</code><code id="L1343"><span class="ln">1343</span>                    <b>switch</b> (path[<span class="d">0</span>]) {
+</code><code id="L1344"><span class="ln">1344</span>                        <b>case</b> <i>"M"</i>:
+</code><code id="L1345"><span class="ln">1345</span>                            d.X<span class="s"> = </span>path[<span class="d">1</span>];
+</code><code id="L1346"><span class="ln">1346</span>                            d.Y<span class="s"> = </span>path[<span class="d">2</span>];
+</code><code id="L1347"><span class="ln">1347</span>                            <b>break</b>;
+</code><code id="L1348"><span class="ln">1348</span>                        <b>case</b> <i>"A"</i>:
+</code><code id="L1349"><span class="ln">1349</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](a2c[apply](<span class="d">0</span>, [d.x, d.y][concat](path.slice(<span class="d">1</span>))));
+</code><code id="L1350"><span class="ln">1350</span>                            <b>break</b>;
+</code><code id="L1351"><span class="ln">1351</span>                        <b>case</b> <i>"S"</i>:
+</code><code id="L1352"><span class="ln">1352</span>                            nx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.bx<span class="s"> || </span>d.x));
+</code><code id="L1353"><span class="ln">1353</span>                            ny<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.by<span class="s"> || </span>d.y));
+</code><code id="L1354"><span class="ln">1354</span>                            path<span class="s"> = </span>[<i>"C"</i>, nx, ny][concat](path.slice(<span class="d">1</span>));
+</code><code id="L1355"><span class="ln">1355</span>                            <b>break</b>;
+</code><code id="L1356"><span class="ln">1356</span>                        <b>case</b> <i>"T"</i>:
+</code><code id="L1357"><span class="ln">1357</span>                            d.qx<span class="s"> = </span>d.x<span class="s"> + </span>(d.x<span class="s"> - </span>(d.qx<span class="s"> || </span>d.x));
+</code><code id="L1358"><span class="ln">1358</span>                            d.qy<span class="s"> = </span>d.y<span class="s"> + </span>(d.y<span class="s"> - </span>(d.qy<span class="s"> || </span>d.y));
+</code><code id="L1359"><span class="ln">1359</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, d.qx, d.qy, path[<span class="d">1</span>], path[<span class="d">2</span>]));
+</code><code id="L1360"><span class="ln">1360</span>                            <b>break</b>;
+</code><code id="L1361"><span class="ln">1361</span>                        <b>case</b> <i>"Q"</i>:
+</code><code id="L1362"><span class="ln">1362</span>                            d.qx<span class="s"> = </span>path[<span class="d">1</span>];
+</code><code id="L1363"><span class="ln">1363</span>                            d.qy<span class="s"> = </span>path[<span class="d">2</span>];
+</code><code id="L1364"><span class="ln">1364</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](q2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>], path[<span class="d">3</span>], path[<span class="d">4</span>]));
+</code><code id="L1365"><span class="ln">1365</span>                            <b>break</b>;
+</code><code id="L1366"><span class="ln">1366</span>                        <b>case</b> <i>"L"</i>:
+</code><code id="L1367"><span class="ln">1367</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], path[<span class="d">2</span>]));
+</code><code id="L1368"><span class="ln">1368</span>                            <b>break</b>;
+</code><code id="L1369"><span class="ln">1369</span>                        <b>case</b> <i>"H"</i>:
+</code><code id="L1370"><span class="ln">1370</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, path[<span class="d">1</span>], d.y));
+</code><code id="L1371"><span class="ln">1371</span>                            <b>break</b>;
+</code><code id="L1372"><span class="ln">1372</span>                        <b>case</b> <i>"V"</i>:
+</code><code id="L1373"><span class="ln">1373</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.x, path[<span class="d">1</span>]));
+</code><code id="L1374"><span class="ln">1374</span>                            <b>break</b>;
+</code><code id="L1375"><span class="ln">1375</span>                        <b>case</b> <i>"Z"</i>:
+</code><code id="L1376"><span class="ln">1376</span>                            path<span class="s"> = </span>[<i>"C"</i>][concat](l2c(d.x, d.y, d.X, d.Y));
+</code><code id="L1377"><span class="ln">1377</span>                            <b>break</b>;
+</code><code id="L1378"><span class="ln">1378</span>                    }
+</code><code id="L1379"><span class="ln">1379</span>                    <b>return</b> path;
+</code><code id="L1380"><span class="ln">1380</span>                },
+</code><code id="L1381"><span class="ln">1381</span>                fixArc<span class="s"> = </span><b>function</b> (pp, i) {
+</code><code id="L1382"><span class="ln">1382</span>                    <b>if</b> (pp[i].length > <span class="d">7</span>) {
+</code><code id="L1383"><span class="ln">1383</span>                        pp[i].shift();
+</code><code id="L1384"><span class="ln">1384</span>                        <b>var</b> pi<span class="s"> = </span>pp[i];
+</code><code id="L1385"><span class="ln">1385</span>                        <b>while</b> (pi.length) {
+</code><code id="L1386"><span class="ln">1386</span>                            pp.splice(i++, <span class="d">0</span>, [<i>"C"</i>][concat](pi.splice(<span class="d">0</span>, <span class="d">6</span>)));
+</code><code id="L1387"><span class="ln">1387</span>                        }
+</code><code id="L1388"><span class="ln">1388</span>                        pp.splice(i, <span class="d">1</span>);
+</code><code id="L1389"><span class="ln">1389</span>                        ii<span class="s"> = </span>mmax(p.length, p2<span class="s"> &amp;&amp; </span>p2.length<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L1390"><span class="ln">1390</span>                    }
+</code><code id="L1391"><span class="ln">1391</span>                },
+</code><code id="L1392"><span class="ln">1392</span>                fixM<span class="s"> = </span><b>function</b> (path1, path2, a1, a2, i) {
+</code><code id="L1393"><span class="ln">1393</span>                    <b>if</b> (path1<span class="s"> &amp;&amp; </span>path2<span class="s"> &amp;&amp; </span>path1[i][<span class="d">0</span>]<span class="s"> == </span><i>"M"</i><span class="s"> &amp;&amp; </span>path2[i][<span class="d">0</span>] != <i>"M"</i>) {
+</code><code id="L1394"><span class="ln">1394</span>                        path2.splice(i, <span class="d">0</span>, [<i>"M"</i>, a2.x, a2.y]);
+</code><code id="L1395"><span class="ln">1395</span>                        a1.bx<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1396"><span class="ln">1396</span>                        a1.by<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1397"><span class="ln">1397</span>                        a1.x<span class="s"> = </span>path1[i][<span class="d">1</span>];
+</code><code id="L1398"><span class="ln">1398</span>                        a1.y<span class="s"> = </span>path1[i][<span class="d">2</span>];
+</code><code id="L1399"><span class="ln">1399</span>                        ii<span class="s"> = </span>mmax(p.length, p2<span class="s"> &amp;&amp; </span>p2.length<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L1400"><span class="ln">1400</span>                    }
+</code><code id="L1401"><span class="ln">1401</span>                };
+</code><code id="L1402"><span class="ln">1402</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>mmax(p.length, p2<span class="s"> &amp;&amp; </span>p2.length<span class="s"> || </span><span class="d">0</span>); i &lt; ii; i++) {
+</code><code id="L1403"><span class="ln">1403</span>                p[i]<span class="s"> = </span>processPath(p[i], attrs);
+</code><code id="L1404"><span class="ln">1404</span>                fixArc(p, i);
+</code><code id="L1405"><span class="ln">1405</span>                p2<span class="s"> &amp;&amp; </span>(p2[i]<span class="s"> = </span>processPath(p2[i], attrs2));
+</code><code id="L1406"><span class="ln">1406</span>                p2<span class="s"> &amp;&amp; </span>fixArc(p2, i);
+</code><code id="L1407"><span class="ln">1407</span>                fixM(p, p2, attrs, attrs2, i);
+</code><code id="L1408"><span class="ln">1408</span>                fixM(p2, p, attrs2, attrs, i);
+</code><code id="L1409"><span class="ln">1409</span>                <b>var</b> seg<span class="s"> = </span>p[i],
+</code><code id="L1410"><span class="ln">1410</span>                    seg2<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>p2[i],
+</code><code id="L1411"><span class="ln">1411</span>                    seglen<span class="s"> = </span>seg.length,
+</code><code id="L1412"><span class="ln">1412</span>                    seg2len<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>seg2.length;
+</code><code id="L1413"><span class="ln">1413</span>                attrs.x<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1414"><span class="ln">1414</span>                attrs.y<span class="s"> = </span>seg[seglen<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1415"><span class="ln">1415</span>                attrs.bx<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs.x;
+</code><code id="L1416"><span class="ln">1416</span>                attrs.by<span class="s"> = </span>toFloat(seg[seglen<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs.y;
+</code><code id="L1417"><span class="ln">1417</span>                attrs2.bx<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>(toFloat(seg2[seg2len<span class="s"> - </span><span class="d">4</span>])<span class="s"> || </span>attrs2.x);
+</code><code id="L1418"><span class="ln">1418</span>                attrs2.by<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>(toFloat(seg2[seg2len<span class="s"> - </span><span class="d">3</span>])<span class="s"> || </span>attrs2.y);
+</code><code id="L1419"><span class="ln">1419</span>                attrs2.x<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>seg2[seg2len<span class="s"> - </span><span class="d">2</span>];
+</code><code id="L1420"><span class="ln">1420</span>                attrs2.y<span class="s"> = </span>p2<span class="s"> &amp;&amp; </span>seg2[seg2len<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1421"><span class="ln">1421</span>            }
+</code><code id="L1422"><span class="ln">1422</span>            <b>return</b> p2 ? [p, p2] : p;
+</code><code id="L1423"><span class="ln">1423</span>        }, <b>null</b>, pathClone),
+</code><code id="L1424"><span class="ln">1424</span>        parseDots<span class="s"> = </span>cacher(<b>function</b> (gradient) {
+</code><code id="L1425"><span class="ln">1425</span>            <b>var</b> dots<span class="s"> = </span>[];
+</code><code id="L1426"><span class="ln">1426</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>gradient.length; i &lt; ii; i++) {
+</code><code id="L1427"><span class="ln">1427</span>                <b>var</b> dot<span class="s"> = </span>{},
+</code><code id="L1428"><span class="ln">1428</span>                    par<span class="s"> = </span>gradient[i].match(/^([^:]*):?([\d\.]*)/);
+</code><code id="L1429"><span class="ln">1429</span>                dot.color<span class="s"> = </span>R.getRGB(par[<span class="d">1</span>]);
+</code><code id="L1430"><span class="ln">1430</span>                <b>if</b> (dot.color.error) {
+</code><code id="L1431"><span class="ln">1431</span>                    <b>return</b> <b>null</b>;
+</code><code id="L1432"><span class="ln">1432</span>                }
+</code><code id="L1433"><span class="ln">1433</span>                dot.color<span class="s"> = </span>dot.color.hex;
+</code><code id="L1434"><span class="ln">1434</span>                par[<span class="d">2</span>]<span class="s"> &amp;&amp; </span>(dot.offset<span class="s"> = </span>par[<span class="d">2</span>]<span class="s"> + </span><i>"%"</i>);
+</code><code id="L1435"><span class="ln">1435</span>                dots.push(dot);
+</code><code id="L1436"><span class="ln">1436</span>            }
+</code><code id="L1437"><span class="ln">1437</span>            <b>for</b> (i<span class="s"> = </span><span class="d">1</span>, ii<span class="s"> = </span>dots.length<span class="s"> - </span><span class="d">1</span>; i &lt; ii; i++) {
+</code><code id="L1438"><span class="ln">1438</span>                <b>if</b> (!dots[i].offset) {
+</code><code id="L1439"><span class="ln">1439</span>                    <b>var</b> start<span class="s"> = </span>toFloat(dots[i<span class="s"> - </span><span class="d">1</span>].offset<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L1440"><span class="ln">1440</span>                        end<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1441"><span class="ln">1441</span>                    <b>for</b> (<b>var</b> j<span class="s"> = </span>i<span class="s"> + </span><span class="d">1</span>; j &lt; ii; j++) {
+</code><code id="L1442"><span class="ln">1442</span>                        <b>if</b> (dots[j].offset) {
+</code><code id="L1443"><span class="ln">1443</span>                            end<span class="s"> = </span>dots[j].offset;
+</code><code id="L1444"><span class="ln">1444</span>                            <b>break</b>;
+</code><code id="L1445"><span class="ln">1445</span>                        }
+</code><code id="L1446"><span class="ln">1446</span>                    }
+</code><code id="L1447"><span class="ln">1447</span>                    <b>if</b> (!end) {
+</code><code id="L1448"><span class="ln">1448</span>                        end<span class="s"> = </span><span class="d">100</span>;
+</code><code id="L1449"><span class="ln">1449</span>                        j<span class="s"> = </span>ii;
+</code><code id="L1450"><span class="ln">1450</span>                    }
+</code><code id="L1451"><span class="ln">1451</span>                    end<span class="s"> = </span>toFloat(end);
+</code><code id="L1452"><span class="ln">1452</span>                    <b>var</b> d<span class="s"> = </span>(end<span class="s"> - </span>start)<span class="s"> / </span>(j<span class="s"> - </span>i<span class="s"> + </span><span class="d">1</span>);
+</code><code id="L1453"><span class="ln">1453</span>                    <b>for</b> (; i &lt; j; i++) {
+</code><code id="L1454"><span class="ln">1454</span>                        start += d;
+</code><code id="L1455"><span class="ln">1455</span>                        dots[i].offset<span class="s"> = </span>start<span class="s"> + </span><i>"%"</i>;
+</code><code id="L1456"><span class="ln">1456</span>                    }
+</code><code id="L1457"><span class="ln">1457</span>                }
+</code><code id="L1458"><span class="ln">1458</span>            }
+</code><code id="L1459"><span class="ln">1459</span>            <b>return</b> dots;
+</code><code id="L1460"><span class="ln">1460</span>        }),
+</code><code id="L1461"><span class="ln">1461</span>        getContainer<span class="s"> = </span><b>function</b> (x, y, w, h) {
+</code><code id="L1462"><span class="ln">1462</span>            <b>var</b> container;
+</code><code id="L1463"><span class="ln">1463</span>            container<span class="s"> = </span>h<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>!R.is(x, <i>"object"</i>) ? g.doc.getElementById(x) : x;
+</code><code id="L1464"><span class="ln">1464</span>            <b>if</b> (container<span class="s"> == </span><b>null</b>) {
+</code><code id="L1465"><span class="ln">1465</span>                <b>return</b>;
+</code><code id="L1466"><span class="ln">1466</span>            }
+</code><code id="L1467"><span class="ln">1467</span>            <b>if</b> (container.tagName) {
+</code><code id="L1468"><span class="ln">1468</span>                <b>if</b> (y<span class="s"> == </span><b>null</b>) {
+</code><code id="L1469"><span class="ln">1469</span>                    <b>return</b> {
+</code><code id="L1470"><span class="ln">1470</span>                        container: container,
+</code><code id="L1471"><span class="ln">1471</span>                        width: container.style.pixelWidth<span class="s"> || </span>container.offsetWidth,
+</code><code id="L1472"><span class="ln">1472</span>                        height: container.style.pixelHeight<span class="s"> || </span>container.offsetHeight
+</code><code id="L1473"><span class="ln">1473</span>                    };
+</code><code id="L1474"><span class="ln">1474</span>                } <b>else</b> {
+</code><code id="L1475"><span class="ln">1475</span>                    <b>return</b> {container: container, width: y, height: w};
+</code><code id="L1476"><span class="ln">1476</span>                }
+</code><code id="L1477"><span class="ln">1477</span>            }
+</code><code id="L1478"><span class="ln">1478</span>            <b>return</b> {container: <span class="d">1</span>, x: x, y: y, width: w, height: h};
+</code><code id="L1479"><span class="ln">1479</span>        },
+</code><code id="L1480"><span class="ln">1480</span>        plugins<span class="s"> = </span><b>function</b> (con, add) {
+</code><code id="L1481"><span class="ln">1481</span>            <b>var</b> that<span class="s"> = </span><b>this</b>;
+</code><code id="L1482"><span class="ln">1482</span>            <b>for</b> (<b>var</b> prop <b>in</b> add) {
+</code><code id="L1483"><span class="ln">1483</span>                <b>if</b> (add[has](prop)<span class="s"> &amp;&amp; </span>!(prop <b>in</b> con)) {
+</code><code id="L1484"><span class="ln">1484</span>                    <b>switch</b> (<b>typeof</b> add[prop]) {
+</code><code id="L1485"><span class="ln">1485</span>                        <b>case</b> <i>"<b>function</b>"</i>:
+</code><code id="L1486"><span class="ln">1486</span>                            (<b>function</b> (f) {
+</code><code id="L1487"><span class="ln">1487</span>                                con[prop]<span class="s"> = </span>con<span class="s"> === </span>that ? f : <b>function</b> () { <b>return</b> f[apply](that, arguments); };
+</code><code id="L1488"><span class="ln">1488</span>                            })(add[prop]);
+</code><code id="L1489"><span class="ln">1489</span>                        <b>break</b>;
+</code><code id="L1490"><span class="ln">1490</span>                        <b>case</b> <i>"object"</i>:
+</code><code id="L1491"><span class="ln">1491</span>                            con[prop]<span class="s"> = </span>con[prop]<span class="s"> || </span>{};
+</code><code id="L1492"><span class="ln">1492</span>                            plugins.call(<b>this</b>, con[prop], add[prop]);
+</code><code id="L1493"><span class="ln">1493</span>                        <b>break</b>;
+</code><code id="L1494"><span class="ln">1494</span>                        <b>default</b>:
+</code><code id="L1495"><span class="ln">1495</span>                            con[prop]<span class="s"> = </span>add[prop];
+</code><code id="L1496"><span class="ln">1496</span>                        <b>break</b>;
+</code><code id="L1497"><span class="ln">1497</span>                    }
+</code><code id="L1498"><span class="ln">1498</span>                }
+</code><code id="L1499"><span class="ln">1499</span>            }
+</code><code id="L1500"><span class="ln">1500</span>        },
+</code><code id="L1501"><span class="ln">1501</span>        tear<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1502"><span class="ln">1502</span>            el<span class="s"> == </span>paper.top<span class="s"> &amp;&amp; </span>(paper.top<span class="s"> = </span>el.prev);
+</code><code id="L1503"><span class="ln">1503</span>            el<span class="s"> == </span>paper.bottom<span class="s"> &amp;&amp; </span>(paper.bottom<span class="s"> = </span>el.next);
+</code><code id="L1504"><span class="ln">1504</span>            el.next<span class="s"> &amp;&amp; </span>(el.next.prev<span class="s"> = </span>el.prev);
+</code><code id="L1505"><span class="ln">1505</span>            el.prev<span class="s"> &amp;&amp; </span>(el.prev.next<span class="s"> = </span>el.next);
+</code><code id="L1506"><span class="ln">1506</span>        },
+</code><code id="L1507"><span class="ln">1507</span>        tofront<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1508"><span class="ln">1508</span>            <b>if</b> (paper.top<span class="s"> === </span>el) {
+</code><code id="L1509"><span class="ln">1509</span>                <b>return</b>;
+</code><code id="L1510"><span class="ln">1510</span>            }
+</code><code id="L1511"><span class="ln">1511</span>            tear(el, paper);
+</code><code id="L1512"><span class="ln">1512</span>            el.next<span class="s"> = </span><b>null</b>;
+</code><code id="L1513"><span class="ln">1513</span>            el.prev<span class="s"> = </span>paper.top;
+</code><code id="L1514"><span class="ln">1514</span>            paper.top.next<span class="s"> = </span>el;
+</code><code id="L1515"><span class="ln">1515</span>            paper.top<span class="s"> = </span>el;
+</code><code id="L1516"><span class="ln">1516</span>        },
+</code><code id="L1517"><span class="ln">1517</span>        toback<span class="s"> = </span><b>function</b> (el, paper) {
+</code><code id="L1518"><span class="ln">1518</span>            <b>if</b> (paper.bottom<span class="s"> === </span>el) {
+</code><code id="L1519"><span class="ln">1519</span>                <b>return</b>;
+</code><code id="L1520"><span class="ln">1520</span>            }
+</code><code id="L1521"><span class="ln">1521</span>            tear(el, paper);
+</code><code id="L1522"><span class="ln">1522</span>            el.next<span class="s"> = </span>paper.bottom;
+</code><code id="L1523"><span class="ln">1523</span>            el.prev<span class="s"> = </span><b>null</b>;
+</code><code id="L1524"><span class="ln">1524</span>            paper.bottom.prev<span class="s"> = </span>el;
+</code><code id="L1525"><span class="ln">1525</span>            paper.bottom<span class="s"> = </span>el;
+</code><code id="L1526"><span class="ln">1526</span>        },
+</code><code id="L1527"><span class="ln">1527</span>        insertafter<span class="s"> = </span><b>function</b> (el, el2, paper) {
+</code><code id="L1528"><span class="ln">1528</span>            tear(el, paper);
+</code><code id="L1529"><span class="ln">1529</span>            el2<span class="s"> == </span>paper.top<span class="s"> &amp;&amp; </span>(paper.top<span class="s"> = </span>el);
+</code><code id="L1530"><span class="ln">1530</span>            el2.next<span class="s"> &amp;&amp; </span>(el2.next.prev<span class="s"> = </span>el);
+</code><code id="L1531"><span class="ln">1531</span>            el.next<span class="s"> = </span>el2.next;
+</code><code id="L1532"><span class="ln">1532</span>            el.prev<span class="s"> = </span>el2;
+</code><code id="L1533"><span class="ln">1533</span>            el2.next<span class="s"> = </span>el;
+</code><code id="L1534"><span class="ln">1534</span>        },
+</code><code id="L1535"><span class="ln">1535</span>        insertbefore<span class="s"> = </span><b>function</b> (el, el2, paper) {
+</code><code id="L1536"><span class="ln">1536</span>            tear(el, paper);
+</code><code id="L1537"><span class="ln">1537</span>            el2<span class="s"> == </span>paper.bottom<span class="s"> &amp;&amp; </span>(paper.bottom<span class="s"> = </span>el);
+</code><code id="L1538"><span class="ln">1538</span>            el2.prev<span class="s"> &amp;&amp; </span>(el2.prev.next<span class="s"> = </span>el);
+</code><code id="L1539"><span class="ln">1539</span>            el.prev<span class="s"> = </span>el2.prev;
+</code><code id="L1540"><span class="ln">1540</span>            el2.prev<span class="s"> = </span>el;
+</code><code id="L1541"><span class="ln">1541</span>            el.next<span class="s"> = </span>el2;
+</code><code id="L1542"><span class="ln">1542</span>        },
+</code><code id="L1543"><span class="ln">1543</span>        removed<span class="s"> = </span><b>function</b> (methodname) {
+</code><code id="L1544"><span class="ln">1544</span>            <b>return</b> <b>function</b> () {
+</code><code id="L1545"><span class="ln">1545</span>                <b>throw</b> <b>new</b> Error(<i>"Rapha\xebl: you are calling to method \u201c"</i><span class="s"> + </span>methodname<span class="s"> + </span><i>"\u201d of removed object"</i>);
+</code><code id="L1546"><span class="ln">1546</span>            };
+</code><code id="L1547"><span class="ln">1547</span>        },
+</code><code id="L1548"><span class="ln">1548</span>        extractTransform<span class="s"> = </span><b>function</b> (el, tstr) {
+</code><code id="L1549"><span class="ln">1549</span>            <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
+</code><code id="L1550"><span class="ln">1550</span>                <b>return</b> el._.transform;
+</code><code id="L1551"><span class="ln">1551</span>            }
+</code><code id="L1552"><span class="ln">1552</span>            tstr<span class="s"> = </span>Str(tstr).replace(/\.{<span class="d">3</span>}|\u2026/g, el._.transform<span class="s"> || </span>E);
+</code><code id="L1553"><span class="ln">1553</span>            <b>var</b> tdata<span class="s"> = </span>R.parseTransformString(tstr),
+</code><code id="L1554"><span class="ln">1554</span>                deg<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1555"><span class="ln">1555</span>                dx<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1556"><span class="ln">1556</span>                dy<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L1557"><span class="ln">1557</span>                sx<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L1558"><span class="ln">1558</span>                sy<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L1559"><span class="ln">1559</span>                _<span class="s"> = </span>el._,
+</code><code id="L1560"><span class="ln">1560</span>                m<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L1561"><span class="ln">1561</span>            _.transform<span class="s"> = </span>tdata<span class="s"> || </span>[];
+</code><code id="L1562"><span class="ln">1562</span>            <b>if</b> (tdata) {
+</code><code id="L1563"><span class="ln">1563</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tdata.length; i &lt; ii; i++) {
+</code><code id="L1564"><span class="ln">1564</span>                    <b>var</b> t<span class="s"> = </span>tdata[i],
+</code><code id="L1565"><span class="ln">1565</span>                        tlen<span class="s"> = </span>t.length,
+</code><code id="L1566"><span class="ln">1566</span>                        bb;
+</code><code id="L1567"><span class="ln">1567</span>                    t[<span class="d">0</span>]<span class="s"> = </span>Str(t[<span class="d">0</span>]).toLowerCase();
+</code><code id="L1568"><span class="ln">1568</span>                    <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"t"</i><span class="s"> &amp;&amp; </span>tlen<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1569"><span class="ln">1569</span>                        m.translate(t[<span class="d">1</span>], t[<span class="d">2</span>]);
+</code><code id="L1570"><span class="ln">1570</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i>) {
+</code><code id="L1571"><span class="ln">1571</span>                        <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span>) {
+</code><code id="L1572"><span class="ln">1572</span>                            bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
+</code><code id="L1573"><span class="ln">1573</span>                            m.rotate(t[<span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L1574"><span class="ln">1574</span>                            deg += t[<span class="d">1</span>];
+</code><code id="L1575"><span class="ln">1575</span>                        } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L1576"><span class="ln">1576</span>                            m.rotate(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>]);
+</code><code id="L1577"><span class="ln">1577</span>                            deg += t[<span class="d">1</span>];
+</code><code id="L1578"><span class="ln">1578</span>                        }
+</code><code id="L1579"><span class="ln">1579</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i>) {
+</code><code id="L1580"><span class="ln">1580</span>                        <b>if</b> (tlen<span class="s"> == </span><span class="d">2</span><span class="s"> || </span>tlen<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1581"><span class="ln">1581</span>                            bb<span class="s"> = </span>bb<span class="s"> || </span>el.getBBox(<span class="d">1</span>);
+</code><code id="L1582"><span class="ln">1582</span>                            m.scale(t[<span class="d">1</span>], t[tlen<span class="s"> - </span><span class="d">1</span>], bb.x<span class="s"> + </span>bb.width<span class="s"> / </span><span class="d">2</span>, bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L1583"><span class="ln">1583</span>                            sx *= t[<span class="d">1</span>];
+</code><code id="L1584"><span class="ln">1584</span>                            sy *= t[tlen<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L1585"><span class="ln">1585</span>                        } <b>else</b> <b>if</b> (tlen<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L1586"><span class="ln">1586</span>                            m.scale(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>]);
+</code><code id="L1587"><span class="ln">1587</span>                            sx *= t[<span class="d">1</span>];
+</code><code id="L1588"><span class="ln">1588</span>                            sy *= t[<span class="d">2</span>];
+</code><code id="L1589"><span class="ln">1589</span>                        }
+</code><code id="L1590"><span class="ln">1590</span>                    } <b>else</b> <b>if</b> (t[<span class="d">0</span>]<span class="s"> == </span><i>"m"</i><span class="s"> &amp;&amp; </span>tlen<span class="s"> == </span><span class="d">7</span>) {
+</code><code id="L1591"><span class="ln">1591</span>                        m.add(t[<span class="d">1</span>], t[<span class="d">2</span>], t[<span class="d">3</span>], t[<span class="d">4</span>], t[<span class="d">5</span>], t[<span class="d">6</span>]);
+</code><code id="L1592"><span class="ln">1592</span>                    }
+</code><code id="L1593"><span class="ln">1593</span>                    _.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1594"><span class="ln">1594</span>                    el.matrix<span class="s"> = </span>m;
+</code><code id="L1595"><span class="ln">1595</span>                }
+</code><code id="L1596"><span class="ln">1596</span>            }
+</code><code id="L1597"><span class="ln">1597</span>
+</code><code id="L1598"><span class="ln">1598</span>            el.matrix<span class="s"> = </span>m;
+</code><code id="L1599"><span class="ln">1599</span>
+</code><code id="L1600"><span class="ln">1600</span>            _.sx<span class="s"> = </span>sx;
+</code><code id="L1601"><span class="ln">1601</span>            _.sy<span class="s"> = </span>sy;
+</code><code id="L1602"><span class="ln">1602</span>            _.deg<span class="s"> = </span>deg;
+</code><code id="L1603"><span class="ln">1603</span>            _.dx<span class="s"> = </span>dx<span class="s"> = </span>m.m[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1604"><span class="ln">1604</span>            _.dy<span class="s"> = </span>dy<span class="s"> = </span>m.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1605"><span class="ln">1605</span>
+</code><code id="L1606"><span class="ln">1606</span>            <b>if</b> (sx<span class="s"> == </span><span class="d">1</span><span class="s"> &amp;&amp; </span>sy<span class="s"> == </span><span class="d">1</span><span class="s"> &amp;&amp; </span>!deg<span class="s"> &amp;&amp; </span>_.bbox) {
+</code><code id="L1607"><span class="ln">1607</span>                _.bbox.x += +dx;
+</code><code id="L1608"><span class="ln">1608</span>                _.bbox.y += +dy;
+</code><code id="L1609"><span class="ln">1609</span>            } <b>else</b> {
+</code><code id="L1610"><span class="ln">1610</span>                _.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1611"><span class="ln">1611</span>            }
+</code><code id="L1612"><span class="ln">1612</span>        },
+</code><code id="L1613"><span class="ln">1613</span>        getEmpty<span class="s"> = </span><b>function</b> (item) {
+</code><code id="L1614"><span class="ln">1614</span>            <b>switch</b> (item[<span class="d">0</span>]) {
+</code><code id="L1615"><span class="ln">1615</span>                <b>case</b> <i>"t"</i>: <b>return</b> [<i>"t"</i>, <span class="d">0</span>, <span class="d">0</span>];
+</code><code id="L1616"><span class="ln">1616</span>                <b>case</b> <i>"m"</i>: <b>return</b> [<i>"m"</i>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>];
+</code><code id="L1617"><span class="ln">1617</span>                <b>case</b> <i>"r"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L1618"><span class="ln">1618</span>                    <b>return</b> [<i>"r"</i>, <span class="d">0</span>, item[<span class="d">2</span>], item[<span class="d">3</span>]];
+</code><code id="L1619"><span class="ln">1619</span>                } <b>else</b> {
+</code><code id="L1620"><span class="ln">1620</span>                    <b>return</b> [<i>"r"</i>, <span class="d">0</span>];
+</code><code id="L1621"><span class="ln">1621</span>                }
+</code><code id="L1622"><span class="ln">1622</span>                <b>case</b> <i>"s"</i>: <b>if</b> (item.length<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L1623"><span class="ln">1623</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>, item[<span class="d">3</span>], item[<span class="d">4</span>]];
+</code><code id="L1624"><span class="ln">1624</span>                } <b>else</b> <b>if</b> (item.length<span class="s"> == </span><span class="d">3</span>) {
+</code><code id="L1625"><span class="ln">1625</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>, <span class="d">1</span>];
+</code><code id="L1626"><span class="ln">1626</span>                } <b>else</b> {
+</code><code id="L1627"><span class="ln">1627</span>                    <b>return</b> [<i>"s"</i>, <span class="d">1</span>];
+</code><code id="L1628"><span class="ln">1628</span>                }
+</code><code id="L1629"><span class="ln">1629</span>            }
+</code><code id="L1630"><span class="ln">1630</span>        },
+</code><code id="L1631"><span class="ln">1631</span>        equaliseTransform<span class="s"> = </span><b>function</b> (t1, t2) {
+</code><code id="L1632"><span class="ln">1632</span>            t1<span class="s"> = </span>R.parseTransformString(t1)<span class="s"> || </span>[];
+</code><code id="L1633"><span class="ln">1633</span>            t2<span class="s"> = </span>R.parseTransformString(t2)<span class="s"> || </span>[];
+</code><code id="L1634"><span class="ln">1634</span>            <b>var</b> maxlength<span class="s"> = </span>mmax(t1.length, t2.length),
+</code><code id="L1635"><span class="ln">1635</span>                from<span class="s"> = </span>[],
+</code><code id="L1636"><span class="ln">1636</span>                to<span class="s"> = </span>[],
+</code><code id="L1637"><span class="ln">1637</span>                i<span class="s"> = </span><span class="d">0</span>, j, jj,
+</code><code id="L1638"><span class="ln">1638</span>                tt1, tt2;
+</code><code id="L1639"><span class="ln">1639</span>            <b>for</b> (; i &lt; maxlength; i++) {
+</code><code id="L1640"><span class="ln">1640</span>                tt1<span class="s"> = </span>t1[i]<span class="s"> || </span>getEmpty(t2[i]);
+</code><code id="L1641"><span class="ln">1641</span>                tt2<span class="s"> = </span>t2[i]<span class="s"> || </span>getEmpty(tt1);
+</code><code id="L1642"><span class="ln">1642</span>                <b>if</b> (    (tt1[<span class="d">0</span>] != tt2[<span class="d">0</span>]) ||
+</code><code id="L1643"><span class="ln">1643</span>                        (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"r"</i><span class="s"> &amp;&amp; </span>(tt1[<span class="d">2</span>] != tt2[<span class="d">2</span>]<span class="s"> || </span>tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>])) ||
+</code><code id="L1644"><span class="ln">1644</span>                        (tt1[<span class="d">0</span>]<span class="s"> == </span><i>"s"</i><span class="s"> &amp;&amp; </span>(tt1[<span class="d">3</span>] != tt2[<span class="d">3</span>]<span class="s"> || </span>tt1[<span class="d">4</span>] != tt2[<span class="d">4</span>]))
+</code><code id="L1645"><span class="ln">1645</span>                    ) {
+</code><code id="L1646"><span class="ln">1646</span>                    <b>return</b>;
+</code><code id="L1647"><span class="ln">1647</span>                }
+</code><code id="L1648"><span class="ln">1648</span>                from[i]<span class="s"> = </span>[];
+</code><code id="L1649"><span class="ln">1649</span>                to[i]<span class="s"> = </span>[];
+</code><code id="L1650"><span class="ln">1650</span>                <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>mmax(tt1.length, tt2.length); j &lt; jj; j++) {
+</code><code id="L1651"><span class="ln">1651</span>                    j <b>in</b> tt1<span class="s"> &amp;&amp; </span>(from[i][j]<span class="s"> = </span>tt1[j]);
+</code><code id="L1652"><span class="ln">1652</span>                    j <b>in</b> tt2<span class="s"> &amp;&amp; </span>(to[i][j]<span class="s"> = </span>tt2[j]);
+</code><code id="L1653"><span class="ln">1653</span>                }
+</code><code id="L1654"><span class="ln">1654</span>            }
+</code><code id="L1655"><span class="ln">1655</span>            <b>return</b> {
+</code><code id="L1656"><span class="ln">1656</span>                from: from,
+</code><code id="L1657"><span class="ln">1657</span>                to: to
+</code><code id="L1658"><span class="ln">1658</span>            };
+</code><code id="L1659"><span class="ln">1659</span>        };
+</code><code id="L1660"><span class="ln">1660</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L1661"><span class="ln">1661</span><span class="c">    <span class="s"> * </span>Raphael.pathToRelative
+</span></code><code id="L1662"><span class="ln">1662</span><span class="c">     [ method ]
+</span></code><code id="L1663"><span class="ln">1663</span><span class="c">     **
+</span></code><code id="L1664"><span class="ln">1664</span><span class="c">    <span class="s"> * </span>Utility method
+</span></code><code id="L1665"><span class="ln">1665</span><span class="c">     **
+</span></code><code id="L1666"><span class="ln">1666</span><span class="c">    <span class="s"> * </span>Converts path to relative form
+</span></code><code id="L1667"><span class="ln">1667</span><span class="c">     > Parameters
+</span></code><code id="L1668"><span class="ln">1668</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments
+</span></code><code id="L1669"><span class="ln">1669</span><span class="c">    <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L1670"><span class="ln">1670</span><span class="c">    \*/</span>
+</code><code id="L1671"><span class="ln">1671</span>    R.pathToRelative<span class="s"> = </span>pathToRelative;
+</code><code id="L1672"><span class="ln">1672</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L1673"><span class="ln">1673</span><span class="c">    <span class="s"> * </span>Raphael.path2curve
+</span></code><code id="L1674"><span class="ln">1674</span><span class="c">     [ method ]
+</span></code><code id="L1675"><span class="ln">1675</span><span class="c">     **
+</span></code><code id="L1676"><span class="ln">1676</span><span class="c">    <span class="s"> * </span>Utility method
+</span></code><code id="L1677"><span class="ln">1677</span><span class="c">     **
+</span></code><code id="L1678"><span class="ln">1678</span><span class="c">    <span class="s"> * </span>Converts path to path where all segments are cubic bezier curves.
+</span></code><code id="L1679"><span class="ln">1679</span><span class="c">     > Parameters
+</span></code><code id="L1680"><span class="ln">1680</span><span class="c">    <span class="s"> - </span>pathString (string|array) path string or array of segments
+</span></code><code id="L1681"><span class="ln">1681</span><span class="c">    <span class="s"> = </span>(array) array of segments.
+</span></code><code id="L1682"><span class="ln">1682</span><span class="c">    \*/</span>
+</code><code id="L1683"><span class="ln">1683</span>    R.path2curve<span class="s"> = </span>path2curve;
+</code><code id="L1684"><span class="ln">1684</span>    <span class="c">// Matrix</span>
+</code><code id="L1685"><span class="ln">1685</span>    <span class="c">// <b>var</b> m<span class="s"> = </span>document.createElementNS(<i>"http://www.w3.org/<span class="d">2000</span>/svg"</i>, <i>"svg"</i>).createSVGMatrix();</span>
+</code><code id="L1686"><span class="ln">1686</span>    <b>function</b> Matrix(a, b, c, d, e, f) {
+</code><code id="L1687"><span class="ln">1687</span>        <b>if</b> (a != <b>null</b>) {
+</code><code id="L1688"><span class="ln">1688</span>            <b>this</b>.m<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
+</code><code id="L1689"><span class="ln">1689</span>        } <b>else</b> {
+</code><code id="L1690"><span class="ln">1690</span>            <b>this</b>.m<span class="s"> = </span>[[<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">1</span>, <span class="d">0</span>], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]];
+</code><code id="L1691"><span class="ln">1691</span>        }
+</code><code id="L1692"><span class="ln">1692</span>    }
+</code><code id="L1693"><span class="ln">1693</span>    <b>var</b> matrixproto<span class="s"> = </span>Matrix.prototype;
+</code><code id="L1694"><span class="ln">1694</span>    matrixproto.add<span class="s"> = </span><b>function</b> (a, b, c, d, e, f) {
+</code><code id="L1695"><span class="ln">1695</span>        <b>var</b> out<span class="s"> = </span>[[], [], []],
+</code><code id="L1696"><span class="ln">1696</span>            matrix<span class="s"> = </span>[[a, c, e], [b, d, f], [<span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>]],
+</code><code id="L1697"><span class="ln">1697</span>            x, y, z, res;
+</code><code id="L1698"><span class="ln">1698</span>
+</code><code id="L1699"><span class="ln">1699</span>        <b>for</b> (x<span class="s"> = </span><span class="d">0</span>; x &lt; <span class="d">3</span>; x++) {
+</code><code id="L1700"><span class="ln">1700</span>            <b>for</b> (y<span class="s"> = </span><span class="d">0</span>; y &lt; <span class="d">3</span>; y++) {
+</code><code id="L1701"><span class="ln">1701</span>                res<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1702"><span class="ln">1702</span>                <b>for</b> (z<span class="s"> = </span><span class="d">0</span>; z &lt; <span class="d">3</span>; z++) {
+</code><code id="L1703"><span class="ln">1703</span>                    res += <b>this</b>.m[x][z]<span class="s"> * </span>matrix[z][y];
+</code><code id="L1704"><span class="ln">1704</span>                }
+</code><code id="L1705"><span class="ln">1705</span>                out[x][y]<span class="s"> = </span>res;
+</code><code id="L1706"><span class="ln">1706</span>            }
+</code><code id="L1707"><span class="ln">1707</span>        }
+</code><code id="L1708"><span class="ln">1708</span>        <b>this</b>.m<span class="s"> = </span>out;
+</code><code id="L1709"><span class="ln">1709</span>    };
+</code><code id="L1710"><span class="ln">1710</span>    matrixproto.invert<span class="s"> = </span><b>function</b> () {
+</code><code id="L1711"><span class="ln">1711</span>        <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L1712"><span class="ln">1712</span>            b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L1713"><span class="ln">1713</span>            c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L1714"><span class="ln">1714</span>            d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L1715"><span class="ln">1715</span>            e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L1716"><span class="ln">1716</span>            f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>],
+</code><code id="L1717"><span class="ln">1717</span>            x<span class="s"> = </span>a<span class="s"> * </span>d<span class="s"> - </span>b<span class="s"> * </span>c;
+</code><code id="L1718"><span class="ln">1718</span>        <b>return</b> <b>new</b> Matrix(d<span class="s"> / </span>x, -b<span class="s"> / </span>x, -c<span class="s"> / </span>x, a<span class="s"> / </span>x, (c<span class="s"> * </span>f<span class="s"> - </span>d<span class="s"> * </span>e)<span class="s"> / </span>x, (b<span class="s"> * </span>e<span class="s"> - </span>a<span class="s"> * </span>f)<span class="s"> / </span>x);
+</code><code id="L1719"><span class="ln">1719</span>    };
+</code><code id="L1720"><span class="ln">1720</span>    matrixproto.clone<span class="s"> = </span><b>function</b> () {
+</code><code id="L1721"><span class="ln">1721</span>        <b>var</b> a<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L1722"><span class="ln">1722</span>            b<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L1723"><span class="ln">1723</span>            c<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L1724"><span class="ln">1724</span>            d<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L1725"><span class="ln">1725</span>            e<span class="s"> = </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L1726"><span class="ln">1726</span>            f<span class="s"> = </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1727"><span class="ln">1727</span>        <b>return</b> <b>new</b> Matrix(a, b, c, d, e, f);
+</code><code id="L1728"><span class="ln">1728</span>    };
+</code><code id="L1729"><span class="ln">1729</span>    matrixproto.translate<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1730"><span class="ln">1730</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, x, y);
+</code><code id="L1731"><span class="ln">1731</span>    };
+</code><code id="L1732"><span class="ln">1732</span>    matrixproto.scale<span class="s"> = </span><b>function</b> (x, y, cx, cy) {
+</code><code id="L1733"><span class="ln">1733</span>        y<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>(y<span class="s"> = </span>x);
+</code><code id="L1734"><span class="ln">1734</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, cx, cy);
+</code><code id="L1735"><span class="ln">1735</span>        <b>this</b>.add(x, <span class="d">0</span>, <span class="d">0</span>, y, <span class="d">0</span>, <span class="d">0</span>);
+</code><code id="L1736"><span class="ln">1736</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -cx, -cy);
+</code><code id="L1737"><span class="ln">1737</span>    };
+</code><code id="L1738"><span class="ln">1738</span>    matrixproto.rotate<span class="s"> = </span><b>function</b> (a, x, y) {
+</code><code id="L1739"><span class="ln">1739</span>        a<span class="s"> = </span>R.rad(a);
+</code><code id="L1740"><span class="ln">1740</span>        <b>var</b> cos<span class="s"> = </span>+math.cos(a).toFixed(<span class="d">9</span>),
+</code><code id="L1741"><span class="ln">1741</span>            sin<span class="s"> = </span>+math.sin(a).toFixed(<span class="d">9</span>);
+</code><code id="L1742"><span class="ln">1742</span>        <b>this</b>.add(cos, sin, -sin, cos, x, y);
+</code><code id="L1743"><span class="ln">1743</span>        <b>this</b>.add(<span class="d">1</span>, <span class="d">0</span>, <span class="d">0</span>, <span class="d">1</span>, -x, -y);
+</code><code id="L1744"><span class="ln">1744</span>    };
+</code><code id="L1745"><span class="ln">1745</span>    matrixproto.x<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1746"><span class="ln">1746</span>        <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>];
+</code><code id="L1747"><span class="ln">1747</span>    };
+</code><code id="L1748"><span class="ln">1748</span>    matrixproto.y<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L1749"><span class="ln">1749</span>        <b>return</b> x<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> + </span>y<span class="s"> * </span><b>this</b>.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> + </span><b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>];
+</code><code id="L1750"><span class="ln">1750</span>    };
+</code><code id="L1751"><span class="ln">1751</span>    matrixproto.get<span class="s"> = </span><b>function</b> (i, j) {
+</code><code id="L1752"><span class="ln">1752</span>        <b>return</b> +<b>this</b>.m[i][j].toFixed(<span class="d">4</span>);
+</code><code id="L1753"><span class="ln">1753</span>    };
+</code><code id="L1754"><span class="ln">1754</span>    matrixproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L1755"><span class="ln">1755</span>        <b>return</b> R.svg ?
+</code><code id="L1756"><span class="ln">1756</span>            <i>"matrix("</i><span class="s"> + </span>[<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)].join()<span class="s"> + </span><i>")"</i> :
+</code><code id="L1757"><span class="ln">1757</span>            [<b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>), <b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>].join();
+</code><code id="L1758"><span class="ln">1758</span>    };
+</code><code id="L1759"><span class="ln">1759</span>    matrixproto.toFilter<span class="s"> = </span><b>function</b> () {
+</code><code id="L1760"><span class="ln">1760</span>        <b>return</b> <i>"progid:DXImageTransform.Microsoft.Matrix(M11="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">0</span>) +
+</code><code id="L1761"><span class="ln">1761</span>            <i>", M12="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">1</span>)<span class="s"> + </span><i>", M21="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">0</span>)<span class="s"> + </span><i>", M22="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">1</span>) +
+</code><code id="L1762"><span class="ln">1762</span>            <i>", Dx="</i><span class="s"> + </span><b>this</b>.get(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> + </span><i>", Dy="</i><span class="s"> + </span><b>this</b>.get(<span class="d">1</span>, <span class="d">2</span>)<span class="s"> + </span><i>", sizingmedthod='auto expand')"</i>;
+</code><code id="L1763"><span class="ln">1763</span>    };
+</code><code id="L1764"><span class="ln">1764</span>    matrixproto.offset<span class="s"> = </span><b>function</b> () {
+</code><code id="L1765"><span class="ln">1765</span>        <b>return</b> [<b>this</b>.m[<span class="d">0</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>), <b>this</b>.m[<span class="d">1</span>][<span class="d">2</span>].toFixed(<span class="d">4</span>)];
+</code><code id="L1766"><span class="ln">1766</span>    };
+</code><code id="L1767"><span class="ln">1767</span>
+</code><code id="L1768"><span class="ln">1768</span>    R.Matrix<span class="s"> = </span>Matrix;
+</code><code id="L1769"><span class="ln">1769</span>
+</code><code id="L1770"><span class="ln">1770</span>    <span class="c">// SVG</span>
+</code><code id="L1771"><span class="ln">1771</span>    <b>if</b> (R.svg) {
+</code><code id="L1772"><span class="ln">1772</span>        <b>var</b> xlink<span class="s"> = </span><i>"http:<span class="c">//www.w3.org/<span class="d">1999</span>/xlink"</i>,</span>
+</code><code id="L1773"><span class="ln">1773</span>            markers<span class="s"> = </span>{
+</code><code id="L1774"><span class="ln">1774</span>                block: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,5z"</i>,
+</code><code id="L1775"><span class="ln">1775</span>                classic: <i>"M5,<span class="d">0</span> <span class="d">0</span>,<span class="d">2.5</span> <span class="d">5</span>,<span class="d">5</span> <span class="d">3.5</span>,<span class="d">3</span> <span class="d">3.5</span>,2z"</i>,
+</code><code id="L1776"><span class="ln">1776</span>                diamond: <i>"M2<span class="d">.5</span>,<span class="d">0</span> <span class="d">5</span>,<span class="d">2.5</span> <span class="d">2.5</span>,<span class="d">5</span> <span class="d">0</span>,<span class="d">2</span>.5z"</i>,
+</code><code id="L1777"><span class="ln">1777</span>                open: <i>"M6,<span class="d">1</span> <span class="d">1</span>,<span class="d">3.5</span> <span class="d">6</span>,<span class="d">6</span>"</i>,
+</code><code id="L1778"><span class="ln">1778</span>                oval: <i>"M2<span class="d">.5</span>,0A2<span class="d">.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,<span class="d">5</span> <span class="d">2.5</span>,<span class="d">2.5</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">1</span>,<span class="d">2.5</span>,0z"</i>
+</code><code id="L1779"><span class="ln">1779</span>            },
+</code><code id="L1780"><span class="ln">1780</span>            markerCounter<span class="s"> = </span>{};
+</code><code id="L1781"><span class="ln">1781</span>        R.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L1782"><span class="ln">1782</span>            <b>return</b>  <i>"Your browser supports SVG.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
+</code><code id="L1783"><span class="ln">1783</span>        };
+</code><code id="L1784"><span class="ln">1784</span>        <b>var</b> $<span class="s"> = </span><b>function</b> (el, attr) {
+</code><code id="L1785"><span class="ln">1785</span>            <b>if</b> (attr) {
+</code><code id="L1786"><span class="ln">1786</span>                <b>if</b> (<b>typeof</b> el<span class="s"> == </span><i>"string"</i>) {
+</code><code id="L1787"><span class="ln">1787</span>                    el<span class="s"> = </span>$(el);
+</code><code id="L1788"><span class="ln">1788</span>                }
+</code><code id="L1789"><span class="ln">1789</span>                <b>for</b> (<b>var</b> key <b>in</b> attr) <b>if</b> (attr[has](key)) {
+</code><code id="L1790"><span class="ln">1790</span>                    <b>if</b> (key.substring(<span class="d">0</span>, <span class="d">6</span>)<span class="s"> == </span><i>"xlink:"</i>) {
+</code><code id="L1791"><span class="ln">1791</span>                        el.setAttributeNS(xlink, key.substring(<span class="d">6</span>), Str(attr[key]));
+</code><code id="L1792"><span class="ln">1792</span>                    } <b>else</b> {
+</code><code id="L1793"><span class="ln">1793</span>                        el[setAttribute](key, Str(attr[key]));
+</code><code id="L1794"><span class="ln">1794</span>                    }
+</code><code id="L1795"><span class="ln">1795</span>                }
+</code><code id="L1796"><span class="ln">1796</span>            } <b>else</b> {
+</code><code id="L1797"><span class="ln">1797</span>                el<span class="s"> = </span>g.doc.createElementNS(<i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i>, el);</span>
+</code><code id="L1798"><span class="ln">1798</span>                el.style<span class="s"> &amp;&amp; </span>(el.style.webkitTapHighlightColor<span class="s"> = </span><i>"rgba(<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>,<span class="d">0</span>)"</i>);
+</code><code id="L1799"><span class="ln">1799</span>            }
+</code><code id="L1800"><span class="ln">1800</span>            <b>return</b> el;
+</code><code id="L1801"><span class="ln">1801</span>        },
+</code><code id="L1802"><span class="ln">1802</span>        thePath<span class="s"> = </span><b>function</b> (pathString, SVG) {
+</code><code id="L1803"><span class="ln">1803</span>            <b>var</b> el<span class="s"> = </span>$(<i>"path"</i>);
+</code><code id="L1804"><span class="ln">1804</span>            SVG.canvas<span class="s"> &amp;&amp; </span>SVG.canvas.appendChild(el);
+</code><code id="L1805"><span class="ln">1805</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, SVG);
+</code><code id="L1806"><span class="ln">1806</span>            p.type<span class="s"> = </span><i>"path"</i>;
+</code><code id="L1807"><span class="ln">1807</span>            setFillAndStroke(p, {fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>, path: pathString});
+</code><code id="L1808"><span class="ln">1808</span>            <b>return</b> p;
+</code><code id="L1809"><span class="ln">1809</span>        },
+</code><code id="L1810"><span class="ln">1810</span>        gradients<span class="s"> = </span>{},
+</code><code id="L1811"><span class="ln">1811</span>        rgGrad<span class="s"> = </span>/^url\(#(.*)\)$/,
+</code><code id="L1812"><span class="ln">1812</span>        removeGradientFill<span class="s"> = </span><b>function</b> (node, paper) {
+</code><code id="L1813"><span class="ln">1813</span>            <b>var</b> oid<span class="s"> = </span>node.getAttribute(fillString);
+</code><code id="L1814"><span class="ln">1814</span>            oid<span class="s"> = </span>oid<span class="s"> &amp;&amp; </span>oid.match(rgGrad);
+</code><code id="L1815"><span class="ln">1815</span>            <b>if</b> (oid<span class="s"> &amp;&amp; </span>!--gradients[oid[<span class="d">1</span>]]) {
+</code><code id="L1816"><span class="ln">1816</span>                <b>delete</b> gradients[oid[<span class="d">1</span>]];
+</code><code id="L1817"><span class="ln">1817</span>                paper.defs.removeChild(g.doc.getElementById(oid[<span class="d">1</span>]));
+</code><code id="L1818"><span class="ln">1818</span>            }
+</code><code id="L1819"><span class="ln">1819</span>        },
+</code><code id="L1820"><span class="ln">1820</span>        addGradientFill<span class="s"> = </span><b>function</b> (element, gradient) {
+</code><code id="L1821"><span class="ln">1821</span>            <b>var</b> type<span class="s"> = </span><i>"linear"</i>,
+</code><code id="L1822"><span class="ln">1822</span>                id<span class="s"> = </span>element.id<span class="s"> + </span>gradient,
+</code><code id="L1823"><span class="ln">1823</span>                fx<span class="s"> = </span><span class="d">.5</span>, fy<span class="s"> = </span><span class="d">.5</span>,
+</code><code id="L1824"><span class="ln">1824</span>                o<span class="s"> = </span>element.node,
+</code><code id="L1825"><span class="ln">1825</span>                SVG<span class="s"> = </span>element.paper,
+</code><code id="L1826"><span class="ln">1826</span>                s<span class="s"> = </span>o.style,
+</code><code id="L1827"><span class="ln">1827</span>                el<span class="s"> = </span>g.doc.getElementById(id);
+</code><code id="L1828"><span class="ln">1828</span>            <b>if</b> (!el) {
+</code><code id="L1829"><span class="ln">1829</span>                gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, _fx, _fy) {
+</code><code id="L1830"><span class="ln">1830</span>                    type<span class="s"> = </span><i>"radial"</i>;
+</code><code id="L1831"><span class="ln">1831</span>                    <b>if</b> (_fx<span class="s"> &amp;&amp; </span>_fy) {
+</code><code id="L1832"><span class="ln">1832</span>                        fx<span class="s"> = </span>toFloat(_fx);
+</code><code id="L1833"><span class="ln">1833</span>                        fy<span class="s"> = </span>toFloat(_fy);
+</code><code id="L1834"><span class="ln">1834</span>                        <b>var</b> dir<span class="s"> = </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>);
+</code><code id="L1835"><span class="ln">1835</span>                        pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span> &amp;&amp;
+</code><code id="L1836"><span class="ln">1836</span>                            (fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>dir<span class="s"> + </span><span class="d">.5</span>) &amp;&amp;
+</code><code id="L1837"><span class="ln">1837</span>                            fy != <span class="d">.5</span> &amp;&amp;
+</code><code id="L1838"><span class="ln">1838</span>                            (fy<span class="s"> = </span>fy.toFixed(<span class="d">5</span>)<span class="s"> - </span><span class="d">1e-5</span><span class="s"> * </span>dir);
 </code><code id="L1839"><span class="ln">1839</span>                    }
-</code><code id="L1840"><span class="ln">1840</span>                }
-</code><code id="L1841"><span class="ln">1841</span>                <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
-</code><code id="L1842"><span class="ln">1842</span>                <b>if</b> (!dots) {
-</code><code id="L1843"><span class="ln">1843</span>                    <b>return</b> <b>null</b>;
-</code><code id="L1844"><span class="ln">1844</span>                }
-</code><code id="L1845"><span class="ln">1845</span>                <b>if</b> (element.gradient) {
-</code><code id="L1846"><span class="ln">1846</span>                    SVG.defs.removeChild(element.gradient);
-</code><code id="L1847"><span class="ln">1847</span>                    <b>delete</b> element.gradient;
-</code><code id="L1848"><span class="ln">1848</span>                }
-</code><code id="L1849"><span class="ln">1849</span>
-</code><code id="L1850"><span class="ln">1850</span>                el<span class="s"> = </span>$(type<span class="s"> + </span><i>"Gradient"</i>, {id: id});
-</code><code id="L1851"><span class="ln">1851</span>                element.gradient<span class="s"> = </span>el;
-</code><code id="L1852"><span class="ln">1852</span>                $(el, type<span class="s"> == </span><i>"radial"</i> ? {
-</code><code id="L1853"><span class="ln">1853</span>                    fx: fx,
-</code><code id="L1854"><span class="ln">1854</span>                    fy: fy
-</code><code id="L1855"><span class="ln">1855</span>                } : {
-</code><code id="L1856"><span class="ln">1856</span>                    x1: vector[<span class="d">0</span>],
-</code><code id="L1857"><span class="ln">1857</span>                    y1: vector[<span class="d">1</span>],
-</code><code id="L1858"><span class="ln">1858</span>                    x2: vector[<span class="d">2</span>],
-</code><code id="L1859"><span class="ln">1859</span>                    y2: vector[<span class="d">3</span>],
-</code><code id="L1860"><span class="ln">1860</span>                    gradientTransform: element.matrix.invert()
-</code><code id="L1861"><span class="ln">1861</span>                });
-</code><code id="L1862"><span class="ln">1862</span>                SVG.defs.appendChild(el);
-</code><code id="L1863"><span class="ln">1863</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i &lt; ii; i++) {
-</code><code id="L1864"><span class="ln">1864</span>                    el.appendChild($(<i>"stop"</i>, {
-</code><code id="L1865"><span class="ln">1865</span>                        offset: dots[i].offset ? dots[i].offset : i ? <i>"<span class="d">100</span>%"</i> : <i>"<span class="d">0</span>%"</i>,
-</code><code id="L1866"><span class="ln">1866</span>                        <i>"stop-color"</i>: dots[i].color<span class="s"> || </span><i>"#fff"</i>
-</code><code id="L1867"><span class="ln">1867</span>                    }));
-</code><code id="L1868"><span class="ln">1868</span>                }
-</code><code id="L1869"><span class="ln">1869</span>            }
-</code><code id="L1870"><span class="ln">1870</span>            $(o, {
-</code><code id="L1871"><span class="ln">1871</span>                fill: <i>"url(#"</i><span class="s"> + </span>id<span class="s"> + </span><i>")"</i>,
-</code><code id="L1872"><span class="ln">1872</span>                opacity: <span class="d">1</span>,
-</code><code id="L1873"><span class="ln">1873</span>                <i>"fill-opacity"</i>: <span class="d">1</span>
-</code><code id="L1874"><span class="ln">1874</span>            });
-</code><code id="L1875"><span class="ln">1875</span>            s.fill<span class="s"> = </span>E;
-</code><code id="L1876"><span class="ln">1876</span>            s.opacity<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1877"><span class="ln">1877</span>            s.fillOpacity<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1878"><span class="ln">1878</span>            <b>return</b> <span class="d">1</span>;
-</code><code id="L1879"><span class="ln">1879</span>        },
-</code><code id="L1880"><span class="ln">1880</span>        updatePosition<span class="s"> = </span><b>function</b> (o) {
-</code><code id="L1881"><span class="ln">1881</span>            <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
-</code><code id="L1882"><span class="ln">1882</span>            $(o.pattern, {patternTransform: o.matrix.invert()<span class="s"> + </span><i>" translate("</i><span class="s"> + </span>bbox.x<span class="s"> + </span><i>","</i><span class="s"> + </span>bbox.y<span class="s"> + </span><i>")"</i>});
-</code><code id="L1883"><span class="ln">1883</span>        },
-</code><code id="L1884"><span class="ln">1884</span>        addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
-</code><code id="L1885"><span class="ln">1885</span>            <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
-</code><code id="L1886"><span class="ln">1886</span>                <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
-</code><code id="L1887"><span class="ln">1887</span>                    p<span class="s"> = </span>o.paper,
-</code><code id="L1888"><span class="ln">1888</span>                    se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
-</code><code id="L1889"><span class="ln">1889</span>                    node<span class="s"> = </span>o.node,
-</code><code id="L1890"><span class="ln">1890</span>                    attrs<span class="s"> = </span>o.attrs,
-</code><code id="L1891"><span class="ln">1891</span>                    stroke<span class="s"> = </span>attrs[<i>"stroke-width"</i>],
-</code><code id="L1892"><span class="ln">1892</span>                    i<span class="s"> = </span>values.length,
-</code><code id="L1893"><span class="ln">1893</span>                    type<span class="s"> = </span><i>"classic"</i>,
-</code><code id="L1894"><span class="ln">1894</span>                    from,
-</code><code id="L1895"><span class="ln">1895</span>                    to,
-</code><code id="L1896"><span class="ln">1896</span>                    dx,
-</code><code id="L1897"><span class="ln">1897</span>                    refX,
-</code><code id="L1898"><span class="ln">1898</span>                    attr,
-</code><code id="L1899"><span class="ln">1899</span>                    w<span class="s"> = </span><span class="d">3</span>,
-</code><code id="L1900"><span class="ln">1900</span>                    h<span class="s"> = </span><span class="d">3</span>,
-</code><code id="L1901"><span class="ln">1901</span>                    t<span class="s"> = </span><span class="d">5</span>;
-</code><code id="L1902"><span class="ln">1902</span>                <b>while</b> (i--) {
-</code><code id="L1903"><span class="ln">1903</span>                    <b>switch</b> (values[i]) {
-</code><code id="L1904"><span class="ln">1904</span>                        <b>case</b> <i>"block"</i>:
-</code><code id="L1905"><span class="ln">1905</span>                        <b>case</b> <i>"classic"</i>:
-</code><code id="L1906"><span class="ln">1906</span>                        <b>case</b> <i>"oval"</i>:
-</code><code id="L1907"><span class="ln">1907</span>                        <b>case</b> <i>"diamond"</i>:
-</code><code id="L1908"><span class="ln">1908</span>                        <b>case</b> <i>"open"</i>:
-</code><code id="L1909"><span class="ln">1909</span>                        <b>case</b> <i>"none"</i>:
-</code><code id="L1910"><span class="ln">1910</span>                            type<span class="s"> = </span>values[i];
-</code><code id="L1911"><span class="ln">1911</span>                            <b>break</b>;
-</code><code id="L1912"><span class="ln">1912</span>                        <b>case</b> <i>"wide"</i>: h<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
-</code><code id="L1913"><span class="ln">1913</span>                        <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
-</code><code id="L1914"><span class="ln">1914</span>                        <b>case</b> <i>"<b>long</b>"</i>: w<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
-</code><code id="L1915"><span class="ln">1915</span>                        <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
-</code><code id="L1916"><span class="ln">1916</span>                    }
-</code><code id="L1917"><span class="ln">1917</span>                }
-</code><code id="L1918"><span class="ln">1918</span>                <b>if</b> (type<span class="s"> == </span><i>"open"</i>) {
-</code><code id="L1919"><span class="ln">1919</span>                    w += <span class="d">2</span>;
-</code><code id="L1920"><span class="ln">1920</span>                    h += <span class="d">2</span>;
-</code><code id="L1921"><span class="ln">1921</span>                    t += <span class="d">2</span>;
-</code><code id="L1922"><span class="ln">1922</span>                    dx<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1923"><span class="ln">1923</span>                    refX<span class="s"> = </span>isEnd ? <span class="d">4</span> : <span class="d">1</span>;
-</code><code id="L1924"><span class="ln">1924</span>                    attr<span class="s"> = </span>{
-</code><code id="L1925"><span class="ln">1925</span>                        fill: <i>"none"</i>,
-</code><code id="L1926"><span class="ln">1926</span>                        stroke: attrs.stroke
-</code><code id="L1927"><span class="ln">1927</span>                    };
-</code><code id="L1928"><span class="ln">1928</span>                } <b>else</b> {
-</code><code id="L1929"><span class="ln">1929</span>                    refX<span class="s"> = </span>dx<span class="s"> = </span>w<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L1930"><span class="ln">1930</span>                    attr<span class="s"> = </span>{
-</code><code id="L1931"><span class="ln">1931</span>                        fill: attrs.stroke,
-</code><code id="L1932"><span class="ln">1932</span>                        stroke: <i>"none"</i>
-</code><code id="L1933"><span class="ln">1933</span>                    };
-</code><code id="L1934"><span class="ln">1934</span>                }
-</code><code id="L1935"><span class="ln">1935</span>                <b>if</b> (o._.arrows) {
-</code><code id="L1936"><span class="ln">1936</span>                    <b>if</b> (isEnd) {
-</code><code id="L1937"><span class="ln">1937</span>                        o._.arrows.endPath &amp;&amp; markerCounter[o._.arrows.endPath]--;
-</code><code id="L1938"><span class="ln">1938</span>                        o._.arrows.endMarker &amp;&amp; markerCounter[o._.arrows.endMarker]--;
-</code><code id="L1939"><span class="ln">1939</span>                    } <b>else</b> {
-</code><code id="L1940"><span class="ln">1940</span>                        o._.arrows.startPath &amp;&amp; markerCounter[o._.arrows.startPath]--;
-</code><code id="L1941"><span class="ln">1941</span>                        o._.arrows.startMarker &amp;&amp; markerCounter[o._.arrows.startMarker]--;
-</code><code id="L1942"><span class="ln">1942</span>                    }
-</code><code id="L1943"><span class="ln">1943</span>                } <b>else</b> {
-</code><code id="L1944"><span class="ln">1944</span>                    o._.arrows<span class="s"> = </span>{};
-</code><code id="L1945"><span class="ln">1945</span>                }
-</code><code id="L1946"><span class="ln">1946</span>                <b>if</b> (type != <i>"none"</i>) {
-</code><code id="L1947"><span class="ln">1947</span>                    <b>var</b> pathId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>type,
-</code><code id="L1948"><span class="ln">1948</span>                        markerId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>se<span class="s"> + </span>type<span class="s"> + </span>w<span class="s"> + </span>h;
-</code><code id="L1949"><span class="ln">1949</span>                    <b>if</b> (!g.doc.getElementById(pathId)) {
-</code><code id="L1950"><span class="ln">1950</span>                        p.defs.appendChild($($(<i>"path"</i>), {
-</code><code id="L1951"><span class="ln">1951</span>                            <i>"stroke-linecap"</i>: <i>"round"</i>,
-</code><code id="L1952"><span class="ln">1952</span>                            d: markers[type],
-</code><code id="L1953"><span class="ln">1953</span>                            id: pathId
-</code><code id="L1954"><span class="ln">1954</span>                        }));
-</code><code id="L1955"><span class="ln">1955</span>                        markerCounter[pathId]<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1956"><span class="ln">1956</span>                    } <b>else</b> {
-</code><code id="L1957"><span class="ln">1957</span>                        markerCounter[pathId]++;
-</code><code id="L1958"><span class="ln">1958</span>                    }
-</code><code id="L1959"><span class="ln">1959</span>                    <b>var</b> marker<span class="s"> = </span>g.doc.getElementById(markerId),
-</code><code id="L1960"><span class="ln">1960</span>                        use;
-</code><code id="L1961"><span class="ln">1961</span>                    <b>if</b> (!marker) {
-</code><code id="L1962"><span class="ln">1962</span>                        marker<span class="s"> = </span>$($(<i>"marker"</i>), {
-</code><code id="L1963"><span class="ln">1963</span>                            id: markerId,
-</code><code id="L1964"><span class="ln">1964</span>                            markerHeight: h,
-</code><code id="L1965"><span class="ln">1965</span>                            markerWidth: w,
-</code><code id="L1966"><span class="ln">1966</span>                            orient: <i>"auto"</i>,
-</code><code id="L1967"><span class="ln">1967</span>                            refX: refX,
-</code><code id="L1968"><span class="ln">1968</span>                            refY: h<span class="s"> / </span><span class="d">2</span>
-</code><code id="L1969"><span class="ln">1969</span>                        });
-</code><code id="L1970"><span class="ln">1970</span>                        use<span class="s"> = </span>$($(<i>"use"</i>), {
-</code><code id="L1971"><span class="ln">1971</span>                            <i>"xlink:href"</i>: <i>"#"</i><span class="s"> + </span>pathId,
-</code><code id="L1972"><span class="ln">1972</span>                            transform: (isEnd ? <i>" rotate(<span class="d">180</span> "</i><span class="s"> + </span>w<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>" "</i><span class="s"> + </span>h<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>") "</i> : S)<span class="s"> + </span><i>"scale("</i><span class="s"> + </span>w<span class="s"> / </span>t<span class="s"> + </span><i>","</i><span class="s"> + </span>h<span class="s"> / </span>t<span class="s"> + </span><i>")"</i>,
-</code><code id="L1973"><span class="ln">1973</span>                            <i>"stroke-width"</i>: <span class="d">1</span><span class="s"> / </span>((w<span class="s"> / </span>t<span class="s"> + </span>h<span class="s"> / </span>t)<span class="s"> / </span><span class="d">2</span>)
-</code><code id="L1974"><span class="ln">1974</span>                        });
-</code><code id="L1975"><span class="ln">1975</span>                        marker.appendChild(use);
-</code><code id="L1976"><span class="ln">1976</span>                        p.defs.appendChild(marker);
-</code><code id="L1977"><span class="ln">1977</span>                        markerCounter[markerId]<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L1978"><span class="ln">1978</span>                    } <b>else</b> {
-</code><code id="L1979"><span class="ln">1979</span>                        markerCounter[markerId]++;
-</code><code id="L1980"><span class="ln">1980</span>                        use<span class="s"> = </span>marker.getElementsByTagName(<i>"use"</i>)[<span class="d">0</span>];
-</code><code id="L1981"><span class="ln">1981</span>                    }
-</code><code id="L1982"><span class="ln">1982</span>                    $(use, attr);
-</code><code id="L1983"><span class="ln">1983</span>                    <b>var</b> delta<span class="s"> = </span>dx<span class="s"> * </span>(type != <i>"diamond"</i> &amp;&amp; type != <i>"oval"</i>);
-</code><code id="L1984"><span class="ln">1984</span>                    <b>if</b> (isEnd) {
-</code><code id="L1985"><span class="ln">1985</span>                        from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L1986"><span class="ln">1986</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>delta<span class="s"> * </span>stroke;
-</code><code id="L1987"><span class="ln">1987</span>                    } <b>else</b> {
-</code><code id="L1988"><span class="ln">1988</span>                        from<span class="s"> = </span>delta<span class="s"> * </span>stroke;
-</code><code id="L1989"><span class="ln">1989</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L1990"><span class="ln">1990</span>                    }
-</code><code id="L1991"><span class="ln">1991</span>                    attr<span class="s"> = </span>{};
-</code><code id="L1992"><span class="ln">1992</span>                    attr[<i>"marker-"</i><span class="s"> + </span>se]<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>markerId<span class="s"> + </span><i>")"</i>;
-</code><code id="L1993"><span class="ln">1993</span>                    <b>if</b> (to<span class="s"> || </span>from) {
-</code><code id="L1994"><span class="ln">1994</span>                        attr.d<span class="s"> = </span>Raphael.getSubpath(attrs.path, from, to);
-</code><code id="L1995"><span class="ln">1995</span>                    }
-</code><code id="L1996"><span class="ln">1996</span>                    $(node, attr);
-</code><code id="L1997"><span class="ln">1997</span>                    o._.arrows[se<span class="s"> + </span><i>"Path"</i>]<span class="s"> = </span>pathId;
-</code><code id="L1998"><span class="ln">1998</span>                    o._.arrows[se<span class="s"> + </span><i>"Marker"</i>]<span class="s"> = </span>markerId;
-</code><code id="L1999"><span class="ln">1999</span>                    o._.arrows[se<span class="s"> + </span><i>"dx"</i>]<span class="s"> = </span>delta;
-</code><code id="L2000"><span class="ln">2000</span>                    o._.arrows[se<span class="s"> + </span><i>"Type"</i>]<span class="s"> = </span>type;
-</code><code id="L2001"><span class="ln">2001</span>                    o._.arrows[se<span class="s"> + </span><i>"String"</i>]<span class="s"> = </span>value;
-</code><code id="L2002"><span class="ln">2002</span>                } <b>else</b> {
-</code><code id="L2003"><span class="ln">2003</span>                    <b>if</b> (isEnd) {
-</code><code id="L2004"><span class="ln">2004</span>                        from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2005"><span class="ln">2005</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>from;
-</code><code id="L2006"><span class="ln">2006</span>                    } <b>else</b> {
-</code><code id="L2007"><span class="ln">2007</span>                        from<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L2008"><span class="ln">2008</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L2009"><span class="ln">2009</span>                    }
-</code><code id="L2010"><span class="ln">2010</span>                    o._.arrows[se<span class="s"> + </span><i>"Path"</i>] &amp;&amp; $(node, {d: Raphael.getSubpath(attrs.path, from, to)});
-</code><code id="L2011"><span class="ln">2011</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Path"</i>];
-</code><code id="L2012"><span class="ln">2012</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Marker"</i>];
-</code><code id="L2013"><span class="ln">2013</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"dx"</i>];
-</code><code id="L2014"><span class="ln">2014</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Type"</i>];
-</code><code id="L2015"><span class="ln">2015</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"String"</i>];
-</code><code id="L2016"><span class="ln">2016</span>                }
-</code><code id="L2017"><span class="ln">2017</span>                <b>for</b> (attr <b>in</b> markerCounter) <b>if</b> (markerCounter[has](attr) &amp;&amp; !markerCounter[attr]) {
-</code><code id="L2018"><span class="ln">2018</span>                    <b>var</b> item<span class="s"> = </span>g.doc.getElementById(attr);
-</code><code id="L2019"><span class="ln">2019</span>                    item &amp;&amp; item.parentNode.removeChild(item);
-</code><code id="L2020"><span class="ln">2020</span>                }
-</code><code id="L2021"><span class="ln">2021</span>            }
-</code><code id="L2022"><span class="ln">2022</span>        },
-</code><code id="L2023"><span class="ln">2023</span>        setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
-</code><code id="L2024"><span class="ln">2024</span>            <b>var</b> dasharray<span class="s"> = </span>{
-</code><code id="L2025"><span class="ln">2025</span>                    <i>""</i>: [<span class="d">0</span>],
-</code><code id="L2026"><span class="ln">2026</span>                    <i>"none"</i>: [<span class="d">0</span>],
-</code><code id="L2027"><span class="ln">2027</span>                    <i>"-"</i>: [<span class="d">3</span>, <span class="d">1</span>],
-</code><code id="L2028"><span class="ln">2028</span>                    <i>"."</i>: [<span class="d">1</span>, <span class="d">1</span>],
-</code><code id="L2029"><span class="ln">2029</span>                    <i>"-."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
-</code><code id="L2030"><span class="ln">2030</span>                    <i>"-.."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
-</code><code id="L2031"><span class="ln">2031</span>                    <i>". "</i>: [<span class="d">1</span>, <span class="d">3</span>],
-</code><code id="L2032"><span class="ln">2032</span>                    <i>"- "</i>: [<span class="d">4</span>, <span class="d">3</span>],
-</code><code id="L2033"><span class="ln">2033</span>                    <i>"--"</i>: [<span class="d">8</span>, <span class="d">3</span>],
-</code><code id="L2034"><span class="ln">2034</span>                    <i>"- ."</i>: [<span class="d">4</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
-</code><code id="L2035"><span class="ln">2035</span>                    <i>"--."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
-</code><code id="L2036"><span class="ln">2036</span>                    <i>"--.."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>]
-</code><code id="L2037"><span class="ln">2037</span>                },
-</code><code id="L2038"><span class="ln">2038</span>                node<span class="s"> = </span>o.node,
-</code><code id="L2039"><span class="ln">2039</span>                attrs<span class="s"> = </span>o.attrs,
-</code><code id="L2040"><span class="ln">2040</span>                addDashes<span class="s"> = </span><b>function</b> (o, value) {
-</code><code id="L2041"><span class="ln">2041</span>                    value<span class="s"> = </span>dasharray[lowerCase.call(value)];
-</code><code id="L2042"><span class="ln">2042</span>                    <b>if</b> (value) {
-</code><code id="L2043"><span class="ln">2043</span>                        <b>var</b> width<span class="s"> = </span>o.attrs[<i>"stroke-width"</i>]<span class="s"> || </span><i>"<span class="d">1</span>"</i>,
-</code><code id="L2044"><span class="ln">2044</span>                            butt<span class="s"> = </span>{round: width, square: width, butt: <span class="d">0</span>}[o.attrs[<i>"stroke-linecap"</i>]<span class="s"> || </span>params[<i>"stroke-linecap"</i>]]<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L2045"><span class="ln">2045</span>                            dashes<span class="s"> = </span>[],
-</code><code id="L2046"><span class="ln">2046</span>                            i<span class="s"> = </span>value.length;
-</code><code id="L2047"><span class="ln">2047</span>                        <b>while</b> (i--) {
-</code><code id="L2048"><span class="ln">2048</span>                            dashes[i]<span class="s"> = </span>value[i]<span class="s"> * </span>width<span class="s"> + </span>((i % <span class="d">2</span>) ? <span class="d">1</span> : -<span class="d">1</span>)<span class="s"> * </span>butt;
-</code><code id="L2049"><span class="ln">2049</span>                        }
-</code><code id="L2050"><span class="ln">2050</span>                        $(node, {<i>"stroke-dasharray"</i>: dashes.join(<i>","</i>)});
-</code><code id="L2051"><span class="ln">2051</span>                    }
-</code><code id="L2052"><span class="ln">2052</span>                };
-</code><code id="L2053"><span class="ln">2053</span>            <b>for</b> (<b>var</b> att <b>in</b> params) {
-</code><code id="L2054"><span class="ln">2054</span>                <b>if</b> (params[has](att)) {
-</code><code id="L2055"><span class="ln">2055</span>                    <b>if</b> (!availableAttrs[has](att)) {
-</code><code id="L2056"><span class="ln">2056</span>                        <b>continue</b>;
-</code><code id="L2057"><span class="ln">2057</span>                    }
-</code><code id="L2058"><span class="ln">2058</span>                    <b>var</b> value<span class="s"> = </span>params[att];
-</code><code id="L2059"><span class="ln">2059</span>                    attrs[att]<span class="s"> = </span>value;
-</code><code id="L2060"><span class="ln">2060</span>                    <b>switch</b> (att) {
-</code><code id="L2061"><span class="ln">2061</span>                        <b>case</b> <i>"blur"</i>:
-</code><code id="L2062"><span class="ln">2062</span>                            o.blur(value);
-</code><code id="L2063"><span class="ln">2063</span>                            <b>break</b>;
-</code><code id="L2064"><span class="ln">2064</span>                        <b>case</b> <i>"href"</i>:
-</code><code id="L2065"><span class="ln">2065</span>                        <b>case</b> <i>"title"</i>:
-</code><code id="L2066"><span class="ln">2066</span>                        <b>case</b> <i>"target"</i>:
-</code><code id="L2067"><span class="ln">2067</span>                            <b>var</b> pn<span class="s"> = </span>node.parentNode;
-</code><code id="L2068"><span class="ln">2068</span>                            <b>if</b> (lowerCase.call(pn.tagName) != <i>"a"</i>) {
-</code><code id="L2069"><span class="ln">2069</span>                                <b>var</b> hl<span class="s"> = </span>$(<i>"a"</i>);
-</code><code id="L2070"><span class="ln">2070</span>                                pn.insertBefore(hl, node);
-</code><code id="L2071"><span class="ln">2071</span>                                hl.appendChild(node);
-</code><code id="L2072"><span class="ln">2072</span>                                pn<span class="s"> = </span>hl;
-</code><code id="L2073"><span class="ln">2073</span>                            }
-</code><code id="L2074"><span class="ln">2074</span>                            <b>if</b> (att<span class="s"> == </span><i>"target"</i> &amp;&amp; value<span class="s"> == </span><i>"blank"</i>) {
-</code><code id="L2075"><span class="ln">2075</span>                                pn.setAttributeNS(xlink, <i>"show"</i>, <i>"<b>new</b>"</i>);
-</code><code id="L2076"><span class="ln">2076</span>                            } <b>else</b> {
-</code><code id="L2077"><span class="ln">2077</span>                                pn.setAttributeNS(xlink, att, value);
-</code><code id="L2078"><span class="ln">2078</span>                            }
-</code><code id="L2079"><span class="ln">2079</span>                            <b>break</b>;
-</code><code id="L2080"><span class="ln">2080</span>                        <b>case</b> <i>"cursor"</i>:
-</code><code id="L2081"><span class="ln">2081</span>                            node.style.cursor<span class="s"> = </span>value;
-</code><code id="L2082"><span class="ln">2082</span>                            <b>break</b>;
-</code><code id="L2083"><span class="ln">2083</span>                        <b>case</b> <i>"transform"</i>:
-</code><code id="L2084"><span class="ln">2084</span>                            o.transform(value);
-</code><code id="L2085"><span class="ln">2085</span>                            <b>break</b>;
-</code><code id="L2086"><span class="ln">2086</span>                        <b>case</b> <i>"arrow-start"</i>:
-</code><code id="L2087"><span class="ln">2087</span>                            addArrow(o, value);
-</code><code id="L2088"><span class="ln">2088</span>                            <b>break</b>;
-</code><code id="L2089"><span class="ln">2089</span>                        <b>case</b> <i>"arrow-end"</i>:
-</code><code id="L2090"><span class="ln">2090</span>                            addArrow(o, value, <span class="d">1</span>);
-</code><code id="L2091"><span class="ln">2091</span>                            <b>break</b>;
-</code><code id="L2092"><span class="ln">2092</span>                        <b>case</b> <i>"clip-rect"</i>:
-</code><code id="L2093"><span class="ln">2093</span>                            <b>var</b> rect<span class="s"> = </span>Str(value).split(separator);
-</code><code id="L2094"><span class="ln">2094</span>                            <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
-</code><code id="L2095"><span class="ln">2095</span>                                o.clip &amp;&amp; o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
-</code><code id="L2096"><span class="ln">2096</span>                                <b>var</b> el<span class="s"> = </span>$(<i>"clipPath"</i>),
-</code><code id="L2097"><span class="ln">2097</span>                                    rc<span class="s"> = </span>$(<i>"rect"</i>);
-</code><code id="L2098"><span class="ln">2098</span>                                el.id<span class="s"> = </span>createUUID();
-</code><code id="L2099"><span class="ln">2099</span>                                $(rc, {
-</code><code id="L2100"><span class="ln">2100</span>                                    x: rect[<span class="d">0</span>],
-</code><code id="L2101"><span class="ln">2101</span>                                    y: rect[<span class="d">1</span>],
-</code><code id="L2102"><span class="ln">2102</span>                                    width: rect[<span class="d">2</span>],
-</code><code id="L2103"><span class="ln">2103</span>                                    height: rect[<span class="d">3</span>]
-</code><code id="L2104"><span class="ln">2104</span>                                });
-</code><code id="L2105"><span class="ln">2105</span>                                el.appendChild(rc);
-</code><code id="L2106"><span class="ln">2106</span>                                o.paper.defs.appendChild(el);
-</code><code id="L2107"><span class="ln">2107</span>                                $(node, {<i>"clip-path"</i>: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
-</code><code id="L2108"><span class="ln">2108</span>                                o.clip<span class="s"> = </span>rc;
-</code><code id="L2109"><span class="ln">2109</span>                            }
-</code><code id="L2110"><span class="ln">2110</span>                            <b>if</b> (!value) {
-</code><code id="L2111"><span class="ln">2111</span>                                <b>var</b> clip<span class="s"> = </span>g.doc.getElementById(node.getAttribute(<i>"clip-path"</i>).replace(/(^url\(#|\)$)/g, E));
-</code><code id="L2112"><span class="ln">2112</span>                                clip &amp;&amp; clip.parentNode.removeChild(clip);
-</code><code id="L2113"><span class="ln">2113</span>                                $(node, {<i>"clip-path"</i>: E});
-</code><code id="L2114"><span class="ln">2114</span>                                <b>delete</b> o.clip;
-</code><code id="L2115"><span class="ln">2115</span>                            }
-</code><code id="L2116"><span class="ln">2116</span>                        <b>break</b>;
-</code><code id="L2117"><span class="ln">2117</span>                        <b>case</b> <i>"path"</i>:
-</code><code id="L2118"><span class="ln">2118</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
-</code><code id="L2119"><span class="ln">2119</span>                                $(node, {d: value ? attrs.path<span class="s"> = </span>pathToAbsolute(value) : <i>"M0,<span class="d">0</span>"</i>});
-</code><code id="L2120"><span class="ln">2120</span>                                o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2121"><span class="ln">2121</span>                                <b>if</b> (o._.arrows) {
-</code><code id="L2122"><span class="ln">2122</span>                                    <i>"startString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.startString);
-</code><code id="L2123"><span class="ln">2123</span>                                    <i>"endString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.endString, <span class="d">1</span>);
-</code><code id="L2124"><span class="ln">2124</span>                                }
-</code><code id="L2125"><span class="ln">2125</span>                            }
-</code><code id="L2126"><span class="ln">2126</span>                            <b>break</b>;
-</code><code id="L2127"><span class="ln">2127</span>                        <b>case</b> <i>"width"</i>:
-</code><code id="L2128"><span class="ln">2128</span>                            node[setAttribute](att, value);
-</code><code id="L2129"><span class="ln">2129</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2130"><span class="ln">2130</span>                            <b>if</b> (attrs.fx) {
-</code><code id="L2131"><span class="ln">2131</span>                                att<span class="s"> = </span><i>"x"</i>;
-</code><code id="L2132"><span class="ln">2132</span>                                value<span class="s"> = </span>attrs.x;
-</code><code id="L2133"><span class="ln">2133</span>                            } <b>else</b> {
-</code><code id="L2134"><span class="ln">2134</span>                                <b>break</b>;
-</code><code id="L2135"><span class="ln">2135</span>                            }
-</code><code id="L2136"><span class="ln">2136</span>                        <b>case</b> <i>"x"</i>:
-</code><code id="L2137"><span class="ln">2137</span>                            <b>if</b> (attrs.fx) {
-</code><code id="L2138"><span class="ln">2138</span>                                value<span class="s"> = </span>-attrs.x<span class="s"> - </span>(attrs.width<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L2139"><span class="ln">2139</span>                            }
-</code><code id="L2140"><span class="ln">2140</span>                        <b>case</b> <i>"rx"</i>:
-</code><code id="L2141"><span class="ln">2141</span>                            <b>if</b> (att<span class="s"> == </span><i>"rx"</i> &amp;&amp; o.type<span class="s"> == </span><i>"rect"</i>) {
-</code><code id="L2142"><span class="ln">2142</span>                                <b>break</b>;
-</code><code id="L2143"><span class="ln">2143</span>                            }
-</code><code id="L2144"><span class="ln">2144</span>                        <b>case</b> <i>"cx"</i>:
-</code><code id="L2145"><span class="ln">2145</span>                            node[setAttribute](att, value);
-</code><code id="L2146"><span class="ln">2146</span>                            o.pattern &amp;&amp; updatePosition(o);
-</code><code id="L2147"><span class="ln">2147</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2148"><span class="ln">2148</span>                            <b>break</b>;
-</code><code id="L2149"><span class="ln">2149</span>                        <b>case</b> <i>"height"</i>:
-</code><code id="L2150"><span class="ln">2150</span>                            node[setAttribute](att, value);
-</code><code id="L2151"><span class="ln">2151</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2152"><span class="ln">2152</span>                            <b>if</b> (attrs.fy) {
-</code><code id="L2153"><span class="ln">2153</span>                                att<span class="s"> = </span><i>"y"</i>;
-</code><code id="L2154"><span class="ln">2154</span>                                value<span class="s"> = </span>attrs.y;
-</code><code id="L2155"><span class="ln">2155</span>                            } <b>else</b> {
-</code><code id="L2156"><span class="ln">2156</span>                                <b>break</b>;
-</code><code id="L2157"><span class="ln">2157</span>                            }
-</code><code id="L2158"><span class="ln">2158</span>                        <b>case</b> <i>"y"</i>:
-</code><code id="L2159"><span class="ln">2159</span>                            <b>if</b> (attrs.fy) {
-</code><code id="L2160"><span class="ln">2160</span>                                value<span class="s"> = </span>-attrs.y<span class="s"> - </span>(attrs.height<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L2161"><span class="ln">2161</span>                            }
-</code><code id="L2162"><span class="ln">2162</span>                        <b>case</b> <i>"ry"</i>:
-</code><code id="L2163"><span class="ln">2163</span>                            <b>if</b> (att<span class="s"> == </span><i>"ry"</i> &amp;&amp; o.type<span class="s"> == </span><i>"rect"</i>) {
-</code><code id="L2164"><span class="ln">2164</span>                                <b>break</b>;
-</code><code id="L2165"><span class="ln">2165</span>                            }
-</code><code id="L2166"><span class="ln">2166</span>                        <b>case</b> <i>"cy"</i>:
-</code><code id="L2167"><span class="ln">2167</span>                            node[setAttribute](att, value);
-</code><code id="L2168"><span class="ln">2168</span>                            o.pattern &amp;&amp; updatePosition(o);
-</code><code id="L2169"><span class="ln">2169</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2170"><span class="ln">2170</span>                            <b>break</b>;
-</code><code id="L2171"><span class="ln">2171</span>                        <b>case</b> <i>"r"</i>:
-</code><code id="L2172"><span class="ln">2172</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"rect"</i>) {
-</code><code id="L2173"><span class="ln">2173</span>                                $(node, {rx: value, ry: value});
-</code><code id="L2174"><span class="ln">2174</span>                            } <b>else</b> {
-</code><code id="L2175"><span class="ln">2175</span>                                node[setAttribute](att, value);
-</code><code id="L2176"><span class="ln">2176</span>                            }
-</code><code id="L2177"><span class="ln">2177</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2178"><span class="ln">2178</span>                            <b>break</b>;
-</code><code id="L2179"><span class="ln">2179</span>                        <b>case</b> <i>"src"</i>:
-</code><code id="L2180"><span class="ln">2180</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"image"</i>) {
-</code><code id="L2181"><span class="ln">2181</span>                                node.setAttributeNS(xlink, <i>"href"</i>, value);
+</code><code id="L1840"><span class="ln">1840</span>                    <b>return</b> E;
+</code><code id="L1841"><span class="ln">1841</span>                });
+</code><code id="L1842"><span class="ln">1842</span>                gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
+</code><code id="L1843"><span class="ln">1843</span>                <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
+</code><code id="L1844"><span class="ln">1844</span>                    <b>var</b> angle<span class="s"> = </span>gradient.shift();
+</code><code id="L1845"><span class="ln">1845</span>                    angle<span class="s"> = </span>-toFloat(angle);
+</code><code id="L1846"><span class="ln">1846</span>                    <b>if</b> (isNaN(angle)) {
+</code><code id="L1847"><span class="ln">1847</span>                        <b>return</b> <b>null</b>;
+</code><code id="L1848"><span class="ln">1848</span>                    }
+</code><code id="L1849"><span class="ln">1849</span>                    <b>var</b> vector<span class="s"> = </span>[<span class="d">0</span>, <span class="d">0</span>, math.cos(R.rad(angle)), math.sin(R.rad(angle))],
+</code><code id="L1850"><span class="ln">1850</span>                        max<span class="s"> = </span><span class="d">1</span><span class="s"> / </span>(mmax(abs(vector[<span class="d">2</span>]), abs(vector[<span class="d">3</span>]))<span class="s"> || </span><span class="d">1</span>);
+</code><code id="L1851"><span class="ln">1851</span>                    vector[<span class="d">2</span>] *= max;
+</code><code id="L1852"><span class="ln">1852</span>                    vector[<span class="d">3</span>] *= max;
+</code><code id="L1853"><span class="ln">1853</span>                    <b>if</b> (vector[<span class="d">2</span>] &lt; <span class="d">0</span>) {
+</code><code id="L1854"><span class="ln">1854</span>                        vector[<span class="d">0</span>]<span class="s"> = </span>-vector[<span class="d">2</span>];
+</code><code id="L1855"><span class="ln">1855</span>                        vector[<span class="d">2</span>]<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1856"><span class="ln">1856</span>                    }
+</code><code id="L1857"><span class="ln">1857</span>                    <b>if</b> (vector[<span class="d">3</span>] &lt; <span class="d">0</span>) {
+</code><code id="L1858"><span class="ln">1858</span>                        vector[<span class="d">1</span>]<span class="s"> = </span>-vector[<span class="d">3</span>];
+</code><code id="L1859"><span class="ln">1859</span>                        vector[<span class="d">3</span>]<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L1860"><span class="ln">1860</span>                    }
+</code><code id="L1861"><span class="ln">1861</span>                }
+</code><code id="L1862"><span class="ln">1862</span>                <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
+</code><code id="L1863"><span class="ln">1863</span>                <b>if</b> (!dots) {
+</code><code id="L1864"><span class="ln">1864</span>                    <b>return</b> <b>null</b>;
+</code><code id="L1865"><span class="ln">1865</span>                }
+</code><code id="L1866"><span class="ln">1866</span>                <b>if</b> (element.gradient) {
+</code><code id="L1867"><span class="ln">1867</span>                    SVG.defs.removeChild(element.gradient);
+</code><code id="L1868"><span class="ln">1868</span>                    <b>delete</b> element.gradient;
+</code><code id="L1869"><span class="ln">1869</span>                }
+</code><code id="L1870"><span class="ln">1870</span>
+</code><code id="L1871"><span class="ln">1871</span>                el<span class="s"> = </span>$(type<span class="s"> + </span><i>"Gradient"</i>, {id: id});
+</code><code id="L1872"><span class="ln">1872</span>                element.gradient<span class="s"> = </span>el;
+</code><code id="L1873"><span class="ln">1873</span>                $(el, type<span class="s"> == </span><i>"radial"</i> ? {
+</code><code id="L1874"><span class="ln">1874</span>                    fx: fx,
+</code><code id="L1875"><span class="ln">1875</span>                    fy: fy
+</code><code id="L1876"><span class="ln">1876</span>                } : {
+</code><code id="L1877"><span class="ln">1877</span>                    x1: vector[<span class="d">0</span>],
+</code><code id="L1878"><span class="ln">1878</span>                    y1: vector[<span class="d">1</span>],
+</code><code id="L1879"><span class="ln">1879</span>                    x2: vector[<span class="d">2</span>],
+</code><code id="L1880"><span class="ln">1880</span>                    y2: vector[<span class="d">3</span>],
+</code><code id="L1881"><span class="ln">1881</span>                    gradientTransform: element.matrix.invert()
+</code><code id="L1882"><span class="ln">1882</span>                });
+</code><code id="L1883"><span class="ln">1883</span>                SVG.defs.appendChild(el);
+</code><code id="L1884"><span class="ln">1884</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i &lt; ii; i++) {
+</code><code id="L1885"><span class="ln">1885</span>                    el.appendChild($(<i>"stop"</i>, {
+</code><code id="L1886"><span class="ln">1886</span>                        offset: dots[i].offset ? dots[i].offset : i ? <i>"<span class="d">100</span>%"</i> : <i>"<span class="d">0</span>%"</i>,
+</code><code id="L1887"><span class="ln">1887</span>                        <i>"stop-color"</i>: dots[i].color<span class="s"> || </span><i>"#fff"</i>
+</code><code id="L1888"><span class="ln">1888</span>                    }));
+</code><code id="L1889"><span class="ln">1889</span>                }
+</code><code id="L1890"><span class="ln">1890</span>            }
+</code><code id="L1891"><span class="ln">1891</span>            $(o, {
+</code><code id="L1892"><span class="ln">1892</span>                fill: <i>"url(#"</i><span class="s"> + </span>id<span class="s"> + </span><i>")"</i>,
+</code><code id="L1893"><span class="ln">1893</span>                opacity: <span class="d">1</span>,
+</code><code id="L1894"><span class="ln">1894</span>                <i>"fill-opacity"</i>: <span class="d">1</span>
+</code><code id="L1895"><span class="ln">1895</span>            });
+</code><code id="L1896"><span class="ln">1896</span>            s.fill<span class="s"> = </span>E;
+</code><code id="L1897"><span class="ln">1897</span>            s.opacity<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1898"><span class="ln">1898</span>            s.fillOpacity<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1899"><span class="ln">1899</span>            <b>return</b> <span class="d">1</span>;
+</code><code id="L1900"><span class="ln">1900</span>        },
+</code><code id="L1901"><span class="ln">1901</span>        updatePosition<span class="s"> = </span><b>function</b> (o) {
+</code><code id="L1902"><span class="ln">1902</span>            <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
+</code><code id="L1903"><span class="ln">1903</span>            $(o.pattern, {patternTransform: o.matrix.invert()<span class="s"> + </span><i>" translate("</i><span class="s"> + </span>bbox.x<span class="s"> + </span><i>","</i><span class="s"> + </span>bbox.y<span class="s"> + </span><i>")"</i>});
+</code><code id="L1904"><span class="ln">1904</span>        },
+</code><code id="L1905"><span class="ln">1905</span>        addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
+</code><code id="L1906"><span class="ln">1906</span>            <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
+</code><code id="L1907"><span class="ln">1907</span>                <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
+</code><code id="L1908"><span class="ln">1908</span>                    p<span class="s"> = </span>o.paper,
+</code><code id="L1909"><span class="ln">1909</span>                    se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
+</code><code id="L1910"><span class="ln">1910</span>                    node<span class="s"> = </span>o.node,
+</code><code id="L1911"><span class="ln">1911</span>                    attrs<span class="s"> = </span>o.attrs,
+</code><code id="L1912"><span class="ln">1912</span>                    stroke<span class="s"> = </span>attrs[<i>"stroke-width"</i>],
+</code><code id="L1913"><span class="ln">1913</span>                    i<span class="s"> = </span>values.length,
+</code><code id="L1914"><span class="ln">1914</span>                    type<span class="s"> = </span><i>"classic"</i>,
+</code><code id="L1915"><span class="ln">1915</span>                    from,
+</code><code id="L1916"><span class="ln">1916</span>                    to,
+</code><code id="L1917"><span class="ln">1917</span>                    dx,
+</code><code id="L1918"><span class="ln">1918</span>                    refX,
+</code><code id="L1919"><span class="ln">1919</span>                    attr,
+</code><code id="L1920"><span class="ln">1920</span>                    w<span class="s"> = </span><span class="d">3</span>,
+</code><code id="L1921"><span class="ln">1921</span>                    h<span class="s"> = </span><span class="d">3</span>,
+</code><code id="L1922"><span class="ln">1922</span>                    t<span class="s"> = </span><span class="d">5</span>;
+</code><code id="L1923"><span class="ln">1923</span>                <b>while</b> (i--) {
+</code><code id="L1924"><span class="ln">1924</span>                    <b>switch</b> (values[i]) {
+</code><code id="L1925"><span class="ln">1925</span>                        <b>case</b> <i>"block"</i>:
+</code><code id="L1926"><span class="ln">1926</span>                        <b>case</b> <i>"classic"</i>:
+</code><code id="L1927"><span class="ln">1927</span>                        <b>case</b> <i>"oval"</i>:
+</code><code id="L1928"><span class="ln">1928</span>                        <b>case</b> <i>"diamond"</i>:
+</code><code id="L1929"><span class="ln">1929</span>                        <b>case</b> <i>"open"</i>:
+</code><code id="L1930"><span class="ln">1930</span>                        <b>case</b> <i>"none"</i>:
+</code><code id="L1931"><span class="ln">1931</span>                            type<span class="s"> = </span>values[i];
+</code><code id="L1932"><span class="ln">1932</span>                            <b>break</b>;
+</code><code id="L1933"><span class="ln">1933</span>                        <b>case</b> <i>"wide"</i>: h<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
+</code><code id="L1934"><span class="ln">1934</span>                        <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
+</code><code id="L1935"><span class="ln">1935</span>                        <b>case</b> <i>"<b>long</b>"</i>: w<span class="s"> = </span><span class="d">5</span>; <b>break</b>;
+</code><code id="L1936"><span class="ln">1936</span>                        <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span><span class="d">2</span>; <b>break</b>;
+</code><code id="L1937"><span class="ln">1937</span>                    }
+</code><code id="L1938"><span class="ln">1938</span>                }
+</code><code id="L1939"><span class="ln">1939</span>                <b>if</b> (type<span class="s"> == </span><i>"open"</i>) {
+</code><code id="L1940"><span class="ln">1940</span>                    w += <span class="d">2</span>;
+</code><code id="L1941"><span class="ln">1941</span>                    h += <span class="d">2</span>;
+</code><code id="L1942"><span class="ln">1942</span>                    t += <span class="d">2</span>;
+</code><code id="L1943"><span class="ln">1943</span>                    dx<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1944"><span class="ln">1944</span>                    refX<span class="s"> = </span>isEnd ? <span class="d">4</span> : <span class="d">1</span>;
+</code><code id="L1945"><span class="ln">1945</span>                    attr<span class="s"> = </span>{
+</code><code id="L1946"><span class="ln">1946</span>                        fill: <i>"none"</i>,
+</code><code id="L1947"><span class="ln">1947</span>                        stroke: attrs.stroke
+</code><code id="L1948"><span class="ln">1948</span>                    };
+</code><code id="L1949"><span class="ln">1949</span>                } <b>else</b> {
+</code><code id="L1950"><span class="ln">1950</span>                    refX<span class="s"> = </span>dx<span class="s"> = </span>w<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L1951"><span class="ln">1951</span>                    attr<span class="s"> = </span>{
+</code><code id="L1952"><span class="ln">1952</span>                        fill: attrs.stroke,
+</code><code id="L1953"><span class="ln">1953</span>                        stroke: <i>"none"</i>
+</code><code id="L1954"><span class="ln">1954</span>                    };
+</code><code id="L1955"><span class="ln">1955</span>                }
+</code><code id="L1956"><span class="ln">1956</span>                <b>if</b> (o._.arrows) {
+</code><code id="L1957"><span class="ln">1957</span>                    <b>if</b> (isEnd) {
+</code><code id="L1958"><span class="ln">1958</span>                        o._.arrows.endPath<span class="s"> &amp;&amp; </span>markerCounter[o._.arrows.endPath]--;
+</code><code id="L1959"><span class="ln">1959</span>                        o._.arrows.endMarker<span class="s"> &amp;&amp; </span>markerCounter[o._.arrows.endMarker]--;
+</code><code id="L1960"><span class="ln">1960</span>                    } <b>else</b> {
+</code><code id="L1961"><span class="ln">1961</span>                        o._.arrows.startPath<span class="s"> &amp;&amp; </span>markerCounter[o._.arrows.startPath]--;
+</code><code id="L1962"><span class="ln">1962</span>                        o._.arrows.startMarker<span class="s"> &amp;&amp; </span>markerCounter[o._.arrows.startMarker]--;
+</code><code id="L1963"><span class="ln">1963</span>                    }
+</code><code id="L1964"><span class="ln">1964</span>                } <b>else</b> {
+</code><code id="L1965"><span class="ln">1965</span>                    o._.arrows<span class="s"> = </span>{};
+</code><code id="L1966"><span class="ln">1966</span>                }
+</code><code id="L1967"><span class="ln">1967</span>                <b>if</b> (type != <i>"none"</i>) {
+</code><code id="L1968"><span class="ln">1968</span>                    <b>var</b> pathId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>type,
+</code><code id="L1969"><span class="ln">1969</span>                        markerId<span class="s"> = </span><i>"raphael-marker-"</i><span class="s"> + </span>se<span class="s"> + </span>type<span class="s"> + </span>w<span class="s"> + </span>h;
+</code><code id="L1970"><span class="ln">1970</span>                    <b>if</b> (!g.doc.getElementById(pathId)) {
+</code><code id="L1971"><span class="ln">1971</span>                        p.defs.appendChild($($(<i>"path"</i>), {
+</code><code id="L1972"><span class="ln">1972</span>                            <i>"stroke-linecap"</i>: <i>"round"</i>,
+</code><code id="L1973"><span class="ln">1973</span>                            d: markers[type],
+</code><code id="L1974"><span class="ln">1974</span>                            id: pathId
+</code><code id="L1975"><span class="ln">1975</span>                        }));
+</code><code id="L1976"><span class="ln">1976</span>                        markerCounter[pathId]<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1977"><span class="ln">1977</span>                    } <b>else</b> {
+</code><code id="L1978"><span class="ln">1978</span>                        markerCounter[pathId]++;
+</code><code id="L1979"><span class="ln">1979</span>                    }
+</code><code id="L1980"><span class="ln">1980</span>                    <b>var</b> marker<span class="s"> = </span>g.doc.getElementById(markerId),
+</code><code id="L1981"><span class="ln">1981</span>                        use;
+</code><code id="L1982"><span class="ln">1982</span>                    <b>if</b> (!marker) {
+</code><code id="L1983"><span class="ln">1983</span>                        marker<span class="s"> = </span>$($(<i>"marker"</i>), {
+</code><code id="L1984"><span class="ln">1984</span>                            id: markerId,
+</code><code id="L1985"><span class="ln">1985</span>                            markerHeight: h,
+</code><code id="L1986"><span class="ln">1986</span>                            markerWidth: w,
+</code><code id="L1987"><span class="ln">1987</span>                            orient: <i>"auto"</i>,
+</code><code id="L1988"><span class="ln">1988</span>                            refX: refX,
+</code><code id="L1989"><span class="ln">1989</span>                            refY: h<span class="s"> / </span><span class="d">2</span>
+</code><code id="L1990"><span class="ln">1990</span>                        });
+</code><code id="L1991"><span class="ln">1991</span>                        use<span class="s"> = </span>$($(<i>"use"</i>), {
+</code><code id="L1992"><span class="ln">1992</span>                            <i>"xlink:href"</i>: <i>"#"</i><span class="s"> + </span>pathId,
+</code><code id="L1993"><span class="ln">1993</span>                            transform: (isEnd ? <i>" rotate(<span class="d">180</span> "</i><span class="s"> + </span>w<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>" "</i><span class="s"> + </span>h<span class="s"> / </span><span class="d">2</span><span class="s"> + </span><i>") "</i> : S)<span class="s"> + </span><i>"scale("</i><span class="s"> + </span>w<span class="s"> / </span>t<span class="s"> + </span><i>","</i><span class="s"> + </span>h<span class="s"> / </span>t<span class="s"> + </span><i>")"</i>,
+</code><code id="L1994"><span class="ln">1994</span>                            <i>"stroke-width"</i>: <span class="d">1</span><span class="s"> / </span>((w<span class="s"> / </span>t<span class="s"> + </span>h<span class="s"> / </span>t)<span class="s"> / </span><span class="d">2</span>)
+</code><code id="L1995"><span class="ln">1995</span>                        });
+</code><code id="L1996"><span class="ln">1996</span>                        marker.appendChild(use);
+</code><code id="L1997"><span class="ln">1997</span>                        p.defs.appendChild(marker);
+</code><code id="L1998"><span class="ln">1998</span>                        markerCounter[markerId]<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L1999"><span class="ln">1999</span>                    } <b>else</b> {
+</code><code id="L2000"><span class="ln">2000</span>                        markerCounter[markerId]++;
+</code><code id="L2001"><span class="ln">2001</span>                        use<span class="s"> = </span>marker.getElementsByTagName(<i>"use"</i>)[<span class="d">0</span>];
+</code><code id="L2002"><span class="ln">2002</span>                    }
+</code><code id="L2003"><span class="ln">2003</span>                    $(use, attr);
+</code><code id="L2004"><span class="ln">2004</span>                    <b>var</b> delta<span class="s"> = </span>dx<span class="s"> * </span>(type != <i>"diamond"</i><span class="s"> &amp;&amp; </span>type != <i>"oval"</i>);
+</code><code id="L2005"><span class="ln">2005</span>                    <b>if</b> (isEnd) {
+</code><code id="L2006"><span class="ln">2006</span>                        from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2007"><span class="ln">2007</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>delta<span class="s"> * </span>stroke;
+</code><code id="L2008"><span class="ln">2008</span>                    } <b>else</b> {
+</code><code id="L2009"><span class="ln">2009</span>                        from<span class="s"> = </span>delta<span class="s"> * </span>stroke;
+</code><code id="L2010"><span class="ln">2010</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2011"><span class="ln">2011</span>                    }
+</code><code id="L2012"><span class="ln">2012</span>                    attr<span class="s"> = </span>{};
+</code><code id="L2013"><span class="ln">2013</span>                    attr[<i>"marker-"</i><span class="s"> + </span>se]<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>markerId<span class="s"> + </span><i>")"</i>;
+</code><code id="L2014"><span class="ln">2014</span>                    <b>if</b> (to<span class="s"> || </span>from) {
+</code><code id="L2015"><span class="ln">2015</span>                        attr.d<span class="s"> = </span>Raphael.getSubpath(attrs.path, from, to);
+</code><code id="L2016"><span class="ln">2016</span>                    }
+</code><code id="L2017"><span class="ln">2017</span>                    $(node, attr);
+</code><code id="L2018"><span class="ln">2018</span>                    o._.arrows[se<span class="s"> + </span><i>"Path"</i>]<span class="s"> = </span>pathId;
+</code><code id="L2019"><span class="ln">2019</span>                    o._.arrows[se<span class="s"> + </span><i>"Marker"</i>]<span class="s"> = </span>markerId;
+</code><code id="L2020"><span class="ln">2020</span>                    o._.arrows[se<span class="s"> + </span><i>"dx"</i>]<span class="s"> = </span>delta;
+</code><code id="L2021"><span class="ln">2021</span>                    o._.arrows[se<span class="s"> + </span><i>"Type"</i>]<span class="s"> = </span>type;
+</code><code id="L2022"><span class="ln">2022</span>                    o._.arrows[se<span class="s"> + </span><i>"String"</i>]<span class="s"> = </span>value;
+</code><code id="L2023"><span class="ln">2023</span>                } <b>else</b> {
+</code><code id="L2024"><span class="ln">2024</span>                    <b>if</b> (isEnd) {
+</code><code id="L2025"><span class="ln">2025</span>                        from<span class="s"> = </span>o._.arrows.startdx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2026"><span class="ln">2026</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>from;
+</code><code id="L2027"><span class="ln">2027</span>                    } <b>else</b> {
+</code><code id="L2028"><span class="ln">2028</span>                        from<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2029"><span class="ln">2029</span>                        to<span class="s"> = </span>R.getTotalLength(attrs.path)<span class="s"> - </span>(o._.arrows.enddx<span class="s"> * </span>stroke<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2030"><span class="ln">2030</span>                    }
+</code><code id="L2031"><span class="ln">2031</span>                    o._.arrows[se<span class="s"> + </span><i>"Path"</i>]<span class="s"> &amp;&amp; </span>$(node, {d: Raphael.getSubpath(attrs.path, from, to)});
+</code><code id="L2032"><span class="ln">2032</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Path"</i>];
+</code><code id="L2033"><span class="ln">2033</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Marker"</i>];
+</code><code id="L2034"><span class="ln">2034</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"dx"</i>];
+</code><code id="L2035"><span class="ln">2035</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"Type"</i>];
+</code><code id="L2036"><span class="ln">2036</span>                    <b>delete</b> o._.arrows[se<span class="s"> + </span><i>"String"</i>];
+</code><code id="L2037"><span class="ln">2037</span>                }
+</code><code id="L2038"><span class="ln">2038</span>                <b>for</b> (attr <b>in</b> markerCounter) <b>if</b> (markerCounter[has](attr)<span class="s"> &amp;&amp; </span>!markerCounter[attr]) {
+</code><code id="L2039"><span class="ln">2039</span>                    <b>var</b> item<span class="s"> = </span>g.doc.getElementById(attr);
+</code><code id="L2040"><span class="ln">2040</span>                    item<span class="s"> &amp;&amp; </span>item.parentNode.removeChild(item);
+</code><code id="L2041"><span class="ln">2041</span>                }
+</code><code id="L2042"><span class="ln">2042</span>            }
+</code><code id="L2043"><span class="ln">2043</span>        },
+</code><code id="L2044"><span class="ln">2044</span>        setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
+</code><code id="L2045"><span class="ln">2045</span>            <b>var</b> dasharray<span class="s"> = </span>{
+</code><code id="L2046"><span class="ln">2046</span>                    <i>""</i>: [<span class="d">0</span>],
+</code><code id="L2047"><span class="ln">2047</span>                    <i>"none"</i>: [<span class="d">0</span>],
+</code><code id="L2048"><span class="ln">2048</span>                    <i>"-"</i>: [<span class="d">3</span>, <span class="d">1</span>],
+</code><code id="L2049"><span class="ln">2049</span>                    <i>"."</i>: [<span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2050"><span class="ln">2050</span>                    <i>"-."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2051"><span class="ln">2051</span>                    <i>"-.."</i>: [<span class="d">3</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>, <span class="d">1</span>],
+</code><code id="L2052"><span class="ln">2052</span>                    <i>". "</i>: [<span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2053"><span class="ln">2053</span>                    <i>"- "</i>: [<span class="d">4</span>, <span class="d">3</span>],
+</code><code id="L2054"><span class="ln">2054</span>                    <i>"--"</i>: [<span class="d">8</span>, <span class="d">3</span>],
+</code><code id="L2055"><span class="ln">2055</span>                    <i>"- ."</i>: [<span class="d">4</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2056"><span class="ln">2056</span>                    <i>"--."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>],
+</code><code id="L2057"><span class="ln">2057</span>                    <i>"--.."</i>: [<span class="d">8</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>, <span class="d">1</span>, <span class="d">3</span>]
+</code><code id="L2058"><span class="ln">2058</span>                },
+</code><code id="L2059"><span class="ln">2059</span>                node<span class="s"> = </span>o.node,
+</code><code id="L2060"><span class="ln">2060</span>                attrs<span class="s"> = </span>o.attrs,
+</code><code id="L2061"><span class="ln">2061</span>                addDashes<span class="s"> = </span><b>function</b> (o, value) {
+</code><code id="L2062"><span class="ln">2062</span>                    value<span class="s"> = </span>dasharray[lowerCase.call(value)];
+</code><code id="L2063"><span class="ln">2063</span>                    <b>if</b> (value) {
+</code><code id="L2064"><span class="ln">2064</span>                        <b>var</b> width<span class="s"> = </span>o.attrs[<i>"stroke-width"</i>]<span class="s"> || </span><i>"<span class="d">1</span>"</i>,
+</code><code id="L2065"><span class="ln">2065</span>                            butt<span class="s"> = </span>{round: width, square: width, butt: <span class="d">0</span>}[o.attrs[<i>"stroke-linecap"</i>]<span class="s"> || </span>params[<i>"stroke-linecap"</i>]]<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L2066"><span class="ln">2066</span>                            dashes<span class="s"> = </span>[],
+</code><code id="L2067"><span class="ln">2067</span>                            i<span class="s"> = </span>value.length;
+</code><code id="L2068"><span class="ln">2068</span>                        <b>while</b> (i--) {
+</code><code id="L2069"><span class="ln">2069</span>                            dashes[i]<span class="s"> = </span>value[i]<span class="s"> * </span>width<span class="s"> + </span>((i<span class="s"> % </span><span class="d">2</span>) ? <span class="d">1</span> : -<span class="d">1</span>)<span class="s"> * </span>butt;
+</code><code id="L2070"><span class="ln">2070</span>                        }
+</code><code id="L2071"><span class="ln">2071</span>                        $(node, {<i>"stroke-dasharray"</i>: dashes.join(<i>","</i>)});
+</code><code id="L2072"><span class="ln">2072</span>                    }
+</code><code id="L2073"><span class="ln">2073</span>                };
+</code><code id="L2074"><span class="ln">2074</span>            <b>for</b> (<b>var</b> att <b>in</b> params) {
+</code><code id="L2075"><span class="ln">2075</span>                <b>if</b> (params[has](att)) {
+</code><code id="L2076"><span class="ln">2076</span>                    <b>if</b> (!availableAttrs[has](att)) {
+</code><code id="L2077"><span class="ln">2077</span>                        <b>continue</b>;
+</code><code id="L2078"><span class="ln">2078</span>                    }
+</code><code id="L2079"><span class="ln">2079</span>                    <b>var</b> value<span class="s"> = </span>params[att];
+</code><code id="L2080"><span class="ln">2080</span>                    attrs[att]<span class="s"> = </span>value;
+</code><code id="L2081"><span class="ln">2081</span>                    <b>switch</b> (att) {
+</code><code id="L2082"><span class="ln">2082</span>                        <b>case</b> <i>"blur"</i>:
+</code><code id="L2083"><span class="ln">2083</span>                            o.blur(value);
+</code><code id="L2084"><span class="ln">2084</span>                            <b>break</b>;
+</code><code id="L2085"><span class="ln">2085</span>                        <b>case</b> <i>"href"</i>:
+</code><code id="L2086"><span class="ln">2086</span>                        <b>case</b> <i>"title"</i>:
+</code><code id="L2087"><span class="ln">2087</span>                        <b>case</b> <i>"target"</i>:
+</code><code id="L2088"><span class="ln">2088</span>                            <b>var</b> pn<span class="s"> = </span>node.parentNode;
+</code><code id="L2089"><span class="ln">2089</span>                            <b>if</b> (lowerCase.call(pn.tagName) != <i>"a"</i>) {
+</code><code id="L2090"><span class="ln">2090</span>                                <b>var</b> hl<span class="s"> = </span>$(<i>"a"</i>);
+</code><code id="L2091"><span class="ln">2091</span>                                pn.insertBefore(hl, node);
+</code><code id="L2092"><span class="ln">2092</span>                                hl.appendChild(node);
+</code><code id="L2093"><span class="ln">2093</span>                                pn<span class="s"> = </span>hl;
+</code><code id="L2094"><span class="ln">2094</span>                            }
+</code><code id="L2095"><span class="ln">2095</span>                            <b>if</b> (att<span class="s"> == </span><i>"target"</i><span class="s"> &amp;&amp; </span>value<span class="s"> == </span><i>"blank"</i>) {
+</code><code id="L2096"><span class="ln">2096</span>                                pn.setAttributeNS(xlink, <i>"show"</i>, <i>"<b>new</b>"</i>);
+</code><code id="L2097"><span class="ln">2097</span>                            } <b>else</b> {
+</code><code id="L2098"><span class="ln">2098</span>                                pn.setAttributeNS(xlink, att, value);
+</code><code id="L2099"><span class="ln">2099</span>                            }
+</code><code id="L2100"><span class="ln">2100</span>                            <b>break</b>;
+</code><code id="L2101"><span class="ln">2101</span>                        <b>case</b> <i>"cursor"</i>:
+</code><code id="L2102"><span class="ln">2102</span>                            node.style.cursor<span class="s"> = </span>value;
+</code><code id="L2103"><span class="ln">2103</span>                            <b>break</b>;
+</code><code id="L2104"><span class="ln">2104</span>                        <b>case</b> <i>"transform"</i>:
+</code><code id="L2105"><span class="ln">2105</span>                            o.transform(value);
+</code><code id="L2106"><span class="ln">2106</span>                            <b>break</b>;
+</code><code id="L2107"><span class="ln">2107</span>                        <b>case</b> <i>"arrow-start"</i>:
+</code><code id="L2108"><span class="ln">2108</span>                            addArrow(o, value);
+</code><code id="L2109"><span class="ln">2109</span>                            <b>break</b>;
+</code><code id="L2110"><span class="ln">2110</span>                        <b>case</b> <i>"arrow-end"</i>:
+</code><code id="L2111"><span class="ln">2111</span>                            addArrow(o, value, <span class="d">1</span>);
+</code><code id="L2112"><span class="ln">2112</span>                            <b>break</b>;
+</code><code id="L2113"><span class="ln">2113</span>                        <b>case</b> <i>"clip-rect"</i>:
+</code><code id="L2114"><span class="ln">2114</span>                            <b>var</b> rect<span class="s"> = </span>Str(value).split(separator);
+</code><code id="L2115"><span class="ln">2115</span>                            <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L2116"><span class="ln">2116</span>                                o.clip<span class="s"> &amp;&amp; </span>o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
+</code><code id="L2117"><span class="ln">2117</span>                                <b>var</b> el<span class="s"> = </span>$(<i>"clipPath"</i>),
+</code><code id="L2118"><span class="ln">2118</span>                                    rc<span class="s"> = </span>$(<i>"rect"</i>);
+</code><code id="L2119"><span class="ln">2119</span>                                el.id<span class="s"> = </span>createUUID();
+</code><code id="L2120"><span class="ln">2120</span>                                $(rc, {
+</code><code id="L2121"><span class="ln">2121</span>                                    x: rect[<span class="d">0</span>],
+</code><code id="L2122"><span class="ln">2122</span>                                    y: rect[<span class="d">1</span>],
+</code><code id="L2123"><span class="ln">2123</span>                                    width: rect[<span class="d">2</span>],
+</code><code id="L2124"><span class="ln">2124</span>                                    height: rect[<span class="d">3</span>]
+</code><code id="L2125"><span class="ln">2125</span>                                });
+</code><code id="L2126"><span class="ln">2126</span>                                el.appendChild(rc);
+</code><code id="L2127"><span class="ln">2127</span>                                o.paper.defs.appendChild(el);
+</code><code id="L2128"><span class="ln">2128</span>                                $(node, {<i>"clip-path"</i>: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2129"><span class="ln">2129</span>                                o.clip<span class="s"> = </span>rc;
+</code><code id="L2130"><span class="ln">2130</span>                            }
+</code><code id="L2131"><span class="ln">2131</span>                            <b>if</b> (!value) {
+</code><code id="L2132"><span class="ln">2132</span>                                <b>var</b> clip<span class="s"> = </span>g.doc.getElementById(node.getAttribute(<i>"clip-path"</i>).replace(/(^url\(#|\)$)/g, E));
+</code><code id="L2133"><span class="ln">2133</span>                                clip<span class="s"> &amp;&amp; </span>clip.parentNode.removeChild(clip);
+</code><code id="L2134"><span class="ln">2134</span>                                $(node, {<i>"clip-path"</i>: E});
+</code><code id="L2135"><span class="ln">2135</span>                                <b>delete</b> o.clip;
+</code><code id="L2136"><span class="ln">2136</span>                            }
+</code><code id="L2137"><span class="ln">2137</span>                        <b>break</b>;
+</code><code id="L2138"><span class="ln">2138</span>                        <b>case</b> <i>"path"</i>:
+</code><code id="L2139"><span class="ln">2139</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"path"</i>) {
+</code><code id="L2140"><span class="ln">2140</span>                                $(node, {d: value ? attrs.path<span class="s"> = </span>pathToAbsolute(value) : <i>"M0,<span class="d">0</span>"</i>});
+</code><code id="L2141"><span class="ln">2141</span>                                o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2142"><span class="ln">2142</span>                                <b>if</b> (o._.arrows) {
+</code><code id="L2143"><span class="ln">2143</span>                                    <i>"startString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.startString);
+</code><code id="L2144"><span class="ln">2144</span>                                    <i>"endString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2145"><span class="ln">2145</span>                                }
+</code><code id="L2146"><span class="ln">2146</span>                            }
+</code><code id="L2147"><span class="ln">2147</span>                            <b>break</b>;
+</code><code id="L2148"><span class="ln">2148</span>                        <b>case</b> <i>"width"</i>:
+</code><code id="L2149"><span class="ln">2149</span>                            node[setAttribute](att, value);
+</code><code id="L2150"><span class="ln">2150</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2151"><span class="ln">2151</span>                            <b>if</b> (attrs.fx) {
+</code><code id="L2152"><span class="ln">2152</span>                                att<span class="s"> = </span><i>"x"</i>;
+</code><code id="L2153"><span class="ln">2153</span>                                value<span class="s"> = </span>attrs.x;
+</code><code id="L2154"><span class="ln">2154</span>                            } <b>else</b> {
+</code><code id="L2155"><span class="ln">2155</span>                                <b>break</b>;
+</code><code id="L2156"><span class="ln">2156</span>                            }
+</code><code id="L2157"><span class="ln">2157</span>                        <b>case</b> <i>"x"</i>:
+</code><code id="L2158"><span class="ln">2158</span>                            <b>if</b> (attrs.fx) {
+</code><code id="L2159"><span class="ln">2159</span>                                value<span class="s"> = </span>-attrs.x<span class="s"> - </span>(attrs.width<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L2160"><span class="ln">2160</span>                            }
+</code><code id="L2161"><span class="ln">2161</span>                        <b>case</b> <i>"rx"</i>:
+</code><code id="L2162"><span class="ln">2162</span>                            <b>if</b> (att<span class="s"> == </span><i>"rx"</i><span class="s"> &amp;&amp; </span>o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2163"><span class="ln">2163</span>                                <b>break</b>;
+</code><code id="L2164"><span class="ln">2164</span>                            }
+</code><code id="L2165"><span class="ln">2165</span>                        <b>case</b> <i>"cx"</i>:
+</code><code id="L2166"><span class="ln">2166</span>                            node[setAttribute](att, value);
+</code><code id="L2167"><span class="ln">2167</span>                            o.pattern<span class="s"> &amp;&amp; </span>updatePosition(o);
+</code><code id="L2168"><span class="ln">2168</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2169"><span class="ln">2169</span>                            <b>break</b>;
+</code><code id="L2170"><span class="ln">2170</span>                        <b>case</b> <i>"height"</i>:
+</code><code id="L2171"><span class="ln">2171</span>                            node[setAttribute](att, value);
+</code><code id="L2172"><span class="ln">2172</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2173"><span class="ln">2173</span>                            <b>if</b> (attrs.fy) {
+</code><code id="L2174"><span class="ln">2174</span>                                att<span class="s"> = </span><i>"y"</i>;
+</code><code id="L2175"><span class="ln">2175</span>                                value<span class="s"> = </span>attrs.y;
+</code><code id="L2176"><span class="ln">2176</span>                            } <b>else</b> {
+</code><code id="L2177"><span class="ln">2177</span>                                <b>break</b>;
+</code><code id="L2178"><span class="ln">2178</span>                            }
+</code><code id="L2179"><span class="ln">2179</span>                        <b>case</b> <i>"y"</i>:
+</code><code id="L2180"><span class="ln">2180</span>                            <b>if</b> (attrs.fy) {
+</code><code id="L2181"><span class="ln">2181</span>                                value<span class="s"> = </span>-attrs.y<span class="s"> - </span>(attrs.height<span class="s"> || </span><span class="d">0</span>);
 </code><code id="L2182"><span class="ln">2182</span>                            }
-</code><code id="L2183"><span class="ln">2183</span>                            <b>break</b>;
-</code><code id="L2184"><span class="ln">2184</span>                        <b>case</b> <i>"stroke-width"</i>:
-</code><code id="L2185"><span class="ln">2185</span>                            <b>if</b> (o._.sx != <span class="d">1</span><span class="s"> || </span>o._.sy != <span class="d">1</span>) {
-</code><code id="L2186"><span class="ln">2186</span>                                value /= mmax(abs(o._.sx), abs(o._.sy))<span class="s"> || </span><span class="d">1</span>;
-</code><code id="L2187"><span class="ln">2187</span>                            }
-</code><code id="L2188"><span class="ln">2188</span>                            <b>if</b> (o.paper._vbSize) {
-</code><code id="L2189"><span class="ln">2189</span>                                value *= o.paper._vbSize;
-</code><code id="L2190"><span class="ln">2190</span>                            }
-</code><code id="L2191"><span class="ln">2191</span>                            node[setAttribute](att, value);
-</code><code id="L2192"><span class="ln">2192</span>                            <b>if</b> (attrs[<i>"stroke-dasharray"</i>]) {
-</code><code id="L2193"><span class="ln">2193</span>                                addDashes(o, attrs[<i>"stroke-dasharray"</i>]);
-</code><code id="L2194"><span class="ln">2194</span>                            }
-</code><code id="L2195"><span class="ln">2195</span>                            <b>if</b> (o._.arrows) {
-</code><code id="L2196"><span class="ln">2196</span>                                <i>"startString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.startString);
-</code><code id="L2197"><span class="ln">2197</span>                                <i>"endString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.endString, <span class="d">1</span>);
-</code><code id="L2198"><span class="ln">2198</span>                            }
+</code><code id="L2183"><span class="ln">2183</span>                        <b>case</b> <i>"ry"</i>:
+</code><code id="L2184"><span class="ln">2184</span>                            <b>if</b> (att<span class="s"> == </span><i>"ry"</i><span class="s"> &amp;&amp; </span>o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2185"><span class="ln">2185</span>                                <b>break</b>;
+</code><code id="L2186"><span class="ln">2186</span>                            }
+</code><code id="L2187"><span class="ln">2187</span>                        <b>case</b> <i>"cy"</i>:
+</code><code id="L2188"><span class="ln">2188</span>                            node[setAttribute](att, value);
+</code><code id="L2189"><span class="ln">2189</span>                            o.pattern<span class="s"> &amp;&amp; </span>updatePosition(o);
+</code><code id="L2190"><span class="ln">2190</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2191"><span class="ln">2191</span>                            <b>break</b>;
+</code><code id="L2192"><span class="ln">2192</span>                        <b>case</b> <i>"r"</i>:
+</code><code id="L2193"><span class="ln">2193</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"rect"</i>) {
+</code><code id="L2194"><span class="ln">2194</span>                                $(node, {rx: value, ry: value});
+</code><code id="L2195"><span class="ln">2195</span>                            } <b>else</b> {
+</code><code id="L2196"><span class="ln">2196</span>                                node[setAttribute](att, value);
+</code><code id="L2197"><span class="ln">2197</span>                            }
+</code><code id="L2198"><span class="ln">2198</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
 </code><code id="L2199"><span class="ln">2199</span>                            <b>break</b>;
-</code><code id="L2200"><span class="ln">2200</span>                        <b>case</b> <i>"stroke-dasharray"</i>:
-</code><code id="L2201"><span class="ln">2201</span>                            addDashes(o, value);
-</code><code id="L2202"><span class="ln">2202</span>                            <b>break</b>;
-</code><code id="L2203"><span class="ln">2203</span>                        <b>case</b> fillString:
-</code><code id="L2204"><span class="ln">2204</span>                            <b>var</b> isURL<span class="s"> = </span>Str(value).match(ISURL);
-</code><code id="L2205"><span class="ln">2205</span>                            <b>if</b> (isURL) {
-</code><code id="L2206"><span class="ln">2206</span>                                el<span class="s"> = </span>$(<i>"pattern"</i>);
-</code><code id="L2207"><span class="ln">2207</span>                                <b>var</b> ig<span class="s"> = </span>$(<i>"image"</i>);
-</code><code id="L2208"><span class="ln">2208</span>                                el.id<span class="s"> = </span>createUUID();
-</code><code id="L2209"><span class="ln">2209</span>                                $(el, {x: <span class="d">0</span>, y: <span class="d">0</span>, patternUnits: <i>"userSpaceOnUse"</i>, height: <span class="d">1</span>, width: <span class="d">1</span>});
-</code><code id="L2210"><span class="ln">2210</span>                                $(ig, {x: <span class="d">0</span>, y: <span class="d">0</span>, <i>"xlink:href"</i>: isURL[<span class="d">1</span>]});
-</code><code id="L2211"><span class="ln">2211</span>                                el.appendChild(ig);
-</code><code id="L2212"><span class="ln">2212</span>
-</code><code id="L2213"><span class="ln">2213</span>                                (<b>function</b> (el) {
-</code><code id="L2214"><span class="ln">2214</span>                                    preload(isURL[<span class="d">1</span>], <b>function</b> () {
-</code><code id="L2215"><span class="ln">2215</span>                                        <b>var</b> w<span class="s"> = </span><b>this</b>.offsetWidth,
-</code><code id="L2216"><span class="ln">2216</span>                                            h<span class="s"> = </span><b>this</b>.offsetHeight;
-</code><code id="L2217"><span class="ln">2217</span>                                        $(el, {width: w, height: h});
-</code><code id="L2218"><span class="ln">2218</span>                                        $(ig, {width: w, height: h});
-</code><code id="L2219"><span class="ln">2219</span>                                        o.paper.safari();
-</code><code id="L2220"><span class="ln">2220</span>                                    });
-</code><code id="L2221"><span class="ln">2221</span>                                })(el);
-</code><code id="L2222"><span class="ln">2222</span>                                o.paper.defs.appendChild(el);
-</code><code id="L2223"><span class="ln">2223</span>                                node.style.fill<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>;
-</code><code id="L2224"><span class="ln">2224</span>                                $(node, {fill: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
-</code><code id="L2225"><span class="ln">2225</span>                                o.pattern<span class="s"> = </span>el;
-</code><code id="L2226"><span class="ln">2226</span>                                o.pattern &amp;&amp; updatePosition(o);
-</code><code id="L2227"><span class="ln">2227</span>                                <b>break</b>;
-</code><code id="L2228"><span class="ln">2228</span>                            }
-</code><code id="L2229"><span class="ln">2229</span>                            <b>var</b> clr<span class="s"> = </span>R.getRGB(value);
-</code><code id="L2230"><span class="ln">2230</span>                            <b>if</b> (!clr.error) {
-</code><code id="L2231"><span class="ln">2231</span>                                <b>delete</b> params.gradient;
-</code><code id="L2232"><span class="ln">2232</span>                                <b>delete</b> attrs.gradient;
-</code><code id="L2233"><span class="ln">2233</span>                                !R.is(attrs.opacity, <i>"<b>undefined</b>"</i>) &amp;&amp;
-</code><code id="L2234"><span class="ln">2234</span>                                    R.is(params.opacity, <i>"<b>undefined</b>"</i>) &amp;&amp;
-</code><code id="L2235"><span class="ln">2235</span>                                    $(node, {opacity: attrs.opacity});
-</code><code id="L2236"><span class="ln">2236</span>                                !R.is(attrs[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &amp;&amp;
-</code><code id="L2237"><span class="ln">2237</span>                                    R.is(params[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &amp;&amp;
-</code><code id="L2238"><span class="ln">2238</span>                                    $(node, {<i>"fill-opacity"</i>: attrs[<i>"fill-opacity"</i>]});
-</code><code id="L2239"><span class="ln">2239</span>                            } <b>else</b> <b>if</b> ((o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>) &amp;&amp; addGradientFill(o, value)) {
-</code><code id="L2240"><span class="ln">2240</span>                                <b>if</b> (<i>"opacity"</i> <b>in</b> attrs<span class="s"> || </span><i>"fill-opacity"</i> <b>in</b> attrs) {
-</code><code id="L2241"><span class="ln">2241</span>                                    <b>var</b> gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
-</code><code id="L2242"><span class="ln">2242</span>                                    <b>if</b> (gradient) {
-</code><code id="L2243"><span class="ln">2243</span>                                        <b>var</b> stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
-</code><code id="L2244"><span class="ln">2244</span>                                        $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: (<i>"opacity"</i> <b>in</b> attrs ? attrs.opacity : <span class="d">1</span>)<span class="s"> * </span>(<i>"fill-opacity"</i> <b>in</b> attrs ? attrs[<i>"fill-opacity"</i>] : <span class="d">1</span>)});
-</code><code id="L2245"><span class="ln">2245</span>                                    }
-</code><code id="L2246"><span class="ln">2246</span>                                }
-</code><code id="L2247"><span class="ln">2247</span>                                attrs.gradient<span class="s"> = </span>value;
-</code><code id="L2248"><span class="ln">2248</span>                                attrs.fill<span class="s"> = </span><i>"none"</i>;
-</code><code id="L2249"><span class="ln">2249</span>                                <b>break</b>;
-</code><code id="L2250"><span class="ln">2250</span>                            }
-</code><code id="L2251"><span class="ln">2251</span>                            clr[has](<i>"opacity"</i>) &amp;&amp; $(node, {<i>"fill-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
-</code><code id="L2252"><span class="ln">2252</span>                        <b>case</b> <i>"stroke"</i>:
-</code><code id="L2253"><span class="ln">2253</span>                            clr<span class="s"> = </span>R.getRGB(value);
-</code><code id="L2254"><span class="ln">2254</span>                            node[setAttribute](att, clr.hex);
-</code><code id="L2255"><span class="ln">2255</span>                            att<span class="s"> == </span><i>"stroke"</i> &amp;&amp; clr[has](<i>"opacity"</i>) &amp;&amp; $(node, {<i>"stroke-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
-</code><code id="L2256"><span class="ln">2256</span>                            <b>if</b> (att<span class="s"> == </span><i>"stroke"</i> &amp;&amp; o._.arrows) {
-</code><code id="L2257"><span class="ln">2257</span>                                <i>"startString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.startString);
-</code><code id="L2258"><span class="ln">2258</span>                                <i>"endString"</i> <b>in</b> o._.arrows &amp;&amp; addArrow(o, o._.arrows.endString, <span class="d">1</span>);
-</code><code id="L2259"><span class="ln">2259</span>                            }
-</code><code id="L2260"><span class="ln">2260</span>                            <b>break</b>;
-</code><code id="L2261"><span class="ln">2261</span>                        <b>case</b> <i>"gradient"</i>:
-</code><code id="L2262"><span class="ln">2262</span>                            (o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>) &amp;&amp; addGradientFill(o, value);
-</code><code id="L2263"><span class="ln">2263</span>                            <b>break</b>;
-</code><code id="L2264"><span class="ln">2264</span>                        <b>case</b> <i>"opacity"</i>:
-</code><code id="L2265"><span class="ln">2265</span>                            <b>if</b> (attrs.gradient &amp;&amp; !attrs[has](<i>"stroke-opacity"</i>)) {
-</code><code id="L2266"><span class="ln">2266</span>                                $(node, {<i>"stroke-opacity"</i>: value > <span class="d">1</span> ? value<span class="s"> / </span><span class="d">100</span> : value});
-</code><code id="L2267"><span class="ln">2267</span>                            }
-</code><code id="L2268"><span class="ln">2268</span>                            <span class="c">// fall</span>
-</code><code id="L2269"><span class="ln">2269</span>                        <b>case</b> <i>"fill-opacity"</i>:
-</code><code id="L2270"><span class="ln">2270</span>                            <b>if</b> (attrs.gradient) {
-</code><code id="L2271"><span class="ln">2271</span>                                gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
-</code><code id="L2272"><span class="ln">2272</span>                                <b>if</b> (gradient) {
-</code><code id="L2273"><span class="ln">2273</span>                                    stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
-</code><code id="L2274"><span class="ln">2274</span>                                    $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: value});
-</code><code id="L2275"><span class="ln">2275</span>                                }
-</code><code id="L2276"><span class="ln">2276</span>                                <b>break</b>;
-</code><code id="L2277"><span class="ln">2277</span>                            }
-</code><code id="L2278"><span class="ln">2278</span>                        <b>default</b>:
-</code><code id="L2279"><span class="ln">2279</span>                            att<span class="s"> == </span><i>"font-size"</i> &amp;&amp; (value<span class="s"> = </span>toInt(value, <span class="d">10</span>)<span class="s"> + </span><i>"px"</i>);
-</code><code id="L2280"><span class="ln">2280</span>                            <b>var</b> cssrule<span class="s"> = </span>att.replace(/(\-.)/g, <b>function</b> (w) {
-</code><code id="L2281"><span class="ln">2281</span>                                <b>return</b> upperCase.call(w.substring(<span class="d">1</span>));
-</code><code id="L2282"><span class="ln">2282</span>                            });
-</code><code id="L2283"><span class="ln">2283</span>                            node.style[cssrule]<span class="s"> = </span>value;
-</code><code id="L2284"><span class="ln">2284</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2285"><span class="ln">2285</span>                            node[setAttribute](att, value);
-</code><code id="L2286"><span class="ln">2286</span>                            <b>break</b>;
-</code><code id="L2287"><span class="ln">2287</span>                    }
-</code><code id="L2288"><span class="ln">2288</span>                }
-</code><code id="L2289"><span class="ln">2289</span>            }
-</code><code id="L2290"><span class="ln">2290</span>
-</code><code id="L2291"><span class="ln">2291</span>            tuneText(o, params);
-</code><code id="L2292"><span class="ln">2292</span>        },
-</code><code id="L2293"><span class="ln">2293</span>        leading<span class="s"> = </span><span class="d">1.2</span>,
-</code><code id="L2294"><span class="ln">2294</span>        tuneText<span class="s"> = </span><b>function</b> (el, params) {
-</code><code id="L2295"><span class="ln">2295</span>            <b>if</b> (el.type != <i>"text"</i><span class="s"> || </span>!(params[has](<i>"text"</i>)<span class="s"> || </span>params[has](<i>"font"</i>)<span class="s"> || </span>params[has](<i>"font-size"</i>)<span class="s"> || </span>params[has](<i>"x"</i>)<span class="s"> || </span>params[has](<i>"y"</i>))) {
-</code><code id="L2296"><span class="ln">2296</span>                <b>return</b>;
-</code><code id="L2297"><span class="ln">2297</span>            }
-</code><code id="L2298"><span class="ln">2298</span>            <b>var</b> a<span class="s"> = </span>el.attrs,
-</code><code id="L2299"><span class="ln">2299</span>                node<span class="s"> = </span>el.node,
-</code><code id="L2300"><span class="ln">2300</span>                fontSize<span class="s"> = </span>node.firstChild ? toInt(g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue(<i>"font-size"</i>), <span class="d">10</span>) : <span class="d">10</span>;
-</code><code id="L2301"><span class="ln">2301</span> 
-</code><code id="L2302"><span class="ln">2302</span>            <b>if</b> (params[has](<i>"text"</i>)) {
-</code><code id="L2303"><span class="ln">2303</span>                a.text<span class="s"> = </span>params.text;
-</code><code id="L2304"><span class="ln">2304</span>                <b>while</b> (node.firstChild) {
-</code><code id="L2305"><span class="ln">2305</span>                    node.removeChild(node.firstChild);
-</code><code id="L2306"><span class="ln">2306</span>                }
-</code><code id="L2307"><span class="ln">2307</span>                <b>var</b> texts<span class="s"> = </span>Str(params.text).split(<i>"\n"</i>),
-</code><code id="L2308"><span class="ln">2308</span>                    tspans<span class="s"> = </span>[],
-</code><code id="L2309"><span class="ln">2309</span>                    tspan;
-</code><code id="L2310"><span class="ln">2310</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>texts.length; i &lt; ii; i++) <b>if</b> (texts[i]) {
-</code><code id="L2311"><span class="ln">2311</span>                    tspan<span class="s"> = </span>$(<i>"tspan"</i>);
-</code><code id="L2312"><span class="ln">2312</span>                    i &amp;&amp; $(tspan, {dy: fontSize<span class="s"> * </span>leading, x: a.x});
-</code><code id="L2313"><span class="ln">2313</span>                    tspan.appendChild(g.doc.createTextNode(texts[i]));
-</code><code id="L2314"><span class="ln">2314</span>                    node.appendChild(tspan);
-</code><code id="L2315"><span class="ln">2315</span>                    tspans[i]<span class="s"> = </span>tspan;
-</code><code id="L2316"><span class="ln">2316</span>                }
-</code><code id="L2317"><span class="ln">2317</span>            } <b>else</b> {
-</code><code id="L2318"><span class="ln">2318</span>                tspans<span class="s"> = </span>node.getElementsByTagName(<i>"tspan"</i>);
-</code><code id="L2319"><span class="ln">2319</span>                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tspans.length; i &lt; ii; i++) {
-</code><code id="L2320"><span class="ln">2320</span>                    i &amp;&amp; $(tspans[i], {dy: fontSize<span class="s"> * </span>leading, x: a.x});
-</code><code id="L2321"><span class="ln">2321</span>                }
-</code><code id="L2322"><span class="ln">2322</span>            }
-</code><code id="L2323"><span class="ln">2323</span>            $(node, {y: a.y});
-</code><code id="L2324"><span class="ln">2324</span>            el._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2325"><span class="ln">2325</span>            <b>var</b> bb<span class="s"> = </span>el._getBBox(),
-</code><code id="L2326"><span class="ln">2326</span>                dif<span class="s"> = </span>a.y<span class="s"> - </span>(bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
-</code><code id="L2327"><span class="ln">2327</span>            dif &amp;&amp; R.is(dif, <i>"finite"</i>) &amp;&amp; $(tspans[<span class="d">0</span>], {dy: a.y<span class="s"> + </span>dif});
-</code><code id="L2328"><span class="ln">2328</span>        },
-</code><code id="L2329"><span class="ln">2329</span>        Element<span class="s"> = </span><b>function</b> (node, svg) {
-</code><code id="L2330"><span class="ln">2330</span>            <b>var</b> X<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L2331"><span class="ln">2331</span>                Y<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L2332"><span class="ln">2332</span>            <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
-</code><code id="L2333"><span class="ln">2333</span>            node.raphael<span class="s"> = </span><b>true</b>;
-</code><code id="L2334"><span class="ln">2334</span>            <b>this</b>.id<span class="s"> = </span>R._oid++;
-</code><code id="L2335"><span class="ln">2335</span>            node.raphaelid<span class="s"> = </span><b>this</b>.id;
-</code><code id="L2336"><span class="ln">2336</span>            <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
-</code><code id="L2337"><span class="ln">2337</span>            <b>this</b>.realPath<span class="s"> = </span><b>null</b>;
-</code><code id="L2338"><span class="ln">2338</span>            <b>this</b>.paper<span class="s"> = </span>svg;
-</code><code id="L2339"><span class="ln">2339</span>            <b>this</b>.attrs<span class="s"> = </span><b>this</b>.attrs<span class="s"> || </span>{};
-</code><code id="L2340"><span class="ln">2340</span>            <b>this</b>._<span class="s"> = </span>{
-</code><code id="L2341"><span class="ln">2341</span>                transform: [],
-</code><code id="L2342"><span class="ln">2342</span>                sx: <span class="d">1</span>,
-</code><code id="L2343"><span class="ln">2343</span>                sy: <span class="d">1</span>,
-</code><code id="L2344"><span class="ln">2344</span>                deg: <span class="d">0</span>,
-</code><code id="L2345"><span class="ln">2345</span>                dx: <span class="d">0</span>,
-</code><code id="L2346"><span class="ln">2346</span>                dy: <span class="d">0</span>,
-</code><code id="L2347"><span class="ln">2347</span>                dirty: <span class="d">1</span>
-</code><code id="L2348"><span class="ln">2348</span>            };
-</code><code id="L2349"><span class="ln">2349</span>            !svg.bottom &amp;&amp; (svg.bottom<span class="s"> = </span><b>this</b>);
-</code><code id="L2350"><span class="ln">2350</span>            <b>this</b>.prev<span class="s"> = </span>svg.top;
-</code><code id="L2351"><span class="ln">2351</span>            svg.top &amp;&amp; (svg.top.next<span class="s"> = </span><b>this</b>);
-</code><code id="L2352"><span class="ln">2352</span>            svg.top<span class="s"> = </span><b>this</b>;
-</code><code id="L2353"><span class="ln">2353</span>            <b>this</b>.next<span class="s"> = </span><b>null</b>;
-</code><code id="L2354"><span class="ln">2354</span>        },
-</code><code id="L2355"><span class="ln">2355</span>        elproto<span class="s"> = </span>Element.prototype;
-</code><code id="L2356"><span class="ln">2356</span><span class="c">        <span class="c">/*\</span>
-</span></code><code id="L2357"><span class="ln">2357</span><span class="c">        <span class="s"> * </span>Element.rotate
-</span></code><code id="L2358"><span class="ln">2358</span><span class="c">         [ method ]
-</span></code><code id="L2359"><span class="ln">2359</span><span class="c">         **
-</span></code><code id="L2360"><span class="ln">2360</span><span class="c">        <span class="s"> * </span>Adds rotation by given angle around given point to the list of
-</span></code><code id="L2361"><span class="ln">2361</span><span class="c">        <span class="s"> * </span>transformations of the element.
-</span></code><code id="L2362"><span class="ln">2362</span><span class="c">         > Parameters
-</span></code><code id="L2363"><span class="ln">2363</span><span class="c">        <span class="s"> - </span>deg (number) angle <b>in</b> degrees
-</span></code><code id="L2364"><span class="ln">2364</span><span class="c">        <span class="s"> - </span>cx (number) #optional x coordinate of the centre of rotation
-</span></code><code id="L2365"><span class="ln">2365</span><span class="c">        <span class="s"> - </span>cy (number) #optional y coordinate of the centre of rotation
-</span></code><code id="L2366"><span class="ln">2366</span><span class="c">        <span class="s"> * </span>If cx &amp; cy aren’t specified centre of the shape is used as a point of rotation.
-</span></code><code id="L2367"><span class="ln">2367</span><span class="c">        <span class="s"> = </span>(object) @Element
-</span></code><code id="L2368"><span class="ln">2368</span><span class="c">        \*/</span>
-</code><code id="L2369"><span class="ln">2369</span>        elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
-</code><code id="L2370"><span class="ln">2370</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2371"><span class="ln">2371</span>                <b>return</b> <b>this</b>;
-</code><code id="L2372"><span class="ln">2372</span>            }
-</code><code id="L2373"><span class="ln">2373</span>            deg<span class="s"> = </span>Str(deg).split(separator);
-</code><code id="L2374"><span class="ln">2374</span>            <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L2375"><span class="ln">2375</span>                cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
-</code><code id="L2376"><span class="ln">2376</span>                cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
-</code><code id="L2377"><span class="ln">2377</span>            }
-</code><code id="L2378"><span class="ln">2378</span>            deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
-</code><code id="L2379"><span class="ln">2379</span>            (cy<span class="s"> == </span><b>null</b>) &amp;&amp; (cx<span class="s"> = </span>cy);
-</code><code id="L2380"><span class="ln">2380</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
-</code><code id="L2381"><span class="ln">2381</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
-</code><code id="L2382"><span class="ln">2382</span>                cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L2383"><span class="ln">2383</span>                cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L2384"><span class="ln">2384</span>            }
-</code><code id="L2385"><span class="ln">2385</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
-</code><code id="L2386"><span class="ln">2386</span>            <b>return</b> <b>this</b>;
-</code><code id="L2387"><span class="ln">2387</span>        };
-</code><code id="L2388"><span class="ln">2388</span><span class="c">        <span class="c">/*\</span>
-</span></code><code id="L2389"><span class="ln">2389</span><span class="c">        <span class="s"> * </span>Element.scale
-</span></code><code id="L2390"><span class="ln">2390</span><span class="c">         [ method ]
-</span></code><code id="L2391"><span class="ln">2391</span><span class="c">         **
-</span></code><code id="L2392"><span class="ln">2392</span><span class="c">        <span class="s"> * </span>Adds scale by given amount relative to given point to the list of
-</span></code><code id="L2393"><span class="ln">2393</span><span class="c">        <span class="s"> * </span>transformations of the element.
-</span></code><code id="L2394"><span class="ln">2394</span><span class="c">         > Parameters
-</span></code><code id="L2395"><span class="ln">2395</span><span class="c">        <span class="s"> - </span>sx (number) horisontal scale amount
-</span></code><code id="L2396"><span class="ln">2396</span><span class="c">        <span class="s"> - </span>sy (number) vertical scale amount
-</span></code><code id="L2397"><span class="ln">2397</span><span class="c">        <span class="s"> - </span>cx (number) #optional x coordinate of the centre of scale
-</span></code><code id="L2398"><span class="ln">2398</span><span class="c">        <span class="s"> - </span>cy (number) #optional y coordinate of the centre of scale
-</span></code><code id="L2399"><span class="ln">2399</span><span class="c">        <span class="s"> * </span>If cx &amp; cy aren’t specified centre of the shape is used instead.
-</span></code><code id="L2400"><span class="ln">2400</span><span class="c">        <span class="s"> = </span>(object) @Element
-</span></code><code id="L2401"><span class="ln">2401</span><span class="c">        \*/</span>
-</code><code id="L2402"><span class="ln">2402</span>        elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
-</code><code id="L2403"><span class="ln">2403</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2404"><span class="ln">2404</span>                <b>return</b> <b>this</b>;
-</code><code id="L2405"><span class="ln">2405</span>            }
-</code><code id="L2406"><span class="ln">2406</span>            sx<span class="s"> = </span>Str(sx).split(separator);
-</code><code id="L2407"><span class="ln">2407</span>            <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L2408"><span class="ln">2408</span>                sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
-</code><code id="L2409"><span class="ln">2409</span>                cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
-</code><code id="L2410"><span class="ln">2410</span>                cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
-</code><code id="L2411"><span class="ln">2411</span>            }
-</code><code id="L2412"><span class="ln">2412</span>            sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
-</code><code id="L2413"><span class="ln">2413</span>            (sy<span class="s"> == </span><b>null</b>) &amp;&amp; (sy<span class="s"> = </span>sx);
-</code><code id="L2414"><span class="ln">2414</span>            (cy<span class="s"> == </span><b>null</b>) &amp;&amp; (cx<span class="s"> = </span>cy);
-</code><code id="L2415"><span class="ln">2415</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
-</code><code id="L2416"><span class="ln">2416</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
-</code><code id="L2417"><span class="ln">2417</span>            }
-</code><code id="L2418"><span class="ln">2418</span>            cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
-</code><code id="L2419"><span class="ln">2419</span>            cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
-</code><code id="L2420"><span class="ln">2420</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
-</code><code id="L2421"><span class="ln">2421</span>            <b>return</b> <b>this</b>;
-</code><code id="L2422"><span class="ln">2422</span>        };
-</code><code id="L2423"><span class="ln">2423</span><span class="c">        <span class="c">/*\</span>
-</span></code><code id="L2424"><span class="ln">2424</span><span class="c">        <span class="s"> * </span>Element.translate
-</span></code><code id="L2425"><span class="ln">2425</span><span class="c">         [ method ]
-</span></code><code id="L2426"><span class="ln">2426</span><span class="c">         **
-</span></code><code id="L2427"><span class="ln">2427</span><span class="c">        <span class="s"> * </span>Adds translation by given amount to the list of transformations of the element.
-</span></code><code id="L2428"><span class="ln">2428</span><span class="c">         > Parameters
-</span></code><code id="L2429"><span class="ln">2429</span><span class="c">        <span class="s"> - </span>dx (number) horisontal shift
-</span></code><code id="L2430"><span class="ln">2430</span><span class="c">        <span class="s"> - </span>dy (number) vertical shift
-</span></code><code id="L2431"><span class="ln">2431</span><span class="c">        <span class="s"> = </span>(object) @Element
-</span></code><code id="L2432"><span class="ln">2432</span><span class="c">        \*/</span>
-</code><code id="L2433"><span class="ln">2433</span>        elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
-</code><code id="L2434"><span class="ln">2434</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2435"><span class="ln">2435</span>                <b>return</b> <b>this</b>;
-</code><code id="L2436"><span class="ln">2436</span>            }
-</code><code id="L2437"><span class="ln">2437</span>            dx<span class="s"> = </span>Str(dx).split(separator);
-</code><code id="L2438"><span class="ln">2438</span>            <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L2439"><span class="ln">2439</span>                dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
-</code><code id="L2440"><span class="ln">2440</span>            }
-</code><code id="L2441"><span class="ln">2441</span>            dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2442"><span class="ln">2442</span>            dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2443"><span class="ln">2443</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
-</code><code id="L2444"><span class="ln">2444</span>            <b>return</b> <b>this</b>;
-</code><code id="L2445"><span class="ln">2445</span>        };
-</code><code id="L2446"><span class="ln">2446</span><span class="c">        <span class="c">/*\</span>
-</span></code><code id="L2447"><span class="ln">2447</span><span class="c">        <span class="s"> * </span>Element.transform
-</span></code><code id="L2448"><span class="ln">2448</span><span class="c">         [ method ]
-</span></code><code id="L2449"><span class="ln">2449</span><span class="c">         **
-</span></code><code id="L2450"><span class="ln">2450</span><span class="c">        <span class="s"> * </span>Adds transformation to the element which is separate to other attributes,
-</span></code><code id="L2451"><span class="ln">2451</span><span class="c">        <span class="s"> * </span>i.e. translation doesn’t change `x` or `y` of the rectange. The format
-</span></code><code id="L2452"><span class="ln">2452</span><span class="c">        <span class="s"> * </span>of transformation string is similar to the path string syntax:
-</span></code><code id="L2453"><span class="ln">2453</span><span class="c">         | <i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
-</span></code><code id="L2454"><span class="ln">2454</span><span class="c">        <span class="s"> * </span>Each letter is a command. There are four commands: `t` is <b>for</b> translate, `r` is <b>for</b> rotate, `s` is <b>for</b>
-</span></code><code id="L2455"><span class="ln">2455</span><span class="c">        <span class="s"> * </span>scale and `m` is <b>for</b> matrix.
-</span></code><code id="L2456"><span class="ln">2456</span><span class="c">         *
-</span></code><code id="L2457"><span class="ln">2457</span><span class="c">        <span class="s"> * </span>So, example line could be read like “translate by <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">30</span>° around <span class="d">100</span>, <span class="d">100</span>, scale twice around <span class="d">100</span>, <span class="d">100</span>
-</span></code><code id="L2458"><span class="ln">2458</span><span class="c">        <span class="s"> * </span>rotate <span class="d">45</span>° around centre and scale <span class="d">1.5</span> times relative to centre”. As you see rotate and scale commands has origin
-</span></code><code id="L2459"><span class="ln">2459</span><span class="c">        <span class="s"> * </span>coordinates as a optional parameters.
-</span></code><code id="L2460"><span class="ln">2460</span><span class="c">        <span class="s"> * </span>Matrix accepts six parameters.
-</span></code><code id="L2461"><span class="ln">2461</span><span class="c">         > Parameters
-</span></code><code id="L2462"><span class="ln">2462</span><span class="c">        <span class="s"> - </span>tstr (string) #optional transformation string
-</span></code><code id="L2463"><span class="ln">2463</span><span class="c">        <span class="s"> * </span>If tstr isn’t specified
-</span></code><code id="L2464"><span class="ln">2464</span><span class="c">        <span class="s"> = </span>(string) current transformation string
-</span></code><code id="L2465"><span class="ln">2465</span><span class="c">        <span class="s"> * </span><b>else</b>
-</span></code><code id="L2466"><span class="ln">2466</span><span class="c">        <span class="s"> = </span>(object) @Element
-</span></code><code id="L2467"><span class="ln">2467</span><span class="c">        \*/</span>
-</code><code id="L2468"><span class="ln">2468</span>        elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
-</code><code id="L2469"><span class="ln">2469</span>            <b>var</b> _<span class="s"> = </span><b>this</b>._;
-</code><code id="L2470"><span class="ln">2470</span>            <b>if</b> (!tstr) {
-</code><code id="L2471"><span class="ln">2471</span>                <b>return</b> _.transform;
-</code><code id="L2472"><span class="ln">2472</span>            }
-</code><code id="L2473"><span class="ln">2473</span>            extractTransform(<b>this</b>, tstr);
-</code><code id="L2474"><span class="ln">2474</span>
-</code><code id="L2475"><span class="ln">2475</span>            <b>this</b>.clip &amp;&amp; $(<b>this</b>.clip, {transform: <b>this</b>.matrix.invert()});
-</code><code id="L2476"><span class="ln">2476</span>            <span class="c">// <b>this</b>.gradient &amp;&amp; $(<b>this</b>.gradient, {gradientTransform: <b>this</b>.matrix.invert()});</span>
-</code><code id="L2477"><span class="ln">2477</span>            <b>this</b>.pattern &amp;&amp; updatePosition(<b>this</b>);
-</code><code id="L2478"><span class="ln">2478</span>            <b>this</b>.node &amp;&amp; $(<b>this</b>.node, {transform: <b>this</b>.matrix});
-</code><code id="L2479"><span class="ln">2479</span>            
-</code><code id="L2480"><span class="ln">2480</span>            <b>if</b> (_.sx != <span class="d">1</span><span class="s"> || </span>_.sy != <span class="d">1</span>) {
-</code><code id="L2481"><span class="ln">2481</span>                <b>var</b> sw<span class="s"> = </span><b>this</b>.attrs[has](<i>"stroke-width"</i>) ? <b>this</b>.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
-</code><code id="L2482"><span class="ln">2482</span>                <b>this</b>.attr({<i>"stroke-width"</i>: sw});
-</code><code id="L2483"><span class="ln">2483</span>            }
-</code><code id="L2484"><span class="ln">2484</span>
-</code><code id="L2485"><span class="ln">2485</span>            <b>return</b> <b>this</b>;
-</code><code id="L2486"><span class="ln">2486</span>        };
-</code><code id="L2487"><span class="ln">2487</span>        elproto.hide<span class="s"> = </span><b>function</b> () {
-</code><code id="L2488"><span class="ln">2488</span>            !<b>this</b>.removed &amp;&amp; (<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
-</code><code id="L2489"><span class="ln">2489</span>            <b>return</b> <b>this</b>;
-</code><code id="L2490"><span class="ln">2490</span>        };
-</code><code id="L2491"><span class="ln">2491</span>        elproto.show<span class="s"> = </span><b>function</b> () {
-</code><code id="L2492"><span class="ln">2492</span>            !<b>this</b>.removed &amp;&amp; (<b>this</b>.node.style.display<span class="s"> = </span><i>""</i>);
-</code><code id="L2493"><span class="ln">2493</span>            <b>return</b> <b>this</b>;
-</code><code id="L2494"><span class="ln">2494</span>        };
-</code><code id="L2495"><span class="ln">2495</span>        elproto.remove<span class="s"> = </span><b>function</b> () {
-</code><code id="L2496"><span class="ln">2496</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2497"><span class="ln">2497</span>                <b>return</b>;
-</code><code id="L2498"><span class="ln">2498</span>            }
-</code><code id="L2499"><span class="ln">2499</span>            eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
-</code><code id="L2500"><span class="ln">2500</span>            tear(<b>this</b>, <b>this</b>.paper);
-</code><code id="L2501"><span class="ln">2501</span>            <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
-</code><code id="L2502"><span class="ln">2502</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
-</code><code id="L2503"><span class="ln">2503</span>                <b>delete</b> <b>this</b>[i];
-</code><code id="L2504"><span class="ln">2504</span>            }
-</code><code id="L2505"><span class="ln">2505</span>            <b>this</b>.removed<span class="s"> = </span><b>true</b>;
-</code><code id="L2506"><span class="ln">2506</span>        };
-</code><code id="L2507"><span class="ln">2507</span>        elproto._getBBox<span class="s"> = </span><b>function</b> () {
-</code><code id="L2508"><span class="ln">2508</span>            <b>if</b> (<b>this</b>.node.style.display<span class="s"> == </span><i>"none"</i>) {
-</code><code id="L2509"><span class="ln">2509</span>                <b>this</b>.show();
-</code><code id="L2510"><span class="ln">2510</span>                <b>var</b> hide<span class="s"> = </span><b>true</b>;
-</code><code id="L2511"><span class="ln">2511</span>            }
-</code><code id="L2512"><span class="ln">2512</span>            <b>var</b> bbox<span class="s"> = </span>{};
-</code><code id="L2513"><span class="ln">2513</span>            <b>try</b> {
-</code><code id="L2514"><span class="ln">2514</span>                bbox<span class="s"> = </span><b>this</b>.node.getBBox();
-</code><code id="L2515"><span class="ln">2515</span>            } <b>catch</b>(e) {
-</code><code id="L2516"><span class="ln">2516</span>                <span class="c">// Firefox <span class="d">3.0</span>.x plays badly here</span>
-</code><code id="L2517"><span class="ln">2517</span>            } <b>finally</b> {
-</code><code id="L2518"><span class="ln">2518</span>                bbox<span class="s"> = </span>bbox<span class="s"> || </span>{};
-</code><code id="L2519"><span class="ln">2519</span>            }
-</code><code id="L2520"><span class="ln">2520</span>            hide &amp;&amp; <b>this</b>.hide();
-</code><code id="L2521"><span class="ln">2521</span>            <b>return</b> bbox;
-</code><code id="L2522"><span class="ln">2522</span>        };
-</code><code id="L2523"><span class="ln">2523</span>        elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
-</code><code id="L2524"><span class="ln">2524</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2525"><span class="ln">2525</span>                <b>return</b> <b>this</b>;
-</code><code id="L2526"><span class="ln">2526</span>            }
-</code><code id="L2527"><span class="ln">2527</span>            <b>if</b> (name<span class="s"> == </span><b>null</b>) {
-</code><code id="L2528"><span class="ln">2528</span>                <b>var</b> res<span class="s"> = </span>{};
-</code><code id="L2529"><span class="ln">2529</span>                <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
-</code><code id="L2530"><span class="ln">2530</span>                    res[i]<span class="s"> = </span><b>this</b>.attrs[i];
-</code><code id="L2531"><span class="ln">2531</span>                }
-</code><code id="L2532"><span class="ln">2532</span>                res.gradient &amp;&amp; res.fill<span class="s"> == </span><i>"none"</i> &amp;&amp; (res.fill<span class="s"> = </span>res.gradient) &amp;&amp; <b>delete</b> res.gradient;
-</code><code id="L2533"><span class="ln">2533</span>                res.transform<span class="s"> = </span><b>this</b>._.transform;
-</code><code id="L2534"><span class="ln">2534</span>                <b>return</b> res;
-</code><code id="L2535"><span class="ln">2535</span>            }
-</code><code id="L2536"><span class="ln">2536</span>            <b>if</b> (value<span class="s"> == </span><b>null</b> &amp;&amp; R.is(name, string)) {
-</code><code id="L2537"><span class="ln">2537</span>                <b>if</b> (name<span class="s"> == </span>fillString &amp;&amp; <b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i> &amp;&amp; <b>this</b>.attrs.gradient) {
-</code><code id="L2538"><span class="ln">2538</span>                    <b>return</b> <b>this</b>.attrs.gradient;
-</code><code id="L2539"><span class="ln">2539</span>                }
-</code><code id="L2540"><span class="ln">2540</span>                <b>if</b> (name<span class="s"> == </span><i>"transform"</i>) {
-</code><code id="L2541"><span class="ln">2541</span>                    <b>return</b> <b>this</b>._.transform;
-</code><code id="L2542"><span class="ln">2542</span>                }
-</code><code id="L2543"><span class="ln">2543</span>                <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
-</code><code id="L2544"><span class="ln">2544</span>                    <b>return</b> <b>this</b>.attrs[name];
-</code><code id="L2545"><span class="ln">2545</span>                } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
-</code><code id="L2546"><span class="ln">2546</span>                    <b>return</b> <b>this</b>.paper.customAttributes[name].def;
-</code><code id="L2547"><span class="ln">2547</span>                } <b>else</b> {
-</code><code id="L2548"><span class="ln">2548</span>                    <b>return</b> availableAttrs[name];
-</code><code id="L2549"><span class="ln">2549</span>                }
-</code><code id="L2550"><span class="ln">2550</span>            }
-</code><code id="L2551"><span class="ln">2551</span>            <b>if</b> (value<span class="s"> == </span><b>null</b> &amp;&amp; R.is(name, array)) {
-</code><code id="L2552"><span class="ln">2552</span>                <b>var</b> values<span class="s"> = </span>{};
-</code><code id="L2553"><span class="ln">2553</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j &lt; jj; j++) {
-</code><code id="L2554"><span class="ln">2554</span>                    values[name[j]]<span class="s"> = </span><b>this</b>.attr(name[j]);
-</code><code id="L2555"><span class="ln">2555</span>                }
-</code><code id="L2556"><span class="ln">2556</span>                <b>return</b> values;
-</code><code id="L2557"><span class="ln">2557</span>            }
-</code><code id="L2558"><span class="ln">2558</span>            <b>if</b> (value != <b>null</b>) {
-</code><code id="L2559"><span class="ln">2559</span>                <b>var</b> params<span class="s"> = </span>{};
-</code><code id="L2560"><span class="ln">2560</span>                params[name]<span class="s"> = </span>value;
-</code><code id="L2561"><span class="ln">2561</span>            } <b>else</b> <b>if</b> (name != <b>null</b> &amp;&amp; R.is(name, <i>"object"</i>)) {
-</code><code id="L2562"><span class="ln">2562</span>                params<span class="s"> = </span>name;
-</code><code id="L2563"><span class="ln">2563</span>            }
-</code><code id="L2564"><span class="ln">2564</span>            <b>for</b> (<b>var</b> key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key) &amp;&amp; params[has](key) &amp;&amp; R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
-</code><code id="L2565"><span class="ln">2565</span>                <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
-</code><code id="L2566"><span class="ln">2566</span>                <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
-</code><code id="L2567"><span class="ln">2567</span>                <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
-</code><code id="L2568"><span class="ln">2568</span>                    params[subkey]<span class="s"> = </span>par[subkey];
-</code><code id="L2569"><span class="ln">2569</span>                }
-</code><code id="L2570"><span class="ln">2570</span>            }
-</code><code id="L2571"><span class="ln">2571</span>            setFillAndStroke(<b>this</b>, params);
-</code><code id="L2572"><span class="ln">2572</span>            <b>return</b> <b>this</b>;
-</code><code id="L2573"><span class="ln">2573</span>        };
-</code><code id="L2574"><span class="ln">2574</span>        elproto.toFront<span class="s"> = </span><b>function</b> () {
-</code><code id="L2575"><span class="ln">2575</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2576"><span class="ln">2576</span>                <b>return</b> <b>this</b>;
-</code><code id="L2577"><span class="ln">2577</span>            }
-</code><code id="L2578"><span class="ln">2578</span>            <b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
-</code><code id="L2579"><span class="ln">2579</span>            <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
-</code><code id="L2580"><span class="ln">2580</span>            svg.top != <b>this</b> &amp;&amp; tofront(<b>this</b>, svg);
-</code><code id="L2581"><span class="ln">2581</span>            <b>return</b> <b>this</b>;
-</code><code id="L2582"><span class="ln">2582</span>        };
-</code><code id="L2583"><span class="ln">2583</span>        elproto.toBack<span class="s"> = </span><b>function</b> () {
-</code><code id="L2584"><span class="ln">2584</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2585"><span class="ln">2585</span>                <b>return</b> <b>this</b>;
-</code><code id="L2586"><span class="ln">2586</span>            }
-</code><code id="L2587"><span class="ln">2587</span>            <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
-</code><code id="L2588"><span class="ln">2588</span>                <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
-</code><code id="L2589"><span class="ln">2589</span>                toback(<b>this</b>, <b>this</b>.paper);
-</code><code id="L2590"><span class="ln">2590</span>                <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
-</code><code id="L2591"><span class="ln">2591</span>            }
-</code><code id="L2592"><span class="ln">2592</span>            <b>return</b> <b>this</b>;
-</code><code id="L2593"><span class="ln">2593</span>        };
-</code><code id="L2594"><span class="ln">2594</span>        elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
-</code><code id="L2595"><span class="ln">2595</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2596"><span class="ln">2596</span>                <b>return</b> <b>this</b>;
-</code><code id="L2597"><span class="ln">2597</span>            }
-</code><code id="L2598"><span class="ln">2598</span>            <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[element.length<span class="s"> - </span><span class="d">1</span>].node;
-</code><code id="L2599"><span class="ln">2599</span>            <b>if</b> (node.nextSibling) {
-</code><code id="L2600"><span class="ln">2600</span>                node.parentNode.insertBefore(<b>this</b>.node, node.nextSibling);
-</code><code id="L2601"><span class="ln">2601</span>            } <b>else</b> {
-</code><code id="L2602"><span class="ln">2602</span>                node.parentNode.appendChild(<b>this</b>.node);
-</code><code id="L2603"><span class="ln">2603</span>            }
-</code><code id="L2604"><span class="ln">2604</span>            insertafter(<b>this</b>, element, <b>this</b>.paper);
-</code><code id="L2605"><span class="ln">2605</span>            <b>return</b> <b>this</b>;
-</code><code id="L2606"><span class="ln">2606</span>        };
-</code><code id="L2607"><span class="ln">2607</span>        elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
-</code><code id="L2608"><span class="ln">2608</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L2609"><span class="ln">2609</span>                <b>return</b> <b>this</b>;
-</code><code id="L2610"><span class="ln">2610</span>            }
-</code><code id="L2611"><span class="ln">2611</span>            <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[<span class="d">0</span>].node;
-</code><code id="L2612"><span class="ln">2612</span>            node.parentNode.insertBefore(<b>this</b>.node, node);
-</code><code id="L2613"><span class="ln">2613</span>            insertbefore(<b>this</b>, element, <b>this</b>.paper);
-</code><code id="L2614"><span class="ln">2614</span>            <b>return</b> <b>this</b>;
+</code><code id="L2200"><span class="ln">2200</span>                        <b>case</b> <i>"src"</i>:
+</code><code id="L2201"><span class="ln">2201</span>                            <b>if</b> (o.type<span class="s"> == </span><i>"image"</i>) {
+</code><code id="L2202"><span class="ln">2202</span>                                node.setAttributeNS(xlink, <i>"href"</i>, value);
+</code><code id="L2203"><span class="ln">2203</span>                            }
+</code><code id="L2204"><span class="ln">2204</span>                            <b>break</b>;
+</code><code id="L2205"><span class="ln">2205</span>                        <b>case</b> <i>"stroke-width"</i>:
+</code><code id="L2206"><span class="ln">2206</span>                            <b>if</b> (o._.sx != <span class="d">1</span><span class="s"> || </span>o._.sy != <span class="d">1</span>) {
+</code><code id="L2207"><span class="ln">2207</span>                                value /= mmax(abs(o._.sx), abs(o._.sy))<span class="s"> || </span><span class="d">1</span>;
+</code><code id="L2208"><span class="ln">2208</span>                            }
+</code><code id="L2209"><span class="ln">2209</span>                            <b>if</b> (o.paper._vbSize) {
+</code><code id="L2210"><span class="ln">2210</span>                                value *= o.paper._vbSize;
+</code><code id="L2211"><span class="ln">2211</span>                            }
+</code><code id="L2212"><span class="ln">2212</span>                            node[setAttribute](att, value);
+</code><code id="L2213"><span class="ln">2213</span>                            <b>if</b> (attrs[<i>"stroke-dasharray"</i>]) {
+</code><code id="L2214"><span class="ln">2214</span>                                addDashes(o, attrs[<i>"stroke-dasharray"</i>]);
+</code><code id="L2215"><span class="ln">2215</span>                            }
+</code><code id="L2216"><span class="ln">2216</span>                            <b>if</b> (o._.arrows) {
+</code><code id="L2217"><span class="ln">2217</span>                                <i>"startString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.startString);
+</code><code id="L2218"><span class="ln">2218</span>                                <i>"endString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2219"><span class="ln">2219</span>                            }
+</code><code id="L2220"><span class="ln">2220</span>                            <b>break</b>;
+</code><code id="L2221"><span class="ln">2221</span>                        <b>case</b> <i>"stroke-dasharray"</i>:
+</code><code id="L2222"><span class="ln">2222</span>                            addDashes(o, value);
+</code><code id="L2223"><span class="ln">2223</span>                            <b>break</b>;
+</code><code id="L2224"><span class="ln">2224</span>                        <b>case</b> fillString:
+</code><code id="L2225"><span class="ln">2225</span>                            <b>var</b> isURL<span class="s"> = </span>Str(value).match(ISURL);
+</code><code id="L2226"><span class="ln">2226</span>                            <b>if</b> (isURL) {
+</code><code id="L2227"><span class="ln">2227</span>                                el<span class="s"> = </span>$(<i>"pattern"</i>);
+</code><code id="L2228"><span class="ln">2228</span>                                <b>var</b> ig<span class="s"> = </span>$(<i>"image"</i>);
+</code><code id="L2229"><span class="ln">2229</span>                                el.id<span class="s"> = </span>createUUID();
+</code><code id="L2230"><span class="ln">2230</span>                                $(el, {x: <span class="d">0</span>, y: <span class="d">0</span>, patternUnits: <i>"userSpaceOnUse"</i>, height: <span class="d">1</span>, width: <span class="d">1</span>});
+</code><code id="L2231"><span class="ln">2231</span>                                $(ig, {x: <span class="d">0</span>, y: <span class="d">0</span>, <i>"xlink:href"</i>: isURL[<span class="d">1</span>]});
+</code><code id="L2232"><span class="ln">2232</span>                                el.appendChild(ig);
+</code><code id="L2233"><span class="ln">2233</span>
+</code><code id="L2234"><span class="ln">2234</span>                                (<b>function</b> (el) {
+</code><code id="L2235"><span class="ln">2235</span>                                    preload(isURL[<span class="d">1</span>], <b>function</b> () {
+</code><code id="L2236"><span class="ln">2236</span>                                        <b>var</b> w<span class="s"> = </span><b>this</b>.offsetWidth,
+</code><code id="L2237"><span class="ln">2237</span>                                            h<span class="s"> = </span><b>this</b>.offsetHeight;
+</code><code id="L2238"><span class="ln">2238</span>                                        $(el, {width: w, height: h});
+</code><code id="L2239"><span class="ln">2239</span>                                        $(ig, {width: w, height: h});
+</code><code id="L2240"><span class="ln">2240</span>                                        o.paper.safari();
+</code><code id="L2241"><span class="ln">2241</span>                                    });
+</code><code id="L2242"><span class="ln">2242</span>                                })(el);
+</code><code id="L2243"><span class="ln">2243</span>                                o.paper.defs.appendChild(el);
+</code><code id="L2244"><span class="ln">2244</span>                                node.style.fill<span class="s"> = </span><i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>;
+</code><code id="L2245"><span class="ln">2245</span>                                $(node, {fill: <i>"url(#"</i><span class="s"> + </span>el.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2246"><span class="ln">2246</span>                                o.pattern<span class="s"> = </span>el;
+</code><code id="L2247"><span class="ln">2247</span>                                o.pattern<span class="s"> &amp;&amp; </span>updatePosition(o);
+</code><code id="L2248"><span class="ln">2248</span>                                <b>break</b>;
+</code><code id="L2249"><span class="ln">2249</span>                            }
+</code><code id="L2250"><span class="ln">2250</span>                            <b>var</b> clr<span class="s"> = </span>R.getRGB(value);
+</code><code id="L2251"><span class="ln">2251</span>                            <b>if</b> (!clr.error) {
+</code><code id="L2252"><span class="ln">2252</span>                                <b>delete</b> params.gradient;
+</code><code id="L2253"><span class="ln">2253</span>                                <b>delete</b> attrs.gradient;
+</code><code id="L2254"><span class="ln">2254</span>                                !R.is(attrs.opacity, <i>"<b>undefined</b>"</i>) &amp;&amp;
+</code><code id="L2255"><span class="ln">2255</span>                                    R.is(params.opacity, <i>"<b>undefined</b>"</i>) &amp;&amp;
+</code><code id="L2256"><span class="ln">2256</span>                                    $(node, {opacity: attrs.opacity});
+</code><code id="L2257"><span class="ln">2257</span>                                !R.is(attrs[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &amp;&amp;
+</code><code id="L2258"><span class="ln">2258</span>                                    R.is(params[<i>"fill-opacity"</i>], <i>"<b>undefined</b>"</i>) &amp;&amp;
+</code><code id="L2259"><span class="ln">2259</span>                                    $(node, {<i>"fill-opacity"</i>: attrs[<i>"fill-opacity"</i>]});
+</code><code id="L2260"><span class="ln">2260</span>                            } <b>else</b> <b>if</b> ((o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>)<span class="s"> &amp;&amp; </span>addGradientFill(o, value)) {
+</code><code id="L2261"><span class="ln">2261</span>                                <b>if</b> (<i>"opacity"</i> <b>in</b> attrs<span class="s"> || </span><i>"fill-opacity"</i> <b>in</b> attrs) {
+</code><code id="L2262"><span class="ln">2262</span>                                    <b>var</b> gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
+</code><code id="L2263"><span class="ln">2263</span>                                    <b>if</b> (gradient) {
+</code><code id="L2264"><span class="ln">2264</span>                                        <b>var</b> stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
+</code><code id="L2265"><span class="ln">2265</span>                                        $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: (<i>"opacity"</i> <b>in</b> attrs ? attrs.opacity : <span class="d">1</span>)<span class="s"> * </span>(<i>"fill-opacity"</i> <b>in</b> attrs ? attrs[<i>"fill-opacity"</i>] : <span class="d">1</span>)});
+</code><code id="L2266"><span class="ln">2266</span>                                    }
+</code><code id="L2267"><span class="ln">2267</span>                                }
+</code><code id="L2268"><span class="ln">2268</span>                                attrs.gradient<span class="s"> = </span>value;
+</code><code id="L2269"><span class="ln">2269</span>                                attrs.fill<span class="s"> = </span><i>"none"</i>;
+</code><code id="L2270"><span class="ln">2270</span>                                <b>break</b>;
+</code><code id="L2271"><span class="ln">2271</span>                            }
+</code><code id="L2272"><span class="ln">2272</span>                            clr[has](<i>"opacity"</i>)<span class="s"> &amp;&amp; </span>$(node, {<i>"fill-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
+</code><code id="L2273"><span class="ln">2273</span>                        <b>case</b> <i>"stroke"</i>:
+</code><code id="L2274"><span class="ln">2274</span>                            clr<span class="s"> = </span>R.getRGB(value);
+</code><code id="L2275"><span class="ln">2275</span>                            node[setAttribute](att, clr.hex);
+</code><code id="L2276"><span class="ln">2276</span>                            att<span class="s"> == </span><i>"stroke"</i><span class="s"> &amp;&amp; </span>clr[has](<i>"opacity"</i>)<span class="s"> &amp;&amp; </span>$(node, {<i>"stroke-opacity"</i>: clr.opacity > <span class="d">1</span> ? clr.opacity<span class="s"> / </span><span class="d">100</span> : clr.opacity});
+</code><code id="L2277"><span class="ln">2277</span>                            <b>if</b> (att<span class="s"> == </span><i>"stroke"</i><span class="s"> &amp;&amp; </span>o._.arrows) {
+</code><code id="L2278"><span class="ln">2278</span>                                <i>"startString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.startString);
+</code><code id="L2279"><span class="ln">2279</span>                                <i>"endString"</i> <b>in</b> o._.arrows<span class="s"> &amp;&amp; </span>addArrow(o, o._.arrows.endString, <span class="d">1</span>);
+</code><code id="L2280"><span class="ln">2280</span>                            }
+</code><code id="L2281"><span class="ln">2281</span>                            <b>break</b>;
+</code><code id="L2282"><span class="ln">2282</span>                        <b>case</b> <i>"gradient"</i>:
+</code><code id="L2283"><span class="ln">2283</span>                            (o.type<span class="s"> == </span><i>"circle"</i><span class="s"> || </span>o.type<span class="s"> == </span><i>"ellipse"</i><span class="s"> || </span>Str(value).charAt() != <i>"r"</i>)<span class="s"> &amp;&amp; </span>addGradientFill(o, value);
+</code><code id="L2284"><span class="ln">2284</span>                            <b>break</b>;
+</code><code id="L2285"><span class="ln">2285</span>                        <b>case</b> <i>"opacity"</i>:
+</code><code id="L2286"><span class="ln">2286</span>                            <b>if</b> (attrs.gradient<span class="s"> &amp;&amp; </span>!attrs[has](<i>"stroke-opacity"</i>)) {
+</code><code id="L2287"><span class="ln">2287</span>                                $(node, {<i>"stroke-opacity"</i>: value > <span class="d">1</span> ? value<span class="s"> / </span><span class="d">100</span> : value});
+</code><code id="L2288"><span class="ln">2288</span>                            }
+</code><code id="L2289"><span class="ln">2289</span>                            <span class="c">// fall</span>
+</code><code id="L2290"><span class="ln">2290</span>                        <b>case</b> <i>"fill-opacity"</i>:
+</code><code id="L2291"><span class="ln">2291</span>                            <b>if</b> (attrs.gradient) {
+</code><code id="L2292"><span class="ln">2292</span>                                gradient<span class="s"> = </span>g.doc.getElementById(node.getAttribute(fillString).replace(/^url\(#|\)$/g, E));
+</code><code id="L2293"><span class="ln">2293</span>                                <b>if</b> (gradient) {
+</code><code id="L2294"><span class="ln">2294</span>                                    stops<span class="s"> = </span>gradient.getElementsByTagName(<i>"stop"</i>);
+</code><code id="L2295"><span class="ln">2295</span>                                    $(stops[stops.length<span class="s"> - </span><span class="d">1</span>], {<i>"stop-opacity"</i>: value});
+</code><code id="L2296"><span class="ln">2296</span>                                }
+</code><code id="L2297"><span class="ln">2297</span>                                <b>break</b>;
+</code><code id="L2298"><span class="ln">2298</span>                            }
+</code><code id="L2299"><span class="ln">2299</span>                        <b>default</b>:
+</code><code id="L2300"><span class="ln">2300</span>                            att<span class="s"> == </span><i>"font-size"</i><span class="s"> &amp;&amp; </span>(value<span class="s"> = </span>toInt(value, <span class="d">10</span>)<span class="s"> + </span><i>"px"</i>);
+</code><code id="L2301"><span class="ln">2301</span>                            <b>var</b> cssrule<span class="s"> = </span>att.replace(/(\-.)/g, <b>function</b> (w) {
+</code><code id="L2302"><span class="ln">2302</span>                                <b>return</b> upperCase.call(w.substring(<span class="d">1</span>));
+</code><code id="L2303"><span class="ln">2303</span>                            });
+</code><code id="L2304"><span class="ln">2304</span>                            node.style[cssrule]<span class="s"> = </span>value;
+</code><code id="L2305"><span class="ln">2305</span>                            o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2306"><span class="ln">2306</span>                            node[setAttribute](att, value);
+</code><code id="L2307"><span class="ln">2307</span>                            <b>break</b>;
+</code><code id="L2308"><span class="ln">2308</span>                    }
+</code><code id="L2309"><span class="ln">2309</span>                }
+</code><code id="L2310"><span class="ln">2310</span>            }
+</code><code id="L2311"><span class="ln">2311</span>
+</code><code id="L2312"><span class="ln">2312</span>            tuneText(o, params);
+</code><code id="L2313"><span class="ln">2313</span>        },
+</code><code id="L2314"><span class="ln">2314</span>        leading<span class="s"> = </span><span class="d">1.2</span>,
+</code><code id="L2315"><span class="ln">2315</span>        tuneText<span class="s"> = </span><b>function</b> (el, params) {
+</code><code id="L2316"><span class="ln">2316</span>            <b>if</b> (el.type != <i>"text"</i><span class="s"> || </span>!(params[has](<i>"text"</i>)<span class="s"> || </span>params[has](<i>"font"</i>)<span class="s"> || </span>params[has](<i>"font-size"</i>)<span class="s"> || </span>params[has](<i>"x"</i>)<span class="s"> || </span>params[has](<i>"y"</i>))) {
+</code><code id="L2317"><span class="ln">2317</span>                <b>return</b>;
+</code><code id="L2318"><span class="ln">2318</span>            }
+</code><code id="L2319"><span class="ln">2319</span>            <b>var</b> a<span class="s"> = </span>el.attrs,
+</code><code id="L2320"><span class="ln">2320</span>                node<span class="s"> = </span>el.node,
+</code><code id="L2321"><span class="ln">2321</span>                fontSize<span class="s"> = </span>node.firstChild ? toInt(g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue(<i>"font-size"</i>), <span class="d">10</span>) : <span class="d">10</span>;
+</code><code id="L2322"><span class="ln">2322</span> 
+</code><code id="L2323"><span class="ln">2323</span>            <b>if</b> (params[has](<i>"text"</i>)) {
+</code><code id="L2324"><span class="ln">2324</span>                a.text<span class="s"> = </span>params.text;
+</code><code id="L2325"><span class="ln">2325</span>                <b>while</b> (node.firstChild) {
+</code><code id="L2326"><span class="ln">2326</span>                    node.removeChild(node.firstChild);
+</code><code id="L2327"><span class="ln">2327</span>                }
+</code><code id="L2328"><span class="ln">2328</span>                <b>var</b> texts<span class="s"> = </span>Str(params.text).split(<i>"\n"</i>),
+</code><code id="L2329"><span class="ln">2329</span>                    tspans<span class="s"> = </span>[],
+</code><code id="L2330"><span class="ln">2330</span>                    tspan;
+</code><code id="L2331"><span class="ln">2331</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>texts.length; i &lt; ii; i++) <b>if</b> (texts[i]) {
+</code><code id="L2332"><span class="ln">2332</span>                    tspan<span class="s"> = </span>$(<i>"tspan"</i>);
+</code><code id="L2333"><span class="ln">2333</span>                    i<span class="s"> &amp;&amp; </span>$(tspan, {dy: fontSize<span class="s"> * </span>leading, x: a.x});
+</code><code id="L2334"><span class="ln">2334</span>                    tspan.appendChild(g.doc.createTextNode(texts[i]));
+</code><code id="L2335"><span class="ln">2335</span>                    node.appendChild(tspan);
+</code><code id="L2336"><span class="ln">2336</span>                    tspans[i]<span class="s"> = </span>tspan;
+</code><code id="L2337"><span class="ln">2337</span>                }
+</code><code id="L2338"><span class="ln">2338</span>            } <b>else</b> {
+</code><code id="L2339"><span class="ln">2339</span>                tspans<span class="s"> = </span>node.getElementsByTagName(<i>"tspan"</i>);
+</code><code id="L2340"><span class="ln">2340</span>                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>tspans.length; i &lt; ii; i++) {
+</code><code id="L2341"><span class="ln">2341</span>                    i<span class="s"> &amp;&amp; </span>$(tspans[i], {dy: fontSize<span class="s"> * </span>leading, x: a.x});
+</code><code id="L2342"><span class="ln">2342</span>                }
+</code><code id="L2343"><span class="ln">2343</span>            }
+</code><code id="L2344"><span class="ln">2344</span>            $(node, {y: a.y});
+</code><code id="L2345"><span class="ln">2345</span>            el._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2346"><span class="ln">2346</span>            <b>var</b> bb<span class="s"> = </span>el._getBBox(),
+</code><code id="L2347"><span class="ln">2347</span>                dif<span class="s"> = </span>a.y<span class="s"> - </span>(bb.y<span class="s"> + </span>bb.height<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L2348"><span class="ln">2348</span>            dif<span class="s"> &amp;&amp; </span>R.is(dif, <i>"finite"</i>)<span class="s"> &amp;&amp; </span>$(tspans[<span class="d">0</span>], {dy: a.y<span class="s"> + </span>dif});
+</code><code id="L2349"><span class="ln">2349</span>        },
+</code><code id="L2350"><span class="ln">2350</span>        Element<span class="s"> = </span><b>function</b> (node, svg) {
+</code><code id="L2351"><span class="ln">2351</span>            <b>var</b> X<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L2352"><span class="ln">2352</span>                Y<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L2353"><span class="ln">2353</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2354"><span class="ln">2354</span><span class="c">            <span class="s"> * </span>Element.node
+</span></code><code id="L2355"><span class="ln">2355</span><span class="c">             [ property (object) ]
+</span></code><code id="L2356"><span class="ln">2356</span><span class="c">             **
+</span></code><code id="L2357"><span class="ln">2357</span><span class="c">            <span class="s"> * </span>Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
+</span></code><code id="L2358"><span class="ln">2358</span><span class="c">             > Usage
+</span></code><code id="L2359"><span class="ln">2359</span><span class="c">            <span class="s"> | </span><span class="c">// draw a circle at coordinate <span class="d">10</span>,<span class="d">10</span> <b>with</b> radius of <span class="d">10</span></span>
+</span></code><code id="L2360"><span class="ln">2360</span><span class="c">            <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>);
+</span></code><code id="L2361"><span class="ln">2361</span><span class="c">            <span class="s"> | </span>c.node.onclick<span class="s"> = </span><b>function</b> () {
+</span></code><code id="L2362"><span class="ln">2362</span><span class="c">            <span class="s"> | </span>    c.attr(<i>"fill"</i>, <i>"red"</i>);
+</span></code><code id="L2363"><span class="ln">2363</span><span class="c">            <span class="s"> | </span>};
+</span></code><code id="L2364"><span class="ln">2364</span><span class="c">            \*/</span>
+</code><code id="L2365"><span class="ln">2365</span>            <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
+</code><code id="L2366"><span class="ln">2366</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2367"><span class="ln">2367</span><span class="c">            <span class="s"> * </span>Element.raphael
+</span></code><code id="L2368"><span class="ln">2368</span><span class="c">             [ property (object) ]
+</span></code><code id="L2369"><span class="ln">2369</span><span class="c">             **
+</span></code><code id="L2370"><span class="ln">2370</span><span class="c">            <span class="s"> * </span>Internal reference to @Raphael object. In <b>case</b> it is not available.
+</span></code><code id="L2371"><span class="ln">2371</span><span class="c">             > Usage
+</span></code><code id="L2372"><span class="ln">2372</span><span class="c">            <span class="s"> | </span>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+</span></code><code id="L2373"><span class="ln">2373</span><span class="c">            <span class="s"> | </span>    <b>var</b> hsb<span class="s"> = </span><b>this</b>.paper.raphael.rgb2hsb(<b>this</b>.attr(<i>"fill"</i>));
+</span></code><code id="L2374"><span class="ln">2374</span><span class="c">            <span class="s"> | </span>    hsb.h<span class="s"> = </span><span class="d">1</span>;
+</span></code><code id="L2375"><span class="ln">2375</span><span class="c">            <span class="s"> | </span>    <b>this</b>.attr({fill: <b>this</b>.paper.raphael.hsb2rgb(hsb).hex});
+</span></code><code id="L2376"><span class="ln">2376</span><span class="c">            <span class="s"> | </span>}
+</span></code><code id="L2377"><span class="ln">2377</span><span class="c">            \*/</span>
+</code><code id="L2378"><span class="ln">2378</span>            node.raphael<span class="s"> = </span><b>true</b>;
+</code><code id="L2379"><span class="ln">2379</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2380"><span class="ln">2380</span><span class="c">            <span class="s"> * </span>Element.id
+</span></code><code id="L2381"><span class="ln">2381</span><span class="c">             [ property (number) ]
+</span></code><code id="L2382"><span class="ln">2382</span><span class="c">             **
+</span></code><code id="L2383"><span class="ln">2383</span><span class="c">            <span class="s"> * </span>Unique id of the element. Especially usesful when you want to listen to events of the element, 
+</span></code><code id="L2384"><span class="ln">2384</span><span class="c">            <span class="s"> * </span>because all events are fired <b>in</b> format `&lt;module>.&lt;action>.&lt;id>`. Also useful <b>for</b> @Paper.getById method.
+</span></code><code id="L2385"><span class="ln">2385</span><span class="c">            \*/</span>
+</code><code id="L2386"><span class="ln">2386</span>            <b>this</b>.id<span class="s"> = </span>R._oid++;
+</code><code id="L2387"><span class="ln">2387</span>            node.raphaelid<span class="s"> = </span><b>this</b>.id;
+</code><code id="L2388"><span class="ln">2388</span>            <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L2389"><span class="ln">2389</span>            <b>this</b>.realPath<span class="s"> = </span><b>null</b>;
+</code><code id="L2390"><span class="ln">2390</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2391"><span class="ln">2391</span><span class="c">            <span class="s"> * </span>Element.paper
+</span></code><code id="L2392"><span class="ln">2392</span><span class="c">             [ property (object) ]
+</span></code><code id="L2393"><span class="ln">2393</span><span class="c">             **
+</span></code><code id="L2394"><span class="ln">2394</span><span class="c">            <span class="s"> * </span>Internal reference to “paper” where object drawn. Mainly <b>for</b> use <b>in</b> plugins and element extensions.
+</span></code><code id="L2395"><span class="ln">2395</span><span class="c">             > Usage
+</span></code><code id="L2396"><span class="ln">2396</span><span class="c">            <span class="s"> | </span>Raphael.el.cross<span class="s"> = </span><b>function</b> () {
+</span></code><code id="L2397"><span class="ln">2397</span><span class="c">            <span class="s"> | </span>    <b>this</b>.attr({fill: <i>"red"</i>});
+</span></code><code id="L2398"><span class="ln">2398</span><span class="c">            <span class="s"> | </span>    <b>this</b>.paper.path(<i>"M10,10L50,50M50,10L10,<span class="d">50</span>"</i>)
+</span></code><code id="L2399"><span class="ln">2399</span><span class="c">            <span class="s"> | </span>        .attr({stroke: <i>"red"</i>});
+</span></code><code id="L2400"><span class="ln">2400</span><span class="c">            <span class="s"> | </span>}
+</span></code><code id="L2401"><span class="ln">2401</span><span class="c">            \*/</span>
+</code><code id="L2402"><span class="ln">2402</span>            <b>this</b>.paper<span class="s"> = </span>svg;
+</code><code id="L2403"><span class="ln">2403</span>            <b>this</b>.attrs<span class="s"> = </span><b>this</b>.attrs<span class="s"> || </span>{};
+</code><code id="L2404"><span class="ln">2404</span>            <b>this</b>._<span class="s"> = </span>{
+</code><code id="L2405"><span class="ln">2405</span>                transform: [],
+</code><code id="L2406"><span class="ln">2406</span>                sx: <span class="d">1</span>,
+</code><code id="L2407"><span class="ln">2407</span>                sy: <span class="d">1</span>,
+</code><code id="L2408"><span class="ln">2408</span>                deg: <span class="d">0</span>,
+</code><code id="L2409"><span class="ln">2409</span>                dx: <span class="d">0</span>,
+</code><code id="L2410"><span class="ln">2410</span>                dy: <span class="d">0</span>,
+</code><code id="L2411"><span class="ln">2411</span>                dirty: <span class="d">1</span>
+</code><code id="L2412"><span class="ln">2412</span>            };
+</code><code id="L2413"><span class="ln">2413</span>            !svg.bottom<span class="s"> &amp;&amp; </span>(svg.bottom<span class="s"> = </span><b>this</b>);
+</code><code id="L2414"><span class="ln">2414</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2415"><span class="ln">2415</span><span class="c">            <span class="s"> * </span>Element.prev
+</span></code><code id="L2416"><span class="ln">2416</span><span class="c">             [ property (object) ]
+</span></code><code id="L2417"><span class="ln">2417</span><span class="c">             **
+</span></code><code id="L2418"><span class="ln">2418</span><span class="c">            <span class="s"> * </span>Reference to the previous element <b>in</b> the hierarchy.
+</span></code><code id="L2419"><span class="ln">2419</span><span class="c">            \*/</span>
+</code><code id="L2420"><span class="ln">2420</span>            <b>this</b>.prev<span class="s"> = </span>svg.top;
+</code><code id="L2421"><span class="ln">2421</span>            svg.top<span class="s"> &amp;&amp; </span>(svg.top.next<span class="s"> = </span><b>this</b>);
+</code><code id="L2422"><span class="ln">2422</span>            svg.top<span class="s"> = </span><b>this</b>;
+</code><code id="L2423"><span class="ln">2423</span><span class="c">            <span class="c">/*\</span>
+</span></code><code id="L2424"><span class="ln">2424</span><span class="c">            <span class="s"> * </span>Element.next
+</span></code><code id="L2425"><span class="ln">2425</span><span class="c">             [ property (object) ]
+</span></code><code id="L2426"><span class="ln">2426</span><span class="c">             **
+</span></code><code id="L2427"><span class="ln">2427</span><span class="c">            <span class="s"> * </span>Reference to the next element <b>in</b> the hierarchy.
+</span></code><code id="L2428"><span class="ln">2428</span><span class="c">            \*/</span>
+</code><code id="L2429"><span class="ln">2429</span>            <b>this</b>.next<span class="s"> = </span><b>null</b>;
+</code><code id="L2430"><span class="ln">2430</span>        },
+</code><code id="L2431"><span class="ln">2431</span>        elproto<span class="s"> = </span>Element.prototype;
+</code><code id="L2432"><span class="ln">2432</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2433"><span class="ln">2433</span><span class="c">        <span class="s"> * </span>Element.rotate
+</span></code><code id="L2434"><span class="ln">2434</span><span class="c">         [ method ]
+</span></code><code id="L2435"><span class="ln">2435</span><span class="c">         **
+</span></code><code id="L2436"><span class="ln">2436</span><span class="c">        <span class="s"> * </span>Adds rotation by given angle around given point to the list of
+</span></code><code id="L2437"><span class="ln">2437</span><span class="c">        <span class="s"> * </span>transformations of the element.
+</span></code><code id="L2438"><span class="ln">2438</span><span class="c">         > Parameters
+</span></code><code id="L2439"><span class="ln">2439</span><span class="c">        <span class="s"> - </span>deg (number) angle <b>in</b> degrees
+</span></code><code id="L2440"><span class="ln">2440</span><span class="c">        <span class="s"> - </span>cx (number) #optional x coordinate of the centre of rotation
+</span></code><code id="L2441"><span class="ln">2441</span><span class="c">        <span class="s"> - </span>cy (number) #optional y coordinate of the centre of rotation
+</span></code><code id="L2442"><span class="ln">2442</span><span class="c">        <span class="s"> * </span>If cx<span class="s"> &amp; </span>cy aren’t specified centre of the shape is used as a point of rotation.
+</span></code><code id="L2443"><span class="ln">2443</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2444"><span class="ln">2444</span><span class="c">        \*/</span>
+</code><code id="L2445"><span class="ln">2445</span>        elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
+</code><code id="L2446"><span class="ln">2446</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2447"><span class="ln">2447</span>                <b>return</b> <b>this</b>;
+</code><code id="L2448"><span class="ln">2448</span>            }
+</code><code id="L2449"><span class="ln">2449</span>            deg<span class="s"> = </span>Str(deg).split(separator);
+</code><code id="L2450"><span class="ln">2450</span>            <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2451"><span class="ln">2451</span>                cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
+</code><code id="L2452"><span class="ln">2452</span>                cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
+</code><code id="L2453"><span class="ln">2453</span>            }
+</code><code id="L2454"><span class="ln">2454</span>            deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
+</code><code id="L2455"><span class="ln">2455</span>            (cy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(cx<span class="s"> = </span>cy);
+</code><code id="L2456"><span class="ln">2456</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L2457"><span class="ln">2457</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L2458"><span class="ln">2458</span>                cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L2459"><span class="ln">2459</span>                cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L2460"><span class="ln">2460</span>            }
+</code><code id="L2461"><span class="ln">2461</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
+</code><code id="L2462"><span class="ln">2462</span>            <b>return</b> <b>this</b>;
+</code><code id="L2463"><span class="ln">2463</span>        };
+</code><code id="L2464"><span class="ln">2464</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2465"><span class="ln">2465</span><span class="c">        <span class="s"> * </span>Element.scale
+</span></code><code id="L2466"><span class="ln">2466</span><span class="c">         [ method ]
+</span></code><code id="L2467"><span class="ln">2467</span><span class="c">         **
+</span></code><code id="L2468"><span class="ln">2468</span><span class="c">        <span class="s"> * </span>Adds scale by given amount relative to given point to the list of
+</span></code><code id="L2469"><span class="ln">2469</span><span class="c">        <span class="s"> * </span>transformations of the element.
+</span></code><code id="L2470"><span class="ln">2470</span><span class="c">         > Parameters
+</span></code><code id="L2471"><span class="ln">2471</span><span class="c">        <span class="s"> - </span>sx (number) horisontal scale amount
+</span></code><code id="L2472"><span class="ln">2472</span><span class="c">        <span class="s"> - </span>sy (number) vertical scale amount
+</span></code><code id="L2473"><span class="ln">2473</span><span class="c">        <span class="s"> - </span>cx (number) #optional x coordinate of the centre of scale
+</span></code><code id="L2474"><span class="ln">2474</span><span class="c">        <span class="s"> - </span>cy (number) #optional y coordinate of the centre of scale
+</span></code><code id="L2475"><span class="ln">2475</span><span class="c">        <span class="s"> * </span>If cx<span class="s"> &amp; </span>cy aren’t specified centre of the shape is used instead.
+</span></code><code id="L2476"><span class="ln">2476</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2477"><span class="ln">2477</span><span class="c">        \*/</span>
+</code><code id="L2478"><span class="ln">2478</span>        elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
+</code><code id="L2479"><span class="ln">2479</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2480"><span class="ln">2480</span>                <b>return</b> <b>this</b>;
+</code><code id="L2481"><span class="ln">2481</span>            }
+</code><code id="L2482"><span class="ln">2482</span>            sx<span class="s"> = </span>Str(sx).split(separator);
+</code><code id="L2483"><span class="ln">2483</span>            <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2484"><span class="ln">2484</span>                sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
+</code><code id="L2485"><span class="ln">2485</span>                cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
+</code><code id="L2486"><span class="ln">2486</span>                cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
+</code><code id="L2487"><span class="ln">2487</span>            }
+</code><code id="L2488"><span class="ln">2488</span>            sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
+</code><code id="L2489"><span class="ln">2489</span>            (sy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(sy<span class="s"> = </span>sx);
+</code><code id="L2490"><span class="ln">2490</span>            (cy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(cx<span class="s"> = </span>cy);
+</code><code id="L2491"><span class="ln">2491</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L2492"><span class="ln">2492</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L2493"><span class="ln">2493</span>            }
+</code><code id="L2494"><span class="ln">2494</span>            cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
+</code><code id="L2495"><span class="ln">2495</span>            cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
+</code><code id="L2496"><span class="ln">2496</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
+</code><code id="L2497"><span class="ln">2497</span>            <b>return</b> <b>this</b>;
+</code><code id="L2498"><span class="ln">2498</span>        };
+</code><code id="L2499"><span class="ln">2499</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2500"><span class="ln">2500</span><span class="c">        <span class="s"> * </span>Element.translate
+</span></code><code id="L2501"><span class="ln">2501</span><span class="c">         [ method ]
+</span></code><code id="L2502"><span class="ln">2502</span><span class="c">         **
+</span></code><code id="L2503"><span class="ln">2503</span><span class="c">        <span class="s"> * </span>Adds translation by given amount to the list of transformations of the element.
+</span></code><code id="L2504"><span class="ln">2504</span><span class="c">         > Parameters
+</span></code><code id="L2505"><span class="ln">2505</span><span class="c">        <span class="s"> - </span>dx (number) horisontal shift
+</span></code><code id="L2506"><span class="ln">2506</span><span class="c">        <span class="s"> - </span>dy (number) vertical shift
+</span></code><code id="L2507"><span class="ln">2507</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2508"><span class="ln">2508</span><span class="c">        \*/</span>
+</code><code id="L2509"><span class="ln">2509</span>        elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
+</code><code id="L2510"><span class="ln">2510</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2511"><span class="ln">2511</span>                <b>return</b> <b>this</b>;
+</code><code id="L2512"><span class="ln">2512</span>            }
+</code><code id="L2513"><span class="ln">2513</span>            dx<span class="s"> = </span>Str(dx).split(separator);
+</code><code id="L2514"><span class="ln">2514</span>            <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L2515"><span class="ln">2515</span>                dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
+</code><code id="L2516"><span class="ln">2516</span>            }
+</code><code id="L2517"><span class="ln">2517</span>            dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2518"><span class="ln">2518</span>            dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2519"><span class="ln">2519</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
+</code><code id="L2520"><span class="ln">2520</span>            <b>return</b> <b>this</b>;
+</code><code id="L2521"><span class="ln">2521</span>        };
+</code><code id="L2522"><span class="ln">2522</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2523"><span class="ln">2523</span><span class="c">        <span class="s"> * </span>Element.transform
+</span></code><code id="L2524"><span class="ln">2524</span><span class="c">         [ method ]
+</span></code><code id="L2525"><span class="ln">2525</span><span class="c">         **
+</span></code><code id="L2526"><span class="ln">2526</span><span class="c">        <span class="s"> * </span>Adds transformation to the element which is separate to other attributes,
+</span></code><code id="L2527"><span class="ln">2527</span><span class="c">        <span class="s"> * </span>i.e. translation doesn’t change `x` or `y` of the rectange. The format
+</span></code><code id="L2528"><span class="ln">2528</span><span class="c">        <span class="s"> * </span>of transformation string is similar to the path string syntax:
+</span></code><code id="L2529"><span class="ln">2529</span><span class="c">        <span class="s"> | </span><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
+</span></code><code id="L2530"><span class="ln">2530</span><span class="c">        <span class="s"> * </span>Each letter is a command. There are four commands: `t` is <b>for</b> translate, `r` is <b>for</b> rotate, `s` is <b>for</b>
+</span></code><code id="L2531"><span class="ln">2531</span><span class="c">        <span class="s"> * </span>scale and `m` is <b>for</b> matrix.
+</span></code><code id="L2532"><span class="ln">2532</span><span class="c">         *
+</span></code><code id="L2533"><span class="ln">2533</span><span class="c">        <span class="s"> * </span>So, example line could be read like “translate by <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">30</span>° around <span class="d">100</span>, <span class="d">100</span>, scale twice around <span class="d">100</span>, <span class="d">100</span>
+</span></code><code id="L2534"><span class="ln">2534</span><span class="c">        <span class="s"> * </span>rotate <span class="d">45</span>° around centre and scale <span class="d">1.5</span> times relative to centre”. As you see rotate and scale commands has origin
+</span></code><code id="L2535"><span class="ln">2535</span><span class="c">        <span class="s"> * </span>coordinates as a optional parameters.
+</span></code><code id="L2536"><span class="ln">2536</span><span class="c">        <span class="s"> * </span>Matrix accepts six parameters.
+</span></code><code id="L2537"><span class="ln">2537</span><span class="c">         > Usage
+</span></code><code id="L2538"><span class="ln">2538</span><span class="c">        <span class="s"> | </span><b>var</b> el<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">20</span>, <span class="d">300</span>, <span class="d">200</span>);
+</span></code><code id="L2539"><span class="ln">2539</span><span class="c">        <span class="s"> | </span><span class="c">// translate <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">45</span>°, translate -<span class="d">100</span>, <span class="d">0</span></span>
+</span></code><code id="L2540"><span class="ln">2540</span><span class="c">        <span class="s"> | </span>el.transform(<i>"t100,100r45t-<span class="d">100</span>,<span class="d">0</span>"</i>);
+</span></code><code id="L2541"><span class="ln">2541</span><span class="c">        <span class="s"> | </span><span class="c">// <b>if</b> you want you can append or prepend transformations</span>
+</span></code><code id="L2542"><span class="ln">2542</span><span class="c">        <span class="s"> | </span>el.transform(<i>"...t50,<span class="d">50</span>"</i>);
+</span></code><code id="L2543"><span class="ln">2543</span><span class="c">        <span class="s"> | </span>el.transform(<i>"s2..."</i>);
+</span></code><code id="L2544"><span class="ln">2544</span><span class="c">        <span class="s"> | </span><span class="c">// or even wrap</span>
+</span></code><code id="L2545"><span class="ln">2545</span><span class="c">        <span class="s"> | </span>el.transform(<i>"t50,<span class="d">50</span>...t-<span class="d">50</span>-<span class="d">50</span>"</i>);
+</span></code><code id="L2546"><span class="ln">2546</span><span class="c">        <span class="s"> | </span><span class="c">// to reset transformation call method <b>with</b> empty string</span>
+</span></code><code id="L2547"><span class="ln">2547</span><span class="c">        <span class="s"> | </span>el.transform(<i>""</i>);
+</span></code><code id="L2548"><span class="ln">2548</span><span class="c">        <span class="s"> | </span><span class="c">// to get current value call it without parameters</span>
+</span></code><code id="L2549"><span class="ln">2549</span><span class="c">        <span class="s"> | </span>console.log(el.transform());
+</span></code><code id="L2550"><span class="ln">2550</span><span class="c">         > Parameters
+</span></code><code id="L2551"><span class="ln">2551</span><span class="c">        <span class="s"> - </span>tstr (string) #optional transformation string
+</span></code><code id="L2552"><span class="ln">2552</span><span class="c">        <span class="s"> * </span>If tstr isn’t specified
+</span></code><code id="L2553"><span class="ln">2553</span><span class="c">        <span class="s"> = </span>(string) current transformation string
+</span></code><code id="L2554"><span class="ln">2554</span><span class="c">        <span class="s"> * </span><b>else</b>
+</span></code><code id="L2555"><span class="ln">2555</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2556"><span class="ln">2556</span><span class="c">        \*/</span>
+</code><code id="L2557"><span class="ln">2557</span>        elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
+</code><code id="L2558"><span class="ln">2558</span>            <b>var</b> _<span class="s"> = </span><b>this</b>._;
+</code><code id="L2559"><span class="ln">2559</span>            <b>if</b> (!tstr) {
+</code><code id="L2560"><span class="ln">2560</span>                <b>return</b> _.transform;
+</code><code id="L2561"><span class="ln">2561</span>            }
+</code><code id="L2562"><span class="ln">2562</span>            extractTransform(<b>this</b>, tstr);
+</code><code id="L2563"><span class="ln">2563</span>
+</code><code id="L2564"><span class="ln">2564</span>            <b>this</b>.clip<span class="s"> &amp;&amp; </span>$(<b>this</b>.clip, {transform: <b>this</b>.matrix.invert()});
+</code><code id="L2565"><span class="ln">2565</span>            <span class="c">// <b>this</b>.gradient<span class="s"> &amp;&amp; </span>$(<b>this</b>.gradient, {gradientTransform: <b>this</b>.matrix.invert()});</span>
+</code><code id="L2566"><span class="ln">2566</span>            <b>this</b>.pattern<span class="s"> &amp;&amp; </span>updatePosition(<b>this</b>);
+</code><code id="L2567"><span class="ln">2567</span>            <b>this</b>.node<span class="s"> &amp;&amp; </span>$(<b>this</b>.node, {transform: <b>this</b>.matrix});
+</code><code id="L2568"><span class="ln">2568</span>            
+</code><code id="L2569"><span class="ln">2569</span>            <b>if</b> (_.sx != <span class="d">1</span><span class="s"> || </span>_.sy != <span class="d">1</span>) {
+</code><code id="L2570"><span class="ln">2570</span>                <b>var</b> sw<span class="s"> = </span><b>this</b>.attrs[has](<i>"stroke-width"</i>) ? <b>this</b>.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
+</code><code id="L2571"><span class="ln">2571</span>                <b>this</b>.attr({<i>"stroke-width"</i>: sw});
+</code><code id="L2572"><span class="ln">2572</span>            }
+</code><code id="L2573"><span class="ln">2573</span>
+</code><code id="L2574"><span class="ln">2574</span>            <b>return</b> <b>this</b>;
+</code><code id="L2575"><span class="ln">2575</span>        };
+</code><code id="L2576"><span class="ln">2576</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2577"><span class="ln">2577</span><span class="c">        <span class="s"> * </span>Element.hide
+</span></code><code id="L2578"><span class="ln">2578</span><span class="c">         [ method ]
+</span></code><code id="L2579"><span class="ln">2579</span><span class="c">         **
+</span></code><code id="L2580"><span class="ln">2580</span><span class="c">        <span class="s"> * </span>Makes element invisible. See @Element.show.
+</span></code><code id="L2581"><span class="ln">2581</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2582"><span class="ln">2582</span><span class="c">        \*/</span>
+</code><code id="L2583"><span class="ln">2583</span>        elproto.hide<span class="s"> = </span><b>function</b> () {
+</code><code id="L2584"><span class="ln">2584</span>            !<b>this</b>.removed<span class="s"> &amp;&amp; </span><b>this</b>.paper.safari(<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
+</code><code id="L2585"><span class="ln">2585</span>            <b>return</b> <b>this</b>;
+</code><code id="L2586"><span class="ln">2586</span>        };
+</code><code id="L2587"><span class="ln">2587</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2588"><span class="ln">2588</span><span class="c">        <span class="s"> * </span>Element.show
+</span></code><code id="L2589"><span class="ln">2589</span><span class="c">         [ method ]
+</span></code><code id="L2590"><span class="ln">2590</span><span class="c">         **
+</span></code><code id="L2591"><span class="ln">2591</span><span class="c">        <span class="s"> * </span>Makes element visible. See @Element.hide.
+</span></code><code id="L2592"><span class="ln">2592</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2593"><span class="ln">2593</span><span class="c">        \*/</span>
+</code><code id="L2594"><span class="ln">2594</span>        elproto.show<span class="s"> = </span><b>function</b> () {
+</code><code id="L2595"><span class="ln">2595</span>            !<b>this</b>.removed<span class="s"> &amp;&amp; </span><b>this</b>.paper.safari(<b>this</b>.node.style.display<span class="s"> = </span><i>""</i>);
+</code><code id="L2596"><span class="ln">2596</span>            <b>return</b> <b>this</b>;
+</code><code id="L2597"><span class="ln">2597</span>        };
+</code><code id="L2598"><span class="ln">2598</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2599"><span class="ln">2599</span><span class="c">        <span class="s"> * </span>Element.remove
+</span></code><code id="L2600"><span class="ln">2600</span><span class="c">         [ method ]
+</span></code><code id="L2601"><span class="ln">2601</span><span class="c">         **
+</span></code><code id="L2602"><span class="ln">2602</span><span class="c">        <span class="s"> * </span>Removes element form the paper.
+</span></code><code id="L2603"><span class="ln">2603</span><span class="c">        \*/</span>
+</code><code id="L2604"><span class="ln">2604</span>        elproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L2605"><span class="ln">2605</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2606"><span class="ln">2606</span>                <b>return</b>;
+</code><code id="L2607"><span class="ln">2607</span>            }
+</code><code id="L2608"><span class="ln">2608</span>            eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L2609"><span class="ln">2609</span>            tear(<b>this</b>, <b>this</b>.paper);
+</code><code id="L2610"><span class="ln">2610</span>            <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
+</code><code id="L2611"><span class="ln">2611</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L2612"><span class="ln">2612</span>                <b>delete</b> <b>this</b>[i];
+</code><code id="L2613"><span class="ln">2613</span>            }
+</code><code id="L2614"><span class="ln">2614</span>            <b>this</b>.removed<span class="s"> = </span><b>true</b>;
 </code><code id="L2615"><span class="ln">2615</span>        };
-</code><code id="L2616"><span class="ln">2616</span>        elproto.blur<span class="s"> = </span><b>function</b> (size) {
-</code><code id="L2617"><span class="ln">2617</span>            <span class="c">// Experimental. No Safari support. Use it on your own risk.</span>
-</code><code id="L2618"><span class="ln">2618</span>            <b>var</b> t<span class="s"> = </span><b>this</b>;
-</code><code id="L2619"><span class="ln">2619</span>            <b>if</b> (+size !== <span class="d">0</span>) {
-</code><code id="L2620"><span class="ln">2620</span>                <b>var</b> fltr<span class="s"> = </span>$(<i>"filter"</i>),
-</code><code id="L2621"><span class="ln">2621</span>                    blur<span class="s"> = </span>$(<i>"feGaussianBlur"</i>);
-</code><code id="L2622"><span class="ln">2622</span>                t.attrs.blur<span class="s"> = </span>size;
-</code><code id="L2623"><span class="ln">2623</span>                fltr.id<span class="s"> = </span>createUUID();
-</code><code id="L2624"><span class="ln">2624</span>                $(blur, {stdDeviation: +size<span class="s"> || </span><span class="d">1.5</span>});
-</code><code id="L2625"><span class="ln">2625</span>                fltr.appendChild(blur);
-</code><code id="L2626"><span class="ln">2626</span>                t.paper.defs.appendChild(fltr);
-</code><code id="L2627"><span class="ln">2627</span>                t._blur<span class="s"> = </span>fltr;
-</code><code id="L2628"><span class="ln">2628</span>                $(t.node, {filter: <i>"url(#"</i><span class="s"> + </span>fltr.id<span class="s"> + </span><i>")"</i>});
-</code><code id="L2629"><span class="ln">2629</span>            } <b>else</b> {
-</code><code id="L2630"><span class="ln">2630</span>                <b>if</b> (t._blur) {
-</code><code id="L2631"><span class="ln">2631</span>                    t._blur.parentNode.removeChild(t._blur);
-</code><code id="L2632"><span class="ln">2632</span>                    <b>delete</b> t._blur;
-</code><code id="L2633"><span class="ln">2633</span>                    <b>delete</b> t.attrs.blur;
-</code><code id="L2634"><span class="ln">2634</span>                }
-</code><code id="L2635"><span class="ln">2635</span>                t.node.removeAttribute(<i>"filter"</i>);
-</code><code id="L2636"><span class="ln">2636</span>            }
-</code><code id="L2637"><span class="ln">2637</span>        };
-</code><code id="L2638"><span class="ln">2638</span>        <b>var</b> theCircle<span class="s"> = </span><b>function</b> (svg, x, y, r) {
-</code><code id="L2639"><span class="ln">2639</span>            <b>var</b> el<span class="s"> = </span>$(<i>"circle"</i>);
-</code><code id="L2640"><span class="ln">2640</span>            svg.canvas &amp;&amp; svg.canvas.appendChild(el);
-</code><code id="L2641"><span class="ln">2641</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
-</code><code id="L2642"><span class="ln">2642</span>            res.attrs<span class="s"> = </span>{cx: x, cy: y, r: r, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
-</code><code id="L2643"><span class="ln">2643</span>            res.type<span class="s"> = </span><i>"circle"</i>;
-</code><code id="L2644"><span class="ln">2644</span>            $(el, res.attrs);
-</code><code id="L2645"><span class="ln">2645</span>            <b>return</b> res;
-</code><code id="L2646"><span class="ln">2646</span>        },
-</code><code id="L2647"><span class="ln">2647</span>        theRect<span class="s"> = </span><b>function</b> (svg, x, y, w, h, r) {
-</code><code id="L2648"><span class="ln">2648</span>            <b>var</b> el<span class="s"> = </span>$(<i>"rect"</i>);
-</code><code id="L2649"><span class="ln">2649</span>            svg.canvas &amp;&amp; svg.canvas.appendChild(el);
-</code><code id="L2650"><span class="ln">2650</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
-</code><code id="L2651"><span class="ln">2651</span>            res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, r: r<span class="s"> || </span><span class="d">0</span>, rx: r<span class="s"> || </span><span class="d">0</span>, ry: r<span class="s"> || </span><span class="d">0</span>, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
-</code><code id="L2652"><span class="ln">2652</span>            res.type<span class="s"> = </span><i>"rect"</i>;
-</code><code id="L2653"><span class="ln">2653</span>            $(el, res.attrs);
-</code><code id="L2654"><span class="ln">2654</span>            <b>return</b> res;
-</code><code id="L2655"><span class="ln">2655</span>        },
-</code><code id="L2656"><span class="ln">2656</span>        theEllipse<span class="s"> = </span><b>function</b> (svg, x, y, rx, ry) {
-</code><code id="L2657"><span class="ln">2657</span>            <b>var</b> el<span class="s"> = </span>$(<i>"ellipse"</i>);
-</code><code id="L2658"><span class="ln">2658</span>            svg.canvas &amp;&amp; svg.canvas.appendChild(el);
-</code><code id="L2659"><span class="ln">2659</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
-</code><code id="L2660"><span class="ln">2660</span>            res.attrs<span class="s"> = </span>{cx: x, cy: y, rx: rx, ry: ry, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
-</code><code id="L2661"><span class="ln">2661</span>            res.type<span class="s"> = </span><i>"ellipse"</i>;
-</code><code id="L2662"><span class="ln">2662</span>            $(el, res.attrs);
-</code><code id="L2663"><span class="ln">2663</span>            <b>return</b> res;
-</code><code id="L2664"><span class="ln">2664</span>        },
-</code><code id="L2665"><span class="ln">2665</span>        theImage<span class="s"> = </span><b>function</b> (svg, src, x, y, w, h) {
-</code><code id="L2666"><span class="ln">2666</span>            <b>var</b> el<span class="s"> = </span>$(<i>"image"</i>);
-</code><code id="L2667"><span class="ln">2667</span>            $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: <i>"none"</i>});
-</code><code id="L2668"><span class="ln">2668</span>            el.setAttributeNS(xlink, <i>"href"</i>, src);
-</code><code id="L2669"><span class="ln">2669</span>            svg.canvas &amp;&amp; svg.canvas.appendChild(el);
-</code><code id="L2670"><span class="ln">2670</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
-</code><code id="L2671"><span class="ln">2671</span>            res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, src: src};
-</code><code id="L2672"><span class="ln">2672</span>            res.type<span class="s"> = </span><i>"image"</i>;
-</code><code id="L2673"><span class="ln">2673</span>            <b>return</b> res;
-</code><code id="L2674"><span class="ln">2674</span>        },
-</code><code id="L2675"><span class="ln">2675</span>        theText<span class="s"> = </span><b>function</b> (svg, x, y, text) {
-</code><code id="L2676"><span class="ln">2676</span>            <b>var</b> el<span class="s"> = </span>$(<i>"text"</i>);
-</code><code id="L2677"><span class="ln">2677</span>            $(el, {x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>});
-</code><code id="L2678"><span class="ln">2678</span>            svg.canvas &amp;&amp; svg.canvas.appendChild(el);
-</code><code id="L2679"><span class="ln">2679</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
-</code><code id="L2680"><span class="ln">2680</span>            res.attrs<span class="s"> = </span>{x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>, text: text, font: availableAttrs.font, stroke: <i>"none"</i>, fill: <i>"#<span class="d">000</span>"</i>};
-</code><code id="L2681"><span class="ln">2681</span>            res.type<span class="s"> = </span><i>"text"</i>;
-</code><code id="L2682"><span class="ln">2682</span>            setFillAndStroke(res, res.attrs);
-</code><code id="L2683"><span class="ln">2683</span>            <b>return</b> res;
-</code><code id="L2684"><span class="ln">2684</span>        },
-</code><code id="L2685"><span class="ln">2685</span>        setSize<span class="s"> = </span><b>function</b> (width, height) {
-</code><code id="L2686"><span class="ln">2686</span>            <b>this</b>.width<span class="s"> = </span>width<span class="s"> || </span><b>this</b>.width;
-</code><code id="L2687"><span class="ln">2687</span>            <b>this</b>.height<span class="s"> = </span>height<span class="s"> || </span><b>this</b>.height;
-</code><code id="L2688"><span class="ln">2688</span>            <b>this</b>.canvas[setAttribute](<i>"width"</i>, <b>this</b>.width);
-</code><code id="L2689"><span class="ln">2689</span>            <b>this</b>.canvas[setAttribute](<i>"height"</i>, <b>this</b>.height);
-</code><code id="L2690"><span class="ln">2690</span>            <b>if</b> (<b>this</b>._viewBox) {
-</code><code id="L2691"><span class="ln">2691</span>                <b>this</b>.setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
-</code><code id="L2692"><span class="ln">2692</span>            }
-</code><code id="L2693"><span class="ln">2693</span>            <b>return</b> <b>this</b>;
-</code><code id="L2694"><span class="ln">2694</span>        },
-</code><code id="L2695"><span class="ln">2695</span>        create<span class="s"> = </span><b>function</b> () {
-</code><code id="L2696"><span class="ln">2696</span>            <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
-</code><code id="L2697"><span class="ln">2697</span>                container<span class="s"> = </span>con &amp;&amp; con.container,
-</code><code id="L2698"><span class="ln">2698</span>                x<span class="s"> = </span>con.x,
-</code><code id="L2699"><span class="ln">2699</span>                y<span class="s"> = </span>con.y,
-</code><code id="L2700"><span class="ln">2700</span>                width<span class="s"> = </span>con.width,
-</code><code id="L2701"><span class="ln">2701</span>                height<span class="s"> = </span>con.height;
-</code><code id="L2702"><span class="ln">2702</span>            <b>if</b> (!container) {
-</code><code id="L2703"><span class="ln">2703</span>                <b>throw</b> <b>new</b> Error(<i>"SVG container not found."</i>);
-</code><code id="L2704"><span class="ln">2704</span>            }
-</code><code id="L2705"><span class="ln">2705</span>            <b>var</b> cnvs<span class="s"> = </span>$(<i>"svg"</i>),
-</code><code id="L2706"><span class="ln">2706</span>                css<span class="s"> = </span><i>"overflow:hidden;"</i>;
-</code><code id="L2707"><span class="ln">2707</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2708"><span class="ln">2708</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2709"><span class="ln">2709</span>            width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
-</code><code id="L2710"><span class="ln">2710</span>            height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
-</code><code id="L2711"><span class="ln">2711</span>            $(cnvs, {
-</code><code id="L2712"><span class="ln">2712</span>                height: height,
-</code><code id="L2713"><span class="ln">2713</span>                version: <span class="d">1.1</span>,
-</code><code id="L2714"><span class="ln">2714</span>                width: width,
-</code><code id="L2715"><span class="ln">2715</span>                xmlns: <i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i></span>
-</code><code id="L2716"><span class="ln">2716</span>            });
-</code><code id="L2717"><span class="ln">2717</span>            <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
-</code><code id="L2718"><span class="ln">2718</span>                cnvs.style.cssText<span class="s"> = </span>css<span class="s"> + </span><i>"position:absolute;left:"</i><span class="s"> + </span>x<span class="s"> + </span><i>"px;top:"</i><span class="s"> + </span>y<span class="s"> + </span><i>"px"</i>;
-</code><code id="L2719"><span class="ln">2719</span>                g.doc.body.appendChild(cnvs);
-</code><code id="L2720"><span class="ln">2720</span>            } <b>else</b> {
-</code><code id="L2721"><span class="ln">2721</span>                cnvs.style.cssText<span class="s"> = </span>css;
-</code><code id="L2722"><span class="ln">2722</span>                <b>if</b> (container.firstChild) {
-</code><code id="L2723"><span class="ln">2723</span>                    container.insertBefore(cnvs, container.firstChild);
-</code><code id="L2724"><span class="ln">2724</span>                } <b>else</b> {
-</code><code id="L2725"><span class="ln">2725</span>                    container.appendChild(cnvs);
-</code><code id="L2726"><span class="ln">2726</span>                }
-</code><code id="L2727"><span class="ln">2727</span>            }
-</code><code id="L2728"><span class="ln">2728</span>            container<span class="s"> = </span><b>new</b> Paper;
-</code><code id="L2729"><span class="ln">2729</span>            container.width<span class="s"> = </span>width;
-</code><code id="L2730"><span class="ln">2730</span>            container.height<span class="s"> = </span>height;
-</code><code id="L2731"><span class="ln">2731</span>            container.canvas<span class="s"> = </span>cnvs;
-</code><code id="L2732"><span class="ln">2732</span>            plugins.call(container, container, R.fn);
-</code><code id="L2733"><span class="ln">2733</span>            container.clear();
-</code><code id="L2734"><span class="ln">2734</span>            <b>return</b> container;
-</code><code id="L2735"><span class="ln">2735</span>        },
-</code><code id="L2736"><span class="ln">2736</span>        setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
-</code><code id="L2737"><span class="ln">2737</span>            eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
-</code><code id="L2738"><span class="ln">2738</span>            <b>var</b> size<span class="s"> = </span>mmax(w<span class="s"> / </span><b>this</b>.width, h<span class="s"> / </span><b>this</b>.height),
-</code><code id="L2739"><span class="ln">2739</span>                top<span class="s"> = </span><b>this</b>.top,
-</code><code id="L2740"><span class="ln">2740</span>                aspectRatio<span class="s"> = </span>fit ? <i>"meet"</i> : <i>"xMinYMin"</i>,
-</code><code id="L2741"><span class="ln">2741</span>                vb,
-</code><code id="L2742"><span class="ln">2742</span>                sw;
-</code><code id="L2743"><span class="ln">2743</span>            <b>if</b> (x<span class="s"> == </span><b>null</b>) {
-</code><code id="L2744"><span class="ln">2744</span>                <b>if</b> (<b>this</b>._vbSize) {
-</code><code id="L2745"><span class="ln">2745</span>                    size<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2746"><span class="ln">2746</span>                }
-</code><code id="L2747"><span class="ln">2747</span>                <b>delete</b> <b>this</b>._vbSize;
-</code><code id="L2748"><span class="ln">2748</span>                vb<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span> "</i><span class="s"> + </span><b>this</b>.width<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.height;
-</code><code id="L2749"><span class="ln">2749</span>            } <b>else</b> {
-</code><code id="L2750"><span class="ln">2750</span>                <b>this</b>._vbSize<span class="s"> = </span>size;
-</code><code id="L2751"><span class="ln">2751</span>                vb<span class="s"> = </span>x<span class="s"> + </span>S<span class="s"> + </span>y<span class="s"> + </span>S<span class="s"> + </span>w<span class="s"> + </span>S<span class="s"> + </span>h;
-</code><code id="L2752"><span class="ln">2752</span>            }
-</code><code id="L2753"><span class="ln">2753</span>            $(<b>this</b>.canvas, {
-</code><code id="L2754"><span class="ln">2754</span>                viewBox: vb,
-</code><code id="L2755"><span class="ln">2755</span>                preserveAspectRatio: aspectRatio
-</code><code id="L2756"><span class="ln">2756</span>            });
-</code><code id="L2757"><span class="ln">2757</span>            <b>while</b> (size &amp;&amp; top) {
-</code><code id="L2758"><span class="ln">2758</span>                sw<span class="s"> = </span><i>"stroke-width"</i> <b>in</b> top.attrs ? top.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
-</code><code id="L2759"><span class="ln">2759</span>                top.attr({<i>"stroke-width"</i>: sw});
-</code><code id="L2760"><span class="ln">2760</span>                top._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2761"><span class="ln">2761</span>                top._.dirtyT<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2762"><span class="ln">2762</span>                top<span class="s"> = </span>top.prev;
-</code><code id="L2763"><span class="ln">2763</span>            }
-</code><code id="L2764"><span class="ln">2764</span>            <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
-</code><code id="L2765"><span class="ln">2765</span>            <b>return</b> <b>this</b>;
-</code><code id="L2766"><span class="ln">2766</span>        };
-</code><code id="L2767"><span class="ln">2767</span>        paperproto.clear<span class="s"> = </span><b>function</b> () {
-</code><code id="L2768"><span class="ln">2768</span>            eve(<i>"clear"</i>, <b>this</b>);
-</code><code id="L2769"><span class="ln">2769</span>            <b>var</b> c<span class="s"> = </span><b>this</b>.canvas;
-</code><code id="L2770"><span class="ln">2770</span>            <b>while</b> (c.firstChild) {
-</code><code id="L2771"><span class="ln">2771</span>                c.removeChild(c.firstChild);
-</code><code id="L2772"><span class="ln">2772</span>            }
-</code><code id="L2773"><span class="ln">2773</span>            <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
-</code><code id="L2774"><span class="ln">2774</span>            (<b>this</b>.desc<span class="s"> = </span>$(<i>"desc"</i>)).appendChild(g.doc.createTextNode(<i>"Created <b>with</b> Rapha\xebl "</i><span class="s"> + </span>R.version));
-</code><code id="L2775"><span class="ln">2775</span>            c.appendChild(<b>this</b>.desc);
-</code><code id="L2776"><span class="ln">2776</span>            c.appendChild(<b>this</b>.defs<span class="s"> = </span>$(<i>"defs"</i>));
-</code><code id="L2777"><span class="ln">2777</span>        };
-</code><code id="L2778"><span class="ln">2778</span>        paperproto.remove<span class="s"> = </span><b>function</b> () {
-</code><code id="L2779"><span class="ln">2779</span>            eve(<i>"remove"</i>, <b>this</b>);
-</code><code id="L2780"><span class="ln">2780</span>            <b>this</b>.canvas.parentNode &amp;&amp; <b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
-</code><code id="L2781"><span class="ln">2781</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
-</code><code id="L2782"><span class="ln">2782</span>                <b>this</b>[i]<span class="s"> = </span>removed(i);
-</code><code id="L2783"><span class="ln">2783</span>            }
-</code><code id="L2784"><span class="ln">2784</span>        };
-</code><code id="L2785"><span class="ln">2785</span>    }
-</code><code id="L2786"><span class="ln">2786</span>
-</code><code id="L2787"><span class="ln">2787</span>    <span class="c">// VML</span>
-</code><code id="L2788"><span class="ln">2788</span>    <b>if</b> (R.vml) {
-</code><code id="L2789"><span class="ln">2789</span>        <b>var</b> map<span class="s"> = </span>{M: <i>"m"</i>, L: <i>"l"</i>, C: <i>"c"</i>, Z: <i>"x"</i>, m: <i>"t"</i>, l: <i>"r"</i>, c: <i>"v"</i>, z: <i>"x"</i>},
-</code><code id="L2790"><span class="ln">2790</span>            bites<span class="s"> = </span>/([clmz]),?([^clmz]*)/gi,
-</code><code id="L2791"><span class="ln">2791</span>            blurregexp<span class="s"> = </span>/ progid:\S+Blur\([^\)]+\)/g,
-</code><code id="L2792"><span class="ln">2792</span>            val<span class="s"> = </span>/-?[^,\s-]+/g,
-</code><code id="L2793"><span class="ln">2793</span>            cssDot<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:1px;height:1px"</i>,
-</code><code id="L2794"><span class="ln">2794</span>            zoom<span class="s"> = </span><span class="d">21600</span>,
-</code><code id="L2795"><span class="ln">2795</span>            pathTypes<span class="s"> = </span>{path: <span class="d">1</span>, rect: <span class="d">1</span>},
-</code><code id="L2796"><span class="ln">2796</span>            ovalTypes<span class="s"> = </span>{circle: <span class="d">1</span>, ellipse: <span class="d">1</span>},
-</code><code id="L2797"><span class="ln">2797</span>            path2vml<span class="s"> = </span><b>function</b> (path) {
-</code><code id="L2798"><span class="ln">2798</span>                <b>var</b> total<span class="s"> = </span> /[ahqstv]/ig,
-</code><code id="L2799"><span class="ln">2799</span>                    command<span class="s"> = </span>pathToAbsolute;
-</code><code id="L2800"><span class="ln">2800</span>                Str(path).match(total) &amp;&amp; (command<span class="s"> = </span>path2curve);
-</code><code id="L2801"><span class="ln">2801</span>                total<span class="s"> = </span>/[clmz]/g;
-</code><code id="L2802"><span class="ln">2802</span>                <b>if</b> (command<span class="s"> == </span>pathToAbsolute &amp;&amp; !Str(path).match(total)) {
-</code><code id="L2803"><span class="ln">2803</span>                    <b>var</b> res<span class="s"> = </span>Str(path).replace(bites, <b>function</b> (all, command, args) {
-</code><code id="L2804"><span class="ln">2804</span>                        <b>var</b> vals<span class="s"> = </span>[],
-</code><code id="L2805"><span class="ln">2805</span>                            isMove<span class="s"> = </span>lowerCase.call(command)<span class="s"> == </span><i>"m"</i>,
-</code><code id="L2806"><span class="ln">2806</span>                            res<span class="s"> = </span>map[command];
-</code><code id="L2807"><span class="ln">2807</span>                        args.replace(val, <b>function</b> (value) {
-</code><code id="L2808"><span class="ln">2808</span>                            <b>if</b> (isMove &amp;&amp; vals.length<span class="s"> == </span><span class="d">2</span>) {
-</code><code id="L2809"><span class="ln">2809</span>                                res += vals<span class="s"> + </span>map[command<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>];
-</code><code id="L2810"><span class="ln">2810</span>                                vals<span class="s"> = </span>[];
-</code><code id="L2811"><span class="ln">2811</span>                            }
-</code><code id="L2812"><span class="ln">2812</span>                            vals.push(round(value<span class="s"> * </span>zoom));
-</code><code id="L2813"><span class="ln">2813</span>                        });
-</code><code id="L2814"><span class="ln">2814</span>                        <b>return</b> res<span class="s"> + </span>vals;
-</code><code id="L2815"><span class="ln">2815</span>                    });
-</code><code id="L2816"><span class="ln">2816</span>                    <b>return</b> res;
-</code><code id="L2817"><span class="ln">2817</span>                }
-</code><code id="L2818"><span class="ln">2818</span>                <b>var</b> pa<span class="s"> = </span>command(path), p, r;
-</code><code id="L2819"><span class="ln">2819</span>                res<span class="s"> = </span>[];
-</code><code id="L2820"><span class="ln">2820</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pa.length; i &lt; ii; i++) {
-</code><code id="L2821"><span class="ln">2821</span>                    p<span class="s"> = </span>pa[i];
-</code><code id="L2822"><span class="ln">2822</span>                    r<span class="s"> = </span>lowerCase.call(pa[i][<span class="d">0</span>]);
-</code><code id="L2823"><span class="ln">2823</span>                    r<span class="s"> == </span><i>"z"</i> &amp;&amp; (r<span class="s"> = </span><i>"x"</i>);
-</code><code id="L2824"><span class="ln">2824</span>                    <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>p.length; j &lt; jj; j++) {
-</code><code id="L2825"><span class="ln">2825</span>                        r += round(p[j]<span class="s"> * </span>zoom)<span class="s"> + </span>(j != jj<span class="s"> - </span><span class="d">1</span> ? <i>","</i> : E);
-</code><code id="L2826"><span class="ln">2826</span>                    }
-</code><code id="L2827"><span class="ln">2827</span>                    res.push(r);
-</code><code id="L2828"><span class="ln">2828</span>                }
-</code><code id="L2829"><span class="ln">2829</span>                <b>return</b> res.join(S);
-</code><code id="L2830"><span class="ln">2830</span>            },
-</code><code id="L2831"><span class="ln">2831</span>            compensation<span class="s"> = </span><b>function</b> (deg, dx, dy) {
-</code><code id="L2832"><span class="ln">2832</span>                <b>var</b> m<span class="s"> = </span><b>new</b> Matrix;
-</code><code id="L2833"><span class="ln">2833</span>                m.rotate(-deg, <span class="d">.5</span>, <span class="d">.5</span>);
-</code><code id="L2834"><span class="ln">2834</span>                <b>return</b> {
-</code><code id="L2835"><span class="ln">2835</span>                    dx: m.x(dx, dy),
-</code><code id="L2836"><span class="ln">2836</span>                    dy: m.y(dx, dy)
-</code><code id="L2837"><span class="ln">2837</span>                };
-</code><code id="L2838"><span class="ln">2838</span>            },
-</code><code id="L2839"><span class="ln">2839</span>            setCoords<span class="s"> = </span><b>function</b> (p) {
-</code><code id="L2840"><span class="ln">2840</span>                <b>var</b> _<span class="s"> = </span>p._,
-</code><code id="L2841"><span class="ln">2841</span>                    sx<span class="s"> = </span>_.sx,
-</code><code id="L2842"><span class="ln">2842</span>                    sy<span class="s"> = </span>_.sy,
-</code><code id="L2843"><span class="ln">2843</span>                    deg<span class="s"> = </span>_.deg,
-</code><code id="L2844"><span class="ln">2844</span>                    dx<span class="s"> = </span>_.dx,
-</code><code id="L2845"><span class="ln">2845</span>                    dy<span class="s"> = </span>_.dy,
-</code><code id="L2846"><span class="ln">2846</span>                    fillpos<span class="s"> = </span>_.fillpos,
-</code><code id="L2847"><span class="ln">2847</span>                    o<span class="s"> = </span>p.node,
-</code><code id="L2848"><span class="ln">2848</span>                    s<span class="s"> = </span>o.style,
-</code><code id="L2849"><span class="ln">2849</span>                    y<span class="s"> = </span><span class="d">1</span>,
-</code><code id="L2850"><span class="ln">2850</span>                    m<span class="s"> = </span>p.matrix,
-</code><code id="L2851"><span class="ln">2851</span>                    flip<span class="s"> = </span><i>""</i>,
-</code><code id="L2852"><span class="ln">2852</span>                    dxdy,
-</code><code id="L2853"><span class="ln">2853</span>                    kx<span class="s"> = </span>zoom<span class="s"> / </span>sx,
-</code><code id="L2854"><span class="ln">2854</span>                    ky<span class="s"> = </span>zoom<span class="s"> / </span>sy;
-</code><code id="L2855"><span class="ln">2855</span>                s.visibility<span class="s"> = </span><i>"hidden"</i>;
-</code><code id="L2856"><span class="ln">2856</span>                o.coordsize<span class="s"> = </span>abs(kx)<span class="s"> + </span>S<span class="s"> + </span>abs(ky);
-</code><code id="L2857"><span class="ln">2857</span>                s.rotation<span class="s"> = </span>deg<span class="s"> * </span>(sx<span class="s"> * </span>sy &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>);
-</code><code id="L2858"><span class="ln">2858</span>                <b>if</b> (deg) {
-</code><code id="L2859"><span class="ln">2859</span>                    <b>var</b> c<span class="s"> = </span>compensation(deg, dx, dy);
-</code><code id="L2860"><span class="ln">2860</span>                    dx<span class="s"> = </span>c.dx;
-</code><code id="L2861"><span class="ln">2861</span>                    dy<span class="s"> = </span>c.dy;
-</code><code id="L2862"><span class="ln">2862</span>                }
-</code><code id="L2863"><span class="ln">2863</span>                sx &lt; <span class="d">0</span> &amp;&amp; (flip += <i>"x"</i>);
-</code><code id="L2864"><span class="ln">2864</span>                sy &lt; <span class="d">0</span> &amp;&amp; (flip += <i>" y"</i>) &amp;&amp; (y<span class="s"> = </span>-<span class="d">1</span>);
-</code><code id="L2865"><span class="ln">2865</span>                s.flip<span class="s"> = </span>flip;
-</code><code id="L2866"><span class="ln">2866</span>                o.coordorigin<span class="s"> = </span>(dx<span class="s"> * </span>-kx)<span class="s"> + </span>S<span class="s"> + </span>(dy<span class="s"> * </span>-ky);
-</code><code id="L2867"><span class="ln">2867</span>                <b>if</b> (fillpos<span class="s"> || </span>_.fillsize) {
-</code><code id="L2868"><span class="ln">2868</span>                    <b>var</b> fill<span class="s"> = </span>o.getElementsByTagName(fillString);
-</code><code id="L2869"><span class="ln">2869</span>                    fill<span class="s"> = </span>fill &amp;&amp; fill[<span class="d">0</span>];
-</code><code id="L2870"><span class="ln">2870</span>                    o.removeChild(fill);
-</code><code id="L2871"><span class="ln">2871</span>                    <b>if</b> (fillpos) {
-</code><code id="L2872"><span class="ln">2872</span>                        c<span class="s"> = </span>compensation(deg, m.x(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]), m.y(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]));
-</code><code id="L2873"><span class="ln">2873</span>                        fill.position<span class="s"> = </span>c.dx<span class="s"> * </span>y<span class="s"> + </span>S<span class="s"> + </span>c.dy<span class="s"> * </span>y;
-</code><code id="L2874"><span class="ln">2874</span>                    }
-</code><code id="L2875"><span class="ln">2875</span>                    <b>if</b> (_.fillsize) {
-</code><code id="L2876"><span class="ln">2876</span>                        fill.size<span class="s"> = </span>_.fillsize[<span class="d">0</span>]<span class="s"> * </span>abs(sx)<span class="s"> + </span>S<span class="s"> + </span>_.fillsize[<span class="d">1</span>]<span class="s"> * </span>abs(sy);
-</code><code id="L2877"><span class="ln">2877</span>                    }
-</code><code id="L2878"><span class="ln">2878</span>                    o.appendChild(fill);
-</code><code id="L2879"><span class="ln">2879</span>                }
-</code><code id="L2880"><span class="ln">2880</span>                s.visibility<span class="s"> = </span><i>"visible"</i>;
-</code><code id="L2881"><span class="ln">2881</span>            };
-</code><code id="L2882"><span class="ln">2882</span>        R.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L2883"><span class="ln">2883</span>            <b>return</b>  <i>"Your browser doesn\u2019t support SVG. Falling down to VML.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
-</code><code id="L2884"><span class="ln">2884</span>        };
-</code><code id="L2885"><span class="ln">2885</span>        addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
-</code><code id="L2886"><span class="ln">2886</span>            <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
-</code><code id="L2887"><span class="ln">2887</span>                se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
-</code><code id="L2888"><span class="ln">2888</span>                i<span class="s"> = </span>values.length,
-</code><code id="L2889"><span class="ln">2889</span>                type<span class="s"> = </span><i>"classic"</i>,
-</code><code id="L2890"><span class="ln">2890</span>                w<span class="s"> = </span><i>"medium"</i>,
-</code><code id="L2891"><span class="ln">2891</span>                h<span class="s"> = </span><i>"medium"</i>;
-</code><code id="L2892"><span class="ln">2892</span>            <b>while</b> (i--) {
-</code><code id="L2893"><span class="ln">2893</span>                <b>switch</b> (values[i]) {
-</code><code id="L2894"><span class="ln">2894</span>                    <b>case</b> <i>"block"</i>:
-</code><code id="L2895"><span class="ln">2895</span>                    <b>case</b> <i>"classic"</i>:
-</code><code id="L2896"><span class="ln">2896</span>                    <b>case</b> <i>"oval"</i>:
-</code><code id="L2897"><span class="ln">2897</span>                    <b>case</b> <i>"diamond"</i>:
-</code><code id="L2898"><span class="ln">2898</span>                    <b>case</b> <i>"open"</i>:
-</code><code id="L2899"><span class="ln">2899</span>                    <b>case</b> <i>"none"</i>:
-</code><code id="L2900"><span class="ln">2900</span>                        type<span class="s"> = </span>values[i];
-</code><code id="L2901"><span class="ln">2901</span>                        <b>break</b>;
-</code><code id="L2902"><span class="ln">2902</span>                    <b>case</b> <i>"wide"</i>:
-</code><code id="L2903"><span class="ln">2903</span>                    <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span>values[i]; <b>break</b>;
-</code><code id="L2904"><span class="ln">2904</span>                    <b>case</b> <i>"<b>long</b>"</i>:
-</code><code id="L2905"><span class="ln">2905</span>                    <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span>values[i]; <b>break</b>;
-</code><code id="L2906"><span class="ln">2906</span>                }
-</code><code id="L2907"><span class="ln">2907</span>            }
-</code><code id="L2908"><span class="ln">2908</span>            <b>var</b> stroke<span class="s"> = </span>o.node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>];
-</code><code id="L2909"><span class="ln">2909</span>            stroke[se<span class="s"> + </span><i>"arrow"</i>]<span class="s"> = </span>type;
-</code><code id="L2910"><span class="ln">2910</span>            stroke[se<span class="s"> + </span><i>"arrowlength"</i>]<span class="s"> = </span>w;
-</code><code id="L2911"><span class="ln">2911</span>            stroke[se<span class="s"> + </span><i>"arrowwidth"</i>]<span class="s"> = </span>h;
-</code><code id="L2912"><span class="ln">2912</span>        };
-</code><code id="L2913"><span class="ln">2913</span>        setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
-</code><code id="L2914"><span class="ln">2914</span>            o.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
-</code><code id="L2915"><span class="ln">2915</span>            o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
-</code><code id="L2916"><span class="ln">2916</span>            <b>var</b> node<span class="s"> = </span>o.node,
-</code><code id="L2917"><span class="ln">2917</span>                a<span class="s"> = </span>o.attrs,
-</code><code id="L2918"><span class="ln">2918</span>                s<span class="s"> = </span>node.style,
-</code><code id="L2919"><span class="ln">2919</span>                xy,
-</code><code id="L2920"><span class="ln">2920</span>                newpath<span class="s"> = </span>pathTypes[o.type] &amp;&amp; (params.x != a.x<span class="s"> || </span>params.y != a.y<span class="s"> || </span>params.width != a.width<span class="s"> || </span>params.height != a.height<span class="s"> || </span>params.cx != a.cx<span class="s"> || </span>params.cy != a.cy<span class="s"> || </span>params.rx != a.rx<span class="s"> || </span>params.ry != a.ry<span class="s"> || </span>params.r != a.r),
-</code><code id="L2921"><span class="ln">2921</span>                isOval<span class="s"> = </span>ovalTypes[o.type] &amp;&amp; (a.cx != params.cx<span class="s"> || </span>a.cy != params.cy<span class="s"> || </span>a.r != params.r<span class="s"> || </span>a.rx != params.rx<span class="s"> || </span>a.ry != params.ry),
-</code><code id="L2922"><span class="ln">2922</span>                res<span class="s"> = </span>o;
-</code><code id="L2923"><span class="ln">2923</span>
-</code><code id="L2924"><span class="ln">2924</span>
-</code><code id="L2925"><span class="ln">2925</span>            <b>for</b> (<b>var</b> par <b>in</b> params) <b>if</b> (params[has](par)) {
-</code><code id="L2926"><span class="ln">2926</span>                a[par]<span class="s"> = </span>params[par];
-</code><code id="L2927"><span class="ln">2927</span>            }
-</code><code id="L2928"><span class="ln">2928</span>            <b>if</b> (newpath) {
-</code><code id="L2929"><span class="ln">2929</span>                a.path<span class="s"> = </span>getPath[o.type](o);
-</code><code id="L2930"><span class="ln">2930</span>                o._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L2931"><span class="ln">2931</span>            }
-</code><code id="L2932"><span class="ln">2932</span>            params.href &amp;&amp; (node.href<span class="s"> = </span>params.href);
-</code><code id="L2933"><span class="ln">2933</span>            params.title &amp;&amp; (node.title<span class="s"> = </span>params.title);
-</code><code id="L2934"><span class="ln">2934</span>            params.target &amp;&amp; (node.target<span class="s"> = </span>params.target);
-</code><code id="L2935"><span class="ln">2935</span>            params.cursor &amp;&amp; (s.cursor<span class="s"> = </span>params.cursor);
-</code><code id="L2936"><span class="ln">2936</span>            <i>"blur"</i> <b>in</b> params &amp;&amp; o.blur(params.blur);
-</code><code id="L2937"><span class="ln">2937</span>            <i>"transform"</i> <b>in</b> params &amp;&amp; o.transform(params.transform);
-</code><code id="L2938"><span class="ln">2938</span>            <b>if</b> (params.path &amp;&amp; o.type<span class="s"> == </span><i>"path"</i><span class="s"> || </span>newpath) {
-</code><code id="L2939"><span class="ln">2939</span>                node.path<span class="s"> = </span>path2vml(a.path);
-</code><code id="L2940"><span class="ln">2940</span>            }
-</code><code id="L2941"><span class="ln">2941</span>            <b>if</b> (isOval) {
-</code><code id="L2942"><span class="ln">2942</span>                <b>var</b> cx<span class="s"> = </span>a.cx,
-</code><code id="L2943"><span class="ln">2943</span>                    cy<span class="s"> = </span>a.cy,
-</code><code id="L2944"><span class="ln">2944</span>                    rx<span class="s"> = </span>a.rx<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L2945"><span class="ln">2945</span>                    ry<span class="s"> = </span>a.ry<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L2946"><span class="ln">2946</span>                node.path<span class="s"> = </span>R.format(<i>"ar{<span class="d">0</span>},{<span class="d">1</span>},{<span class="d">2</span>},{<span class="d">3</span>},{<span class="d">4</span>},{<span class="d">1</span>},{<span class="d">4</span>},{<span class="d">1</span>}x"</i>, round((cx<span class="s"> - </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> - </span>ry)<span class="s"> * </span>zoom), round((cx<span class="s"> + </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> + </span>ry)<span class="s"> * </span>zoom), round(cx<span class="s"> * </span>zoom));
-</code><code id="L2947"><span class="ln">2947</span>            }
-</code><code id="L2948"><span class="ln">2948</span>            <b>if</b> (<i>"clip-rect"</i> <b>in</b> params) {
-</code><code id="L2949"><span class="ln">2949</span>                <b>var</b> rect<span class="s"> = </span>Str(params[<i>"clip-rect"</i>]).split(separator);
-</code><code id="L2950"><span class="ln">2950</span>                <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
-</code><code id="L2951"><span class="ln">2951</span>                    rect[<span class="d">2</span>]<span class="s"> = </span>+rect[<span class="d">2</span>]<span class="s"> + </span>(+rect[<span class="d">0</span>]);
-</code><code id="L2952"><span class="ln">2952</span>                    rect[<span class="d">3</span>]<span class="s"> = </span>+rect[<span class="d">3</span>]<span class="s"> + </span>(+rect[<span class="d">1</span>]);
-</code><code id="L2953"><span class="ln">2953</span>                    <b>var</b> div<span class="s"> = </span>node.clipRect<span class="s"> || </span>g.doc.createElement(<i>"div"</i>),
-</code><code id="L2954"><span class="ln">2954</span>                        dstyle<span class="s"> = </span>div.style,
-</code><code id="L2955"><span class="ln">2955</span>                        group<span class="s"> = </span>node.parentNode;
-</code><code id="L2956"><span class="ln">2956</span>                    dstyle.clip<span class="s"> = </span>R.format(<i>"rect({<span class="d">1</span>}px {<span class="d">2</span>}px {<span class="d">3</span>}px {<span class="d">0</span>}px)"</i>, rect);
-</code><code id="L2957"><span class="ln">2957</span>                    <b>if</b> (!node.clipRect) {
-</code><code id="L2958"><span class="ln">2958</span>                        dstyle.position<span class="s"> = </span><i>"absolute"</i>;
-</code><code id="L2959"><span class="ln">2959</span>                        dstyle.top<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L2960"><span class="ln">2960</span>                        dstyle.left<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L2961"><span class="ln">2961</span>                        dstyle.width<span class="s"> = </span>o.paper.width<span class="s"> + </span><i>"px"</i>;
-</code><code id="L2962"><span class="ln">2962</span>                        dstyle.height<span class="s"> = </span>o.paper.height<span class="s"> + </span><i>"px"</i>;
-</code><code id="L2963"><span class="ln">2963</span>                        group.parentNode.insertBefore(div, group);
-</code><code id="L2964"><span class="ln">2964</span>                        div.appendChild(group);
-</code><code id="L2965"><span class="ln">2965</span>                        node.clipRect<span class="s"> = </span>div;
-</code><code id="L2966"><span class="ln">2966</span>                    }
-</code><code id="L2967"><span class="ln">2967</span>                }
-</code><code id="L2968"><span class="ln">2968</span>                <b>if</b> (!params[<i>"clip-rect"</i>]) {
-</code><code id="L2969"><span class="ln">2969</span>                    node.clipRect &amp;&amp; (node.clipRect.style.clip<span class="s"> = </span>E);
-</code><code id="L2970"><span class="ln">2970</span>                }
-</code><code id="L2971"><span class="ln">2971</span>            }
-</code><code id="L2972"><span class="ln">2972</span>            <b>if</b> (o.textpath) {
-</code><code id="L2973"><span class="ln">2973</span>                <b>var</b> textpathStyle<span class="s"> = </span>o.textpath.style;
-</code><code id="L2974"><span class="ln">2974</span>                params.font &amp;&amp; (textpathStyle.font<span class="s"> = </span>params.font);
-</code><code id="L2975"><span class="ln">2975</span>                params[<i>"font-family"</i>] &amp;&amp; (textpathStyle.fontFamily<span class="s"> = </span>'<i>"'<span class="s"> + </span>params["</i>font-family<i>"].split("</i>,<i>")[<span class="d">0</span>].replace(/^['"</i>]+|['<i>"]+$/g, E)<span class="s"> + </span>'"</i>');
-</code><code id="L2976"><span class="ln">2976</span>                params[<i>"font-size"</i>] &amp;&amp; (textpathStyle.fontSize<span class="s"> = </span>params[<i>"font-size"</i>]);
-</code><code id="L2977"><span class="ln">2977</span>                params[<i>"font-weight"</i>] &amp;&amp; (textpathStyle.fontWeight<span class="s"> = </span>params[<i>"font-weight"</i>]);
-</code><code id="L2978"><span class="ln">2978</span>                params[<i>"font-style"</i>] &amp;&amp; (textpathStyle.fontStyle<span class="s"> = </span>params[<i>"font-style"</i>]);
-</code><code id="L2979"><span class="ln">2979</span>            }
-</code><code id="L2980"><span class="ln">2980</span>            <b>if</b> (<i>"arrow-start"</i> <b>in</b> params) {
-</code><code id="L2981"><span class="ln">2981</span>                addArrow(res, params[<i>"arrow-start"</i>]);
-</code><code id="L2982"><span class="ln">2982</span>            }
-</code><code id="L2983"><span class="ln">2983</span>            <b>if</b> (<i>"arrow-end"</i> <b>in</b> params) {
-</code><code id="L2984"><span class="ln">2984</span>                addArrow(res, params[<i>"arrow-end"</i>], <span class="d">1</span>);
-</code><code id="L2985"><span class="ln">2985</span>            }
-</code><code id="L2986"><span class="ln">2986</span>            <b>if</b> (params.opacity != <b>null</b><span class="s"> || </span>
-</code><code id="L2987"><span class="ln">2987</span>                params[<i>"stroke-width"</i>] != <b>null</b> ||
-</code><code id="L2988"><span class="ln">2988</span>                params.fill != <b>null</b> ||
-</code><code id="L2989"><span class="ln">2989</span>                params.src != <b>null</b> ||
-</code><code id="L2990"><span class="ln">2990</span>                params.stroke != <b>null</b> ||
-</code><code id="L2991"><span class="ln">2991</span>                params[<i>"stroke-width"</i>] != <b>null</b> ||
-</code><code id="L2992"><span class="ln">2992</span>                params[<i>"stroke-opacity"</i>] != <b>null</b> ||
-</code><code id="L2993"><span class="ln">2993</span>                params[<i>"fill-opacity"</i>] != <b>null</b> ||
-</code><code id="L2994"><span class="ln">2994</span>                params[<i>"stroke-dasharray"</i>] != <b>null</b> ||
-</code><code id="L2995"><span class="ln">2995</span>                params[<i>"stroke-miterlimit"</i>] != <b>null</b> ||
-</code><code id="L2996"><span class="ln">2996</span>                params[<i>"stroke-linejoin"</i>] != <b>null</b> ||
-</code><code id="L2997"><span class="ln">2997</span>                params[<i>"stroke-linecap"</i>] != <b>null</b>) {
-</code><code id="L2998"><span class="ln">2998</span>                <b>var</b> fill<span class="s"> = </span>node.getElementsByTagName(fillString),
-</code><code id="L2999"><span class="ln">2999</span>                    newfill<span class="s"> = </span><b>false</b>;
-</code><code id="L3000"><span class="ln">3000</span>                fill<span class="s"> = </span>fill &amp;&amp; fill[<span class="d">0</span>];
-</code><code id="L3001"><span class="ln">3001</span>                !fill &amp;&amp; (newfill<span class="s"> = </span>fill<span class="s"> = </span>createNode(fillString));
-</code><code id="L3002"><span class="ln">3002</span>                <b>if</b> (o.type<span class="s"> == </span><i>"image"</i> &amp;&amp; params.src) {
-</code><code id="L3003"><span class="ln">3003</span>                    fill.src<span class="s"> = </span>params.src;
-</code><code id="L3004"><span class="ln">3004</span>                }
-</code><code id="L3005"><span class="ln">3005</span>                <b>if</b> (<i>"fill-opacity"</i> <b>in</b> params<span class="s"> || </span><i>"opacity"</i> <b>in</b> params) {
-</code><code id="L3006"><span class="ln">3006</span>                    <b>var</b> opacity<span class="s"> = </span>((+a[<i>"fill-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+R.getRGB(params.fill).o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
-</code><code id="L3007"><span class="ln">3007</span>                    opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
-</code><code id="L3008"><span class="ln">3008</span>                    fill.opacity<span class="s"> = </span>opacity;
-</code><code id="L3009"><span class="ln">3009</span>                }
-</code><code id="L3010"><span class="ln">3010</span>                params.fill &amp;&amp; (fill.on<span class="s"> = </span><b>true</b>);
-</code><code id="L3011"><span class="ln">3011</span>                <b>if</b> (fill.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.fill<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.fill<span class="s"> === </span><b>null</b>) {
-</code><code id="L3012"><span class="ln">3012</span>                    fill.on<span class="s"> = </span><b>false</b>;
-</code><code id="L3013"><span class="ln">3013</span>                }
-</code><code id="L3014"><span class="ln">3014</span>                <b>if</b> (fill.on &amp;&amp; params.fill) {
-</code><code id="L3015"><span class="ln">3015</span>                    <b>var</b> isURL<span class="s"> = </span>params.fill.match(ISURL);
-</code><code id="L3016"><span class="ln">3016</span>                    <b>if</b> (isURL) {
-</code><code id="L3017"><span class="ln">3017</span>                        fill.parentNode<span class="s"> == </span>node &amp;&amp; node.removeChild(fill);
-</code><code id="L3018"><span class="ln">3018</span>                        fill.rotate<span class="s"> = </span><b>true</b>;
-</code><code id="L3019"><span class="ln">3019</span>                        fill.src<span class="s"> = </span>isURL[<span class="d">1</span>];
-</code><code id="L3020"><span class="ln">3020</span>                        fill.type<span class="s"> = </span><i>"tile"</i>;
-</code><code id="L3021"><span class="ln">3021</span>                        <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
-</code><code id="L3022"><span class="ln">3022</span>                        fill.position<span class="s"> = </span>bbox.x<span class="s"> + </span>S<span class="s"> + </span>bbox.y;
-</code><code id="L3023"><span class="ln">3023</span>                        o._.fillpos<span class="s"> = </span>[bbox.x, bbox.y];
-</code><code id="L3024"><span class="ln">3024</span>
-</code><code id="L3025"><span class="ln">3025</span>                        preload(isURL[<span class="d">1</span>], <b>function</b> () {
-</code><code id="L3026"><span class="ln">3026</span>                            o._.fillsize<span class="s"> = </span>[<b>this</b>.offsetWidth, <b>this</b>.offsetHeight];
-</code><code id="L3027"><span class="ln">3027</span>                        });
-</code><code id="L3028"><span class="ln">3028</span>                    } <b>else</b> {
-</code><code id="L3029"><span class="ln">3029</span>                        fill.color<span class="s"> = </span>R.getRGB(params.fill).hex;
-</code><code id="L3030"><span class="ln">3030</span>                        fill.src<span class="s"> = </span>E;
-</code><code id="L3031"><span class="ln">3031</span>                        fill.type<span class="s"> = </span><i>"solid"</i>;
-</code><code id="L3032"><span class="ln">3032</span>                        <b>if</b> (R.getRGB(params.fill).error &amp;&amp; (res.type <b>in</b> {circle: <span class="d">1</span>, ellipse: <span class="d">1</span>}<span class="s"> || </span>Str(params.fill).charAt() != <i>"r"</i>) &amp;&amp; addGradientFill(res, params.fill, fill)) {
-</code><code id="L3033"><span class="ln">3033</span>                            a.fill<span class="s"> = </span><i>"none"</i>;
-</code><code id="L3034"><span class="ln">3034</span>                            a.gradient<span class="s"> = </span>params.fill;
-</code><code id="L3035"><span class="ln">3035</span>                            fill.rotate<span class="s"> = </span><b>false</b>;
-</code><code id="L3036"><span class="ln">3036</span>                        }
-</code><code id="L3037"><span class="ln">3037</span>                    }
-</code><code id="L3038"><span class="ln">3038</span>                }
-</code><code id="L3039"><span class="ln">3039</span>                node.appendChild(fill);
-</code><code id="L3040"><span class="ln">3040</span>                <b>var</b> stroke<span class="s"> = </span>(node.getElementsByTagName(<i>"stroke"</i>) &amp;&amp; node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>]),
-</code><code id="L3041"><span class="ln">3041</span>                newstroke<span class="s"> = </span><b>false</b>;
-</code><code id="L3042"><span class="ln">3042</span>                !stroke &amp;&amp; (newstroke<span class="s"> = </span>stroke<span class="s"> = </span>createNode(<i>"stroke"</i>));
-</code><code id="L3043"><span class="ln">3043</span>                <b>if</b> ((params.stroke &amp;&amp; params.stroke != <i>"none"</i>) ||
-</code><code id="L3044"><span class="ln">3044</span>                    params[<i>"stroke-width"</i>] ||
-</code><code id="L3045"><span class="ln">3045</span>                    params[<i>"stroke-opacity"</i>] != <b>null</b> ||
-</code><code id="L3046"><span class="ln">3046</span>                    params[<i>"stroke-dasharray"</i>] ||
-</code><code id="L3047"><span class="ln">3047</span>                    params[<i>"stroke-miterlimit"</i>] ||
-</code><code id="L3048"><span class="ln">3048</span>                    params[<i>"stroke-linejoin"</i>] ||
-</code><code id="L3049"><span class="ln">3049</span>                    params[<i>"stroke-linecap"</i>]) {
-</code><code id="L3050"><span class="ln">3050</span>                    stroke.on<span class="s"> = </span><b>true</b>;
-</code><code id="L3051"><span class="ln">3051</span>                }
-</code><code id="L3052"><span class="ln">3052</span>                (params.stroke<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.stroke<span class="s"> === </span><b>null</b><span class="s"> || </span>stroke.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.stroke<span class="s"> == </span><span class="d">0</span><span class="s"> || </span>params[<i>"stroke-width"</i>]<span class="s"> == </span><span class="d">0</span>) &amp;&amp; (stroke.on<span class="s"> = </span><b>false</b>);
-</code><code id="L3053"><span class="ln">3053</span>                <b>var</b> strokeColor<span class="s"> = </span>R.getRGB(params.stroke);
-</code><code id="L3054"><span class="ln">3054</span>                stroke.on &amp;&amp; params.stroke &amp;&amp; (stroke.color<span class="s"> = </span>strokeColor.hex);
-</code><code id="L3055"><span class="ln">3055</span>                opacity<span class="s"> = </span>((+a[<i>"stroke-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+strokeColor.o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
-</code><code id="L3056"><span class="ln">3056</span>                <b>var</b> width<span class="s"> = </span>(toFloat(params[<i>"stroke-width"</i>])<span class="s"> || </span><span class="d">1</span>)<span class="s"> * </span><span class="d">.75</span>;
-</code><code id="L3057"><span class="ln">3057</span>                opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
-</code><code id="L3058"><span class="ln">3058</span>                params[<i>"stroke-width"</i>]<span class="s"> == </span><b>null</b> &amp;&amp; (width<span class="s"> = </span>a[<i>"stroke-width"</i>]);
-</code><code id="L3059"><span class="ln">3059</span>                params[<i>"stroke-width"</i>] &amp;&amp; (stroke.weight<span class="s"> = </span>width);
-</code><code id="L3060"><span class="ln">3060</span>                width &amp;&amp; width &lt; <span class="d">1</span> &amp;&amp; (opacity *= width) &amp;&amp; (stroke.weight<span class="s"> = </span><span class="d">1</span>);
-</code><code id="L3061"><span class="ln">3061</span>                stroke.opacity<span class="s"> = </span>opacity;
-</code><code id="L3062"><span class="ln">3062</span>                
-</code><code id="L3063"><span class="ln">3063</span>                params[<i>"stroke-linejoin"</i>] &amp;&amp; (stroke.joinstyle<span class="s"> = </span>params[<i>"stroke-linejoin"</i>]<span class="s"> || </span><i>"miter"</i>);
-</code><code id="L3064"><span class="ln">3064</span>                stroke.miterlimit<span class="s"> = </span>params[<i>"stroke-miterlimit"</i>]<span class="s"> || </span><span class="d">8</span>;
-</code><code id="L3065"><span class="ln">3065</span>                params[<i>"stroke-linecap"</i>] &amp;&amp; (stroke.endcap<span class="s"> = </span>params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"butt"</i> ? <i>"flat"</i> : params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"square"</i> ? <i>"square"</i> : <i>"round"</i>);
-</code><code id="L3066"><span class="ln">3066</span>                <b>if</b> (params[<i>"stroke-dasharray"</i>]) {
-</code><code id="L3067"><span class="ln">3067</span>                    <b>var</b> dasharray<span class="s"> = </span>{
-</code><code id="L3068"><span class="ln">3068</span>                        <i>"-"</i>: <i>"shortdash"</i>,
-</code><code id="L3069"><span class="ln">3069</span>                        <i>"."</i>: <i>"shortdot"</i>,
-</code><code id="L3070"><span class="ln">3070</span>                        <i>"-."</i>: <i>"shortdashdot"</i>,
-</code><code id="L3071"><span class="ln">3071</span>                        <i>"-.."</i>: <i>"shortdashdotdot"</i>,
-</code><code id="L3072"><span class="ln">3072</span>                        <i>". "</i>: <i>"dot"</i>,
-</code><code id="L3073"><span class="ln">3073</span>                        <i>"- "</i>: <i>"dash"</i>,
-</code><code id="L3074"><span class="ln">3074</span>                        <i>"--"</i>: <i>"longdash"</i>,
-</code><code id="L3075"><span class="ln">3075</span>                        <i>"- ."</i>: <i>"dashdot"</i>,
-</code><code id="L3076"><span class="ln">3076</span>                        <i>"--."</i>: <i>"longdashdot"</i>,
-</code><code id="L3077"><span class="ln">3077</span>                        <i>"--.."</i>: <i>"longdashdotdot"</i>
-</code><code id="L3078"><span class="ln">3078</span>                    };
-</code><code id="L3079"><span class="ln">3079</span>                    stroke.dashstyle<span class="s"> = </span>dasharray[has](params[<i>"stroke-dasharray"</i>]) ? dasharray[params[<i>"stroke-dasharray"</i>]] : E;
-</code><code id="L3080"><span class="ln">3080</span>                }
-</code><code id="L3081"><span class="ln">3081</span>                newstroke &amp;&amp; node.appendChild(stroke);
-</code><code id="L3082"><span class="ln">3082</span>            }
-</code><code id="L3083"><span class="ln">3083</span>            <b>if</b> (res.type<span class="s"> == </span><i>"text"</i>) {
-</code><code id="L3084"><span class="ln">3084</span>                res.paper.canvas.style.display<span class="s"> = </span>E;
-</code><code id="L3085"><span class="ln">3085</span>                <b>var</b> span<span class="s"> = </span>res.paper.span,
-</code><code id="L3086"><span class="ln">3086</span>                    m<span class="s"> = </span><span class="d">100</span>,
-</code><code id="L3087"><span class="ln">3087</span>                    fontSize<span class="s"> = </span>a.font &amp;&amp; a.font.match(/\d+(?:\.\d*)?(?=px)/);
-</code><code id="L3088"><span class="ln">3088</span>                s<span class="s"> = </span>span.style;
-</code><code id="L3089"><span class="ln">3089</span>                a.font &amp;&amp; (s.font<span class="s"> = </span>a.font);
-</code><code id="L3090"><span class="ln">3090</span>                a[<i>"font-family"</i>] &amp;&amp; (s.fontFamily<span class="s"> = </span>a[<i>"font-family"</i>]);
-</code><code id="L3091"><span class="ln">3091</span>                a[<i>"font-weight"</i>] &amp;&amp; (s.fontWeight<span class="s"> = </span>a[<i>"font-weight"</i>]);
-</code><code id="L3092"><span class="ln">3092</span>                a[<i>"font-style"</i>] &amp;&amp; (s.fontStyle<span class="s"> = </span>a[<i>"font-style"</i>]);
-</code><code id="L3093"><span class="ln">3093</span>                fontSize<span class="s"> = </span>toFloat(fontSize ? fontSize[<span class="d">0</span>] : a[<i>"font-size"</i>]);
-</code><code id="L3094"><span class="ln">3094</span>                s.fontSize<span class="s"> = </span>fontSize<span class="s"> * </span>m<span class="s"> + </span><i>"px"</i>;
-</code><code id="L3095"><span class="ln">3095</span>                res.textpath.string &amp;&amp; (span.innerHTML<span class="s"> = </span>Str(res.textpath.string).replace(/&lt;/g, <i>"&#<span class="d">60</span>;"</i>).replace(/&amp;/g, <i>"&#<span class="d">38</span>;"</i>).replace(/\n/g, <i>"&lt;br>"</i>));
-</code><code id="L3096"><span class="ln">3096</span>                <b>var</b> brect<span class="s"> = </span>span.getBoundingClientRect();
-</code><code id="L3097"><span class="ln">3097</span>                res.W<span class="s"> = </span>a.w<span class="s"> = </span>(brect.right<span class="s"> - </span>brect.left)<span class="s"> / </span>m;
-</code><code id="L3098"><span class="ln">3098</span>                res.H<span class="s"> = </span>a.h<span class="s"> = </span>(brect.bottom<span class="s"> - </span>brect.top)<span class="s"> / </span>m;
-</code><code id="L3099"><span class="ln">3099</span>                res.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
-</code><code id="L3100"><span class="ln">3100</span>                res.X<span class="s"> = </span>a.x;
-</code><code id="L3101"><span class="ln">3101</span>                res.Y<span class="s"> = </span>a.y<span class="s"> + </span>res.H<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L3102"><span class="ln">3102</span>
-</code><code id="L3103"><span class="ln">3103</span>                (<i>"x"</i> <b>in</b> params<span class="s"> || </span><i>"y"</i> <b>in</b> params) &amp;&amp; (res.path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(a.x<span class="s"> * </span>zoom), round(a.y<span class="s"> * </span>zoom), round(a.x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>));
-</code><code id="L3104"><span class="ln">3104</span>                <b>var</b> dirtyattrs<span class="s"> = </span>[<i>"x"</i>, <i>"y"</i>, <i>"text"</i>, <i>"font"</i>, <i>"font-family"</i>, <i>"font-weight"</i>, <i>"font-style"</i>, <i>"font-size"</i>];
-</code><code id="L3105"><span class="ln">3105</span>                <b>for</b> (<b>var</b> d<span class="s"> = </span><span class="d">0</span>, dd<span class="s"> = </span>dirtyattrs.length; d &lt; dd; d++) <b>if</b> (dirtyattrs[d] <b>in</b> params) {
-</code><code id="L3106"><span class="ln">3106</span>                    res._.dirty<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L3107"><span class="ln">3107</span>                    <b>break</b>;
-</code><code id="L3108"><span class="ln">3108</span>                }
-</code><code id="L3109"><span class="ln">3109</span>                
-</code><code id="L3110"><span class="ln">3110</span>                <span class="c">// text-anchor emulation</span>
-</code><code id="L3111"><span class="ln">3111</span>                <b>switch</b> (a[<i>"text-anchor"</i>]) {
-</code><code id="L3112"><span class="ln">3112</span>                    <b>case</b> <i>"start"</i>:
-</code><code id="L3113"><span class="ln">3113</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"left"</i>;
-</code><code id="L3114"><span class="ln">3114</span>                        res.bbx<span class="s"> = </span>res.W<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L3115"><span class="ln">3115</span>                    <b>break</b>;
-</code><code id="L3116"><span class="ln">3116</span>                    <b>case</b> <i>"end"</i>:
-</code><code id="L3117"><span class="ln">3117</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"right"</i>;
-</code><code id="L3118"><span class="ln">3118</span>                        res.bbx<span class="s"> = </span>-res.W<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L3119"><span class="ln">3119</span>                    <b>break</b>;
-</code><code id="L3120"><span class="ln">3120</span>                    <b>default</b>:
-</code><code id="L3121"><span class="ln">3121</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"center"</i>;
-</code><code id="L3122"><span class="ln">3122</span>                        res.bbx<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L3123"><span class="ln">3123</span>                    <b>break</b>;
-</code><code id="L3124"><span class="ln">3124</span>                }
-</code><code id="L3125"><span class="ln">3125</span>                res.textpath.style[<i>"v-text-kern"</i>]<span class="s"> = </span><b>true</b>;
-</code><code id="L3126"><span class="ln">3126</span>            }
-</code><code id="L3127"><span class="ln">3127</span>            res.paper.canvas.style.display<span class="s"> = </span>E;
-</code><code id="L3128"><span class="ln">3128</span>        };
-</code><code id="L3129"><span class="ln">3129</span>        addGradientFill<span class="s"> = </span><b>function</b> (o, gradient, fill) {
-</code><code id="L3130"><span class="ln">3130</span>            o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
-</code><code id="L3131"><span class="ln">3131</span>            <b>var</b> attrs<span class="s"> = </span>o.attrs,
-</code><code id="L3132"><span class="ln">3132</span>                type<span class="s"> = </span><i>"linear"</i>,
-</code><code id="L3133"><span class="ln">3133</span>                fxfy<span class="s"> = </span><i>"<span class="d">.5</span> <span class="d">.5</span>"</i>;
-</code><code id="L3134"><span class="ln">3134</span>            o.attrs.gradient<span class="s"> = </span>gradient;
-</code><code id="L3135"><span class="ln">3135</span>            gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, fx, fy) {
-</code><code id="L3136"><span class="ln">3136</span>                type<span class="s"> = </span><i>"radial"</i>;
-</code><code id="L3137"><span class="ln">3137</span>                <b>if</b> (fx &amp;&amp; fy) {
-</code><code id="L3138"><span class="ln">3138</span>                    fx<span class="s"> = </span>toFloat(fx);
-</code><code id="L3139"><span class="ln">3139</span>                    fy<span class="s"> = </span>toFloat(fy);
-</code><code id="L3140"><span class="ln">3140</span>                    pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span> &amp;&amp; (fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>)<span class="s"> + </span><span class="d">.5</span>);
-</code><code id="L3141"><span class="ln">3141</span>                    fxfy<span class="s"> = </span>fx<span class="s"> + </span>S<span class="s"> + </span>fy;
-</code><code id="L3142"><span class="ln">3142</span>                }
-</code><code id="L3143"><span class="ln">3143</span>                <b>return</b> E;
-</code><code id="L3144"><span class="ln">3144</span>            });
-</code><code id="L3145"><span class="ln">3145</span>            gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
-</code><code id="L3146"><span class="ln">3146</span>            <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
-</code><code id="L3147"><span class="ln">3147</span>                <b>var</b> angle<span class="s"> = </span>gradient.shift();
-</code><code id="L3148"><span class="ln">3148</span>                angle<span class="s"> = </span>-toFloat(angle);
-</code><code id="L3149"><span class="ln">3149</span>                <b>if</b> (isNaN(angle)) {
-</code><code id="L3150"><span class="ln">3150</span>                    <b>return</b> <b>null</b>;
-</code><code id="L3151"><span class="ln">3151</span>                }
-</code><code id="L3152"><span class="ln">3152</span>            }
-</code><code id="L3153"><span class="ln">3153</span>            <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
-</code><code id="L3154"><span class="ln">3154</span>            <b>if</b> (!dots) {
-</code><code id="L3155"><span class="ln">3155</span>                <b>return</b> <b>null</b>;
-</code><code id="L3156"><span class="ln">3156</span>            }
-</code><code id="L3157"><span class="ln">3157</span>            o<span class="s"> = </span>o.shape<span class="s"> || </span>o.node;
-</code><code id="L3158"><span class="ln">3158</span>            <b>if</b> (dots.length) {
-</code><code id="L3159"><span class="ln">3159</span>                o.removeChild(fill);
-</code><code id="L3160"><span class="ln">3160</span>                fill.on<span class="s"> = </span><b>true</b>;
-</code><code id="L3161"><span class="ln">3161</span>                fill.method<span class="s"> = </span><i>"none"</i>;
-</code><code id="L3162"><span class="ln">3162</span>                fill.color<span class="s"> = </span>dots[<span class="d">0</span>].color;
-</code><code id="L3163"><span class="ln">3163</span>                fill.color2<span class="s"> = </span>dots[dots.length<span class="s"> - </span><span class="d">1</span>].color;
-</code><code id="L3164"><span class="ln">3164</span>                <b>var</b> clrs<span class="s"> = </span>[];
-</code><code id="L3165"><span class="ln">3165</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i &lt; ii; i++) {
-</code><code id="L3166"><span class="ln">3166</span>                    dots[i].offset &amp;&amp; clrs.push(dots[i].offset<span class="s"> + </span>S<span class="s"> + </span>dots[i].color);
-</code><code id="L3167"><span class="ln">3167</span>                }
-</code><code id="L3168"><span class="ln">3168</span>                fill.colors &amp;&amp; (fill.colors.value<span class="s"> = </span>clrs.length ? clrs.join() : <i>"<span class="d">0</span>% "</i><span class="s"> + </span>fill.color);
-</code><code id="L3169"><span class="ln">3169</span>                <b>if</b> (type<span class="s"> == </span><i>"radial"</i>) {
-</code><code id="L3170"><span class="ln">3170</span>                    fill.type<span class="s"> = </span><i>"gradientTitle"</i>;
-</code><code id="L3171"><span class="ln">3171</span>                    fill.focus<span class="s"> = </span><i>"<span class="d">100</span>%"</i>;
-</code><code id="L3172"><span class="ln">3172</span>                    fill.focussize<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
-</code><code id="L3173"><span class="ln">3173</span>                    fill.focusposition<span class="s"> = </span>fxfy;
-</code><code id="L3174"><span class="ln">3174</span>                    fill.angle<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L3175"><span class="ln">3175</span>                } <b>else</b> {
-</code><code id="L3176"><span class="ln">3176</span>                    <span class="c">// fill.rotate= <b>true</b>;</span>
-</code><code id="L3177"><span class="ln">3177</span>                    fill.type<span class="s"> = </span><i>"gradient"</i>;
-</code><code id="L3178"><span class="ln">3178</span>                    fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle) % <span class="d">360</span>;
-</code><code id="L3179"><span class="ln">3179</span>                }
-</code><code id="L3180"><span class="ln">3180</span>                o.appendChild(fill);
-</code><code id="L3181"><span class="ln">3181</span>                <span class="c">// alert(fill.outerHTML);</span>
-</code><code id="L3182"><span class="ln">3182</span>            }
-</code><code id="L3183"><span class="ln">3183</span>            <b>return</b> <span class="d">1</span>;
-</code><code id="L3184"><span class="ln">3184</span>        };
-</code><code id="L3185"><span class="ln">3185</span>        Element<span class="s"> = </span><b>function</b> (node, vml) {
-</code><code id="L3186"><span class="ln">3186</span>            <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
-</code><code id="L3187"><span class="ln">3187</span>            node.raphael<span class="s"> = </span><b>true</b>;
-</code><code id="L3188"><span class="ln">3188</span>            <b>this</b>.id<span class="s"> = </span>R._oid++;
-</code><code id="L3189"><span class="ln">3189</span>            node.raphaelid<span class="s"> = </span><b>this</b>.id;
-</code><code id="L3190"><span class="ln">3190</span>            <b>this</b>.X<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L3191"><span class="ln">3191</span>            <b>this</b>.Y<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L3192"><span class="ln">3192</span>            <b>this</b>.attrs<span class="s"> = </span>{};
-</code><code id="L3193"><span class="ln">3193</span>            <b>this</b>.paper<span class="s"> = </span>vml;
-</code><code id="L3194"><span class="ln">3194</span>            <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
-</code><code id="L3195"><span class="ln">3195</span>            <b>this</b>._<span class="s"> = </span>{
-</code><code id="L3196"><span class="ln">3196</span>                transform: [],
-</code><code id="L3197"><span class="ln">3197</span>                sx: <span class="d">1</span>,
-</code><code id="L3198"><span class="ln">3198</span>                sy: <span class="d">1</span>,
-</code><code id="L3199"><span class="ln">3199</span>                dx: <span class="d">0</span>,
-</code><code id="L3200"><span class="ln">3200</span>                dy: <span class="d">0</span>,
-</code><code id="L3201"><span class="ln">3201</span>                deg: <span class="d">0</span>,
-</code><code id="L3202"><span class="ln">3202</span>                dirty: <span class="d">1</span>,
-</code><code id="L3203"><span class="ln">3203</span>                dirtyT: <span class="d">1</span>
-</code><code id="L3204"><span class="ln">3204</span>            };
-</code><code id="L3205"><span class="ln">3205</span>            !vml.bottom &amp;&amp; (vml.bottom<span class="s"> = </span><b>this</b>);
-</code><code id="L3206"><span class="ln">3206</span>            <b>this</b>.prev<span class="s"> = </span>vml.top;
-</code><code id="L3207"><span class="ln">3207</span>            vml.top &amp;&amp; (vml.top.next<span class="s"> = </span><b>this</b>);
-</code><code id="L3208"><span class="ln">3208</span>            vml.top<span class="s"> = </span><b>this</b>;
-</code><code id="L3209"><span class="ln">3209</span>            <b>this</b>.next<span class="s"> = </span><b>null</b>;
-</code><code id="L3210"><span class="ln">3210</span>        };
-</code><code id="L3211"><span class="ln">3211</span>        elproto<span class="s"> = </span>Element.prototype;
-</code><code id="L3212"><span class="ln">3212</span>        elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
-</code><code id="L3213"><span class="ln">3213</span>            <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
-</code><code id="L3214"><span class="ln">3214</span>                <b>return</b> <b>this</b>._.transform;
+</code><code id="L2616"><span class="ln">2616</span>        elproto._getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L2617"><span class="ln">2617</span>            <b>if</b> (<b>this</b>.node.style.display<span class="s"> == </span><i>"none"</i>) {
+</code><code id="L2618"><span class="ln">2618</span>                <b>this</b>.show();
+</code><code id="L2619"><span class="ln">2619</span>                <b>var</b> hide<span class="s"> = </span><b>true</b>;
+</code><code id="L2620"><span class="ln">2620</span>            }
+</code><code id="L2621"><span class="ln">2621</span>            <b>var</b> bbox<span class="s"> = </span>{};
+</code><code id="L2622"><span class="ln">2622</span>            <b>try</b> {
+</code><code id="L2623"><span class="ln">2623</span>                bbox<span class="s"> = </span><b>this</b>.node.getBBox();
+</code><code id="L2624"><span class="ln">2624</span>            } <b>catch</b>(e) {
+</code><code id="L2625"><span class="ln">2625</span>                <span class="c">// Firefox <span class="d">3.0</span>.x plays badly here</span>
+</code><code id="L2626"><span class="ln">2626</span>            } <b>finally</b> {
+</code><code id="L2627"><span class="ln">2627</span>                bbox<span class="s"> = </span>bbox<span class="s"> || </span>{};
+</code><code id="L2628"><span class="ln">2628</span>            }
+</code><code id="L2629"><span class="ln">2629</span>            hide<span class="s"> &amp;&amp; </span><b>this</b>.hide();
+</code><code id="L2630"><span class="ln">2630</span>            <b>return</b> bbox;
+</code><code id="L2631"><span class="ln">2631</span>        };
+</code><code id="L2632"><span class="ln">2632</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2633"><span class="ln">2633</span><span class="c">        <span class="s"> * </span>Element.attr
+</span></code><code id="L2634"><span class="ln">2634</span><span class="c">         [ method ]
+</span></code><code id="L2635"><span class="ln">2635</span><span class="c">         **
+</span></code><code id="L2636"><span class="ln">2636</span><span class="c">        <span class="s"> * </span>Sets the attributes of the element.
+</span></code><code id="L2637"><span class="ln">2637</span><span class="c">         > Parameters
+</span></code><code id="L2638"><span class="ln">2638</span><span class="c">        <span class="s"> - </span>attrName (string) attribute’s name
+</span></code><code id="L2639"><span class="ln">2639</span><span class="c">        <span class="s"> - </span>value (string) value
+</span></code><code id="L2640"><span class="ln">2640</span><span class="c">        <span class="s"> * </span>or
+</span></code><code id="L2641"><span class="ln">2641</span><span class="c">        <span class="s"> - </span>params (object) object of name/value pairs
+</span></code><code id="L2642"><span class="ln">2642</span><span class="c">        <span class="s"> * </span>or
+</span></code><code id="L2643"><span class="ln">2643</span><span class="c">        <span class="s"> - </span>attrName (string) attribute’s name
+</span></code><code id="L2644"><span class="ln">2644</span><span class="c">        <span class="s"> * </span>or
+</span></code><code id="L2645"><span class="ln">2645</span><span class="c">        <span class="s"> - </span>attrNames (array) <b>in</b> <b>this</b> <b>case</b> method returns array of current values <b>for</b> given attribute names
+</span></code><code id="L2646"><span class="ln">2646</span><span class="c">        <span class="s"> = </span>(object) @Element <b>if</b> attrsName<span class="s"> &amp; </span>value or params are passed <b>in</b>.
+</span></code><code id="L2647"><span class="ln">2647</span><span class="c">        <span class="s"> = </span>(...) value of the attribute <b>if</b> only attrsName is passed <b>in</b>.
+</span></code><code id="L2648"><span class="ln">2648</span><span class="c">        <span class="s"> = </span>(array) array of values of the attribute <b>if</b> attrsNames is passed <b>in</b>.
+</span></code><code id="L2649"><span class="ln">2649</span><span class="c">        <span class="s"> = </span>(object) object of attributes <b>if</b> nothing is passed <b>in</b>.
+</span></code><code id="L2650"><span class="ln">2650</span><span class="c">         > Possible parameters
+</span></code><code id="L2651"><span class="ln">2651</span><span class="c">         # &lt;p>Please refer to the &lt;a href=<i>"http:<span class="c">//www.w3.org/TR/SVG/"</i> title=<i>"The W3C Recommendation <b>for</b> the SVG language describes these properties <b>in</b> detail."</i>>SVG specification&lt;/a> <b>for</b> an explanation of these parameters.&lt;/p></span>
+</span></code><code id="L2652"><span class="ln">2652</span><span class="c">         o arrow-end (string) arrowhead on the end of the path. The format <b>for</b> string is `&lt;type>[-&lt;width>[-&lt;length>]]`. Possible types: `classic`, `block`, `open`, `oval`, `diamond`, `none`, width: `wide`, `narrow`, `midium`, length: `<b>long</b>`, `<b>short</b>`, `midium`.
+</span></code><code id="L2653"><span class="ln">2653</span><span class="c">         o clip-rect (string) comma or space separated values: x, y, width and height
+</span></code><code id="L2654"><span class="ln">2654</span><span class="c">         o cursor (string) CSS type of the cursor
+</span></code><code id="L2655"><span class="ln">2655</span><span class="c">         o cx (number)
+</span></code><code id="L2656"><span class="ln">2656</span><span class="c">         o cy (number)
+</span></code><code id="L2657"><span class="ln">2657</span><span class="c">         o fill (string) colour, gradient or image
+</span></code><code id="L2658"><span class="ln">2658</span><span class="c">         o fill-opacity (number)
+</span></code><code id="L2659"><span class="ln">2659</span><span class="c">         o font (string)
+</span></code><code id="L2660"><span class="ln">2660</span><span class="c">         o font-family (string)
+</span></code><code id="L2661"><span class="ln">2661</span><span class="c">         o font-size (number) font size <b>in</b> pixels
+</span></code><code id="L2662"><span class="ln">2662</span><span class="c">         o font-weight (string)
+</span></code><code id="L2663"><span class="ln">2663</span><span class="c">         o height (number)
+</span></code><code id="L2664"><span class="ln">2664</span><span class="c">         o href (string) URL, <b>if</b> specified element behaves as hyperlink
+</span></code><code id="L2665"><span class="ln">2665</span><span class="c">         o opacity (number)
+</span></code><code id="L2666"><span class="ln">2666</span><span class="c">         o path (string) SVG path string format
+</span></code><code id="L2667"><span class="ln">2667</span><span class="c">         o r (number)
+</span></code><code id="L2668"><span class="ln">2668</span><span class="c">         o rx (number)
+</span></code><code id="L2669"><span class="ln">2669</span><span class="c">         o ry (number)
+</span></code><code id="L2670"><span class="ln">2670</span><span class="c">         o src (string) image URL, only works <b>for</b> @Element.image element
+</span></code><code id="L2671"><span class="ln">2671</span><span class="c">         o stroke (string) stroke colour
+</span></code><code id="L2672"><span class="ln">2672</span><span class="c">         o stroke-dasharray (string) [“”, “`-`”, “`.`”, “`-.`”, “`-..`”, “`. `”, “`- `”, “`--`”, “`- .`”, “`--.`”, “`--..`”]
+</span></code><code id="L2673"><span class="ln">2673</span><span class="c">         o stroke-linecap (string) [“`butt`”, “`square`”, “`round`”]
+</span></code><code id="L2674"><span class="ln">2674</span><span class="c">         o stroke-linejoin (string) [“`bevel`”, “`round`”, “`miter`”]
+</span></code><code id="L2675"><span class="ln">2675</span><span class="c">         o stroke-miterlimit (number)
+</span></code><code id="L2676"><span class="ln">2676</span><span class="c">         o stroke-opacity (number)
+</span></code><code id="L2677"><span class="ln">2677</span><span class="c">         o stroke-width (number) stroke width <b>in</b> pixels, <b>default</b> is <i>'<span class="d">1</span>'</i>
+</span></code><code id="L2678"><span class="ln">2678</span><span class="c">         o target (string) used <b>with</b> href
+</span></code><code id="L2679"><span class="ln">2679</span><span class="c">         o text (string) contents of the text element. Use `\n` <b>for</b> multiline text
+</span></code><code id="L2680"><span class="ln">2680</span><span class="c">         o text-anchor (string) [“`start`”, “`middle`”, “`end`”], <b>default</b> is “`middle`”
+</span></code><code id="L2681"><span class="ln">2681</span><span class="c">         o title (string) will create tooltip <b>with</b> a given text
+</span></code><code id="L2682"><span class="ln">2682</span><span class="c">         o transform (string) see @Element.transform
+</span></code><code id="L2683"><span class="ln">2683</span><span class="c">         o width (number)
+</span></code><code id="L2684"><span class="ln">2684</span><span class="c">         o x (number)
+</span></code><code id="L2685"><span class="ln">2685</span><span class="c">         o y (number)
+</span></code><code id="L2686"><span class="ln">2686</span><span class="c">         > Gradients
+</span></code><code id="L2687"><span class="ln">2687</span><span class="c">        <span class="s"> * </span>Linear gradient format: “`‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`<span class="d">90</span>-#fff-#<span class="d">000</span>`” – <span class="d">90</span>°
+</span></code><code id="L2688"><span class="ln">2688</span><span class="c">        <span class="s"> * </span>gradient from white to black or “`<span class="d">0</span>-#fff-#f00:<span class="d">20</span>-#<span class="d">000</span>`” – <span class="d">0</span>° gradient from white via red (at <span class="d">20</span>%) to black.
+</span></code><code id="L2689"><span class="ln">2689</span><span class="c">         *
+</span></code><code id="L2690"><span class="ln">2690</span><span class="c">        <span class="s"> * </span>radial gradient: “`r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`r#fff-#<span class="d">000</span>`” –
+</span></code><code id="L2691"><span class="ln">2691</span><span class="c">        <span class="s"> * </span>gradient from white to black or “`r(<span class="d">0.25</span>, <span class="d">0.75</span>)#fff-#<span class="d">000</span>`” – gradient from white to black <b>with</b> focus point
+</span></code><code id="L2692"><span class="ln">2692</span><span class="c">        <span class="s"> * </span>at <span class="d">0.25</span>, <span class="d">0.75</span>. Focus point coordinates are <b>in</b> <span class="d">0</span>.<span class="d">.1</span> range. Radial gradients can only be applied to circles and ellipses.
+</span></code><code id="L2693"><span class="ln">2693</span><span class="c">         > Path String
+</span></code><code id="L2694"><span class="ln">2694</span><span class="c">         # &lt;p>Please refer to &lt;a href=<i>"http:<span class="c">//www.w3.org/TR/SVG/paths.html#PathData"</i> title=<i>"Details of a path’s data attribute’s format are described <b>in</b> the SVG specification."</i>>SVG documentation regarding path string&lt;/a>. Raphaël fully supports it.&lt;/p></span>
+</span></code><code id="L2695"><span class="ln">2695</span><span class="c">         > Colour Parsing
+</span></code><code id="L2696"><span class="ln">2696</span><span class="c">         # &lt;ul>
+</span></code><code id="L2697"><span class="ln">2697</span><span class="c">         #     &lt;li>Colour name (“&lt;code>red&lt;/code>”, “&lt;code>green&lt;/code>”, “&lt;code>cornflowerblue&lt;/code>”, etc)&lt;/li>
+</span></code><code id="L2698"><span class="ln">2698</span><span class="c">         #     &lt;li>#••• — shortened HTML colour: (“&lt;code>#<span class="d">000</span>&lt;/code>”, “&lt;code>#fc0&lt;/code>”, etc)&lt;/li>
+</span></code><code id="L2699"><span class="ln">2699</span><span class="c">         #     &lt;li>#•••••• — full length HTML colour: (“&lt;code>#<span class="d">000000</span>&lt;/code>”, “&lt;code>#bd2300&lt;/code>”)&lt;/li>
+</span></code><code id="L2700"><span class="ln">2700</span><span class="c">         #     &lt;li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“&lt;code>rgb(<span class="d">200</span>,&nbsp;<span class="d">100</span>,&nbsp;<span class="d">0</span>)&lt;/code>”)&lt;/li>
+</span></code><code id="L2701"><span class="ln">2701</span><span class="c">         #     &lt;li>rgb(•••%, •••%, •••%) — same as above, but <b>in</b> %: (“&lt;code>rgb(<span class="d">100</span>%,&nbsp;<span class="d">175</span>%,&nbsp;<span class="d">0</span>%)&lt;/code>”)&lt;/li>
+</span></code><code id="L2702"><span class="ln">2702</span><span class="c">         #     &lt;li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“&lt;code>rgba(<span class="d">200</span>,&nbsp;<span class="d">100</span>,&nbsp;<span class="d">0</span>, <span class="d">.5</span>)&lt;/code>”)&lt;/li>
+</span></code><code id="L2703"><span class="ln">2703</span><span class="c">         #     &lt;li>rgba(•••%, •••%, •••%, •••%) — same as above, but <b>in</b> %: (“&lt;code>rgba(<span class="d">100</span>%,&nbsp;<span class="d">175</span>%,&nbsp;<span class="d">0</span>%, <span class="d">50</span>%)&lt;/code>”)&lt;/li>
+</span></code><code id="L2704"><span class="ln">2704</span><span class="c">         #     &lt;li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“&lt;code>hsb(<span class="d">0.5</span>,&nbsp;<span class="d">0.25</span>,&nbsp;<span class="d">1</span>)&lt;/code>”)&lt;/li>
+</span></code><code id="L2705"><span class="ln">2705</span><span class="c">         #     &lt;li>hsb(•••%, •••%, •••%) — same as above, but <b>in</b> %&lt;/li>
+</span></code><code id="L2706"><span class="ln">2706</span><span class="c">         #     &lt;li>hsba(•••, •••, •••, •••) — same as above, but <b>with</b> opacity&lt;/li>
+</span></code><code id="L2707"><span class="ln">2707</span><span class="c">         #     &lt;li>hsl(•••, •••, •••) — almost the same as hsb, see &lt;a href=<i>"http:<span class="c">//en.wikipedia.org/wiki/HSL_and_HSV"</i> title=<i>"HSL and HSV<span class="s"> - </span>Wikipedia, the free encyclopedia"</i>>Wikipedia page&lt;/a>&lt;/li></span>
+</span></code><code id="L2708"><span class="ln">2708</span><span class="c">         #     &lt;li>hsl(•••%, •••%, •••%) — same as above, but <b>in</b> %&lt;/li>
+</span></code><code id="L2709"><span class="ln">2709</span><span class="c">         #     &lt;li>hsla(•••, •••, •••) — same as above, but <b>with</b> opacity&lt;/li>
+</span></code><code id="L2710"><span class="ln">2710</span><span class="c">         #     &lt;li>Optionally <b>for</b> hsb and hsl you could specify hue as a degree: “&lt;code>hsl(240deg,&nbsp;<span class="d">1</span>,&nbsp;<span class="d">.5</span>)&lt;/code>” or, <b>if</b> you want to go fancy, “&lt;code>hsl(<span class="d">240</span>°,&nbsp;<span class="d">1</span>,&nbsp;<span class="d">.5</span>)&lt;/code>”&lt;/li>
+</span></code><code id="L2711"><span class="ln">2711</span><span class="c">         # &lt;/ul>
+</span></code><code id="L2712"><span class="ln">2712</span><span class="c">        \*/</span>
+</code><code id="L2713"><span class="ln">2713</span>        elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L2714"><span class="ln">2714</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2715"><span class="ln">2715</span>                <b>return</b> <b>this</b>;
+</code><code id="L2716"><span class="ln">2716</span>            }
+</code><code id="L2717"><span class="ln">2717</span>            <b>if</b> (name<span class="s"> == </span><b>null</b>) {
+</code><code id="L2718"><span class="ln">2718</span>                <b>var</b> res<span class="s"> = </span>{};
+</code><code id="L2719"><span class="ln">2719</span>                <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
+</code><code id="L2720"><span class="ln">2720</span>                    res[i]<span class="s"> = </span><b>this</b>.attrs[i];
+</code><code id="L2721"><span class="ln">2721</span>                }
+</code><code id="L2722"><span class="ln">2722</span>                res.gradient<span class="s"> &amp;&amp; </span>res.fill<span class="s"> == </span><i>"none"</i><span class="s"> &amp;&amp; </span>(res.fill<span class="s"> = </span>res.gradient)<span class="s"> &amp;&amp; </span><b>delete</b> res.gradient;
+</code><code id="L2723"><span class="ln">2723</span>                res.transform<span class="s"> = </span><b>this</b>._.transform;
+</code><code id="L2724"><span class="ln">2724</span>                <b>return</b> res;
+</code><code id="L2725"><span class="ln">2725</span>            }
+</code><code id="L2726"><span class="ln">2726</span>            <b>if</b> (value<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(name, string)) {
+</code><code id="L2727"><span class="ln">2727</span>                <b>if</b> (name<span class="s"> == </span>fillString<span class="s"> &amp;&amp; </span><b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i><span class="s"> &amp;&amp; </span><b>this</b>.attrs.gradient) {
+</code><code id="L2728"><span class="ln">2728</span>                    <b>return</b> <b>this</b>.attrs.gradient;
+</code><code id="L2729"><span class="ln">2729</span>                }
+</code><code id="L2730"><span class="ln">2730</span>                <b>if</b> (name<span class="s"> == </span><i>"transform"</i>) {
+</code><code id="L2731"><span class="ln">2731</span>                    <b>return</b> <b>this</b>._.transform;
+</code><code id="L2732"><span class="ln">2732</span>                }
+</code><code id="L2733"><span class="ln">2733</span>                <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
+</code><code id="L2734"><span class="ln">2734</span>                    <b>return</b> <b>this</b>.attrs[name];
+</code><code id="L2735"><span class="ln">2735</span>                } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
+</code><code id="L2736"><span class="ln">2736</span>                    <b>return</b> <b>this</b>.paper.customAttributes[name].def;
+</code><code id="L2737"><span class="ln">2737</span>                } <b>else</b> {
+</code><code id="L2738"><span class="ln">2738</span>                    <b>return</b> availableAttrs[name];
+</code><code id="L2739"><span class="ln">2739</span>                }
+</code><code id="L2740"><span class="ln">2740</span>            }
+</code><code id="L2741"><span class="ln">2741</span>            <b>if</b> (value<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(name, array)) {
+</code><code id="L2742"><span class="ln">2742</span>                <b>var</b> values<span class="s"> = </span>{};
+</code><code id="L2743"><span class="ln">2743</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j &lt; jj; j++) {
+</code><code id="L2744"><span class="ln">2744</span>                    values[name[j]]<span class="s"> = </span><b>this</b>.attr(name[j]);
+</code><code id="L2745"><span class="ln">2745</span>                }
+</code><code id="L2746"><span class="ln">2746</span>                <b>return</b> values;
+</code><code id="L2747"><span class="ln">2747</span>            }
+</code><code id="L2748"><span class="ln">2748</span>            <b>if</b> (value != <b>null</b>) {
+</code><code id="L2749"><span class="ln">2749</span>                <b>var</b> params<span class="s"> = </span>{};
+</code><code id="L2750"><span class="ln">2750</span>                params[name]<span class="s"> = </span>value;
+</code><code id="L2751"><span class="ln">2751</span>            } <b>else</b> <b>if</b> (name != <b>null</b><span class="s"> &amp;&amp; </span>R.is(name, <i>"object"</i>)) {
+</code><code id="L2752"><span class="ln">2752</span>                params<span class="s"> = </span>name;
+</code><code id="L2753"><span class="ln">2753</span>            }
+</code><code id="L2754"><span class="ln">2754</span>            <b>for</b> (<b>var</b> key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key)<span class="s"> &amp;&amp; </span>params[has](key)<span class="s"> &amp;&amp; </span>R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
+</code><code id="L2755"><span class="ln">2755</span>                <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
+</code><code id="L2756"><span class="ln">2756</span>                <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
+</code><code id="L2757"><span class="ln">2757</span>                <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
+</code><code id="L2758"><span class="ln">2758</span>                    params[subkey]<span class="s"> = </span>par[subkey];
+</code><code id="L2759"><span class="ln">2759</span>                }
+</code><code id="L2760"><span class="ln">2760</span>            }
+</code><code id="L2761"><span class="ln">2761</span>            setFillAndStroke(<b>this</b>, params);
+</code><code id="L2762"><span class="ln">2762</span>            <b>return</b> <b>this</b>;
+</code><code id="L2763"><span class="ln">2763</span>        };
+</code><code id="L2764"><span class="ln">2764</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2765"><span class="ln">2765</span><span class="c">        <span class="s"> * </span>Element.toFront
+</span></code><code id="L2766"><span class="ln">2766</span><span class="c">         [ method ]
+</span></code><code id="L2767"><span class="ln">2767</span><span class="c">         **
+</span></code><code id="L2768"><span class="ln">2768</span><span class="c">        <span class="s"> * </span>Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
+</span></code><code id="L2769"><span class="ln">2769</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2770"><span class="ln">2770</span><span class="c">        \*/</span>
+</code><code id="L2771"><span class="ln">2771</span>        elproto.toFront<span class="s"> = </span><b>function</b> () {
+</code><code id="L2772"><span class="ln">2772</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2773"><span class="ln">2773</span>                <b>return</b> <b>this</b>;
+</code><code id="L2774"><span class="ln">2774</span>            }
+</code><code id="L2775"><span class="ln">2775</span>            <b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L2776"><span class="ln">2776</span>            <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
+</code><code id="L2777"><span class="ln">2777</span>            svg.top != <b>this</b><span class="s"> &amp;&amp; </span>tofront(<b>this</b>, svg);
+</code><code id="L2778"><span class="ln">2778</span>            <b>return</b> <b>this</b>;
+</code><code id="L2779"><span class="ln">2779</span>        };
+</code><code id="L2780"><span class="ln">2780</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2781"><span class="ln">2781</span><span class="c">        <span class="s"> * </span>Element.toBack
+</span></code><code id="L2782"><span class="ln">2782</span><span class="c">         [ method ]
+</span></code><code id="L2783"><span class="ln">2783</span><span class="c">         **
+</span></code><code id="L2784"><span class="ln">2784</span><span class="c">        <span class="s"> * </span>Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
+</span></code><code id="L2785"><span class="ln">2785</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2786"><span class="ln">2786</span><span class="c">        \*/</span>
+</code><code id="L2787"><span class="ln">2787</span>        elproto.toBack<span class="s"> = </span><b>function</b> () {
+</code><code id="L2788"><span class="ln">2788</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2789"><span class="ln">2789</span>                <b>return</b> <b>this</b>;
+</code><code id="L2790"><span class="ln">2790</span>            }
+</code><code id="L2791"><span class="ln">2791</span>            <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
+</code><code id="L2792"><span class="ln">2792</span>                <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
+</code><code id="L2793"><span class="ln">2793</span>                toback(<b>this</b>, <b>this</b>.paper);
+</code><code id="L2794"><span class="ln">2794</span>                <b>var</b> svg<span class="s"> = </span><b>this</b>.paper;
+</code><code id="L2795"><span class="ln">2795</span>            }
+</code><code id="L2796"><span class="ln">2796</span>            <b>return</b> <b>this</b>;
+</code><code id="L2797"><span class="ln">2797</span>        };
+</code><code id="L2798"><span class="ln">2798</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2799"><span class="ln">2799</span><span class="c">        <span class="s"> * </span>Element.insertAfter
+</span></code><code id="L2800"><span class="ln">2800</span><span class="c">         [ method ]
+</span></code><code id="L2801"><span class="ln">2801</span><span class="c">         **
+</span></code><code id="L2802"><span class="ln">2802</span><span class="c">        <span class="s"> * </span>Inserts current object after the given one.
+</span></code><code id="L2803"><span class="ln">2803</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2804"><span class="ln">2804</span><span class="c">        \*/</span>
+</code><code id="L2805"><span class="ln">2805</span>        elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L2806"><span class="ln">2806</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2807"><span class="ln">2807</span>                <b>return</b> <b>this</b>;
+</code><code id="L2808"><span class="ln">2808</span>            }
+</code><code id="L2809"><span class="ln">2809</span>            <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[element.length<span class="s"> - </span><span class="d">1</span>].node;
+</code><code id="L2810"><span class="ln">2810</span>            <b>if</b> (node.nextSibling) {
+</code><code id="L2811"><span class="ln">2811</span>                node.parentNode.insertBefore(<b>this</b>.node, node.nextSibling);
+</code><code id="L2812"><span class="ln">2812</span>            } <b>else</b> {
+</code><code id="L2813"><span class="ln">2813</span>                node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L2814"><span class="ln">2814</span>            }
+</code><code id="L2815"><span class="ln">2815</span>            insertafter(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L2816"><span class="ln">2816</span>            <b>return</b> <b>this</b>;
+</code><code id="L2817"><span class="ln">2817</span>        };
+</code><code id="L2818"><span class="ln">2818</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2819"><span class="ln">2819</span><span class="c">        <span class="s"> * </span>Element.insertBefore
+</span></code><code id="L2820"><span class="ln">2820</span><span class="c">         [ method ]
+</span></code><code id="L2821"><span class="ln">2821</span><span class="c">         **
+</span></code><code id="L2822"><span class="ln">2822</span><span class="c">        <span class="s"> * </span>Inserts current object before the given one.
+</span></code><code id="L2823"><span class="ln">2823</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L2824"><span class="ln">2824</span><span class="c">        \*/</span>
+</code><code id="L2825"><span class="ln">2825</span>        elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L2826"><span class="ln">2826</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L2827"><span class="ln">2827</span>                <b>return</b> <b>this</b>;
+</code><code id="L2828"><span class="ln">2828</span>            }
+</code><code id="L2829"><span class="ln">2829</span>            <b>var</b> node<span class="s"> = </span>element.node<span class="s"> || </span>element[<span class="d">0</span>].node;
+</code><code id="L2830"><span class="ln">2830</span>            node.parentNode.insertBefore(<b>this</b>.node, node);
+</code><code id="L2831"><span class="ln">2831</span>            insertbefore(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L2832"><span class="ln">2832</span>            <b>return</b> <b>this</b>;
+</code><code id="L2833"><span class="ln">2833</span>        };
+</code><code id="L2834"><span class="ln">2834</span>        elproto.blur<span class="s"> = </span><b>function</b> (size) {
+</code><code id="L2835"><span class="ln">2835</span>            <span class="c">// Experimental. No Safari support. Use it on your own risk.</span>
+</code><code id="L2836"><span class="ln">2836</span>            <b>var</b> t<span class="s"> = </span><b>this</b>;
+</code><code id="L2837"><span class="ln">2837</span>            <b>if</b> (+size !== <span class="d">0</span>) {
+</code><code id="L2838"><span class="ln">2838</span>                <b>var</b> fltr<span class="s"> = </span>$(<i>"filter"</i>),
+</code><code id="L2839"><span class="ln">2839</span>                    blur<span class="s"> = </span>$(<i>"feGaussianBlur"</i>);
+</code><code id="L2840"><span class="ln">2840</span>                t.attrs.blur<span class="s"> = </span>size;
+</code><code id="L2841"><span class="ln">2841</span>                fltr.id<span class="s"> = </span>createUUID();
+</code><code id="L2842"><span class="ln">2842</span>                $(blur, {stdDeviation: +size<span class="s"> || </span><span class="d">1.5</span>});
+</code><code id="L2843"><span class="ln">2843</span>                fltr.appendChild(blur);
+</code><code id="L2844"><span class="ln">2844</span>                t.paper.defs.appendChild(fltr);
+</code><code id="L2845"><span class="ln">2845</span>                t._blur<span class="s"> = </span>fltr;
+</code><code id="L2846"><span class="ln">2846</span>                $(t.node, {filter: <i>"url(#"</i><span class="s"> + </span>fltr.id<span class="s"> + </span><i>")"</i>});
+</code><code id="L2847"><span class="ln">2847</span>            } <b>else</b> {
+</code><code id="L2848"><span class="ln">2848</span>                <b>if</b> (t._blur) {
+</code><code id="L2849"><span class="ln">2849</span>                    t._blur.parentNode.removeChild(t._blur);
+</code><code id="L2850"><span class="ln">2850</span>                    <b>delete</b> t._blur;
+</code><code id="L2851"><span class="ln">2851</span>                    <b>delete</b> t.attrs.blur;
+</code><code id="L2852"><span class="ln">2852</span>                }
+</code><code id="L2853"><span class="ln">2853</span>                t.node.removeAttribute(<i>"filter"</i>);
+</code><code id="L2854"><span class="ln">2854</span>            }
+</code><code id="L2855"><span class="ln">2855</span>        };
+</code><code id="L2856"><span class="ln">2856</span>        <b>var</b> theCircle<span class="s"> = </span><b>function</b> (svg, x, y, r) {
+</code><code id="L2857"><span class="ln">2857</span>            <b>var</b> el<span class="s"> = </span>$(<i>"circle"</i>);
+</code><code id="L2858"><span class="ln">2858</span>            svg.canvas<span class="s"> &amp;&amp; </span>svg.canvas.appendChild(el);
+</code><code id="L2859"><span class="ln">2859</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2860"><span class="ln">2860</span>            res.attrs<span class="s"> = </span>{cx: x, cy: y, r: r, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2861"><span class="ln">2861</span>            res.type<span class="s"> = </span><i>"circle"</i>;
+</code><code id="L2862"><span class="ln">2862</span>            $(el, res.attrs);
+</code><code id="L2863"><span class="ln">2863</span>            <b>return</b> res;
+</code><code id="L2864"><span class="ln">2864</span>        },
+</code><code id="L2865"><span class="ln">2865</span>        theRect<span class="s"> = </span><b>function</b> (svg, x, y, w, h, r) {
+</code><code id="L2866"><span class="ln">2866</span>            <b>var</b> el<span class="s"> = </span>$(<i>"rect"</i>);
+</code><code id="L2867"><span class="ln">2867</span>            svg.canvas<span class="s"> &amp;&amp; </span>svg.canvas.appendChild(el);
+</code><code id="L2868"><span class="ln">2868</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2869"><span class="ln">2869</span>            res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, r: r<span class="s"> || </span><span class="d">0</span>, rx: r<span class="s"> || </span><span class="d">0</span>, ry: r<span class="s"> || </span><span class="d">0</span>, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2870"><span class="ln">2870</span>            res.type<span class="s"> = </span><i>"rect"</i>;
+</code><code id="L2871"><span class="ln">2871</span>            $(el, res.attrs);
+</code><code id="L2872"><span class="ln">2872</span>            <b>return</b> res;
+</code><code id="L2873"><span class="ln">2873</span>        },
+</code><code id="L2874"><span class="ln">2874</span>        theEllipse<span class="s"> = </span><b>function</b> (svg, x, y, rx, ry) {
+</code><code id="L2875"><span class="ln">2875</span>            <b>var</b> el<span class="s"> = </span>$(<i>"ellipse"</i>);
+</code><code id="L2876"><span class="ln">2876</span>            svg.canvas<span class="s"> &amp;&amp; </span>svg.canvas.appendChild(el);
+</code><code id="L2877"><span class="ln">2877</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2878"><span class="ln">2878</span>            res.attrs<span class="s"> = </span>{cx: x, cy: y, rx: rx, ry: ry, fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2879"><span class="ln">2879</span>            res.type<span class="s"> = </span><i>"ellipse"</i>;
+</code><code id="L2880"><span class="ln">2880</span>            $(el, res.attrs);
+</code><code id="L2881"><span class="ln">2881</span>            <b>return</b> res;
+</code><code id="L2882"><span class="ln">2882</span>        },
+</code><code id="L2883"><span class="ln">2883</span>        theImage<span class="s"> = </span><b>function</b> (svg, src, x, y, w, h) {
+</code><code id="L2884"><span class="ln">2884</span>            <b>var</b> el<span class="s"> = </span>$(<i>"image"</i>);
+</code><code id="L2885"><span class="ln">2885</span>            $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: <i>"none"</i>});
+</code><code id="L2886"><span class="ln">2886</span>            el.setAttributeNS(xlink, <i>"href"</i>, src);
+</code><code id="L2887"><span class="ln">2887</span>            svg.canvas<span class="s"> &amp;&amp; </span>svg.canvas.appendChild(el);
+</code><code id="L2888"><span class="ln">2888</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2889"><span class="ln">2889</span>            res.attrs<span class="s"> = </span>{x: x, y: y, width: w, height: h, src: src};
+</code><code id="L2890"><span class="ln">2890</span>            res.type<span class="s"> = </span><i>"image"</i>;
+</code><code id="L2891"><span class="ln">2891</span>            <b>return</b> res;
+</code><code id="L2892"><span class="ln">2892</span>        },
+</code><code id="L2893"><span class="ln">2893</span>        theText<span class="s"> = </span><b>function</b> (svg, x, y, text) {
+</code><code id="L2894"><span class="ln">2894</span>            <b>var</b> el<span class="s"> = </span>$(<i>"text"</i>);
+</code><code id="L2895"><span class="ln">2895</span>            $(el, {x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>});
+</code><code id="L2896"><span class="ln">2896</span>            svg.canvas<span class="s"> &amp;&amp; </span>svg.canvas.appendChild(el);
+</code><code id="L2897"><span class="ln">2897</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Element(el, svg);
+</code><code id="L2898"><span class="ln">2898</span>            res.attrs<span class="s"> = </span>{x: x, y: y, <i>"text-anchor"</i>: <i>"middle"</i>, text: text, font: availableAttrs.font, stroke: <i>"none"</i>, fill: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L2899"><span class="ln">2899</span>            res.type<span class="s"> = </span><i>"text"</i>;
+</code><code id="L2900"><span class="ln">2900</span>            setFillAndStroke(res, res.attrs);
+</code><code id="L2901"><span class="ln">2901</span>            <b>return</b> res;
+</code><code id="L2902"><span class="ln">2902</span>        },
+</code><code id="L2903"><span class="ln">2903</span>        setSize<span class="s"> = </span><b>function</b> (width, height) {
+</code><code id="L2904"><span class="ln">2904</span>            <b>this</b>.width<span class="s"> = </span>width<span class="s"> || </span><b>this</b>.width;
+</code><code id="L2905"><span class="ln">2905</span>            <b>this</b>.height<span class="s"> = </span>height<span class="s"> || </span><b>this</b>.height;
+</code><code id="L2906"><span class="ln">2906</span>            <b>this</b>.canvas[setAttribute](<i>"width"</i>, <b>this</b>.width);
+</code><code id="L2907"><span class="ln">2907</span>            <b>this</b>.canvas[setAttribute](<i>"height"</i>, <b>this</b>.height);
+</code><code id="L2908"><span class="ln">2908</span>            <b>if</b> (<b>this</b>._viewBox) {
+</code><code id="L2909"><span class="ln">2909</span>                <b>this</b>.setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
+</code><code id="L2910"><span class="ln">2910</span>            }
+</code><code id="L2911"><span class="ln">2911</span>            <b>return</b> <b>this</b>;
+</code><code id="L2912"><span class="ln">2912</span>        },
+</code><code id="L2913"><span class="ln">2913</span>        create<span class="s"> = </span><b>function</b> () {
+</code><code id="L2914"><span class="ln">2914</span>            <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
+</code><code id="L2915"><span class="ln">2915</span>                container<span class="s"> = </span>con<span class="s"> &amp;&amp; </span>con.container,
+</code><code id="L2916"><span class="ln">2916</span>                x<span class="s"> = </span>con.x,
+</code><code id="L2917"><span class="ln">2917</span>                y<span class="s"> = </span>con.y,
+</code><code id="L2918"><span class="ln">2918</span>                width<span class="s"> = </span>con.width,
+</code><code id="L2919"><span class="ln">2919</span>                height<span class="s"> = </span>con.height;
+</code><code id="L2920"><span class="ln">2920</span>            <b>if</b> (!container) {
+</code><code id="L2921"><span class="ln">2921</span>                <b>throw</b> <b>new</b> Error(<i>"SVG container not found."</i>);
+</code><code id="L2922"><span class="ln">2922</span>            }
+</code><code id="L2923"><span class="ln">2923</span>            <b>var</b> cnvs<span class="s"> = </span>$(<i>"svg"</i>),
+</code><code id="L2924"><span class="ln">2924</span>                css<span class="s"> = </span><i>"overflow:hidden;"</i>;
+</code><code id="L2925"><span class="ln">2925</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2926"><span class="ln">2926</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L2927"><span class="ln">2927</span>            width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
+</code><code id="L2928"><span class="ln">2928</span>            height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
+</code><code id="L2929"><span class="ln">2929</span>            $(cnvs, {
+</code><code id="L2930"><span class="ln">2930</span>                height: height,
+</code><code id="L2931"><span class="ln">2931</span>                version: <span class="d">1.1</span>,
+</code><code id="L2932"><span class="ln">2932</span>                width: width,
+</code><code id="L2933"><span class="ln">2933</span>                xmlns: <i>"http:<span class="c">//www.w3.org/<span class="d">2000</span>/svg"</i></span>
+</code><code id="L2934"><span class="ln">2934</span>            });
+</code><code id="L2935"><span class="ln">2935</span>            <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L2936"><span class="ln">2936</span>                cnvs.style.cssText<span class="s"> = </span>css<span class="s"> + </span><i>"position:absolute;left:"</i><span class="s"> + </span>x<span class="s"> + </span><i>"px;top:"</i><span class="s"> + </span>y<span class="s"> + </span><i>"px"</i>;
+</code><code id="L2937"><span class="ln">2937</span>                g.doc.body.appendChild(cnvs);
+</code><code id="L2938"><span class="ln">2938</span>            } <b>else</b> {
+</code><code id="L2939"><span class="ln">2939</span>                cnvs.style.cssText<span class="s"> = </span>css;
+</code><code id="L2940"><span class="ln">2940</span>                <b>if</b> (container.firstChild) {
+</code><code id="L2941"><span class="ln">2941</span>                    container.insertBefore(cnvs, container.firstChild);
+</code><code id="L2942"><span class="ln">2942</span>                } <b>else</b> {
+</code><code id="L2943"><span class="ln">2943</span>                    container.appendChild(cnvs);
+</code><code id="L2944"><span class="ln">2944</span>                }
+</code><code id="L2945"><span class="ln">2945</span>            }
+</code><code id="L2946"><span class="ln">2946</span>            container<span class="s"> = </span><b>new</b> Paper;
+</code><code id="L2947"><span class="ln">2947</span>            container.width<span class="s"> = </span>width;
+</code><code id="L2948"><span class="ln">2948</span>            container.height<span class="s"> = </span>height;
+</code><code id="L2949"><span class="ln">2949</span>            container.canvas<span class="s"> = </span>cnvs;
+</code><code id="L2950"><span class="ln">2950</span>            plugins.call(container, container, R.fn);
+</code><code id="L2951"><span class="ln">2951</span>            container.clear();
+</code><code id="L2952"><span class="ln">2952</span>            <b>return</b> container;
+</code><code id="L2953"><span class="ln">2953</span>        },
+</code><code id="L2954"><span class="ln">2954</span>        setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
+</code><code id="L2955"><span class="ln">2955</span>            eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
+</code><code id="L2956"><span class="ln">2956</span>            <b>var</b> size<span class="s"> = </span>mmax(w<span class="s"> / </span><b>this</b>.width, h<span class="s"> / </span><b>this</b>.height),
+</code><code id="L2957"><span class="ln">2957</span>                top<span class="s"> = </span><b>this</b>.top,
+</code><code id="L2958"><span class="ln">2958</span>                aspectRatio<span class="s"> = </span>fit ? <i>"meet"</i> : <i>"xMinYMin"</i>,
+</code><code id="L2959"><span class="ln">2959</span>                vb,
+</code><code id="L2960"><span class="ln">2960</span>                sw;
+</code><code id="L2961"><span class="ln">2961</span>            <b>if</b> (x<span class="s"> == </span><b>null</b>) {
+</code><code id="L2962"><span class="ln">2962</span>                <b>if</b> (<b>this</b>._vbSize) {
+</code><code id="L2963"><span class="ln">2963</span>                    size<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2964"><span class="ln">2964</span>                }
+</code><code id="L2965"><span class="ln">2965</span>                <b>delete</b> <b>this</b>._vbSize;
+</code><code id="L2966"><span class="ln">2966</span>                vb<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span> "</i><span class="s"> + </span><b>this</b>.width<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.height;
+</code><code id="L2967"><span class="ln">2967</span>            } <b>else</b> {
+</code><code id="L2968"><span class="ln">2968</span>                <b>this</b>._vbSize<span class="s"> = </span>size;
+</code><code id="L2969"><span class="ln">2969</span>                vb<span class="s"> = </span>x<span class="s"> + </span>S<span class="s"> + </span>y<span class="s"> + </span>S<span class="s"> + </span>w<span class="s"> + </span>S<span class="s"> + </span>h;
+</code><code id="L2970"><span class="ln">2970</span>            }
+</code><code id="L2971"><span class="ln">2971</span>            $(<b>this</b>.canvas, {
+</code><code id="L2972"><span class="ln">2972</span>                viewBox: vb,
+</code><code id="L2973"><span class="ln">2973</span>                preserveAspectRatio: aspectRatio
+</code><code id="L2974"><span class="ln">2974</span>            });
+</code><code id="L2975"><span class="ln">2975</span>            <b>while</b> (size<span class="s"> &amp;&amp; </span>top) {
+</code><code id="L2976"><span class="ln">2976</span>                sw<span class="s"> = </span><i>"stroke-width"</i> <b>in</b> top.attrs ? top.attrs[<i>"stroke-width"</i>] : <span class="d">1</span>;
+</code><code id="L2977"><span class="ln">2977</span>                top.attr({<i>"stroke-width"</i>: sw});
+</code><code id="L2978"><span class="ln">2978</span>                top._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2979"><span class="ln">2979</span>                top._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L2980"><span class="ln">2980</span>                top<span class="s"> = </span>top.prev;
+</code><code id="L2981"><span class="ln">2981</span>            }
+</code><code id="L2982"><span class="ln">2982</span>            <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
+</code><code id="L2983"><span class="ln">2983</span>            <b>return</b> <b>this</b>;
+</code><code id="L2984"><span class="ln">2984</span>        };
+</code><code id="L2985"><span class="ln">2985</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L2986"><span class="ln">2986</span><span class="c">        <span class="s"> * </span>Paper.clear
+</span></code><code id="L2987"><span class="ln">2987</span><span class="c">         [ method ]
+</span></code><code id="L2988"><span class="ln">2988</span><span class="c">         **
+</span></code><code id="L2989"><span class="ln">2989</span><span class="c">        <span class="s"> * </span>Clears the paper, i.e. removes all the elements.
+</span></code><code id="L2990"><span class="ln">2990</span><span class="c">        \*/</span>
+</code><code id="L2991"><span class="ln">2991</span>        paperproto.clear<span class="s"> = </span><b>function</b> () {
+</code><code id="L2992"><span class="ln">2992</span>            eve(<i>"clear"</i>, <b>this</b>);
+</code><code id="L2993"><span class="ln">2993</span>            <b>var</b> c<span class="s"> = </span><b>this</b>.canvas;
+</code><code id="L2994"><span class="ln">2994</span>            <b>while</b> (c.firstChild) {
+</code><code id="L2995"><span class="ln">2995</span>                c.removeChild(c.firstChild);
+</code><code id="L2996"><span class="ln">2996</span>            }
+</code><code id="L2997"><span class="ln">2997</span>            <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
+</code><code id="L2998"><span class="ln">2998</span>            (<b>this</b>.desc<span class="s"> = </span>$(<i>"desc"</i>)).appendChild(g.doc.createTextNode(<i>"Created <b>with</b> Rapha\xebl "</i><span class="s"> + </span>R.version));
+</code><code id="L2999"><span class="ln">2999</span>            c.appendChild(<b>this</b>.desc);
+</code><code id="L3000"><span class="ln">3000</span>            c.appendChild(<b>this</b>.defs<span class="s"> = </span>$(<i>"defs"</i>));
+</code><code id="L3001"><span class="ln">3001</span>        };
+</code><code id="L3002"><span class="ln">3002</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L3003"><span class="ln">3003</span><span class="c">        <span class="s"> * </span>Paper.remove
+</span></code><code id="L3004"><span class="ln">3004</span><span class="c">         [ method ]
+</span></code><code id="L3005"><span class="ln">3005</span><span class="c">         **
+</span></code><code id="L3006"><span class="ln">3006</span><span class="c">        <span class="s"> * </span>Removes the paper from the DOM.
+</span></code><code id="L3007"><span class="ln">3007</span><span class="c">        \*/</span>
+</code><code id="L3008"><span class="ln">3008</span>        paperproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L3009"><span class="ln">3009</span>            eve(<i>"remove"</i>, <b>this</b>);
+</code><code id="L3010"><span class="ln">3010</span>            <b>this</b>.canvas.parentNode<span class="s"> &amp;&amp; </span><b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
+</code><code id="L3011"><span class="ln">3011</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L3012"><span class="ln">3012</span>                <b>this</b>[i]<span class="s"> = </span>removed(i);
+</code><code id="L3013"><span class="ln">3013</span>            }
+</code><code id="L3014"><span class="ln">3014</span>        };
+</code><code id="L3015"><span class="ln">3015</span>    }
+</code><code id="L3016"><span class="ln">3016</span>
+</code><code id="L3017"><span class="ln">3017</span>    <span class="c">// VML</span>
+</code><code id="L3018"><span class="ln">3018</span>    <b>if</b> (R.vml) {
+</code><code id="L3019"><span class="ln">3019</span>        <b>var</b> map<span class="s"> = </span>{M: <i>"m"</i>, L: <i>"l"</i>, C: <i>"c"</i>, Z: <i>"x"</i>, m: <i>"t"</i>, l: <i>"r"</i>, c: <i>"v"</i>, z: <i>"x"</i>},
+</code><code id="L3020"><span class="ln">3020</span>            bites<span class="s"> = </span>/([clmz]),?([^clmz]*)/gi,
+</code><code id="L3021"><span class="ln">3021</span>            blurregexp<span class="s"> = </span>/ progid:\S+Blur\([^\)]+\)/g,
+</code><code id="L3022"><span class="ln">3022</span>            val<span class="s"> = </span>/-?[^,\s-]+/g,
+</code><code id="L3023"><span class="ln">3023</span>            cssDot<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:1px;height:1px"</i>,
+</code><code id="L3024"><span class="ln">3024</span>            zoom<span class="s"> = </span><span class="d">21600</span>,
+</code><code id="L3025"><span class="ln">3025</span>            pathTypes<span class="s"> = </span>{path: <span class="d">1</span>, rect: <span class="d">1</span>},
+</code><code id="L3026"><span class="ln">3026</span>            ovalTypes<span class="s"> = </span>{circle: <span class="d">1</span>, ellipse: <span class="d">1</span>},
+</code><code id="L3027"><span class="ln">3027</span>            path2vml<span class="s"> = </span><b>function</b> (path) {
+</code><code id="L3028"><span class="ln">3028</span>                <b>var</b> total<span class="s"> = </span> /[ahqstv]/ig,
+</code><code id="L3029"><span class="ln">3029</span>                    command<span class="s"> = </span>pathToAbsolute;
+</code><code id="L3030"><span class="ln">3030</span>                Str(path).match(total)<span class="s"> &amp;&amp; </span>(command<span class="s"> = </span>path2curve);
+</code><code id="L3031"><span class="ln">3031</span>                total<span class="s"> = </span>/[clmz]/g;
+</code><code id="L3032"><span class="ln">3032</span>                <b>if</b> (command<span class="s"> == </span>pathToAbsolute<span class="s"> &amp;&amp; </span>!Str(path).match(total)) {
+</code><code id="L3033"><span class="ln">3033</span>                    <b>var</b> res<span class="s"> = </span>Str(path).replace(bites, <b>function</b> (all, command, args) {
+</code><code id="L3034"><span class="ln">3034</span>                        <b>var</b> vals<span class="s"> = </span>[],
+</code><code id="L3035"><span class="ln">3035</span>                            isMove<span class="s"> = </span>lowerCase.call(command)<span class="s"> == </span><i>"m"</i>,
+</code><code id="L3036"><span class="ln">3036</span>                            res<span class="s"> = </span>map[command];
+</code><code id="L3037"><span class="ln">3037</span>                        args.replace(val, <b>function</b> (value) {
+</code><code id="L3038"><span class="ln">3038</span>                            <b>if</b> (isMove<span class="s"> &amp;&amp; </span>vals.length<span class="s"> == </span><span class="d">2</span>) {
+</code><code id="L3039"><span class="ln">3039</span>                                res += vals<span class="s"> + </span>map[command<span class="s"> == </span><i>"m"</i> ? <i>"l"</i> : <i>"L"</i>];
+</code><code id="L3040"><span class="ln">3040</span>                                vals<span class="s"> = </span>[];
+</code><code id="L3041"><span class="ln">3041</span>                            }
+</code><code id="L3042"><span class="ln">3042</span>                            vals.push(round(value<span class="s"> * </span>zoom));
+</code><code id="L3043"><span class="ln">3043</span>                        });
+</code><code id="L3044"><span class="ln">3044</span>                        <b>return</b> res<span class="s"> + </span>vals;
+</code><code id="L3045"><span class="ln">3045</span>                    });
+</code><code id="L3046"><span class="ln">3046</span>                    <b>return</b> res;
+</code><code id="L3047"><span class="ln">3047</span>                }
+</code><code id="L3048"><span class="ln">3048</span>                <b>var</b> pa<span class="s"> = </span>command(path), p, r;
+</code><code id="L3049"><span class="ln">3049</span>                res<span class="s"> = </span>[];
+</code><code id="L3050"><span class="ln">3050</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>pa.length; i &lt; ii; i++) {
+</code><code id="L3051"><span class="ln">3051</span>                    p<span class="s"> = </span>pa[i];
+</code><code id="L3052"><span class="ln">3052</span>                    r<span class="s"> = </span>lowerCase.call(pa[i][<span class="d">0</span>]);
+</code><code id="L3053"><span class="ln">3053</span>                    r<span class="s"> == </span><i>"z"</i><span class="s"> &amp;&amp; </span>(r<span class="s"> = </span><i>"x"</i>);
+</code><code id="L3054"><span class="ln">3054</span>                    <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>p.length; j &lt; jj; j++) {
+</code><code id="L3055"><span class="ln">3055</span>                        r += round(p[j]<span class="s"> * </span>zoom)<span class="s"> + </span>(j != jj<span class="s"> - </span><span class="d">1</span> ? <i>","</i> : E);
+</code><code id="L3056"><span class="ln">3056</span>                    }
+</code><code id="L3057"><span class="ln">3057</span>                    res.push(r);
+</code><code id="L3058"><span class="ln">3058</span>                }
+</code><code id="L3059"><span class="ln">3059</span>                <b>return</b> res.join(S);
+</code><code id="L3060"><span class="ln">3060</span>            },
+</code><code id="L3061"><span class="ln">3061</span>            compensation<span class="s"> = </span><b>function</b> (deg, dx, dy) {
+</code><code id="L3062"><span class="ln">3062</span>                <b>var</b> m<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L3063"><span class="ln">3063</span>                m.rotate(-deg, <span class="d">.5</span>, <span class="d">.5</span>);
+</code><code id="L3064"><span class="ln">3064</span>                <b>return</b> {
+</code><code id="L3065"><span class="ln">3065</span>                    dx: m.x(dx, dy),
+</code><code id="L3066"><span class="ln">3066</span>                    dy: m.y(dx, dy)
+</code><code id="L3067"><span class="ln">3067</span>                };
+</code><code id="L3068"><span class="ln">3068</span>            },
+</code><code id="L3069"><span class="ln">3069</span>            setCoords<span class="s"> = </span><b>function</b> (p) {
+</code><code id="L3070"><span class="ln">3070</span>                <b>var</b> _<span class="s"> = </span>p._,
+</code><code id="L3071"><span class="ln">3071</span>                    sx<span class="s"> = </span>_.sx,
+</code><code id="L3072"><span class="ln">3072</span>                    sy<span class="s"> = </span>_.sy,
+</code><code id="L3073"><span class="ln">3073</span>                    deg<span class="s"> = </span>_.deg,
+</code><code id="L3074"><span class="ln">3074</span>                    dx<span class="s"> = </span>_.dx,
+</code><code id="L3075"><span class="ln">3075</span>                    dy<span class="s"> = </span>_.dy,
+</code><code id="L3076"><span class="ln">3076</span>                    fillpos<span class="s"> = </span>_.fillpos,
+</code><code id="L3077"><span class="ln">3077</span>                    o<span class="s"> = </span>p.node,
+</code><code id="L3078"><span class="ln">3078</span>                    s<span class="s"> = </span>o.style,
+</code><code id="L3079"><span class="ln">3079</span>                    y<span class="s"> = </span><span class="d">1</span>,
+</code><code id="L3080"><span class="ln">3080</span>                    m<span class="s"> = </span>p.matrix,
+</code><code id="L3081"><span class="ln">3081</span>                    flip<span class="s"> = </span><i>""</i>,
+</code><code id="L3082"><span class="ln">3082</span>                    dxdy,
+</code><code id="L3083"><span class="ln">3083</span>                    kx<span class="s"> = </span>zoom<span class="s"> / </span>sx,
+</code><code id="L3084"><span class="ln">3084</span>                    ky<span class="s"> = </span>zoom<span class="s"> / </span>sy;
+</code><code id="L3085"><span class="ln">3085</span>                s.visibility<span class="s"> = </span><i>"hidden"</i>;
+</code><code id="L3086"><span class="ln">3086</span>                o.coordsize<span class="s"> = </span>abs(kx)<span class="s"> + </span>S<span class="s"> + </span>abs(ky);
+</code><code id="L3087"><span class="ln">3087</span>                s.rotation<span class="s"> = </span>deg<span class="s"> * </span>(sx<span class="s"> * </span>sy &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>);
+</code><code id="L3088"><span class="ln">3088</span>                <b>if</b> (deg) {
+</code><code id="L3089"><span class="ln">3089</span>                    <b>var</b> c<span class="s"> = </span>compensation(deg, dx, dy);
+</code><code id="L3090"><span class="ln">3090</span>                    dx<span class="s"> = </span>c.dx;
+</code><code id="L3091"><span class="ln">3091</span>                    dy<span class="s"> = </span>c.dy;
+</code><code id="L3092"><span class="ln">3092</span>                }
+</code><code id="L3093"><span class="ln">3093</span>                sx &lt; <span class="d">0</span><span class="s"> &amp;&amp; </span>(flip += <i>"x"</i>);
+</code><code id="L3094"><span class="ln">3094</span>                sy &lt; <span class="d">0</span><span class="s"> &amp;&amp; </span>(flip += <i>" y"</i>)<span class="s"> &amp;&amp; </span>(y<span class="s"> = </span>-<span class="d">1</span>);
+</code><code id="L3095"><span class="ln">3095</span>                s.flip<span class="s"> = </span>flip;
+</code><code id="L3096"><span class="ln">3096</span>                o.coordorigin<span class="s"> = </span>(dx<span class="s"> * </span>-kx)<span class="s"> + </span>S<span class="s"> + </span>(dy<span class="s"> * </span>-ky);
+</code><code id="L3097"><span class="ln">3097</span>                <b>if</b> (fillpos<span class="s"> || </span>_.fillsize) {
+</code><code id="L3098"><span class="ln">3098</span>                    <b>var</b> fill<span class="s"> = </span>o.getElementsByTagName(fillString);
+</code><code id="L3099"><span class="ln">3099</span>                    fill<span class="s"> = </span>fill<span class="s"> &amp;&amp; </span>fill[<span class="d">0</span>];
+</code><code id="L3100"><span class="ln">3100</span>                    o.removeChild(fill);
+</code><code id="L3101"><span class="ln">3101</span>                    <b>if</b> (fillpos) {
+</code><code id="L3102"><span class="ln">3102</span>                        c<span class="s"> = </span>compensation(deg, m.x(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]), m.y(fillpos[<span class="d">0</span>], fillpos[<span class="d">1</span>]));
+</code><code id="L3103"><span class="ln">3103</span>                        fill.position<span class="s"> = </span>c.dx<span class="s"> * </span>y<span class="s"> + </span>S<span class="s"> + </span>c.dy<span class="s"> * </span>y;
+</code><code id="L3104"><span class="ln">3104</span>                    }
+</code><code id="L3105"><span class="ln">3105</span>                    <b>if</b> (_.fillsize) {
+</code><code id="L3106"><span class="ln">3106</span>                        fill.size<span class="s"> = </span>_.fillsize[<span class="d">0</span>]<span class="s"> * </span>abs(sx)<span class="s"> + </span>S<span class="s"> + </span>_.fillsize[<span class="d">1</span>]<span class="s"> * </span>abs(sy);
+</code><code id="L3107"><span class="ln">3107</span>                    }
+</code><code id="L3108"><span class="ln">3108</span>                    o.appendChild(fill);
+</code><code id="L3109"><span class="ln">3109</span>                }
+</code><code id="L3110"><span class="ln">3110</span>                s.visibility<span class="s"> = </span><i>"visible"</i>;
+</code><code id="L3111"><span class="ln">3111</span>            };
+</code><code id="L3112"><span class="ln">3112</span>        R.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L3113"><span class="ln">3113</span>            <b>return</b>  <i>"Your browser doesn\u2019t support SVG. Falling down to VML.\nYou are running Rapha\xebl "</i><span class="s"> + </span><b>this</b>.version;
+</code><code id="L3114"><span class="ln">3114</span>        };
+</code><code id="L3115"><span class="ln">3115</span>        addArrow<span class="s"> = </span><b>function</b> (o, value, isEnd) {
+</code><code id="L3116"><span class="ln">3116</span>            <b>var</b> values<span class="s"> = </span>Str(value).toLowerCase().split(<i>"-"</i>),
+</code><code id="L3117"><span class="ln">3117</span>                se<span class="s"> = </span>isEnd ? <i>"end"</i> : <i>"start"</i>,
+</code><code id="L3118"><span class="ln">3118</span>                i<span class="s"> = </span>values.length,
+</code><code id="L3119"><span class="ln">3119</span>                type<span class="s"> = </span><i>"classic"</i>,
+</code><code id="L3120"><span class="ln">3120</span>                w<span class="s"> = </span><i>"medium"</i>,
+</code><code id="L3121"><span class="ln">3121</span>                h<span class="s"> = </span><i>"medium"</i>;
+</code><code id="L3122"><span class="ln">3122</span>            <b>while</b> (i--) {
+</code><code id="L3123"><span class="ln">3123</span>                <b>switch</b> (values[i]) {
+</code><code id="L3124"><span class="ln">3124</span>                    <b>case</b> <i>"block"</i>:
+</code><code id="L3125"><span class="ln">3125</span>                    <b>case</b> <i>"classic"</i>:
+</code><code id="L3126"><span class="ln">3126</span>                    <b>case</b> <i>"oval"</i>:
+</code><code id="L3127"><span class="ln">3127</span>                    <b>case</b> <i>"diamond"</i>:
+</code><code id="L3128"><span class="ln">3128</span>                    <b>case</b> <i>"open"</i>:
+</code><code id="L3129"><span class="ln">3129</span>                    <b>case</b> <i>"none"</i>:
+</code><code id="L3130"><span class="ln">3130</span>                        type<span class="s"> = </span>values[i];
+</code><code id="L3131"><span class="ln">3131</span>                        <b>break</b>;
+</code><code id="L3132"><span class="ln">3132</span>                    <b>case</b> <i>"wide"</i>:
+</code><code id="L3133"><span class="ln">3133</span>                    <b>case</b> <i>"narrow"</i>: h<span class="s"> = </span>values[i]; <b>break</b>;
+</code><code id="L3134"><span class="ln">3134</span>                    <b>case</b> <i>"<b>long</b>"</i>:
+</code><code id="L3135"><span class="ln">3135</span>                    <b>case</b> <i>"<b>short</b>"</i>: w<span class="s"> = </span>values[i]; <b>break</b>;
+</code><code id="L3136"><span class="ln">3136</span>                }
+</code><code id="L3137"><span class="ln">3137</span>            }
+</code><code id="L3138"><span class="ln">3138</span>            <b>var</b> stroke<span class="s"> = </span>o.node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>];
+</code><code id="L3139"><span class="ln">3139</span>            stroke[se<span class="s"> + </span><i>"arrow"</i>]<span class="s"> = </span>type;
+</code><code id="L3140"><span class="ln">3140</span>            stroke[se<span class="s"> + </span><i>"arrowlength"</i>]<span class="s"> = </span>w;
+</code><code id="L3141"><span class="ln">3141</span>            stroke[se<span class="s"> + </span><i>"arrowwidth"</i>]<span class="s"> = </span>h;
+</code><code id="L3142"><span class="ln">3142</span>        };
+</code><code id="L3143"><span class="ln">3143</span>        setFillAndStroke<span class="s"> = </span><b>function</b> (o, params) {
+</code><code id="L3144"><span class="ln">3144</span>            o.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3145"><span class="ln">3145</span>            o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
+</code><code id="L3146"><span class="ln">3146</span>            <b>var</b> node<span class="s"> = </span>o.node,
+</code><code id="L3147"><span class="ln">3147</span>                a<span class="s"> = </span>o.attrs,
+</code><code id="L3148"><span class="ln">3148</span>                s<span class="s"> = </span>node.style,
+</code><code id="L3149"><span class="ln">3149</span>                xy,
+</code><code id="L3150"><span class="ln">3150</span>                newpath<span class="s"> = </span>pathTypes[o.type]<span class="s"> &amp;&amp; </span>(params.x != a.x<span class="s"> || </span>params.y != a.y<span class="s"> || </span>params.width != a.width<span class="s"> || </span>params.height != a.height<span class="s"> || </span>params.cx != a.cx<span class="s"> || </span>params.cy != a.cy<span class="s"> || </span>params.rx != a.rx<span class="s"> || </span>params.ry != a.ry<span class="s"> || </span>params.r != a.r),
+</code><code id="L3151"><span class="ln">3151</span>                isOval<span class="s"> = </span>ovalTypes[o.type]<span class="s"> &amp;&amp; </span>(a.cx != params.cx<span class="s"> || </span>a.cy != params.cy<span class="s"> || </span>a.r != params.r<span class="s"> || </span>a.rx != params.rx<span class="s"> || </span>a.ry != params.ry),
+</code><code id="L3152"><span class="ln">3152</span>                res<span class="s"> = </span>o;
+</code><code id="L3153"><span class="ln">3153</span>
+</code><code id="L3154"><span class="ln">3154</span>
+</code><code id="L3155"><span class="ln">3155</span>            <b>for</b> (<b>var</b> par <b>in</b> params) <b>if</b> (params[has](par)) {
+</code><code id="L3156"><span class="ln">3156</span>                a[par]<span class="s"> = </span>params[par];
+</code><code id="L3157"><span class="ln">3157</span>            }
+</code><code id="L3158"><span class="ln">3158</span>            <b>if</b> (newpath) {
+</code><code id="L3159"><span class="ln">3159</span>                a.path<span class="s"> = </span>getPath[o.type](o);
+</code><code id="L3160"><span class="ln">3160</span>                o._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3161"><span class="ln">3161</span>            }
+</code><code id="L3162"><span class="ln">3162</span>            params.href<span class="s"> &amp;&amp; </span>(node.href<span class="s"> = </span>params.href);
+</code><code id="L3163"><span class="ln">3163</span>            params.title<span class="s"> &amp;&amp; </span>(node.title<span class="s"> = </span>params.title);
+</code><code id="L3164"><span class="ln">3164</span>            params.target<span class="s"> &amp;&amp; </span>(node.target<span class="s"> = </span>params.target);
+</code><code id="L3165"><span class="ln">3165</span>            params.cursor<span class="s"> &amp;&amp; </span>(s.cursor<span class="s"> = </span>params.cursor);
+</code><code id="L3166"><span class="ln">3166</span>            <i>"blur"</i> <b>in</b> params<span class="s"> &amp;&amp; </span>o.blur(params.blur);
+</code><code id="L3167"><span class="ln">3167</span>            <i>"transform"</i> <b>in</b> params<span class="s"> &amp;&amp; </span>o.transform(params.transform);
+</code><code id="L3168"><span class="ln">3168</span>            <b>if</b> (params.path<span class="s"> &amp;&amp; </span>o.type<span class="s"> == </span><i>"path"</i><span class="s"> || </span>newpath) {
+</code><code id="L3169"><span class="ln">3169</span>                node.path<span class="s"> = </span>path2vml(a.path);
+</code><code id="L3170"><span class="ln">3170</span>            }
+</code><code id="L3171"><span class="ln">3171</span>            <b>if</b> (isOval) {
+</code><code id="L3172"><span class="ln">3172</span>                <b>var</b> cx<span class="s"> = </span>a.cx,
+</code><code id="L3173"><span class="ln">3173</span>                    cy<span class="s"> = </span>a.cy,
+</code><code id="L3174"><span class="ln">3174</span>                    rx<span class="s"> = </span>a.rx<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L3175"><span class="ln">3175</span>                    ry<span class="s"> = </span>a.ry<span class="s"> || </span>a.r<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3176"><span class="ln">3176</span>                node.path<span class="s"> = </span>R.format(<i>"ar{<span class="d">0</span>},{<span class="d">1</span>},{<span class="d">2</span>},{<span class="d">3</span>},{<span class="d">4</span>},{<span class="d">1</span>},{<span class="d">4</span>},{<span class="d">1</span>}x"</i>, round((cx<span class="s"> - </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> - </span>ry)<span class="s"> * </span>zoom), round((cx<span class="s"> + </span>rx)<span class="s"> * </span>zoom), round((cy<span class="s"> + </span>ry)<span class="s"> * </span>zoom), round(cx<span class="s"> * </span>zoom));
+</code><code id="L3177"><span class="ln">3177</span>            }
+</code><code id="L3178"><span class="ln">3178</span>            <b>if</b> (<i>"clip-rect"</i> <b>in</b> params) {
+</code><code id="L3179"><span class="ln">3179</span>                <b>var</b> rect<span class="s"> = </span>Str(params[<i>"clip-rect"</i>]).split(separator);
+</code><code id="L3180"><span class="ln">3180</span>                <b>if</b> (rect.length<span class="s"> == </span><span class="d">4</span>) {
+</code><code id="L3181"><span class="ln">3181</span>                    rect[<span class="d">2</span>]<span class="s"> = </span>+rect[<span class="d">2</span>]<span class="s"> + </span>(+rect[<span class="d">0</span>]);
+</code><code id="L3182"><span class="ln">3182</span>                    rect[<span class="d">3</span>]<span class="s"> = </span>+rect[<span class="d">3</span>]<span class="s"> + </span>(+rect[<span class="d">1</span>]);
+</code><code id="L3183"><span class="ln">3183</span>                    <b>var</b> div<span class="s"> = </span>node.clipRect<span class="s"> || </span>g.doc.createElement(<i>"div"</i>),
+</code><code id="L3184"><span class="ln">3184</span>                        dstyle<span class="s"> = </span>div.style,
+</code><code id="L3185"><span class="ln">3185</span>                        group<span class="s"> = </span>node.parentNode;
+</code><code id="L3186"><span class="ln">3186</span>                    dstyle.clip<span class="s"> = </span>R.format(<i>"rect({<span class="d">1</span>}px {<span class="d">2</span>}px {<span class="d">3</span>}px {<span class="d">0</span>}px)"</i>, rect);
+</code><code id="L3187"><span class="ln">3187</span>                    <b>if</b> (!node.clipRect) {
+</code><code id="L3188"><span class="ln">3188</span>                        dstyle.position<span class="s"> = </span><i>"absolute"</i>;
+</code><code id="L3189"><span class="ln">3189</span>                        dstyle.top<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3190"><span class="ln">3190</span>                        dstyle.left<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3191"><span class="ln">3191</span>                        dstyle.width<span class="s"> = </span>o.paper.width<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3192"><span class="ln">3192</span>                        dstyle.height<span class="s"> = </span>o.paper.height<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3193"><span class="ln">3193</span>                        group.parentNode.insertBefore(div, group);
+</code><code id="L3194"><span class="ln">3194</span>                        div.appendChild(group);
+</code><code id="L3195"><span class="ln">3195</span>                        node.clipRect<span class="s"> = </span>div;
+</code><code id="L3196"><span class="ln">3196</span>                    }
+</code><code id="L3197"><span class="ln">3197</span>                }
+</code><code id="L3198"><span class="ln">3198</span>                <b>if</b> (!params[<i>"clip-rect"</i>]) {
+</code><code id="L3199"><span class="ln">3199</span>                    node.clipRect<span class="s"> &amp;&amp; </span>(node.clipRect.style.clip<span class="s"> = </span>E);
+</code><code id="L3200"><span class="ln">3200</span>                }
+</code><code id="L3201"><span class="ln">3201</span>            }
+</code><code id="L3202"><span class="ln">3202</span>            <b>if</b> (o.textpath) {
+</code><code id="L3203"><span class="ln">3203</span>                <b>var</b> textpathStyle<span class="s"> = </span>o.textpath.style;
+</code><code id="L3204"><span class="ln">3204</span>                params.font<span class="s"> &amp;&amp; </span>(textpathStyle.font<span class="s"> = </span>params.font);
+</code><code id="L3205"><span class="ln">3205</span>                params[<i>"font-family"</i>]<span class="s"> &amp;&amp; </span>(textpathStyle.fontFamily<span class="s"> = </span><i>'"'</i><span class="s"> + </span>params[<i>"font-family"</i>].split(<i>","</i>)[<span class="d">0</span>].replace(/^[<i>'"]+|['</i><i>"]+$/g, E)<span class="s"> + </span>'"</i>');
+</code><code id="L3206"><span class="ln">3206</span>                params[<i>"font-size"</i>]<span class="s"> &amp;&amp; </span>(textpathStyle.fontSize<span class="s"> = </span>params[<i>"font-size"</i>]);
+</code><code id="L3207"><span class="ln">3207</span>                params[<i>"font-weight"</i>]<span class="s"> &amp;&amp; </span>(textpathStyle.fontWeight<span class="s"> = </span>params[<i>"font-weight"</i>]);
+</code><code id="L3208"><span class="ln">3208</span>                params[<i>"font-style"</i>]<span class="s"> &amp;&amp; </span>(textpathStyle.fontStyle<span class="s"> = </span>params[<i>"font-style"</i>]);
+</code><code id="L3209"><span class="ln">3209</span>            }
+</code><code id="L3210"><span class="ln">3210</span>            <b>if</b> (<i>"arrow-start"</i> <b>in</b> params) {
+</code><code id="L3211"><span class="ln">3211</span>                addArrow(res, params[<i>"arrow-start"</i>]);
+</code><code id="L3212"><span class="ln">3212</span>            }
+</code><code id="L3213"><span class="ln">3213</span>            <b>if</b> (<i>"arrow-end"</i> <b>in</b> params) {
+</code><code id="L3214"><span class="ln">3214</span>                addArrow(res, params[<i>"arrow-end"</i>], <span class="d">1</span>);
 </code><code id="L3215"><span class="ln">3215</span>            }
-</code><code id="L3216"><span class="ln">3216</span>            extractTransform(<b>this</b>, tstr);
-</code><code id="L3217"><span class="ln">3217</span>            <b>var</b> matrix<span class="s"> = </span><b>this</b>.matrix.clone(),
-</code><code id="L3218"><span class="ln">3218</span>                skew<span class="s"> = </span><b>this</b>.skew;
-</code><code id="L3219"><span class="ln">3219</span>            matrix.translate(-<span class="d">.5</span>, -<span class="d">.5</span>);
-</code><code id="L3220"><span class="ln">3220</span>            <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"image"</i>) {
-</code><code id="L3221"><span class="ln">3221</span>                <b>if</b> (Str(tstr).indexOf(<i>"m"</i>)<span class="s"> + </span><span class="d">1</span>) {
-</code><code id="L3222"><span class="ln">3222</span>                    <b>this</b>.node.style.filter<span class="s"> = </span>matrix.toFilter();
-</code><code id="L3223"><span class="ln">3223</span>                    <b>var</b> bb<span class="s"> = </span><b>this</b>.getBBox(),
-</code><code id="L3224"><span class="ln">3224</span>                        bbt<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>),
-</code><code id="L3225"><span class="ln">3225</span>                        im<span class="s"> = </span>matrix.invert(),
-</code><code id="L3226"><span class="ln">3226</span>                        dx<span class="s"> = </span>im.x(bb.x, bb.y)<span class="s"> - </span>im.x(bbt.x, bbt.y),
-</code><code id="L3227"><span class="ln">3227</span>                        dy<span class="s"> = </span>im.y(bb.x, bb.y)<span class="s"> - </span>im.y(bbt.x, bbt.y);
-</code><code id="L3228"><span class="ln">3228</span>                    <span class="c">// skew.offset<span class="s"> = </span>dx<span class="s"> + </span>S<span class="s"> + </span>dy;</span>
-</code><code id="L3229"><span class="ln">3229</span>                    <span class="c">// <b>this</b>.node.getElementsByTagName(fillString)[<span class="d">0</span>].position<span class="s"> = </span>skew.offset;</span>
-</code><code id="L3230"><span class="ln">3230</span>                } <b>else</b> {
-</code><code id="L3231"><span class="ln">3231</span>                    <b>this</b>.node.style.filter<span class="s"> = </span>E;
-</code><code id="L3232"><span class="ln">3232</span>                    setCoords(<b>this</b>);
-</code><code id="L3233"><span class="ln">3233</span>                }
-</code><code id="L3234"><span class="ln">3234</span>            } <b>else</b> {
-</code><code id="L3235"><span class="ln">3235</span>                    <span class="c">// o<span class="s"> = </span><b>this</b>.node,</span>
-</code><code id="L3236"><span class="ln">3236</span>                    <span class="c">// _<span class="s"> = </span><b>this</b>._,</span>
-</code><code id="L3237"><span class="ln">3237</span>                    <span class="c">// fillpos<span class="s"> = </span>_.fillpos,</span>
-</code><code id="L3238"><span class="ln">3238</span>                    <span class="c">// deg,</span>
-</code><code id="L3239"><span class="ln">3239</span>                    <span class="c">// matrix<span class="s"> = </span><b>this</b>.matrix;</span>
-</code><code id="L3240"><span class="ln">3240</span>                    <span class="c">// fill<span class="s"> = </span>o.getElementsByTagName(fillString)[<span class="d">0</span>],</span>
-</code><code id="L3241"><span class="ln">3241</span>                    <span class="c">// angle<span class="s"> = </span>fill.angle;</span>
-</code><code id="L3242"><span class="ln">3242</span>
-</code><code id="L3243"><span class="ln">3243</span>                <b>this</b>.node.style.filter<span class="s"> = </span>E;
-</code><code id="L3244"><span class="ln">3244</span>                skew.matrix<span class="s"> = </span>matrix;
-</code><code id="L3245"><span class="ln">3245</span>                skew.offset<span class="s"> = </span>matrix.offset();
-</code><code id="L3246"><span class="ln">3246</span>                
-</code><code id="L3247"><span class="ln">3247</span>                <span class="c">// <b>if</b> (<span class="d">0</span>&amp;&amp;angle) {</span>
-</code><code id="L3248"><span class="ln">3248</span>                <span class="c">//     angle<span class="s"> = </span>R.rad(<span class="d">270</span><span class="s"> - </span>angle);</span>
-</code><code id="L3249"><span class="ln">3249</span>                <span class="c">//     <b>var</b> dx<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.cos(angle),</span>
-</code><code id="L3250"><span class="ln">3250</span>                <span class="c">//         dy<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.sin(angle),</span>
-</code><code id="L3251"><span class="ln">3251</span>                <span class="c">//         zx<span class="s"> = </span>matrix.x(<span class="d">0</span>, <span class="d">0</span>),</span>
-</code><code id="L3252"><span class="ln">3252</span>                <span class="c">//         zy<span class="s"> = </span>matrix.y(<span class="d">0</span>, <span class="d">0</span>),</span>
-</code><code id="L3253"><span class="ln">3253</span>                <span class="c">//         mx<span class="s"> = </span>matrix.x(dx, dy),</span>
-</code><code id="L3254"><span class="ln">3254</span>                <span class="c">//         my<span class="s"> = </span>matrix.y(dx, dy);</span>
-</code><code id="L3255"><span class="ln">3255</span>                <span class="c">//     angle<span class="s"> = </span>R.angle(zx, zy, mx, my);</span>
-</code><code id="L3256"><span class="ln">3256</span>                <span class="c">//     fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle) % <span class="d">360</span>;</span>
-</code><code id="L3257"><span class="ln">3257</span>                <span class="c">// }</span>
-</code><code id="L3258"><span class="ln">3258</span>            }
-</code><code id="L3259"><span class="ln">3259</span>            <b>return</b> <b>this</b>;
-</code><code id="L3260"><span class="ln">3260</span>        };
-</code><code id="L3261"><span class="ln">3261</span>        elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
-</code><code id="L3262"><span class="ln">3262</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3263"><span class="ln">3263</span>                <b>return</b> <b>this</b>;
-</code><code id="L3264"><span class="ln">3264</span>            }
-</code><code id="L3265"><span class="ln">3265</span>            <b>if</b> (deg<span class="s"> == </span><b>null</b>) {
-</code><code id="L3266"><span class="ln">3266</span>                <b>return</b>;
-</code><code id="L3267"><span class="ln">3267</span>            }
-</code><code id="L3268"><span class="ln">3268</span>            deg<span class="s"> = </span>Str(deg).split(separator);
-</code><code id="L3269"><span class="ln">3269</span>            <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L3270"><span class="ln">3270</span>                cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
-</code><code id="L3271"><span class="ln">3271</span>                cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
-</code><code id="L3272"><span class="ln">3272</span>            }
-</code><code id="L3273"><span class="ln">3273</span>            deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
-</code><code id="L3274"><span class="ln">3274</span>            (cy<span class="s"> == </span><b>null</b>) &amp;&amp; (cx<span class="s"> = </span>cy);
-</code><code id="L3275"><span class="ln">3275</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
-</code><code id="L3276"><span class="ln">3276</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
-</code><code id="L3277"><span class="ln">3277</span>                cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L3278"><span class="ln">3278</span>                cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
-</code><code id="L3279"><span class="ln">3279</span>            }
-</code><code id="L3280"><span class="ln">3280</span>            <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L3281"><span class="ln">3281</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
-</code><code id="L3282"><span class="ln">3282</span>            <b>return</b> <b>this</b>;
-</code><code id="L3283"><span class="ln">3283</span>        };
-</code><code id="L3284"><span class="ln">3284</span>        elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
-</code><code id="L3285"><span class="ln">3285</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3286"><span class="ln">3286</span>                <b>return</b> <b>this</b>;
-</code><code id="L3287"><span class="ln">3287</span>            }
-</code><code id="L3288"><span class="ln">3288</span>            dx<span class="s"> = </span>Str(dx).split(separator);
-</code><code id="L3289"><span class="ln">3289</span>            <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L3290"><span class="ln">3290</span>                dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
-</code><code id="L3291"><span class="ln">3291</span>            }
-</code><code id="L3292"><span class="ln">3292</span>            dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3293"><span class="ln">3293</span>            dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3294"><span class="ln">3294</span>            <b>if</b> (<b>this</b>._.bbox) {
-</code><code id="L3295"><span class="ln">3295</span>                <b>this</b>._.bbox.x += dx;
-</code><code id="L3296"><span class="ln">3296</span>                <b>this</b>._.bbox.y += dy;
-</code><code id="L3297"><span class="ln">3297</span>            }
-</code><code id="L3298"><span class="ln">3298</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
-</code><code id="L3299"><span class="ln">3299</span>            <b>return</b> <b>this</b>;
-</code><code id="L3300"><span class="ln">3300</span>        };
-</code><code id="L3301"><span class="ln">3301</span>        elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
-</code><code id="L3302"><span class="ln">3302</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3303"><span class="ln">3303</span>                <b>return</b> <b>this</b>;
-</code><code id="L3304"><span class="ln">3304</span>            }
-</code><code id="L3305"><span class="ln">3305</span>            sx<span class="s"> = </span>Str(sx).split(separator);
-</code><code id="L3306"><span class="ln">3306</span>            <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
-</code><code id="L3307"><span class="ln">3307</span>                sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
-</code><code id="L3308"><span class="ln">3308</span>                cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
-</code><code id="L3309"><span class="ln">3309</span>                cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
-</code><code id="L3310"><span class="ln">3310</span>                isNaN(cx) &amp;&amp; (cx<span class="s"> = </span><b>null</b>);
-</code><code id="L3311"><span class="ln">3311</span>                isNaN(cy) &amp;&amp; (cy<span class="s"> = </span><b>null</b>);
+</code><code id="L3216"><span class="ln">3216</span>            <b>if</b> (params.opacity != <b>null</b><span class="s"> || </span>
+</code><code id="L3217"><span class="ln">3217</span>                params[<i>"stroke-width"</i>] != <b>null</b> ||
+</code><code id="L3218"><span class="ln">3218</span>                params.fill != <b>null</b> ||
+</code><code id="L3219"><span class="ln">3219</span>                params.src != <b>null</b> ||
+</code><code id="L3220"><span class="ln">3220</span>                params.stroke != <b>null</b> ||
+</code><code id="L3221"><span class="ln">3221</span>                params[<i>"stroke-width"</i>] != <b>null</b> ||
+</code><code id="L3222"><span class="ln">3222</span>                params[<i>"stroke-opacity"</i>] != <b>null</b> ||
+</code><code id="L3223"><span class="ln">3223</span>                params[<i>"fill-opacity"</i>] != <b>null</b> ||
+</code><code id="L3224"><span class="ln">3224</span>                params[<i>"stroke-dasharray"</i>] != <b>null</b> ||
+</code><code id="L3225"><span class="ln">3225</span>                params[<i>"stroke-miterlimit"</i>] != <b>null</b> ||
+</code><code id="L3226"><span class="ln">3226</span>                params[<i>"stroke-linejoin"</i>] != <b>null</b> ||
+</code><code id="L3227"><span class="ln">3227</span>                params[<i>"stroke-linecap"</i>] != <b>null</b>) {
+</code><code id="L3228"><span class="ln">3228</span>                <b>var</b> fill<span class="s"> = </span>node.getElementsByTagName(fillString),
+</code><code id="L3229"><span class="ln">3229</span>                    newfill<span class="s"> = </span><b>false</b>;
+</code><code id="L3230"><span class="ln">3230</span>                fill<span class="s"> = </span>fill<span class="s"> &amp;&amp; </span>fill[<span class="d">0</span>];
+</code><code id="L3231"><span class="ln">3231</span>                !fill<span class="s"> &amp;&amp; </span>(newfill<span class="s"> = </span>fill<span class="s"> = </span>createNode(fillString));
+</code><code id="L3232"><span class="ln">3232</span>                <b>if</b> (o.type<span class="s"> == </span><i>"image"</i><span class="s"> &amp;&amp; </span>params.src) {
+</code><code id="L3233"><span class="ln">3233</span>                    fill.src<span class="s"> = </span>params.src;
+</code><code id="L3234"><span class="ln">3234</span>                }
+</code><code id="L3235"><span class="ln">3235</span>                <b>if</b> (<i>"fill-opacity"</i> <b>in</b> params<span class="s"> || </span><i>"opacity"</i> <b>in</b> params) {
+</code><code id="L3236"><span class="ln">3236</span>                    <b>var</b> opacity<span class="s"> = </span>((+a[<i>"fill-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+R.getRGB(params.fill).o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
+</code><code id="L3237"><span class="ln">3237</span>                    opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
+</code><code id="L3238"><span class="ln">3238</span>                    fill.opacity<span class="s"> = </span>opacity;
+</code><code id="L3239"><span class="ln">3239</span>                }
+</code><code id="L3240"><span class="ln">3240</span>                params.fill<span class="s"> &amp;&amp; </span>(fill.on<span class="s"> = </span><b>true</b>);
+</code><code id="L3241"><span class="ln">3241</span>                <b>if</b> (fill.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.fill<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.fill<span class="s"> === </span><b>null</b>) {
+</code><code id="L3242"><span class="ln">3242</span>                    fill.on<span class="s"> = </span><b>false</b>;
+</code><code id="L3243"><span class="ln">3243</span>                }
+</code><code id="L3244"><span class="ln">3244</span>                <b>if</b> (fill.on<span class="s"> &amp;&amp; </span>params.fill) {
+</code><code id="L3245"><span class="ln">3245</span>                    <b>var</b> isURL<span class="s"> = </span>params.fill.match(ISURL);
+</code><code id="L3246"><span class="ln">3246</span>                    <b>if</b> (isURL) {
+</code><code id="L3247"><span class="ln">3247</span>                        fill.parentNode<span class="s"> == </span>node<span class="s"> &amp;&amp; </span>node.removeChild(fill);
+</code><code id="L3248"><span class="ln">3248</span>                        fill.rotate<span class="s"> = </span><b>true</b>;
+</code><code id="L3249"><span class="ln">3249</span>                        fill.src<span class="s"> = </span>isURL[<span class="d">1</span>];
+</code><code id="L3250"><span class="ln">3250</span>                        fill.type<span class="s"> = </span><i>"tile"</i>;
+</code><code id="L3251"><span class="ln">3251</span>                        <b>var</b> bbox<span class="s"> = </span>o.getBBox(<span class="d">1</span>);
+</code><code id="L3252"><span class="ln">3252</span>                        fill.position<span class="s"> = </span>bbox.x<span class="s"> + </span>S<span class="s"> + </span>bbox.y;
+</code><code id="L3253"><span class="ln">3253</span>                        o._.fillpos<span class="s"> = </span>[bbox.x, bbox.y];
+</code><code id="L3254"><span class="ln">3254</span>
+</code><code id="L3255"><span class="ln">3255</span>                        preload(isURL[<span class="d">1</span>], <b>function</b> () {
+</code><code id="L3256"><span class="ln">3256</span>                            o._.fillsize<span class="s"> = </span>[<b>this</b>.offsetWidth, <b>this</b>.offsetHeight];
+</code><code id="L3257"><span class="ln">3257</span>                        });
+</code><code id="L3258"><span class="ln">3258</span>                    } <b>else</b> {
+</code><code id="L3259"><span class="ln">3259</span>                        fill.color<span class="s"> = </span>R.getRGB(params.fill).hex;
+</code><code id="L3260"><span class="ln">3260</span>                        fill.src<span class="s"> = </span>E;
+</code><code id="L3261"><span class="ln">3261</span>                        fill.type<span class="s"> = </span><i>"solid"</i>;
+</code><code id="L3262"><span class="ln">3262</span>                        <b>if</b> (R.getRGB(params.fill).error<span class="s"> &amp;&amp; </span>(res.type <b>in</b> {circle: <span class="d">1</span>, ellipse: <span class="d">1</span>}<span class="s"> || </span>Str(params.fill).charAt() != <i>"r"</i>)<span class="s"> &amp;&amp; </span>addGradientFill(res, params.fill, fill)) {
+</code><code id="L3263"><span class="ln">3263</span>                            a.fill<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3264"><span class="ln">3264</span>                            a.gradient<span class="s"> = </span>params.fill;
+</code><code id="L3265"><span class="ln">3265</span>                            fill.rotate<span class="s"> = </span><b>false</b>;
+</code><code id="L3266"><span class="ln">3266</span>                        }
+</code><code id="L3267"><span class="ln">3267</span>                    }
+</code><code id="L3268"><span class="ln">3268</span>                }
+</code><code id="L3269"><span class="ln">3269</span>                node.appendChild(fill);
+</code><code id="L3270"><span class="ln">3270</span>                <b>var</b> stroke<span class="s"> = </span>(node.getElementsByTagName(<i>"stroke"</i>)<span class="s"> &amp;&amp; </span>node.getElementsByTagName(<i>"stroke"</i>)[<span class="d">0</span>]),
+</code><code id="L3271"><span class="ln">3271</span>                newstroke<span class="s"> = </span><b>false</b>;
+</code><code id="L3272"><span class="ln">3272</span>                !stroke<span class="s"> &amp;&amp; </span>(newstroke<span class="s"> = </span>stroke<span class="s"> = </span>createNode(<i>"stroke"</i>));
+</code><code id="L3273"><span class="ln">3273</span>                <b>if</b> ((params.stroke<span class="s"> &amp;&amp; </span>params.stroke != <i>"none"</i>) ||
+</code><code id="L3274"><span class="ln">3274</span>                    params[<i>"stroke-width"</i>] ||
+</code><code id="L3275"><span class="ln">3275</span>                    params[<i>"stroke-opacity"</i>] != <b>null</b> ||
+</code><code id="L3276"><span class="ln">3276</span>                    params[<i>"stroke-dasharray"</i>] ||
+</code><code id="L3277"><span class="ln">3277</span>                    params[<i>"stroke-miterlimit"</i>] ||
+</code><code id="L3278"><span class="ln">3278</span>                    params[<i>"stroke-linejoin"</i>] ||
+</code><code id="L3279"><span class="ln">3279</span>                    params[<i>"stroke-linecap"</i>]) {
+</code><code id="L3280"><span class="ln">3280</span>                    stroke.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3281"><span class="ln">3281</span>                }
+</code><code id="L3282"><span class="ln">3282</span>                (params.stroke<span class="s"> == </span><i>"none"</i><span class="s"> || </span>params.stroke<span class="s"> === </span><b>null</b><span class="s"> || </span>stroke.on<span class="s"> == </span><b>null</b><span class="s"> || </span>params.stroke<span class="s"> == </span><span class="d">0</span><span class="s"> || </span>params[<i>"stroke-width"</i>]<span class="s"> == </span><span class="d">0</span>)<span class="s"> &amp;&amp; </span>(stroke.on<span class="s"> = </span><b>false</b>);
+</code><code id="L3283"><span class="ln">3283</span>                <b>var</b> strokeColor<span class="s"> = </span>R.getRGB(params.stroke);
+</code><code id="L3284"><span class="ln">3284</span>                stroke.on<span class="s"> &amp;&amp; </span>params.stroke<span class="s"> &amp;&amp; </span>(stroke.color<span class="s"> = </span>strokeColor.hex);
+</code><code id="L3285"><span class="ln">3285</span>                opacity<span class="s"> = </span>((+a[<i>"stroke-opacity"</i>]<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+a.opacity<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>)<span class="s"> * </span>((+strokeColor.o<span class="s"> + </span><span class="d">1</span><span class="s"> || </span><span class="d">2</span>)<span class="s"> - </span><span class="d">1</span>);
+</code><code id="L3286"><span class="ln">3286</span>                <b>var</b> width<span class="s"> = </span>(toFloat(params[<i>"stroke-width"</i>])<span class="s"> || </span><span class="d">1</span>)<span class="s"> * </span><span class="d">.75</span>;
+</code><code id="L3287"><span class="ln">3287</span>                opacity<span class="s"> = </span>mmin(mmax(opacity, <span class="d">0</span>), <span class="d">1</span>);
+</code><code id="L3288"><span class="ln">3288</span>                params[<i>"stroke-width"</i>]<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>(width<span class="s"> = </span>a[<i>"stroke-width"</i>]);
+</code><code id="L3289"><span class="ln">3289</span>                params[<i>"stroke-width"</i>]<span class="s"> &amp;&amp; </span>(stroke.weight<span class="s"> = </span>width);
+</code><code id="L3290"><span class="ln">3290</span>                width<span class="s"> &amp;&amp; </span>width &lt; <span class="d">1</span><span class="s"> &amp;&amp; </span>(opacity *= width)<span class="s"> &amp;&amp; </span>(stroke.weight<span class="s"> = </span><span class="d">1</span>);
+</code><code id="L3291"><span class="ln">3291</span>                stroke.opacity<span class="s"> = </span>opacity;
+</code><code id="L3292"><span class="ln">3292</span>                
+</code><code id="L3293"><span class="ln">3293</span>                params[<i>"stroke-linejoin"</i>]<span class="s"> &amp;&amp; </span>(stroke.joinstyle<span class="s"> = </span>params[<i>"stroke-linejoin"</i>]<span class="s"> || </span><i>"miter"</i>);
+</code><code id="L3294"><span class="ln">3294</span>                stroke.miterlimit<span class="s"> = </span>params[<i>"stroke-miterlimit"</i>]<span class="s"> || </span><span class="d">8</span>;
+</code><code id="L3295"><span class="ln">3295</span>                params[<i>"stroke-linecap"</i>]<span class="s"> &amp;&amp; </span>(stroke.endcap<span class="s"> = </span>params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"butt"</i> ? <i>"flat"</i> : params[<i>"stroke-linecap"</i>]<span class="s"> == </span><i>"square"</i> ? <i>"square"</i> : <i>"round"</i>);
+</code><code id="L3296"><span class="ln">3296</span>                <b>if</b> (params[<i>"stroke-dasharray"</i>]) {
+</code><code id="L3297"><span class="ln">3297</span>                    <b>var</b> dasharray<span class="s"> = </span>{
+</code><code id="L3298"><span class="ln">3298</span>                        <i>"-"</i>: <i>"shortdash"</i>,
+</code><code id="L3299"><span class="ln">3299</span>                        <i>"."</i>: <i>"shortdot"</i>,
+</code><code id="L3300"><span class="ln">3300</span>                        <i>"-."</i>: <i>"shortdashdot"</i>,
+</code><code id="L3301"><span class="ln">3301</span>                        <i>"-.."</i>: <i>"shortdashdotdot"</i>,
+</code><code id="L3302"><span class="ln">3302</span>                        <i>". "</i>: <i>"dot"</i>,
+</code><code id="L3303"><span class="ln">3303</span>                        <i>"- "</i>: <i>"dash"</i>,
+</code><code id="L3304"><span class="ln">3304</span>                        <i>"--"</i>: <i>"longdash"</i>,
+</code><code id="L3305"><span class="ln">3305</span>                        <i>"- ."</i>: <i>"dashdot"</i>,
+</code><code id="L3306"><span class="ln">3306</span>                        <i>"--."</i>: <i>"longdashdot"</i>,
+</code><code id="L3307"><span class="ln">3307</span>                        <i>"--.."</i>: <i>"longdashdotdot"</i>
+</code><code id="L3308"><span class="ln">3308</span>                    };
+</code><code id="L3309"><span class="ln">3309</span>                    stroke.dashstyle<span class="s"> = </span>dasharray[has](params[<i>"stroke-dasharray"</i>]) ? dasharray[params[<i>"stroke-dasharray"</i>]] : E;
+</code><code id="L3310"><span class="ln">3310</span>                }
+</code><code id="L3311"><span class="ln">3311</span>                newstroke<span class="s"> &amp;&amp; </span>node.appendChild(stroke);
 </code><code id="L3312"><span class="ln">3312</span>            }
-</code><code id="L3313"><span class="ln">3313</span>            sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
-</code><code id="L3314"><span class="ln">3314</span>            (sy<span class="s"> == </span><b>null</b>) &amp;&amp; (sy<span class="s"> = </span>sx);
-</code><code id="L3315"><span class="ln">3315</span>            (cy<span class="s"> == </span><b>null</b>) &amp;&amp; (cx<span class="s"> = </span>cy);
-</code><code id="L3316"><span class="ln">3316</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
-</code><code id="L3317"><span class="ln">3317</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
-</code><code id="L3318"><span class="ln">3318</span>            }
-</code><code id="L3319"><span class="ln">3319</span>            cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
-</code><code id="L3320"><span class="ln">3320</span>            cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
-</code><code id="L3321"><span class="ln">3321</span>            
-</code><code id="L3322"><span class="ln">3322</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
-</code><code id="L3323"><span class="ln">3323</span>            <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L3324"><span class="ln">3324</span>            <b>return</b> <b>this</b>;
-</code><code id="L3325"><span class="ln">3325</span>        };
-</code><code id="L3326"><span class="ln">3326</span>        elproto.hide<span class="s"> = </span><b>function</b> () {
-</code><code id="L3327"><span class="ln">3327</span>            !<b>this</b>.removed &amp;&amp; (<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
-</code><code id="L3328"><span class="ln">3328</span>            <b>return</b> <b>this</b>;
-</code><code id="L3329"><span class="ln">3329</span>        };
-</code><code id="L3330"><span class="ln">3330</span>        elproto.show<span class="s"> = </span><b>function</b> () {
-</code><code id="L3331"><span class="ln">3331</span>            !<b>this</b>.removed &amp;&amp; (<b>this</b>.node.style.display<span class="s"> = </span>E);
-</code><code id="L3332"><span class="ln">3332</span>            <b>return</b> <b>this</b>;
-</code><code id="L3333"><span class="ln">3333</span>        };
-</code><code id="L3334"><span class="ln">3334</span>        elproto._getBBox<span class="s"> = </span><b>function</b> () {
-</code><code id="L3335"><span class="ln">3335</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3336"><span class="ln">3336</span>                <b>return</b> {};
-</code><code id="L3337"><span class="ln">3337</span>            }
-</code><code id="L3338"><span class="ln">3338</span>            <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
-</code><code id="L3339"><span class="ln">3339</span>                <b>return</b> {
-</code><code id="L3340"><span class="ln">3340</span>                    x: <b>this</b>.X<span class="s"> + </span>(<b>this</b>.bbx<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span><b>this</b>.W<span class="s"> / </span><span class="d">2</span>,
-</code><code id="L3341"><span class="ln">3341</span>                    y: <b>this</b>.Y<span class="s"> - </span><b>this</b>.H,
-</code><code id="L3342"><span class="ln">3342</span>                    width: <b>this</b>.W,
-</code><code id="L3343"><span class="ln">3343</span>                    height: <b>this</b>.H
-</code><code id="L3344"><span class="ln">3344</span>                };
-</code><code id="L3345"><span class="ln">3345</span>            } <b>else</b> {
-</code><code id="L3346"><span class="ln">3346</span>                <b>return</b> pathDimensions(<b>this</b>.attrs.path);
-</code><code id="L3347"><span class="ln">3347</span>            }
-</code><code id="L3348"><span class="ln">3348</span>        };
-</code><code id="L3349"><span class="ln">3349</span>        elproto.remove<span class="s"> = </span><b>function</b> () {
-</code><code id="L3350"><span class="ln">3350</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3351"><span class="ln">3351</span>                <b>return</b>;
-</code><code id="L3352"><span class="ln">3352</span>            }
-</code><code id="L3353"><span class="ln">3353</span>            eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
-</code><code id="L3354"><span class="ln">3354</span>            tear(<b>this</b>, <b>this</b>.paper);
-</code><code id="L3355"><span class="ln">3355</span>            <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
-</code><code id="L3356"><span class="ln">3356</span>            <b>this</b>.shape &amp;&amp; <b>this</b>.shape.parentNode.removeChild(<b>this</b>.shape);
-</code><code id="L3357"><span class="ln">3357</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
-</code><code id="L3358"><span class="ln">3358</span>                <b>delete</b> <b>this</b>[i];
-</code><code id="L3359"><span class="ln">3359</span>            }
-</code><code id="L3360"><span class="ln">3360</span>            <b>this</b>.removed<span class="s"> = </span><b>true</b>;
-</code><code id="L3361"><span class="ln">3361</span>        };
-</code><code id="L3362"><span class="ln">3362</span>        elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
-</code><code id="L3363"><span class="ln">3363</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3364"><span class="ln">3364</span>                <b>return</b> <b>this</b>;
-</code><code id="L3365"><span class="ln">3365</span>            }
-</code><code id="L3366"><span class="ln">3366</span>            <b>if</b> (name<span class="s"> == </span><b>null</b>) {
-</code><code id="L3367"><span class="ln">3367</span>                <b>var</b> res<span class="s"> = </span>{};
-</code><code id="L3368"><span class="ln">3368</span>                <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
-</code><code id="L3369"><span class="ln">3369</span>                    res[i]<span class="s"> = </span><b>this</b>.attrs[i];
-</code><code id="L3370"><span class="ln">3370</span>                }
-</code><code id="L3371"><span class="ln">3371</span>                res.gradient &amp;&amp; res.fill<span class="s"> == </span><i>"none"</i> &amp;&amp; (res.fill<span class="s"> = </span>res.gradient) &amp;&amp; <b>delete</b> res.gradient;
-</code><code id="L3372"><span class="ln">3372</span>                <b>return</b> res;
-</code><code id="L3373"><span class="ln">3373</span>            }
-</code><code id="L3374"><span class="ln">3374</span>            <b>if</b> (value<span class="s"> == </span><b>null</b> &amp;&amp; R.is(name, <i>"string"</i>)) {
-</code><code id="L3375"><span class="ln">3375</span>                <b>if</b> (name<span class="s"> == </span>fillString &amp;&amp; <b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i> &amp;&amp; <b>this</b>.attrs.gradient) {
-</code><code id="L3376"><span class="ln">3376</span>                    <b>return</b> <b>this</b>.attrs.gradient;
-</code><code id="L3377"><span class="ln">3377</span>                }
-</code><code id="L3378"><span class="ln">3378</span>                <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
-</code><code id="L3379"><span class="ln">3379</span>                    <b>return</b> <b>this</b>.attrs[name];
-</code><code id="L3380"><span class="ln">3380</span>                } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
-</code><code id="L3381"><span class="ln">3381</span>                    <b>return</b> <b>this</b>.paper.customAttributes[name].def;
-</code><code id="L3382"><span class="ln">3382</span>                } <b>else</b> {
-</code><code id="L3383"><span class="ln">3383</span>                    <b>return</b> availableAttrs[name];
-</code><code id="L3384"><span class="ln">3384</span>                }
-</code><code id="L3385"><span class="ln">3385</span>            }
-</code><code id="L3386"><span class="ln">3386</span>            <b>if</b> (<b>this</b>.attrs &amp;&amp; value<span class="s"> == </span><b>null</b> &amp;&amp; R.is(name, array)) {
-</code><code id="L3387"><span class="ln">3387</span>                <b>var</b> ii, values<span class="s"> = </span>{};
-</code><code id="L3388"><span class="ln">3388</span>                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>name.length; i &lt; ii; i++) {
-</code><code id="L3389"><span class="ln">3389</span>                    values[name[i]]<span class="s"> = </span><b>this</b>.attr(name[i]);
-</code><code id="L3390"><span class="ln">3390</span>                }
-</code><code id="L3391"><span class="ln">3391</span>                <b>return</b> values;
-</code><code id="L3392"><span class="ln">3392</span>            }
-</code><code id="L3393"><span class="ln">3393</span>            <b>var</b> params;
-</code><code id="L3394"><span class="ln">3394</span>            <b>if</b> (value != <b>null</b>) {
-</code><code id="L3395"><span class="ln">3395</span>                params<span class="s"> = </span>{};
-</code><code id="L3396"><span class="ln">3396</span>                params[name]<span class="s"> = </span>value;
-</code><code id="L3397"><span class="ln">3397</span>            }
-</code><code id="L3398"><span class="ln">3398</span>            value<span class="s"> == </span><b>null</b> &amp;&amp; R.is(name, <i>"object"</i>) &amp;&amp; (params<span class="s"> = </span>name);
-</code><code id="L3399"><span class="ln">3399</span>            <b>for</b> (<b>var</b> key <b>in</b> params) {
-</code><code id="L3400"><span class="ln">3400</span>                eve(<i>"attr."</i><span class="s"> + </span>key<span class="s"> + </span><i>"."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, params[key]);
-</code><code id="L3401"><span class="ln">3401</span>            }
-</code><code id="L3402"><span class="ln">3402</span>            <b>if</b> (params) {
-</code><code id="L3403"><span class="ln">3403</span>                <b>for</b> (key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key) &amp;&amp; params[has](key) &amp;&amp; R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
-</code><code id="L3404"><span class="ln">3404</span>                    <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
-</code><code id="L3405"><span class="ln">3405</span>                    <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
-</code><code id="L3406"><span class="ln">3406</span>                    <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
-</code><code id="L3407"><span class="ln">3407</span>                        params[subkey]<span class="s"> = </span>par[subkey];
-</code><code id="L3408"><span class="ln">3408</span>                    }
+</code><code id="L3313"><span class="ln">3313</span>            <b>if</b> (res.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3314"><span class="ln">3314</span>                res.paper.canvas.style.display<span class="s"> = </span>E;
+</code><code id="L3315"><span class="ln">3315</span>                <b>var</b> span<span class="s"> = </span>res.paper.span,
+</code><code id="L3316"><span class="ln">3316</span>                    m<span class="s"> = </span><span class="d">100</span>,
+</code><code id="L3317"><span class="ln">3317</span>                    fontSize<span class="s"> = </span>a.font<span class="s"> &amp;&amp; </span>a.font.match(/\d+(?:\.\d*)?(?=px)/);
+</code><code id="L3318"><span class="ln">3318</span>                s<span class="s"> = </span>span.style;
+</code><code id="L3319"><span class="ln">3319</span>                a.font<span class="s"> &amp;&amp; </span>(s.font<span class="s"> = </span>a.font);
+</code><code id="L3320"><span class="ln">3320</span>                a[<i>"font-family"</i>]<span class="s"> &amp;&amp; </span>(s.fontFamily<span class="s"> = </span>a[<i>"font-family"</i>]);
+</code><code id="L3321"><span class="ln">3321</span>                a[<i>"font-weight"</i>]<span class="s"> &amp;&amp; </span>(s.fontWeight<span class="s"> = </span>a[<i>"font-weight"</i>]);
+</code><code id="L3322"><span class="ln">3322</span>                a[<i>"font-style"</i>]<span class="s"> &amp;&amp; </span>(s.fontStyle<span class="s"> = </span>a[<i>"font-style"</i>]);
+</code><code id="L3323"><span class="ln">3323</span>                fontSize<span class="s"> = </span>toFloat(fontSize ? fontSize[<span class="d">0</span>] : a[<i>"font-size"</i>]);
+</code><code id="L3324"><span class="ln">3324</span>                s.fontSize<span class="s"> = </span>fontSize<span class="s"> * </span>m<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3325"><span class="ln">3325</span>                res.textpath.string<span class="s"> &amp;&amp; </span>(span.innerHTML<span class="s"> = </span>Str(res.textpath.string).replace(/&lt;/g, <i>"&#<span class="d">60</span>;"</i>).replace(/&amp;/g, <i>"&#<span class="d">38</span>;"</i>).replace(/\n/g, <i>"&lt;br>"</i>));
+</code><code id="L3326"><span class="ln">3326</span>                <b>var</b> brect<span class="s"> = </span>span.getBoundingClientRect();
+</code><code id="L3327"><span class="ln">3327</span>                res.W<span class="s"> = </span>a.w<span class="s"> = </span>(brect.right<span class="s"> - </span>brect.left)<span class="s"> / </span>m;
+</code><code id="L3328"><span class="ln">3328</span>                res.H<span class="s"> = </span>a.h<span class="s"> = </span>(brect.bottom<span class="s"> - </span>brect.top)<span class="s"> / </span>m;
+</code><code id="L3329"><span class="ln">3329</span>                res.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3330"><span class="ln">3330</span>                res.X<span class="s"> = </span>a.x;
+</code><code id="L3331"><span class="ln">3331</span>                res.Y<span class="s"> = </span>a.y<span class="s"> + </span>res.H<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3332"><span class="ln">3332</span>
+</code><code id="L3333"><span class="ln">3333</span>                (<i>"x"</i> <b>in</b> params<span class="s"> || </span><i>"y"</i> <b>in</b> params)<span class="s"> &amp;&amp; </span>(res.path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(a.x<span class="s"> * </span>zoom), round(a.y<span class="s"> * </span>zoom), round(a.x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>));
+</code><code id="L3334"><span class="ln">3334</span>                <b>var</b> dirtyattrs<span class="s"> = </span>[<i>"x"</i>, <i>"y"</i>, <i>"text"</i>, <i>"font"</i>, <i>"font-family"</i>, <i>"font-weight"</i>, <i>"font-style"</i>, <i>"font-size"</i>];
+</code><code id="L3335"><span class="ln">3335</span>                <b>for</b> (<b>var</b> d<span class="s"> = </span><span class="d">0</span>, dd<span class="s"> = </span>dirtyattrs.length; d &lt; dd; d++) <b>if</b> (dirtyattrs[d] <b>in</b> params) {
+</code><code id="L3336"><span class="ln">3336</span>                    res._.dirty<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3337"><span class="ln">3337</span>                    <b>break</b>;
+</code><code id="L3338"><span class="ln">3338</span>                }
+</code><code id="L3339"><span class="ln">3339</span>                
+</code><code id="L3340"><span class="ln">3340</span>                <span class="c">// text-anchor emulation</span>
+</code><code id="L3341"><span class="ln">3341</span>                <b>switch</b> (a[<i>"text-anchor"</i>]) {
+</code><code id="L3342"><span class="ln">3342</span>                    <b>case</b> <i>"start"</i>:
+</code><code id="L3343"><span class="ln">3343</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"left"</i>;
+</code><code id="L3344"><span class="ln">3344</span>                        res.bbx<span class="s"> = </span>res.W<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3345"><span class="ln">3345</span>                    <b>break</b>;
+</code><code id="L3346"><span class="ln">3346</span>                    <b>case</b> <i>"end"</i>:
+</code><code id="L3347"><span class="ln">3347</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"right"</i>;
+</code><code id="L3348"><span class="ln">3348</span>                        res.bbx<span class="s"> = </span>-res.W<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3349"><span class="ln">3349</span>                    <b>break</b>;
+</code><code id="L3350"><span class="ln">3350</span>                    <b>default</b>:
+</code><code id="L3351"><span class="ln">3351</span>                        res.textpath.style[<i>"v-text-align"</i>]<span class="s"> = </span><i>"center"</i>;
+</code><code id="L3352"><span class="ln">3352</span>                        res.bbx<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3353"><span class="ln">3353</span>                    <b>break</b>;
+</code><code id="L3354"><span class="ln">3354</span>                }
+</code><code id="L3355"><span class="ln">3355</span>                res.textpath.style[<i>"v-text-kern"</i>]<span class="s"> = </span><b>true</b>;
+</code><code id="L3356"><span class="ln">3356</span>            }
+</code><code id="L3357"><span class="ln">3357</span>            res.paper.canvas.style.display<span class="s"> = </span>E;
+</code><code id="L3358"><span class="ln">3358</span>        };
+</code><code id="L3359"><span class="ln">3359</span>        addGradientFill<span class="s"> = </span><b>function</b> (o, gradient, fill) {
+</code><code id="L3360"><span class="ln">3360</span>            o.attrs<span class="s"> = </span>o.attrs<span class="s"> || </span>{};
+</code><code id="L3361"><span class="ln">3361</span>            <b>var</b> attrs<span class="s"> = </span>o.attrs,
+</code><code id="L3362"><span class="ln">3362</span>                type<span class="s"> = </span><i>"linear"</i>,
+</code><code id="L3363"><span class="ln">3363</span>                fxfy<span class="s"> = </span><i>"<span class="d">.5</span> <span class="d">.5</span>"</i>;
+</code><code id="L3364"><span class="ln">3364</span>            o.attrs.gradient<span class="s"> = </span>gradient;
+</code><code id="L3365"><span class="ln">3365</span>            gradient<span class="s"> = </span>Str(gradient).replace(radial_gradient, <b>function</b> (all, fx, fy) {
+</code><code id="L3366"><span class="ln">3366</span>                type<span class="s"> = </span><i>"radial"</i>;
+</code><code id="L3367"><span class="ln">3367</span>                <b>if</b> (fx<span class="s"> &amp;&amp; </span>fy) {
+</code><code id="L3368"><span class="ln">3368</span>                    fx<span class="s"> = </span>toFloat(fx);
+</code><code id="L3369"><span class="ln">3369</span>                    fy<span class="s"> = </span>toFloat(fy);
+</code><code id="L3370"><span class="ln">3370</span>                    pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>)<span class="s"> + </span>pow(fy<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>) > <span class="d">.25</span><span class="s"> &amp;&amp; </span>(fy<span class="s"> = </span>math.sqrt(<span class="d">.25</span><span class="s"> - </span>pow(fx<span class="s"> - </span><span class="d">.5</span>, <span class="d">2</span>))<span class="s"> * </span>((fy > <span class="d">.5</span>)<span class="s"> * </span><span class="d">2</span><span class="s"> - </span><span class="d">1</span>)<span class="s"> + </span><span class="d">.5</span>);
+</code><code id="L3371"><span class="ln">3371</span>                    fxfy<span class="s"> = </span>fx<span class="s"> + </span>S<span class="s"> + </span>fy;
+</code><code id="L3372"><span class="ln">3372</span>                }
+</code><code id="L3373"><span class="ln">3373</span>                <b>return</b> E;
+</code><code id="L3374"><span class="ln">3374</span>            });
+</code><code id="L3375"><span class="ln">3375</span>            gradient<span class="s"> = </span>gradient.split(/\s*\-\s*/);
+</code><code id="L3376"><span class="ln">3376</span>            <b>if</b> (type<span class="s"> == </span><i>"linear"</i>) {
+</code><code id="L3377"><span class="ln">3377</span>                <b>var</b> angle<span class="s"> = </span>gradient.shift();
+</code><code id="L3378"><span class="ln">3378</span>                angle<span class="s"> = </span>-toFloat(angle);
+</code><code id="L3379"><span class="ln">3379</span>                <b>if</b> (isNaN(angle)) {
+</code><code id="L3380"><span class="ln">3380</span>                    <b>return</b> <b>null</b>;
+</code><code id="L3381"><span class="ln">3381</span>                }
+</code><code id="L3382"><span class="ln">3382</span>            }
+</code><code id="L3383"><span class="ln">3383</span>            <b>var</b> dots<span class="s"> = </span>parseDots(gradient);
+</code><code id="L3384"><span class="ln">3384</span>            <b>if</b> (!dots) {
+</code><code id="L3385"><span class="ln">3385</span>                <b>return</b> <b>null</b>;
+</code><code id="L3386"><span class="ln">3386</span>            }
+</code><code id="L3387"><span class="ln">3387</span>            o<span class="s"> = </span>o.shape<span class="s"> || </span>o.node;
+</code><code id="L3388"><span class="ln">3388</span>            <b>if</b> (dots.length) {
+</code><code id="L3389"><span class="ln">3389</span>                o.removeChild(fill);
+</code><code id="L3390"><span class="ln">3390</span>                fill.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3391"><span class="ln">3391</span>                fill.method<span class="s"> = </span><i>"none"</i>;
+</code><code id="L3392"><span class="ln">3392</span>                fill.color<span class="s"> = </span>dots[<span class="d">0</span>].color;
+</code><code id="L3393"><span class="ln">3393</span>                fill.color2<span class="s"> = </span>dots[dots.length<span class="s"> - </span><span class="d">1</span>].color;
+</code><code id="L3394"><span class="ln">3394</span>                <b>var</b> clrs<span class="s"> = </span>[];
+</code><code id="L3395"><span class="ln">3395</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>dots.length; i &lt; ii; i++) {
+</code><code id="L3396"><span class="ln">3396</span>                    dots[i].offset<span class="s"> &amp;&amp; </span>clrs.push(dots[i].offset<span class="s"> + </span>S<span class="s"> + </span>dots[i].color);
+</code><code id="L3397"><span class="ln">3397</span>                }
+</code><code id="L3398"><span class="ln">3398</span>                fill.colors<span class="s"> &amp;&amp; </span>(fill.colors.value<span class="s"> = </span>clrs.length ? clrs.join() : <i>"<span class="d">0</span>% "</i><span class="s"> + </span>fill.color);
+</code><code id="L3399"><span class="ln">3399</span>                <b>if</b> (type<span class="s"> == </span><i>"radial"</i>) {
+</code><code id="L3400"><span class="ln">3400</span>                    fill.type<span class="s"> = </span><i>"gradientTitle"</i>;
+</code><code id="L3401"><span class="ln">3401</span>                    fill.focus<span class="s"> = </span><i>"<span class="d">100</span>%"</i>;
+</code><code id="L3402"><span class="ln">3402</span>                    fill.focussize<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3403"><span class="ln">3403</span>                    fill.focusposition<span class="s"> = </span>fxfy;
+</code><code id="L3404"><span class="ln">3404</span>                    fill.angle<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3405"><span class="ln">3405</span>                } <b>else</b> {
+</code><code id="L3406"><span class="ln">3406</span>                    <span class="c">// fill.rotate= <b>true</b>;</span>
+</code><code id="L3407"><span class="ln">3407</span>                    fill.type<span class="s"> = </span><i>"gradient"</i>;
+</code><code id="L3408"><span class="ln">3408</span>                    fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle)<span class="s"> % </span><span class="d">360</span>;
 </code><code id="L3409"><span class="ln">3409</span>                }
-</code><code id="L3410"><span class="ln">3410</span>                <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;</span>
-</code><code id="L3411"><span class="ln">3411</span>                <b>if</b> (params.text &amp;&amp; <b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
-</code><code id="L3412"><span class="ln">3412</span>                    <b>this</b>.textpath.string<span class="s"> = </span>params.text;
-</code><code id="L3413"><span class="ln">3413</span>                }
-</code><code id="L3414"><span class="ln">3414</span>                setFillAndStroke(<b>this</b>, params);
-</code><code id="L3415"><span class="ln">3415</span>                <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span>E;</span>
-</code><code id="L3416"><span class="ln">3416</span>            }
-</code><code id="L3417"><span class="ln">3417</span>            <b>return</b> <b>this</b>;
-</code><code id="L3418"><span class="ln">3418</span>        };
-</code><code id="L3419"><span class="ln">3419</span>        elproto.toFront<span class="s"> = </span><b>function</b> () {
-</code><code id="L3420"><span class="ln">3420</span>            !<b>this</b>.removed &amp;&amp; <b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
-</code><code id="L3421"><span class="ln">3421</span>            <b>this</b>.paper.top != <b>this</b> &amp;&amp; tofront(<b>this</b>, <b>this</b>.paper);
-</code><code id="L3422"><span class="ln">3422</span>            <b>return</b> <b>this</b>;
-</code><code id="L3423"><span class="ln">3423</span>        };
-</code><code id="L3424"><span class="ln">3424</span>        elproto.toBack<span class="s"> = </span><b>function</b> () {
-</code><code id="L3425"><span class="ln">3425</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3426"><span class="ln">3426</span>                <b>return</b> <b>this</b>;
-</code><code id="L3427"><span class="ln">3427</span>            }
-</code><code id="L3428"><span class="ln">3428</span>            <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
-</code><code id="L3429"><span class="ln">3429</span>                <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
-</code><code id="L3430"><span class="ln">3430</span>                toback(<b>this</b>, <b>this</b>.paper);
-</code><code id="L3431"><span class="ln">3431</span>            }
-</code><code id="L3432"><span class="ln">3432</span>            <b>return</b> <b>this</b>;
-</code><code id="L3433"><span class="ln">3433</span>        };
-</code><code id="L3434"><span class="ln">3434</span>        elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
-</code><code id="L3435"><span class="ln">3435</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3436"><span class="ln">3436</span>                <b>return</b> <b>this</b>;
-</code><code id="L3437"><span class="ln">3437</span>            }
-</code><code id="L3438"><span class="ln">3438</span>            <b>if</b> (element.constructor<span class="s"> == </span>Set) {
-</code><code id="L3439"><span class="ln">3439</span>                element<span class="s"> = </span>element[element.length<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L3440"><span class="ln">3440</span>            }
-</code><code id="L3441"><span class="ln">3441</span>            <b>if</b> (element.node.nextSibling) {
-</code><code id="L3442"><span class="ln">3442</span>                element.node.parentNode.insertBefore(<b>this</b>.node, element.node.nextSibling);
-</code><code id="L3443"><span class="ln">3443</span>            } <b>else</b> {
-</code><code id="L3444"><span class="ln">3444</span>                element.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L3410"><span class="ln">3410</span>                o.appendChild(fill);
+</code><code id="L3411"><span class="ln">3411</span>                <span class="c">// alert(fill.outerHTML);</span>
+</code><code id="L3412"><span class="ln">3412</span>            }
+</code><code id="L3413"><span class="ln">3413</span>            <b>return</b> <span class="d">1</span>;
+</code><code id="L3414"><span class="ln">3414</span>        };
+</code><code id="L3415"><span class="ln">3415</span>        Element<span class="s"> = </span><b>function</b> (node, vml) {
+</code><code id="L3416"><span class="ln">3416</span>            <b>this</b>[<span class="d">0</span>]<span class="s"> = </span><b>this</b>.node<span class="s"> = </span>node;
+</code><code id="L3417"><span class="ln">3417</span>            node.raphael<span class="s"> = </span><b>true</b>;
+</code><code id="L3418"><span class="ln">3418</span>            <b>this</b>.id<span class="s"> = </span>R._oid++;
+</code><code id="L3419"><span class="ln">3419</span>            node.raphaelid<span class="s"> = </span><b>this</b>.id;
+</code><code id="L3420"><span class="ln">3420</span>            <b>this</b>.X<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3421"><span class="ln">3421</span>            <b>this</b>.Y<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3422"><span class="ln">3422</span>            <b>this</b>.attrs<span class="s"> = </span>{};
+</code><code id="L3423"><span class="ln">3423</span>            <b>this</b>.paper<span class="s"> = </span>vml;
+</code><code id="L3424"><span class="ln">3424</span>            <b>this</b>.matrix<span class="s"> = </span><b>new</b> Matrix;
+</code><code id="L3425"><span class="ln">3425</span>            <b>this</b>._<span class="s"> = </span>{
+</code><code id="L3426"><span class="ln">3426</span>                transform: [],
+</code><code id="L3427"><span class="ln">3427</span>                sx: <span class="d">1</span>,
+</code><code id="L3428"><span class="ln">3428</span>                sy: <span class="d">1</span>,
+</code><code id="L3429"><span class="ln">3429</span>                dx: <span class="d">0</span>,
+</code><code id="L3430"><span class="ln">3430</span>                dy: <span class="d">0</span>,
+</code><code id="L3431"><span class="ln">3431</span>                deg: <span class="d">0</span>,
+</code><code id="L3432"><span class="ln">3432</span>                dirty: <span class="d">1</span>,
+</code><code id="L3433"><span class="ln">3433</span>                dirtyT: <span class="d">1</span>
+</code><code id="L3434"><span class="ln">3434</span>            };
+</code><code id="L3435"><span class="ln">3435</span>            !vml.bottom<span class="s"> &amp;&amp; </span>(vml.bottom<span class="s"> = </span><b>this</b>);
+</code><code id="L3436"><span class="ln">3436</span>            <b>this</b>.prev<span class="s"> = </span>vml.top;
+</code><code id="L3437"><span class="ln">3437</span>            vml.top<span class="s"> &amp;&amp; </span>(vml.top.next<span class="s"> = </span><b>this</b>);
+</code><code id="L3438"><span class="ln">3438</span>            vml.top<span class="s"> = </span><b>this</b>;
+</code><code id="L3439"><span class="ln">3439</span>            <b>this</b>.next<span class="s"> = </span><b>null</b>;
+</code><code id="L3440"><span class="ln">3440</span>        };
+</code><code id="L3441"><span class="ln">3441</span>        elproto<span class="s"> = </span>Element.prototype;
+</code><code id="L3442"><span class="ln">3442</span>        elproto.transform<span class="s"> = </span><b>function</b> (tstr) {
+</code><code id="L3443"><span class="ln">3443</span>            <b>if</b> (tstr<span class="s"> == </span><b>null</b>) {
+</code><code id="L3444"><span class="ln">3444</span>                <b>return</b> <b>this</b>._.transform;
 </code><code id="L3445"><span class="ln">3445</span>            }
-</code><code id="L3446"><span class="ln">3446</span>            insertafter(<b>this</b>, element, <b>this</b>.paper);
-</code><code id="L3447"><span class="ln">3447</span>            <b>return</b> <b>this</b>;
-</code><code id="L3448"><span class="ln">3448</span>        };
-</code><code id="L3449"><span class="ln">3449</span>        elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
-</code><code id="L3450"><span class="ln">3450</span>            <b>if</b> (<b>this</b>.removed) {
-</code><code id="L3451"><span class="ln">3451</span>                <b>return</b> <b>this</b>;
-</code><code id="L3452"><span class="ln">3452</span>            }
-</code><code id="L3453"><span class="ln">3453</span>            <b>if</b> (element.constructor<span class="s"> == </span>Set) {
-</code><code id="L3454"><span class="ln">3454</span>                element<span class="s"> = </span>element[<span class="d">0</span>];
-</code><code id="L3455"><span class="ln">3455</span>            }
-</code><code id="L3456"><span class="ln">3456</span>            element.node.parentNode.insertBefore(<b>this</b>.node, element.node);
-</code><code id="L3457"><span class="ln">3457</span>            insertbefore(<b>this</b>, element, <b>this</b>.paper);
-</code><code id="L3458"><span class="ln">3458</span>            <b>return</b> <b>this</b>;
-</code><code id="L3459"><span class="ln">3459</span>        };
-</code><code id="L3460"><span class="ln">3460</span>        elproto.blur<span class="s"> = </span><b>function</b> (size) {
-</code><code id="L3461"><span class="ln">3461</span>            <b>var</b> s<span class="s"> = </span><b>this</b>.node.runtimeStyle,
-</code><code id="L3462"><span class="ln">3462</span>                f<span class="s"> = </span>s.filter;
-</code><code id="L3463"><span class="ln">3463</span>            f<span class="s"> = </span>f.replace(blurregexp, E);
-</code><code id="L3464"><span class="ln">3464</span>            <b>if</b> (+size !== <span class="d">0</span>) {
-</code><code id="L3465"><span class="ln">3465</span>                <b>this</b>.attrs.blur<span class="s"> = </span>size;
-</code><code id="L3466"><span class="ln">3466</span>                s.filter<span class="s"> = </span>f<span class="s"> + </span>S<span class="s"> + </span>ms<span class="s"> + </span><i>".Blur(pixelradius="</i><span class="s"> + </span>(+size<span class="s"> || </span><span class="d">1.5</span>)<span class="s"> + </span><i>")"</i>;
-</code><code id="L3467"><span class="ln">3467</span>                s.margin<span class="s"> = </span>R.format(<i>"-{<span class="d">0</span>}px <span class="d">0</span> <span class="d">0</span> -{<span class="d">0</span>}px"</i>, round(+size<span class="s"> || </span><span class="d">1.5</span>));
-</code><code id="L3468"><span class="ln">3468</span>            } <b>else</b> {
-</code><code id="L3469"><span class="ln">3469</span>                s.filter<span class="s"> = </span>f;
-</code><code id="L3470"><span class="ln">3470</span>                s.margin<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L3471"><span class="ln">3471</span>                <b>delete</b> <b>this</b>.attrs.blur;
-</code><code id="L3472"><span class="ln">3472</span>            }
-</code><code id="L3473"><span class="ln">3473</span>        };
-</code><code id="L3474"><span class="ln">3474</span>
-</code><code id="L3475"><span class="ln">3475</span>        thePath<span class="s"> = </span><b>function</b> (pathString, vml) {
-</code><code id="L3476"><span class="ln">3476</span>            <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>);
-</code><code id="L3477"><span class="ln">3477</span>            el.style.cssText<span class="s"> = </span>cssDot;
-</code><code id="L3478"><span class="ln">3478</span>            el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
-</code><code id="L3479"><span class="ln">3479</span>            el.coordorigin<span class="s"> = </span>vml.coordorigin;
-</code><code id="L3480"><span class="ln">3480</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
-</code><code id="L3481"><span class="ln">3481</span>                attr<span class="s"> = </span>{fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
-</code><code id="L3482"><span class="ln">3482</span>            pathString &amp;&amp; (attr.path<span class="s"> = </span>pathString);
-</code><code id="L3483"><span class="ln">3483</span>            p.type<span class="s"> = </span><i>"path"</i>;
-</code><code id="L3484"><span class="ln">3484</span>            p.path<span class="s"> = </span>[];
-</code><code id="L3485"><span class="ln">3485</span>            p.Path<span class="s"> = </span>E;
-</code><code id="L3486"><span class="ln">3486</span>            setFillAndStroke(p, attr);
-</code><code id="L3487"><span class="ln">3487</span>            vml.canvas.appendChild(el);
-</code><code id="L3488"><span class="ln">3488</span>            <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
-</code><code id="L3489"><span class="ln">3489</span>            skew.on<span class="s"> = </span><b>true</b>;
-</code><code id="L3490"><span class="ln">3490</span>            el.appendChild(skew);
-</code><code id="L3491"><span class="ln">3491</span>            p.skew<span class="s"> = </span>skew;
-</code><code id="L3492"><span class="ln">3492</span>            p.transform(E);
-</code><code id="L3493"><span class="ln">3493</span>            <b>return</b> p;
-</code><code id="L3494"><span class="ln">3494</span>        };
-</code><code id="L3495"><span class="ln">3495</span>        theRect<span class="s"> = </span><b>function</b> (vml, x, y, w, h, r) {
-</code><code id="L3496"><span class="ln">3496</span>            <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h, r),
-</code><code id="L3497"><span class="ln">3497</span>                res<span class="s"> = </span>vml.path(path),
-</code><code id="L3498"><span class="ln">3498</span>                a<span class="s"> = </span>res.attrs;
-</code><code id="L3499"><span class="ln">3499</span>            res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
-</code><code id="L3500"><span class="ln">3500</span>            res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
-</code><code id="L3501"><span class="ln">3501</span>            res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
-</code><code id="L3502"><span class="ln">3502</span>            res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
-</code><code id="L3503"><span class="ln">3503</span>            a.r<span class="s"> = </span>r;
-</code><code id="L3504"><span class="ln">3504</span>            a.path<span class="s"> = </span>path;
-</code><code id="L3505"><span class="ln">3505</span>            res.type<span class="s"> = </span><i>"rect"</i>;
-</code><code id="L3506"><span class="ln">3506</span>            <b>return</b> res;
-</code><code id="L3507"><span class="ln">3507</span>        };
-</code><code id="L3508"><span class="ln">3508</span>        theEllipse<span class="s"> = </span><b>function</b> (vml, x, y, rx, ry) {
-</code><code id="L3509"><span class="ln">3509</span>            <b>var</b> res<span class="s"> = </span>vml.path(),
-</code><code id="L3510"><span class="ln">3510</span>                a<span class="s"> = </span>res.attrs;
-</code><code id="L3511"><span class="ln">3511</span>            res.X<span class="s"> = </span>x<span class="s"> - </span>rx;
-</code><code id="L3512"><span class="ln">3512</span>            res.Y<span class="s"> = </span>y<span class="s"> - </span>ry;
-</code><code id="L3513"><span class="ln">3513</span>            res.W<span class="s"> = </span>rx<span class="s"> * </span><span class="d">2</span>;
-</code><code id="L3514"><span class="ln">3514</span>            res.H<span class="s"> = </span>ry<span class="s"> * </span><span class="d">2</span>;
-</code><code id="L3515"><span class="ln">3515</span>            res.type<span class="s"> = </span><i>"ellipse"</i>;
-</code><code id="L3516"><span class="ln">3516</span>            setFillAndStroke(res, {
-</code><code id="L3517"><span class="ln">3517</span>                cx: x,
-</code><code id="L3518"><span class="ln">3518</span>                cy: y,
-</code><code id="L3519"><span class="ln">3519</span>                rx: rx,
-</code><code id="L3520"><span class="ln">3520</span>                ry: ry
-</code><code id="L3521"><span class="ln">3521</span>            });
-</code><code id="L3522"><span class="ln">3522</span>            <b>return</b> res;
-</code><code id="L3523"><span class="ln">3523</span>        };
-</code><code id="L3524"><span class="ln">3524</span>        theCircle<span class="s"> = </span><b>function</b> (vml, x, y, r) {
-</code><code id="L3525"><span class="ln">3525</span>            <b>var</b> res<span class="s"> = </span>vml.path(),
-</code><code id="L3526"><span class="ln">3526</span>                a<span class="s"> = </span>res.attrs;
-</code><code id="L3527"><span class="ln">3527</span>            res.X<span class="s"> = </span>x<span class="s"> - </span>r;
-</code><code id="L3528"><span class="ln">3528</span>            res.Y<span class="s"> = </span>y<span class="s"> - </span>r;
-</code><code id="L3529"><span class="ln">3529</span>            res.W<span class="s"> = </span>res.H<span class="s"> = </span>r<span class="s"> * </span><span class="d">2</span>;
-</code><code id="L3530"><span class="ln">3530</span>            res.type<span class="s"> = </span><i>"circle"</i>;
-</code><code id="L3531"><span class="ln">3531</span>            setFillAndStroke(res, {
-</code><code id="L3532"><span class="ln">3532</span>                cx: x,
-</code><code id="L3533"><span class="ln">3533</span>                cy: y,
-</code><code id="L3534"><span class="ln">3534</span>                r: r
-</code><code id="L3535"><span class="ln">3535</span>            });
-</code><code id="L3536"><span class="ln">3536</span>            <b>return</b> res;
-</code><code id="L3537"><span class="ln">3537</span>        };
-</code><code id="L3538"><span class="ln">3538</span>        theImage<span class="s"> = </span><b>function</b> (vml, src, x, y, w, h) {
-</code><code id="L3539"><span class="ln">3539</span>            <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h),
-</code><code id="L3540"><span class="ln">3540</span>                res<span class="s"> = </span>vml.path(path).attr({stroke: <i>"none"</i>}),
-</code><code id="L3541"><span class="ln">3541</span>                a<span class="s"> = </span>res.attrs,
-</code><code id="L3542"><span class="ln">3542</span>                node<span class="s"> = </span>res.node,
-</code><code id="L3543"><span class="ln">3543</span>                fill<span class="s"> = </span>node.getElementsByTagName(fillString)[<span class="d">0</span>];
-</code><code id="L3544"><span class="ln">3544</span>            a.src<span class="s"> = </span>src;
-</code><code id="L3545"><span class="ln">3545</span>            res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
-</code><code id="L3546"><span class="ln">3546</span>            res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
-</code><code id="L3547"><span class="ln">3547</span>            res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
-</code><code id="L3548"><span class="ln">3548</span>            res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
-</code><code id="L3549"><span class="ln">3549</span>            a.path<span class="s"> = </span>path;
-</code><code id="L3550"><span class="ln">3550</span>            res.type<span class="s"> = </span><i>"image"</i>;
-</code><code id="L3551"><span class="ln">3551</span>            fill.parentNode<span class="s"> == </span>node &amp;&amp; node.removeChild(fill);
-</code><code id="L3552"><span class="ln">3552</span>            fill.rotate<span class="s"> = </span><b>true</b>;
-</code><code id="L3553"><span class="ln">3553</span>            fill.src<span class="s"> = </span>src;
-</code><code id="L3554"><span class="ln">3554</span>            fill.type<span class="s"> = </span><i>"tile"</i>;
-</code><code id="L3555"><span class="ln">3555</span>            res._.fillpos<span class="s"> = </span>[x, y];
-</code><code id="L3556"><span class="ln">3556</span>            res._.fillsize<span class="s"> = </span>[w, h];
-</code><code id="L3557"><span class="ln">3557</span>            node.appendChild(fill);
-</code><code id="L3558"><span class="ln">3558</span>            setCoords(res);
-</code><code id="L3559"><span class="ln">3559</span>            <b>return</b> res;
-</code><code id="L3560"><span class="ln">3560</span>        };
-</code><code id="L3561"><span class="ln">3561</span>        theText<span class="s"> = </span><b>function</b> (vml, x, y, text) {
-</code><code id="L3562"><span class="ln">3562</span>            <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>),
-</code><code id="L3563"><span class="ln">3563</span>                path<span class="s"> = </span>createNode(<i>"path"</i>),
-</code><code id="L3564"><span class="ln">3564</span>                o<span class="s"> = </span>createNode(<i>"textpath"</i>);
-</code><code id="L3565"><span class="ln">3565</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3566"><span class="ln">3566</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3567"><span class="ln">3567</span>            text<span class="s"> = </span>text<span class="s"> || </span><i>""</i>;
-</code><code id="L3568"><span class="ln">3568</span>            path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(x<span class="s"> * </span>zoom), round(y<span class="s"> * </span>zoom), round(x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>);
-</code><code id="L3569"><span class="ln">3569</span>            path.textpathok<span class="s"> = </span><b>true</b>;
-</code><code id="L3570"><span class="ln">3570</span>            o.string<span class="s"> = </span>Str(text);
-</code><code id="L3571"><span class="ln">3571</span>            o.on<span class="s"> = </span><b>true</b>;
-</code><code id="L3572"><span class="ln">3572</span>            el.style.cssText<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:<span class="d">1</span>;height:<span class="d">1</span>"</i>;
-</code><code id="L3573"><span class="ln">3573</span>            el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
-</code><code id="L3574"><span class="ln">3574</span>            el.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
-</code><code id="L3575"><span class="ln">3575</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
-</code><code id="L3576"><span class="ln">3576</span>                attr<span class="s"> = </span>{fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, font: availableAttrs.font, text: text};
-</code><code id="L3577"><span class="ln">3577</span>            p.shape<span class="s"> = </span>el;
-</code><code id="L3578"><span class="ln">3578</span>            p.path<span class="s"> = </span>path;
-</code><code id="L3579"><span class="ln">3579</span>            p.textpath<span class="s"> = </span>o;
-</code><code id="L3580"><span class="ln">3580</span>            p.type<span class="s"> = </span><i>"text"</i>;
-</code><code id="L3581"><span class="ln">3581</span>            p.attrs.text<span class="s"> = </span>Str(text);
-</code><code id="L3582"><span class="ln">3582</span>            p.attrs.x<span class="s"> = </span>x;
-</code><code id="L3583"><span class="ln">3583</span>            p.attrs.y<span class="s"> = </span>y;
-</code><code id="L3584"><span class="ln">3584</span>            p.attrs.w<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L3585"><span class="ln">3585</span>            p.attrs.h<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L3586"><span class="ln">3586</span>            setFillAndStroke(p, attr);
-</code><code id="L3587"><span class="ln">3587</span>            el.appendChild(o);
-</code><code id="L3588"><span class="ln">3588</span>            el.appendChild(path);
-</code><code id="L3589"><span class="ln">3589</span>            vml.canvas.appendChild(el);
-</code><code id="L3590"><span class="ln">3590</span>            <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
-</code><code id="L3591"><span class="ln">3591</span>            skew.on<span class="s"> = </span><b>true</b>;
-</code><code id="L3592"><span class="ln">3592</span>            el.appendChild(skew);
-</code><code id="L3593"><span class="ln">3593</span>            p.skew<span class="s"> = </span>skew;
-</code><code id="L3594"><span class="ln">3594</span>            p.transform(E);
-</code><code id="L3595"><span class="ln">3595</span>            <b>return</b> p;
-</code><code id="L3596"><span class="ln">3596</span>        };
-</code><code id="L3597"><span class="ln">3597</span>        setSize<span class="s"> = </span><b>function</b> (width, height) {
-</code><code id="L3598"><span class="ln">3598</span>            <b>var</b> cs<span class="s"> = </span><b>this</b>.canvas.style;
-</code><code id="L3599"><span class="ln">3599</span>            <b>this</b>.width<span class="s"> = </span>width;
-</code><code id="L3600"><span class="ln">3600</span>            <b>this</b>.height<span class="s"> = </span>height;
-</code><code id="L3601"><span class="ln">3601</span>            width<span class="s"> == </span>+width &amp;&amp; (width += <i>"px"</i>);
-</code><code id="L3602"><span class="ln">3602</span>            height<span class="s"> == </span>+height &amp;&amp; (height += <i>"px"</i>);
-</code><code id="L3603"><span class="ln">3603</span>            cs.width<span class="s"> = </span>width;
-</code><code id="L3604"><span class="ln">3604</span>            cs.height<span class="s"> = </span>height;
-</code><code id="L3605"><span class="ln">3605</span>            cs.clip<span class="s"> = </span><i>"rect(<span class="d">0</span> "</i><span class="s"> + </span>width<span class="s"> + </span><i>" "</i><span class="s"> + </span>height<span class="s"> + </span><i>" <span class="d">0</span>)"</i>;
-</code><code id="L3606"><span class="ln">3606</span>            <b>if</b> (<b>this</b>._viewBox) {
-</code><code id="L3607"><span class="ln">3607</span>                setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
-</code><code id="L3608"><span class="ln">3608</span>            }
-</code><code id="L3609"><span class="ln">3609</span>            <b>return</b> <b>this</b>;
-</code><code id="L3610"><span class="ln">3610</span>        };
-</code><code id="L3611"><span class="ln">3611</span>        setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
-</code><code id="L3612"><span class="ln">3612</span>            eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
-</code><code id="L3613"><span class="ln">3613</span>            <b>var</b> width<span class="s"> = </span><b>this</b>.width,
-</code><code id="L3614"><span class="ln">3614</span>                height<span class="s"> = </span><b>this</b>.height,
-</code><code id="L3615"><span class="ln">3615</span>                size<span class="s"> = </span><span class="d">1e3</span><span class="s"> * </span>mmax(w<span class="s"> / </span>width, h<span class="s"> / </span>height),
-</code><code id="L3616"><span class="ln">3616</span>                H, W;
-</code><code id="L3617"><span class="ln">3617</span>            <b>if</b> (fit) {
-</code><code id="L3618"><span class="ln">3618</span>                H<span class="s"> = </span>height<span class="s"> / </span>h;
-</code><code id="L3619"><span class="ln">3619</span>                W<span class="s"> = </span>width<span class="s"> / </span>w;
-</code><code id="L3620"><span class="ln">3620</span>                <b>if</b> (w<span class="s"> * </span>H &lt; width) {
-</code><code id="L3621"><span class="ln">3621</span>                    x -= (width<span class="s"> - </span>w<span class="s"> * </span>H)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>H;
-</code><code id="L3622"><span class="ln">3622</span>                }
-</code><code id="L3623"><span class="ln">3623</span>                <b>if</b> (h<span class="s"> * </span>W &lt; height) {
-</code><code id="L3624"><span class="ln">3624</span>                    y -= (height<span class="s"> - </span>h<span class="s"> * </span>W)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>W;
-</code><code id="L3625"><span class="ln">3625</span>                }
-</code><code id="L3626"><span class="ln">3626</span>            }
-</code><code id="L3627"><span class="ln">3627</span>            <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
-</code><code id="L3628"><span class="ln">3628</span>            <b>this</b>.forEach(<b>function</b> (el) {
-</code><code id="L3629"><span class="ln">3629</span>                el.transform(<i>"+"</i>);
-</code><code id="L3630"><span class="ln">3630</span>            });
-</code><code id="L3631"><span class="ln">3631</span>            <span class="c">// <b>this</b>.canvas.coordsize<span class="s"> = </span>size<span class="s"> + </span>S<span class="s"> + </span>size;</span>
-</code><code id="L3632"><span class="ln">3632</span>            <span class="c">// <b>this</b>.canvas.coordorigin<span class="s"> = </span>x<span class="s"> + </span>S<span class="s"> + </span>y;</span>
-</code><code id="L3633"><span class="ln">3633</span>            <b>return</b> <b>this</b>;
-</code><code id="L3634"><span class="ln">3634</span>        };
-</code><code id="L3635"><span class="ln">3635</span>        <b>var</b> createNode,
-</code><code id="L3636"><span class="ln">3636</span>            initWin<span class="s"> = </span><b>function</b> (win) {
-</code><code id="L3637"><span class="ln">3637</span>                <b>var</b> doc<span class="s"> = </span>win.document;
-</code><code id="L3638"><span class="ln">3638</span>                doc.createStyleSheet().addRule(<i>".rvml"</i>, <i>"behavior:url(#<b>default</b>#VML)"</i>);
-</code><code id="L3639"><span class="ln">3639</span>                <b>try</b> {
-</code><code id="L3640"><span class="ln">3640</span>                    !doc.namespaces.rvml &amp;&amp; doc.namespaces.add(<i>"rvml"</i>, <i>"urn:schemas-microsoft-com:vml"</i>);
-</code><code id="L3641"><span class="ln">3641</span>                    createNode<span class="s"> = </span><b>function</b> (tagName) {
-</code><code id="L3642"><span class="ln">3642</span>                        <b>return</b> doc.createElement('&lt;rvml:'<span class="s"> + </span>tagName<span class="s"> + </span>' <b>class</b>=<i>"rvml"</i>>');
-</code><code id="L3643"><span class="ln">3643</span>                    };
-</code><code id="L3644"><span class="ln">3644</span>                } <b>catch</b> (e) {
-</code><code id="L3645"><span class="ln">3645</span>                    createNode<span class="s"> = </span><b>function</b> (tagName) {
-</code><code id="L3646"><span class="ln">3646</span>                        <b>return</b> doc.createElement('&lt;'<span class="s"> + </span>tagName<span class="s"> + </span>' xmlns=<i>"urn:schemas-microsoft.com:vml"</i> <b>class</b>=<i>"rvml"</i>>');
-</code><code id="L3647"><span class="ln">3647</span>                    };
-</code><code id="L3648"><span class="ln">3648</span>                }
-</code><code id="L3649"><span class="ln">3649</span>            };
-</code><code id="L3650"><span class="ln">3650</span>        initWin(g.win);
-</code><code id="L3651"><span class="ln">3651</span>        create<span class="s"> = </span><b>function</b> () {
-</code><code id="L3652"><span class="ln">3652</span>            <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
-</code><code id="L3653"><span class="ln">3653</span>                container<span class="s"> = </span>con.container,
-</code><code id="L3654"><span class="ln">3654</span>                height<span class="s"> = </span>con.height,
-</code><code id="L3655"><span class="ln">3655</span>                s,
-</code><code id="L3656"><span class="ln">3656</span>                width<span class="s"> = </span>con.width,
-</code><code id="L3657"><span class="ln">3657</span>                x<span class="s"> = </span>con.x,
-</code><code id="L3658"><span class="ln">3658</span>                y<span class="s"> = </span>con.y;
-</code><code id="L3659"><span class="ln">3659</span>            <b>if</b> (!container) {
-</code><code id="L3660"><span class="ln">3660</span>                <b>throw</b> <b>new</b> Error(<i>"VML container not found."</i>);
+</code><code id="L3446"><span class="ln">3446</span>            extractTransform(<b>this</b>, tstr);
+</code><code id="L3447"><span class="ln">3447</span>            <b>var</b> matrix<span class="s"> = </span><b>this</b>.matrix.clone(),
+</code><code id="L3448"><span class="ln">3448</span>                skew<span class="s"> = </span><b>this</b>.skew;
+</code><code id="L3449"><span class="ln">3449</span>            matrix.translate(-<span class="d">.5</span>, -<span class="d">.5</span>);
+</code><code id="L3450"><span class="ln">3450</span>            <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"image"</i>) {
+</code><code id="L3451"><span class="ln">3451</span>                <b>if</b> (Str(tstr).indexOf(<i>"m"</i>)<span class="s"> + </span><span class="d">1</span>) {
+</code><code id="L3452"><span class="ln">3452</span>                    <b>this</b>.node.style.filter<span class="s"> = </span>matrix.toFilter();
+</code><code id="L3453"><span class="ln">3453</span>                    <b>var</b> bb<span class="s"> = </span><b>this</b>.getBBox(),
+</code><code id="L3454"><span class="ln">3454</span>                        bbt<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>),
+</code><code id="L3455"><span class="ln">3455</span>                        im<span class="s"> = </span>matrix.invert(),
+</code><code id="L3456"><span class="ln">3456</span>                        dx<span class="s"> = </span>im.x(bb.x, bb.y)<span class="s"> - </span>im.x(bbt.x, bbt.y),
+</code><code id="L3457"><span class="ln">3457</span>                        dy<span class="s"> = </span>im.y(bb.x, bb.y)<span class="s"> - </span>im.y(bbt.x, bbt.y);
+</code><code id="L3458"><span class="ln">3458</span>                    <span class="c">// skew.offset<span class="s"> = </span>dx<span class="s"> + </span>S<span class="s"> + </span>dy;</span>
+</code><code id="L3459"><span class="ln">3459</span>                    <span class="c">// <b>this</b>.node.getElementsByTagName(fillString)[<span class="d">0</span>].position<span class="s"> = </span>skew.offset;</span>
+</code><code id="L3460"><span class="ln">3460</span>                } <b>else</b> {
+</code><code id="L3461"><span class="ln">3461</span>                    <b>this</b>.node.style.filter<span class="s"> = </span>E;
+</code><code id="L3462"><span class="ln">3462</span>                    setCoords(<b>this</b>);
+</code><code id="L3463"><span class="ln">3463</span>                }
+</code><code id="L3464"><span class="ln">3464</span>            } <b>else</b> {
+</code><code id="L3465"><span class="ln">3465</span>                    <span class="c">// o<span class="s"> = </span><b>this</b>.node,</span>
+</code><code id="L3466"><span class="ln">3466</span>                    <span class="c">// _<span class="s"> = </span><b>this</b>._,</span>
+</code><code id="L3467"><span class="ln">3467</span>                    <span class="c">// fillpos<span class="s"> = </span>_.fillpos,</span>
+</code><code id="L3468"><span class="ln">3468</span>                    <span class="c">// deg,</span>
+</code><code id="L3469"><span class="ln">3469</span>                    <span class="c">// matrix<span class="s"> = </span><b>this</b>.matrix;</span>
+</code><code id="L3470"><span class="ln">3470</span>                    <span class="c">// fill<span class="s"> = </span>o.getElementsByTagName(fillString)[<span class="d">0</span>],</span>
+</code><code id="L3471"><span class="ln">3471</span>                    <span class="c">// angle<span class="s"> = </span>fill.angle;</span>
+</code><code id="L3472"><span class="ln">3472</span>
+</code><code id="L3473"><span class="ln">3473</span>                <b>this</b>.node.style.filter<span class="s"> = </span>E;
+</code><code id="L3474"><span class="ln">3474</span>                skew.matrix<span class="s"> = </span>matrix;
+</code><code id="L3475"><span class="ln">3475</span>                skew.offset<span class="s"> = </span>matrix.offset();
+</code><code id="L3476"><span class="ln">3476</span>                
+</code><code id="L3477"><span class="ln">3477</span>                <span class="c">// <b>if</b> (<span class="d">0</span>&amp;&amp;angle) {</span>
+</code><code id="L3478"><span class="ln">3478</span>                <span class="c">//     angle<span class="s"> = </span>R.rad(<span class="d">270</span><span class="s"> - </span>angle);</span>
+</code><code id="L3479"><span class="ln">3479</span>                <span class="c">//     <b>var</b> dx<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.cos(angle),</span>
+</code><code id="L3480"><span class="ln">3480</span>                <span class="c">//         dy<span class="s"> = </span><span class="d">100</span><span class="s"> * </span>math.sin(angle),</span>
+</code><code id="L3481"><span class="ln">3481</span>                <span class="c">//         zx<span class="s"> = </span>matrix.x(<span class="d">0</span>, <span class="d">0</span>),</span>
+</code><code id="L3482"><span class="ln">3482</span>                <span class="c">//         zy<span class="s"> = </span>matrix.y(<span class="d">0</span>, <span class="d">0</span>),</span>
+</code><code id="L3483"><span class="ln">3483</span>                <span class="c">//         mx<span class="s"> = </span>matrix.x(dx, dy),</span>
+</code><code id="L3484"><span class="ln">3484</span>                <span class="c">//         my<span class="s"> = </span>matrix.y(dx, dy);</span>
+</code><code id="L3485"><span class="ln">3485</span>                <span class="c">//     angle<span class="s"> = </span>R.angle(zx, zy, mx, my);</span>
+</code><code id="L3486"><span class="ln">3486</span>                <span class="c">//     fill.angle<span class="s"> = </span>(<span class="d">270</span><span class="s"> - </span>angle)<span class="s"> % </span><span class="d">360</span>;</span>
+</code><code id="L3487"><span class="ln">3487</span>                <span class="c">// }</span>
+</code><code id="L3488"><span class="ln">3488</span>            }
+</code><code id="L3489"><span class="ln">3489</span>            <b>return</b> <b>this</b>;
+</code><code id="L3490"><span class="ln">3490</span>        };
+</code><code id="L3491"><span class="ln">3491</span>        elproto.rotate<span class="s"> = </span><b>function</b> (deg, cx, cy) {
+</code><code id="L3492"><span class="ln">3492</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3493"><span class="ln">3493</span>                <b>return</b> <b>this</b>;
+</code><code id="L3494"><span class="ln">3494</span>            }
+</code><code id="L3495"><span class="ln">3495</span>            <b>if</b> (deg<span class="s"> == </span><b>null</b>) {
+</code><code id="L3496"><span class="ln">3496</span>                <b>return</b>;
+</code><code id="L3497"><span class="ln">3497</span>            }
+</code><code id="L3498"><span class="ln">3498</span>            deg<span class="s"> = </span>Str(deg).split(separator);
+</code><code id="L3499"><span class="ln">3499</span>            <b>if</b> (deg.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3500"><span class="ln">3500</span>                cx<span class="s"> = </span>toFloat(deg[<span class="d">1</span>]);
+</code><code id="L3501"><span class="ln">3501</span>                cy<span class="s"> = </span>toFloat(deg[<span class="d">2</span>]);
+</code><code id="L3502"><span class="ln">3502</span>            }
+</code><code id="L3503"><span class="ln">3503</span>            deg<span class="s"> = </span>toFloat(deg[<span class="d">0</span>]);
+</code><code id="L3504"><span class="ln">3504</span>            (cy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(cx<span class="s"> = </span>cy);
+</code><code id="L3505"><span class="ln">3505</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L3506"><span class="ln">3506</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L3507"><span class="ln">3507</span>                cx<span class="s"> = </span>bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3508"><span class="ln">3508</span>                cy<span class="s"> = </span>bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span>;
+</code><code id="L3509"><span class="ln">3509</span>            }
+</code><code id="L3510"><span class="ln">3510</span>            <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3511"><span class="ln">3511</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"r"</i>, deg, cx, cy]]));
+</code><code id="L3512"><span class="ln">3512</span>            <b>return</b> <b>this</b>;
+</code><code id="L3513"><span class="ln">3513</span>        };
+</code><code id="L3514"><span class="ln">3514</span>        elproto.translate<span class="s"> = </span><b>function</b> (dx, dy) {
+</code><code id="L3515"><span class="ln">3515</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3516"><span class="ln">3516</span>                <b>return</b> <b>this</b>;
+</code><code id="L3517"><span class="ln">3517</span>            }
+</code><code id="L3518"><span class="ln">3518</span>            dx<span class="s"> = </span>Str(dx).split(separator);
+</code><code id="L3519"><span class="ln">3519</span>            <b>if</b> (dx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3520"><span class="ln">3520</span>                dy<span class="s"> = </span>toFloat(dx[<span class="d">1</span>]);
+</code><code id="L3521"><span class="ln">3521</span>            }
+</code><code id="L3522"><span class="ln">3522</span>            dx<span class="s"> = </span>toFloat(dx[<span class="d">0</span>])<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3523"><span class="ln">3523</span>            dy<span class="s"> = </span>+dy<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3524"><span class="ln">3524</span>            <b>if</b> (<b>this</b>._.bbox) {
+</code><code id="L3525"><span class="ln">3525</span>                <b>this</b>._.bbox.x += dx;
+</code><code id="L3526"><span class="ln">3526</span>                <b>this</b>._.bbox.y += dy;
+</code><code id="L3527"><span class="ln">3527</span>            }
+</code><code id="L3528"><span class="ln">3528</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"t"</i>, dx, dy]]));
+</code><code id="L3529"><span class="ln">3529</span>            <b>return</b> <b>this</b>;
+</code><code id="L3530"><span class="ln">3530</span>        };
+</code><code id="L3531"><span class="ln">3531</span>        elproto.scale<span class="s"> = </span><b>function</b> (sx, sy, cx, cy) {
+</code><code id="L3532"><span class="ln">3532</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3533"><span class="ln">3533</span>                <b>return</b> <b>this</b>;
+</code><code id="L3534"><span class="ln">3534</span>            }
+</code><code id="L3535"><span class="ln">3535</span>            sx<span class="s"> = </span>Str(sx).split(separator);
+</code><code id="L3536"><span class="ln">3536</span>            <b>if</b> (sx.length<span class="s"> - </span><span class="d">1</span>) {
+</code><code id="L3537"><span class="ln">3537</span>                sy<span class="s"> = </span>toFloat(sx[<span class="d">1</span>]);
+</code><code id="L3538"><span class="ln">3538</span>                cx<span class="s"> = </span>toFloat(sx[<span class="d">2</span>]);
+</code><code id="L3539"><span class="ln">3539</span>                cy<span class="s"> = </span>toFloat(sx[<span class="d">3</span>]);
+</code><code id="L3540"><span class="ln">3540</span>                isNaN(cx)<span class="s"> &amp;&amp; </span>(cx<span class="s"> = </span><b>null</b>);
+</code><code id="L3541"><span class="ln">3541</span>                isNaN(cy)<span class="s"> &amp;&amp; </span>(cy<span class="s"> = </span><b>null</b>);
+</code><code id="L3542"><span class="ln">3542</span>            }
+</code><code id="L3543"><span class="ln">3543</span>            sx<span class="s"> = </span>toFloat(sx[<span class="d">0</span>]);
+</code><code id="L3544"><span class="ln">3544</span>            (sy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(sy<span class="s"> = </span>sx);
+</code><code id="L3545"><span class="ln">3545</span>            (cy<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(cx<span class="s"> = </span>cy);
+</code><code id="L3546"><span class="ln">3546</span>            <b>if</b> (cx<span class="s"> == </span><b>null</b><span class="s"> || </span>cy<span class="s"> == </span><b>null</b>) {
+</code><code id="L3547"><span class="ln">3547</span>                <b>var</b> bbox<span class="s"> = </span><b>this</b>.getBBox(<span class="d">1</span>);
+</code><code id="L3548"><span class="ln">3548</span>            }
+</code><code id="L3549"><span class="ln">3549</span>            cx<span class="s"> = </span>cx<span class="s"> == </span><b>null</b> ? bbox.x<span class="s"> + </span>bbox.width<span class="s"> / </span><span class="d">2</span> : cx;
+</code><code id="L3550"><span class="ln">3550</span>            cy<span class="s"> = </span>cy<span class="s"> == </span><b>null</b> ? bbox.y<span class="s"> + </span>bbox.height<span class="s"> / </span><span class="d">2</span> : cy;
+</code><code id="L3551"><span class="ln">3551</span>            
+</code><code id="L3552"><span class="ln">3552</span>            <b>this</b>.transform(<b>this</b>._.transform.concat([[<i>"s"</i>, sx, sy, cx, cy]]));
+</code><code id="L3553"><span class="ln">3553</span>            <b>this</b>._.dirtyT<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3554"><span class="ln">3554</span>            <b>return</b> <b>this</b>;
+</code><code id="L3555"><span class="ln">3555</span>        };
+</code><code id="L3556"><span class="ln">3556</span>        elproto.hide<span class="s"> = </span><b>function</b> () {
+</code><code id="L3557"><span class="ln">3557</span>            !<b>this</b>.removed<span class="s"> &amp;&amp; </span>(<b>this</b>.node.style.display<span class="s"> = </span><i>"none"</i>);
+</code><code id="L3558"><span class="ln">3558</span>            <b>return</b> <b>this</b>;
+</code><code id="L3559"><span class="ln">3559</span>        };
+</code><code id="L3560"><span class="ln">3560</span>        elproto.show<span class="s"> = </span><b>function</b> () {
+</code><code id="L3561"><span class="ln">3561</span>            !<b>this</b>.removed<span class="s"> &amp;&amp; </span>(<b>this</b>.node.style.display<span class="s"> = </span>E);
+</code><code id="L3562"><span class="ln">3562</span>            <b>return</b> <b>this</b>;
+</code><code id="L3563"><span class="ln">3563</span>        };
+</code><code id="L3564"><span class="ln">3564</span>        elproto._getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L3565"><span class="ln">3565</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3566"><span class="ln">3566</span>                <b>return</b> {};
+</code><code id="L3567"><span class="ln">3567</span>            }
+</code><code id="L3568"><span class="ln">3568</span>            <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3569"><span class="ln">3569</span>                <b>return</b> {
+</code><code id="L3570"><span class="ln">3570</span>                    x: <b>this</b>.X<span class="s"> + </span>(<b>this</b>.bbx<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span><b>this</b>.W<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L3571"><span class="ln">3571</span>                    y: <b>this</b>.Y<span class="s"> - </span><b>this</b>.H,
+</code><code id="L3572"><span class="ln">3572</span>                    width: <b>this</b>.W,
+</code><code id="L3573"><span class="ln">3573</span>                    height: <b>this</b>.H
+</code><code id="L3574"><span class="ln">3574</span>                };
+</code><code id="L3575"><span class="ln">3575</span>            } <b>else</b> {
+</code><code id="L3576"><span class="ln">3576</span>                <b>return</b> pathDimensions(<b>this</b>.attrs.path);
+</code><code id="L3577"><span class="ln">3577</span>            }
+</code><code id="L3578"><span class="ln">3578</span>        };
+</code><code id="L3579"><span class="ln">3579</span>        elproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L3580"><span class="ln">3580</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3581"><span class="ln">3581</span>                <b>return</b>;
+</code><code id="L3582"><span class="ln">3582</span>            }
+</code><code id="L3583"><span class="ln">3583</span>            eve.unbind(<i>"*.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L3584"><span class="ln">3584</span>            tear(<b>this</b>, <b>this</b>.paper);
+</code><code id="L3585"><span class="ln">3585</span>            <b>this</b>.node.parentNode.removeChild(<b>this</b>.node);
+</code><code id="L3586"><span class="ln">3586</span>            <b>this</b>.shape<span class="s"> &amp;&amp; </span><b>this</b>.shape.parentNode.removeChild(<b>this</b>.shape);
+</code><code id="L3587"><span class="ln">3587</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L3588"><span class="ln">3588</span>                <b>delete</b> <b>this</b>[i];
+</code><code id="L3589"><span class="ln">3589</span>            }
+</code><code id="L3590"><span class="ln">3590</span>            <b>this</b>.removed<span class="s"> = </span><b>true</b>;
+</code><code id="L3591"><span class="ln">3591</span>        };
+</code><code id="L3592"><span class="ln">3592</span>        elproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L3593"><span class="ln">3593</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3594"><span class="ln">3594</span>                <b>return</b> <b>this</b>;
+</code><code id="L3595"><span class="ln">3595</span>            }
+</code><code id="L3596"><span class="ln">3596</span>            <b>if</b> (name<span class="s"> == </span><b>null</b>) {
+</code><code id="L3597"><span class="ln">3597</span>                <b>var</b> res<span class="s"> = </span>{};
+</code><code id="L3598"><span class="ln">3598</span>                <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>.attrs) <b>if</b> (<b>this</b>.attrs[has](i)) {
+</code><code id="L3599"><span class="ln">3599</span>                    res[i]<span class="s"> = </span><b>this</b>.attrs[i];
+</code><code id="L3600"><span class="ln">3600</span>                }
+</code><code id="L3601"><span class="ln">3601</span>                res.gradient<span class="s"> &amp;&amp; </span>res.fill<span class="s"> == </span><i>"none"</i><span class="s"> &amp;&amp; </span>(res.fill<span class="s"> = </span>res.gradient)<span class="s"> &amp;&amp; </span><b>delete</b> res.gradient;
+</code><code id="L3602"><span class="ln">3602</span>                <b>return</b> res;
+</code><code id="L3603"><span class="ln">3603</span>            }
+</code><code id="L3604"><span class="ln">3604</span>            <b>if</b> (value<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(name, <i>"string"</i>)) {
+</code><code id="L3605"><span class="ln">3605</span>                <b>if</b> (name<span class="s"> == </span>fillString<span class="s"> &amp;&amp; </span><b>this</b>.attrs.fill<span class="s"> == </span><i>"none"</i><span class="s"> &amp;&amp; </span><b>this</b>.attrs.gradient) {
+</code><code id="L3606"><span class="ln">3606</span>                    <b>return</b> <b>this</b>.attrs.gradient;
+</code><code id="L3607"><span class="ln">3607</span>                }
+</code><code id="L3608"><span class="ln">3608</span>                <b>if</b> (name <b>in</b> <b>this</b>.attrs) {
+</code><code id="L3609"><span class="ln">3609</span>                    <b>return</b> <b>this</b>.attrs[name];
+</code><code id="L3610"><span class="ln">3610</span>                } <b>else</b> <b>if</b> (R.is(<b>this</b>.paper.customAttributes[name], <i>"<b>function</b>"</i>)) {
+</code><code id="L3611"><span class="ln">3611</span>                    <b>return</b> <b>this</b>.paper.customAttributes[name].def;
+</code><code id="L3612"><span class="ln">3612</span>                } <b>else</b> {
+</code><code id="L3613"><span class="ln">3613</span>                    <b>return</b> availableAttrs[name];
+</code><code id="L3614"><span class="ln">3614</span>                }
+</code><code id="L3615"><span class="ln">3615</span>            }
+</code><code id="L3616"><span class="ln">3616</span>            <b>if</b> (<b>this</b>.attrs<span class="s"> &amp;&amp; </span>value<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(name, array)) {
+</code><code id="L3617"><span class="ln">3617</span>                <b>var</b> ii, values<span class="s"> = </span>{};
+</code><code id="L3618"><span class="ln">3618</span>                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>name.length; i &lt; ii; i++) {
+</code><code id="L3619"><span class="ln">3619</span>                    values[name[i]]<span class="s"> = </span><b>this</b>.attr(name[i]);
+</code><code id="L3620"><span class="ln">3620</span>                }
+</code><code id="L3621"><span class="ln">3621</span>                <b>return</b> values;
+</code><code id="L3622"><span class="ln">3622</span>            }
+</code><code id="L3623"><span class="ln">3623</span>            <b>var</b> params;
+</code><code id="L3624"><span class="ln">3624</span>            <b>if</b> (value != <b>null</b>) {
+</code><code id="L3625"><span class="ln">3625</span>                params<span class="s"> = </span>{};
+</code><code id="L3626"><span class="ln">3626</span>                params[name]<span class="s"> = </span>value;
+</code><code id="L3627"><span class="ln">3627</span>            }
+</code><code id="L3628"><span class="ln">3628</span>            value<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>R.is(name, <i>"object"</i>)<span class="s"> &amp;&amp; </span>(params<span class="s"> = </span>name);
+</code><code id="L3629"><span class="ln">3629</span>            <b>for</b> (<b>var</b> key <b>in</b> params) {
+</code><code id="L3630"><span class="ln">3630</span>                eve(<i>"attr."</i><span class="s"> + </span>key<span class="s"> + </span><i>"."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, params[key]);
+</code><code id="L3631"><span class="ln">3631</span>            }
+</code><code id="L3632"><span class="ln">3632</span>            <b>if</b> (params) {
+</code><code id="L3633"><span class="ln">3633</span>                <b>for</b> (key <b>in</b> <b>this</b>.paper.customAttributes) <b>if</b> (<b>this</b>.paper.customAttributes[has](key)<span class="s"> &amp;&amp; </span>params[has](key)<span class="s"> &amp;&amp; </span>R.is(<b>this</b>.paper.customAttributes[key], <i>"<b>function</b>"</i>)) {
+</code><code id="L3634"><span class="ln">3634</span>                    <b>var</b> par<span class="s"> = </span><b>this</b>.paper.customAttributes[key].apply(<b>this</b>, [][concat](params[key]));
+</code><code id="L3635"><span class="ln">3635</span>                    <b>this</b>.attrs[key]<span class="s"> = </span>params[key];
+</code><code id="L3636"><span class="ln">3636</span>                    <b>for</b> (<b>var</b> subkey <b>in</b> par) <b>if</b> (par[has](subkey)) {
+</code><code id="L3637"><span class="ln">3637</span>                        params[subkey]<span class="s"> = </span>par[subkey];
+</code><code id="L3638"><span class="ln">3638</span>                    }
+</code><code id="L3639"><span class="ln">3639</span>                }
+</code><code id="L3640"><span class="ln">3640</span>                <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span><i>"none"</i>;</span>
+</code><code id="L3641"><span class="ln">3641</span>                <b>if</b> (params.text<span class="s"> &amp;&amp; </span><b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L3642"><span class="ln">3642</span>                    <b>this</b>.textpath.string<span class="s"> = </span>params.text;
+</code><code id="L3643"><span class="ln">3643</span>                }
+</code><code id="L3644"><span class="ln">3644</span>                setFillAndStroke(<b>this</b>, params);
+</code><code id="L3645"><span class="ln">3645</span>                <span class="c">// <b>this</b>.paper.canvas.style.display<span class="s"> = </span>E;</span>
+</code><code id="L3646"><span class="ln">3646</span>            }
+</code><code id="L3647"><span class="ln">3647</span>            <b>return</b> <b>this</b>;
+</code><code id="L3648"><span class="ln">3648</span>        };
+</code><code id="L3649"><span class="ln">3649</span>        elproto.toFront<span class="s"> = </span><b>function</b> () {
+</code><code id="L3650"><span class="ln">3650</span>            !<b>this</b>.removed<span class="s"> &amp;&amp; </span><b>this</b>.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L3651"><span class="ln">3651</span>            <b>this</b>.paper.top != <b>this</b><span class="s"> &amp;&amp; </span>tofront(<b>this</b>, <b>this</b>.paper);
+</code><code id="L3652"><span class="ln">3652</span>            <b>return</b> <b>this</b>;
+</code><code id="L3653"><span class="ln">3653</span>        };
+</code><code id="L3654"><span class="ln">3654</span>        elproto.toBack<span class="s"> = </span><b>function</b> () {
+</code><code id="L3655"><span class="ln">3655</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3656"><span class="ln">3656</span>                <b>return</b> <b>this</b>;
+</code><code id="L3657"><span class="ln">3657</span>            }
+</code><code id="L3658"><span class="ln">3658</span>            <b>if</b> (<b>this</b>.node.parentNode.firstChild != <b>this</b>.node) {
+</code><code id="L3659"><span class="ln">3659</span>                <b>this</b>.node.parentNode.insertBefore(<b>this</b>.node, <b>this</b>.node.parentNode.firstChild);
+</code><code id="L3660"><span class="ln">3660</span>                toback(<b>this</b>, <b>this</b>.paper);
 </code><code id="L3661"><span class="ln">3661</span>            }
-</code><code id="L3662"><span class="ln">3662</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Paper,
-</code><code id="L3663"><span class="ln">3663</span>                c<span class="s"> = </span>res.canvas<span class="s"> = </span>g.doc.createElement(<i>"div"</i>),
-</code><code id="L3664"><span class="ln">3664</span>                cs<span class="s"> = </span>c.style;
-</code><code id="L3665"><span class="ln">3665</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3666"><span class="ln">3666</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L3667"><span class="ln">3667</span>            width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
-</code><code id="L3668"><span class="ln">3668</span>            height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
-</code><code id="L3669"><span class="ln">3669</span>            res.width<span class="s"> = </span>width;
-</code><code id="L3670"><span class="ln">3670</span>            res.height<span class="s"> = </span>height;
-</code><code id="L3671"><span class="ln">3671</span>            width<span class="s"> == </span>+width &amp;&amp; (width += <i>"px"</i>);
-</code><code id="L3672"><span class="ln">3672</span>            height<span class="s"> == </span>+height &amp;&amp; (height += <i>"px"</i>);
-</code><code id="L3673"><span class="ln">3673</span>            res.coordsize<span class="s"> = </span>zoom<span class="s"> * </span><span class="d">1e3</span><span class="s"> + </span>S<span class="s"> + </span>zoom<span class="s"> * </span><span class="d">1e3</span>;
-</code><code id="L3674"><span class="ln">3674</span>            res.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
-</code><code id="L3675"><span class="ln">3675</span>            res.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
-</code><code id="L3676"><span class="ln">3676</span>            res.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;"</i>;
-</code><code id="L3677"><span class="ln">3677</span>            c.appendChild(res.span);
-</code><code id="L3678"><span class="ln">3678</span>            cs.cssText<span class="s"> = </span>R.format(<i>"top:<span class="d">0</span>;left:<span class="d">0</span>;width:{<span class="d">0</span>};height:{<span class="d">1</span>};display:inline-block;position:relative;clip:rect(<span class="d">0</span> {<span class="d">0</span>} {<span class="d">1</span>} <span class="d">0</span>);overflow:hidden"</i>, width, height);
-</code><code id="L3679"><span class="ln">3679</span>            <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
-</code><code id="L3680"><span class="ln">3680</span>                g.doc.body.appendChild(c);
-</code><code id="L3681"><span class="ln">3681</span>                cs.left<span class="s"> = </span>x<span class="s"> + </span><i>"px"</i>;
-</code><code id="L3682"><span class="ln">3682</span>                cs.top<span class="s"> = </span>y<span class="s"> + </span><i>"px"</i>;
-</code><code id="L3683"><span class="ln">3683</span>                cs.position<span class="s"> = </span><i>"absolute"</i>;
-</code><code id="L3684"><span class="ln">3684</span>            } <b>else</b> {
-</code><code id="L3685"><span class="ln">3685</span>                <b>if</b> (container.firstChild) {
-</code><code id="L3686"><span class="ln">3686</span>                    container.insertBefore(c, container.firstChild);
-</code><code id="L3687"><span class="ln">3687</span>                } <b>else</b> {
-</code><code id="L3688"><span class="ln">3688</span>                    container.appendChild(c);
-</code><code id="L3689"><span class="ln">3689</span>                }
-</code><code id="L3690"><span class="ln">3690</span>            }
-</code><code id="L3691"><span class="ln">3691</span>            plugins.call(res, res, R.fn);
-</code><code id="L3692"><span class="ln">3692</span>            <b>return</b> res;
-</code><code id="L3693"><span class="ln">3693</span>        };
-</code><code id="L3694"><span class="ln">3694</span>        paperproto.clear<span class="s"> = </span><b>function</b> () {
-</code><code id="L3695"><span class="ln">3695</span>            eve(<i>"clear"</i>, <b>this</b>);
-</code><code id="L3696"><span class="ln">3696</span>            <b>this</b>.canvas.innerHTML<span class="s"> = </span>E;
-</code><code id="L3697"><span class="ln">3697</span>            <b>this</b>.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
-</code><code id="L3698"><span class="ln">3698</span>            <b>this</b>.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;display:inline;"</i>;
-</code><code id="L3699"><span class="ln">3699</span>            <b>this</b>.canvas.appendChild(<b>this</b>.span);
-</code><code id="L3700"><span class="ln">3700</span>            <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
-</code><code id="L3701"><span class="ln">3701</span>        };
-</code><code id="L3702"><span class="ln">3702</span>        paperproto.remove<span class="s"> = </span><b>function</b> () {
-</code><code id="L3703"><span class="ln">3703</span>            eve(<i>"remove"</i>, <b>this</b>);
-</code><code id="L3704"><span class="ln">3704</span>            <b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
-</code><code id="L3705"><span class="ln">3705</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
-</code><code id="L3706"><span class="ln">3706</span>                <b>this</b>[i]<span class="s"> = </span>removed(i);
-</code><code id="L3707"><span class="ln">3707</span>            }
-</code><code id="L3708"><span class="ln">3708</span>            <b>return</b> <b>true</b>;
-</code><code id="L3709"><span class="ln">3709</span>        };
-</code><code id="L3710"><span class="ln">3710</span>    }
-</code><code id="L3711"><span class="ln">3711</span> 
-</code><code id="L3712"><span class="ln">3712</span>    <span class="c">// WebKit rendering bug workaround method</span>
-</code><code id="L3713"><span class="ln">3713</span>    <b>var</b> version<span class="s"> = </span>navigator.userAgent.match(/Version\/(.*?)\s/);
-</code><code id="L3714"><span class="ln">3714</span>    <b>if</b> ((navigator.vendor<span class="s"> == </span><i>"Apple Computer, Inc."</i>) &amp;&amp; (version &amp;&amp; version[<span class="d">1</span>] &lt; <span class="d">4</span><span class="s"> || </span>navigator.platform.slice(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> == </span><i>"iP"</i>)) {
-</code><code id="L3715"><span class="ln">3715</span>        paperproto.safari<span class="s"> = </span><b>function</b> () {
-</code><code id="L3716"><span class="ln">3716</span>            <b>var</b> rect<span class="s"> = </span><b>this</b>.rect(-<span class="d">99</span>, -<span class="d">99</span>, <b>this</b>.width<span class="s"> + </span><span class="d">99</span>, <b>this</b>.height<span class="s"> + </span><span class="d">99</span>).attr({stroke: <i>"none"</i>});
-</code><code id="L3717"><span class="ln">3717</span>            setTimeout(<b>function</b> () {rect.remove();});
-</code><code id="L3718"><span class="ln">3718</span>        };
-</code><code id="L3719"><span class="ln">3719</span>    } <b>else</b> {
-</code><code id="L3720"><span class="ln">3720</span>        paperproto.safari<span class="s"> = </span>fun;
-</code><code id="L3721"><span class="ln">3721</span>    }
-</code><code id="L3722"><span class="ln">3722</span> 
-</code><code id="L3723"><span class="ln">3723</span>    <span class="c">// Events</span>
-</code><code id="L3724"><span class="ln">3724</span>    <b>var</b> preventDefault<span class="s"> = </span><b>function</b> () {
-</code><code id="L3725"><span class="ln">3725</span>        <b>this</b>.returnValue<span class="s"> = </span><b>false</b>;
-</code><code id="L3726"><span class="ln">3726</span>    },
-</code><code id="L3727"><span class="ln">3727</span>    preventTouch<span class="s"> = </span><b>function</b> () {
-</code><code id="L3728"><span class="ln">3728</span>        <b>return</b> <b>this</b>.originalEvent.preventDefault();
-</code><code id="L3729"><span class="ln">3729</span>    },
-</code><code id="L3730"><span class="ln">3730</span>    stopPropagation<span class="s"> = </span><b>function</b> () {
-</code><code id="L3731"><span class="ln">3731</span>        <b>this</b>.cancelBubble<span class="s"> = </span><b>true</b>;
-</code><code id="L3732"><span class="ln">3732</span>    },
-</code><code id="L3733"><span class="ln">3733</span>    stopTouch<span class="s"> = </span><b>function</b> () {
-</code><code id="L3734"><span class="ln">3734</span>        <b>return</b> <b>this</b>.originalEvent.stopPropagation();
-</code><code id="L3735"><span class="ln">3735</span>    },
-</code><code id="L3736"><span class="ln">3736</span>    addEvent<span class="s"> = </span>(<b>function</b> () {
-</code><code id="L3737"><span class="ln">3737</span>        <b>if</b> (g.doc.addEventListener) {
-</code><code id="L3738"><span class="ln">3738</span>            <b>return</b> <b>function</b> (obj, type, fn, element) {
-</code><code id="L3739"><span class="ln">3739</span>                <b>var</b> realName<span class="s"> = </span>supportsTouch &amp;&amp; touchMap[type] ? touchMap[type] : type;
-</code><code id="L3740"><span class="ln">3740</span>                <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
-</code><code id="L3741"><span class="ln">3741</span>                    <b>if</b> (supportsTouch &amp;&amp; touchMap[has](type)) {
-</code><code id="L3742"><span class="ln">3742</span>                        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.targetTouches &amp;&amp; e.targetTouches.length; i &lt; ii; i++) {
-</code><code id="L3743"><span class="ln">3743</span>                            <b>if</b> (e.targetTouches[i].target<span class="s"> == </span>obj) {
-</code><code id="L3744"><span class="ln">3744</span>                                <b>var</b> olde<span class="s"> = </span>e;
-</code><code id="L3745"><span class="ln">3745</span>                                e<span class="s"> = </span>e.targetTouches[i];
-</code><code id="L3746"><span class="ln">3746</span>                                e.originalEvent<span class="s"> = </span>olde;
-</code><code id="L3747"><span class="ln">3747</span>                                e.preventDefault<span class="s"> = </span>preventTouch;
-</code><code id="L3748"><span class="ln">3748</span>                                e.stopPropagation<span class="s"> = </span>stopTouch;
-</code><code id="L3749"><span class="ln">3749</span>                                <b>break</b>;
-</code><code id="L3750"><span class="ln">3750</span>                            }
-</code><code id="L3751"><span class="ln">3751</span>                        }
-</code><code id="L3752"><span class="ln">3752</span>                    }
-</code><code id="L3753"><span class="ln">3753</span>                    <b>return</b> fn.call(element, e);
-</code><code id="L3754"><span class="ln">3754</span>                };
-</code><code id="L3755"><span class="ln">3755</span>                obj.addEventListener(realName, f, <b>false</b>);
-</code><code id="L3756"><span class="ln">3756</span>                <b>return</b> <b>function</b> () {
-</code><code id="L3757"><span class="ln">3757</span>                    obj.removeEventListener(realName, f, <b>false</b>);
-</code><code id="L3758"><span class="ln">3758</span>                    <b>return</b> <b>true</b>;
-</code><code id="L3759"><span class="ln">3759</span>                };
-</code><code id="L3760"><span class="ln">3760</span>            };
-</code><code id="L3761"><span class="ln">3761</span>        } <b>else</b> <b>if</b> (g.doc.attachEvent) {
-</code><code id="L3762"><span class="ln">3762</span>            <b>return</b> <b>function</b> (obj, type, fn, element) {
-</code><code id="L3763"><span class="ln">3763</span>                <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
-</code><code id="L3764"><span class="ln">3764</span>                    e<span class="s"> = </span>e<span class="s"> || </span>g.win.event;
-</code><code id="L3765"><span class="ln">3765</span>                    e.preventDefault<span class="s"> = </span>e.preventDefault<span class="s"> || </span>preventDefault;
-</code><code id="L3766"><span class="ln">3766</span>                    e.stopPropagation<span class="s"> = </span>e.stopPropagation<span class="s"> || </span>stopPropagation;
-</code><code id="L3767"><span class="ln">3767</span>                    <b>return</b> fn.call(element, e);
-</code><code id="L3768"><span class="ln">3768</span>                };
-</code><code id="L3769"><span class="ln">3769</span>                obj.attachEvent(<i>"on"</i><span class="s"> + </span>type, f);
-</code><code id="L3770"><span class="ln">3770</span>                <b>var</b> detacher<span class="s"> = </span><b>function</b> () {
-</code><code id="L3771"><span class="ln">3771</span>                    obj.detachEvent(<i>"on"</i><span class="s"> + </span>type, f);
-</code><code id="L3772"><span class="ln">3772</span>                    <b>return</b> <b>true</b>;
-</code><code id="L3773"><span class="ln">3773</span>                };
-</code><code id="L3774"><span class="ln">3774</span>                <b>return</b> detacher;
-</code><code id="L3775"><span class="ln">3775</span>            };
-</code><code id="L3776"><span class="ln">3776</span>        }
-</code><code id="L3777"><span class="ln">3777</span>    })(),
-</code><code id="L3778"><span class="ln">3778</span>    drag<span class="s"> = </span>[],
-</code><code id="L3779"><span class="ln">3779</span>    dragMove<span class="s"> = </span><b>function</b> (e) {
-</code><code id="L3780"><span class="ln">3780</span>        <b>var</b> x<span class="s"> = </span>e.clientX,
-</code><code id="L3781"><span class="ln">3781</span>            y<span class="s"> = </span>e.clientY,
-</code><code id="L3782"><span class="ln">3782</span>            scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
-</code><code id="L3783"><span class="ln">3783</span>            scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft,
-</code><code id="L3784"><span class="ln">3784</span>            dragi,
-</code><code id="L3785"><span class="ln">3785</span>            j<span class="s"> = </span>drag.length;
-</code><code id="L3786"><span class="ln">3786</span>        <b>while</b> (j--) {
-</code><code id="L3787"><span class="ln">3787</span>            dragi<span class="s"> = </span>drag[j];
-</code><code id="L3788"><span class="ln">3788</span>            <b>if</b> (supportsTouch) {
-</code><code id="L3789"><span class="ln">3789</span>                <b>var</b> i<span class="s"> = </span>e.touches.length,
-</code><code id="L3790"><span class="ln">3790</span>                    touch;
-</code><code id="L3791"><span class="ln">3791</span>                <b>while</b> (i--) {
-</code><code id="L3792"><span class="ln">3792</span>                    touch<span class="s"> = </span>e.touches[i];
-</code><code id="L3793"><span class="ln">3793</span>                    <b>if</b> (touch.identifier<span class="s"> == </span>dragi.el._drag.id) {
-</code><code id="L3794"><span class="ln">3794</span>                        x<span class="s"> = </span>touch.clientX;
-</code><code id="L3795"><span class="ln">3795</span>                        y<span class="s"> = </span>touch.clientY;
-</code><code id="L3796"><span class="ln">3796</span>                        (e.originalEvent ? e.originalEvent : e).preventDefault();
-</code><code id="L3797"><span class="ln">3797</span>                        <b>break</b>;
-</code><code id="L3798"><span class="ln">3798</span>                    }
-</code><code id="L3799"><span class="ln">3799</span>                }
-</code><code id="L3800"><span class="ln">3800</span>            } <b>else</b> {
-</code><code id="L3801"><span class="ln">3801</span>                e.preventDefault();
-</code><code id="L3802"><span class="ln">3802</span>            }
-</code><code id="L3803"><span class="ln">3803</span>            <b>var</b> node<span class="s"> = </span>dragi.el.node,
-</code><code id="L3804"><span class="ln">3804</span>                o,
-</code><code id="L3805"><span class="ln">3805</span>                next<span class="s"> = </span>node.nextSibling,
-</code><code id="L3806"><span class="ln">3806</span>                parent<span class="s"> = </span>node.parentNode,
-</code><code id="L3807"><span class="ln">3807</span>                display<span class="s"> = </span>node.style.display;
-</code><code id="L3808"><span class="ln">3808</span>            g.win.opera &amp;&amp; parent.removeChild(node);
-</code><code id="L3809"><span class="ln">3809</span>            node.style.display<span class="s"> = </span><i>"none"</i>;
-</code><code id="L3810"><span class="ln">3810</span>            o<span class="s"> = </span>dragi.el.paper.getElementByPoint(x, y);
-</code><code id="L3811"><span class="ln">3811</span>            node.style.display<span class="s"> = </span>display;
-</code><code id="L3812"><span class="ln">3812</span>            g.win.opera &amp;&amp; (next ? parent.insertBefore(node, next) : parent.appendChild(node));
-</code><code id="L3813"><span class="ln">3813</span>            o &amp;&amp; eve(<i>"drag.over."</i><span class="s"> + </span>dragi.el.id, dragi.el, o);
-</code><code id="L3814"><span class="ln">3814</span>            x += scrollX;
-</code><code id="L3815"><span class="ln">3815</span>            y += scrollY;
-</code><code id="L3816"><span class="ln">3816</span>            eve(<i>"drag.move."</i><span class="s"> + </span>dragi.el.id, dragi.move_scope<span class="s"> || </span>dragi.el, x<span class="s"> - </span>dragi.el._drag.x, y<span class="s"> - </span>dragi.el._drag.y, x, y, e);
-</code><code id="L3817"><span class="ln">3817</span>        }
-</code><code id="L3818"><span class="ln">3818</span>    },
-</code><code id="L3819"><span class="ln">3819</span>    dragUp<span class="s"> = </span><b>function</b> (e) {
-</code><code id="L3820"><span class="ln">3820</span>        R.unmousemove(dragMove).unmouseup(dragUp);
-</code><code id="L3821"><span class="ln">3821</span>        <b>var</b> i<span class="s"> = </span>drag.length,
-</code><code id="L3822"><span class="ln">3822</span>            dragi;
-</code><code id="L3823"><span class="ln">3823</span>        <b>while</b> (i--) {
-</code><code id="L3824"><span class="ln">3824</span>            dragi<span class="s"> = </span>drag[i];
-</code><code id="L3825"><span class="ln">3825</span>            dragi.el._drag<span class="s"> = </span>{};
-</code><code id="L3826"><span class="ln">3826</span>            eve(<i>"drag.end."</i><span class="s"> + </span>dragi.el.id, dragi.end_scope<span class="s"> || </span>dragi.start_scope<span class="s"> || </span>dragi.move_scope<span class="s"> || </span>dragi.el, e);
-</code><code id="L3827"><span class="ln">3827</span>        }
-</code><code id="L3828"><span class="ln">3828</span>        drag<span class="s"> = </span>[];
-</code><code id="L3829"><span class="ln">3829</span>    };
-</code><code id="L3830"><span class="ln">3830</span>    <b>for</b> (<b>var</b> i<span class="s"> = </span>events.length; i--;) {
-</code><code id="L3831"><span class="ln">3831</span>        (<b>function</b> (eventName) {
-</code><code id="L3832"><span class="ln">3832</span>            R[eventName]<span class="s"> = </span>Element.prototype[eventName]<span class="s"> = </span><b>function</b> (fn, scope) {
-</code><code id="L3833"><span class="ln">3833</span>                <b>if</b> (R.is(fn, <i>"<b>function</b>"</i>)) {
-</code><code id="L3834"><span class="ln">3834</span>                    <b>this</b>.events<span class="s"> = </span><b>this</b>.events<span class="s"> || </span>[];
-</code><code id="L3835"><span class="ln">3835</span>                    <b>this</b>.events.push({name: eventName, f: fn, unbind: addEvent(<b>this</b>.shape<span class="s"> || </span><b>this</b>.node<span class="s"> || </span>g.doc, eventName, fn, scope<span class="s"> || </span><b>this</b>)});
-</code><code id="L3836"><span class="ln">3836</span>                }
-</code><code id="L3837"><span class="ln">3837</span>                <b>return</b> <b>this</b>;
-</code><code id="L3838"><span class="ln">3838</span>            };
-</code><code id="L3839"><span class="ln">3839</span>            R[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span>Element.prototype[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span><b>function</b> (fn) {
-</code><code id="L3840"><span class="ln">3840</span>                <b>var</b> events<span class="s"> = </span><b>this</b>.events,
-</code><code id="L3841"><span class="ln">3841</span>                    l<span class="s"> = </span>events.length;
-</code><code id="L3842"><span class="ln">3842</span>                <b>while</b> (l--) <b>if</b> (events[l].name<span class="s"> == </span>eventName &amp;&amp; events[l].f<span class="s"> == </span>fn) {
-</code><code id="L3843"><span class="ln">3843</span>                    events[l].unbind();
-</code><code id="L3844"><span class="ln">3844</span>                    events.splice(l, <span class="d">1</span>);
-</code><code id="L3845"><span class="ln">3845</span>                    !events.length &amp;&amp; <b>delete</b> <b>this</b>.events;
-</code><code id="L3846"><span class="ln">3846</span>                    <b>return</b> <b>this</b>;
-</code><code id="L3847"><span class="ln">3847</span>                }
-</code><code id="L3848"><span class="ln">3848</span>                <b>return</b> <b>this</b>;
-</code><code id="L3849"><span class="ln">3849</span>            };
-</code><code id="L3850"><span class="ln">3850</span>        })(events[i]);
-</code><code id="L3851"><span class="ln">3851</span>    }
-</code><code id="L3852"><span class="ln">3852</span>    elproto.hover<span class="s"> = </span><b>function</b> (f_in, f_out, scope_in, scope_out) {
-</code><code id="L3853"><span class="ln">3853</span>        <b>return</b> <b>this</b>.mouseover(f_in, scope_in).mouseout(f_out, scope_out<span class="s"> || </span>scope_in);
-</code><code id="L3854"><span class="ln">3854</span>    };
-</code><code id="L3855"><span class="ln">3855</span>    elproto.unhover<span class="s"> = </span><b>function</b> (f_in, f_out) {
-</code><code id="L3856"><span class="ln">3856</span>        <b>return</b> <b>this</b>.unmouseover(f_in).unmouseout(f_out);
-</code><code id="L3857"><span class="ln">3857</span>    };
-</code><code id="L3858"><span class="ln">3858</span>    elproto.drag<span class="s"> = </span><b>function</b> (onmove, onstart, onend, move_scope, start_scope, end_scope) {
-</code><code id="L3859"><span class="ln">3859</span>        <b>function</b> start(e) {
-</code><code id="L3860"><span class="ln">3860</span>            (e.originalEvent<span class="s"> || </span>e).preventDefault();
-</code><code id="L3861"><span class="ln">3861</span>            <b>var</b> scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
-</code><code id="L3862"><span class="ln">3862</span>                scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft;
-</code><code id="L3863"><span class="ln">3863</span>            <b>this</b>._drag.x<span class="s"> = </span>e.clientX<span class="s"> + </span>scrollX;
-</code><code id="L3864"><span class="ln">3864</span>            <b>this</b>._drag.y<span class="s"> = </span>e.clientY<span class="s"> + </span>scrollY;
-</code><code id="L3865"><span class="ln">3865</span>            <b>this</b>._drag.id<span class="s"> = </span>e.identifier;
-</code><code id="L3866"><span class="ln">3866</span>            !drag.length &amp;&amp; R.mousemove(dragMove).mouseup(dragUp);
-</code><code id="L3867"><span class="ln">3867</span>            drag.push({el: <b>this</b>, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
-</code><code id="L3868"><span class="ln">3868</span>            onstart &amp;&amp; eve.on(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, onstart);
-</code><code id="L3869"><span class="ln">3869</span>            onmove &amp;&amp; eve.on(<i>"drag.move."</i><span class="s"> + </span><b>this</b>.id, onmove);
-</code><code id="L3870"><span class="ln">3870</span>            onend &amp;&amp; eve.on(<i>"drag.end."</i><span class="s"> + </span><b>this</b>.id, onend);
-</code><code id="L3871"><span class="ln">3871</span>            eve(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, start_scope<span class="s"> || </span>move_scope<span class="s"> || </span><b>this</b>, e.clientX<span class="s"> + </span>scrollX, e.clientY<span class="s"> + </span>scrollY, e);
-</code><code id="L3872"><span class="ln">3872</span>        }
-</code><code id="L3873"><span class="ln">3873</span>        <b>this</b>._drag<span class="s"> = </span>{};
-</code><code id="L3874"><span class="ln">3874</span>        <b>this</b>.mousedown(start);
-</code><code id="L3875"><span class="ln">3875</span>        <b>return</b> <b>this</b>;
-</code><code id="L3876"><span class="ln">3876</span>    };
-</code><code id="L3877"><span class="ln">3877</span>    elproto.onDragOver<span class="s"> = </span><b>function</b> (f) {
-</code><code id="L3878"><span class="ln">3878</span>        f ? eve.on(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id);
-</code><code id="L3879"><span class="ln">3879</span>    };
-</code><code id="L3880"><span class="ln">3880</span>    elproto.undrag<span class="s"> = </span><b>function</b> () {
-</code><code id="L3881"><span class="ln">3881</span>        <b>var</b> i<span class="s"> = </span>drag.length;
-</code><code id="L3882"><span class="ln">3882</span>        <b>while</b> (i--) <b>if</b> (drag[i].el<span class="s"> == </span><b>this</b>) {
-</code><code id="L3883"><span class="ln">3883</span>            R.unmousedown(drag[i].start);
-</code><code id="L3884"><span class="ln">3884</span>            drag.splice(i++, <span class="d">1</span>);
-</code><code id="L3885"><span class="ln">3885</span>            eve.unbind(<i>"drag.*."</i><span class="s"> + </span><b>this</b>.id);
-</code><code id="L3886"><span class="ln">3886</span>        }
-</code><code id="L3887"><span class="ln">3887</span>        !drag.length &amp;&amp; R.unmousemove(dragMove).unmouseup(dragUp);
-</code><code id="L3888"><span class="ln">3888</span>    };
-</code><code id="L3889"><span class="ln">3889</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3890"><span class="ln">3890</span><span class="c">    <span class="s"> * </span>Paper.circle
-</span></code><code id="L3891"><span class="ln">3891</span><span class="c">     [ method ]
-</span></code><code id="L3892"><span class="ln">3892</span><span class="c">     **
-</span></code><code id="L3893"><span class="ln">3893</span><span class="c">    <span class="s"> * </span>Draws a circle.
-</span></code><code id="L3894"><span class="ln">3894</span><span class="c">     **
-</span></code><code id="L3895"><span class="ln">3895</span><span class="c">     > Parameters
-</span></code><code id="L3896"><span class="ln">3896</span><span class="c">     **
-</span></code><code id="L3897"><span class="ln">3897</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the centre
-</span></code><code id="L3898"><span class="ln">3898</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the centre
-</span></code><code id="L3899"><span class="ln">3899</span><span class="c">    <span class="s"> - </span>r (number) radius
-</span></code><code id="L3900"><span class="ln">3900</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “circle”
-</span></code><code id="L3901"><span class="ln">3901</span><span class="c">     **
-</span></code><code id="L3902"><span class="ln">3902</span><span class="c">     > Usage
-</span></code><code id="L3903"><span class="ln">3903</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
-</span></code><code id="L3904"><span class="ln">3904</span><span class="c">    \*/</span>
-</code><code id="L3905"><span class="ln">3905</span>    paperproto.circle<span class="s"> = </span><b>function</b> (x, y, r) {
-</code><code id="L3906"><span class="ln">3906</span>        <b>return</b> theCircle(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L3907"><span class="ln">3907</span>    };
-</code><code id="L3908"><span class="ln">3908</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3909"><span class="ln">3909</span><span class="c">    <span class="s"> * </span>Paper.rect
-</span></code><code id="L3910"><span class="ln">3910</span><span class="c">     [ method ]
-</span></code><code id="L3911"><span class="ln">3911</span><span class="c">     *
-</span></code><code id="L3912"><span class="ln">3912</span><span class="c">    <span class="s"> * </span>Draws a rectangle.
-</span></code><code id="L3913"><span class="ln">3913</span><span class="c">     **
-</span></code><code id="L3914"><span class="ln">3914</span><span class="c">     > Parameters
-</span></code><code id="L3915"><span class="ln">3915</span><span class="c">     **
-</span></code><code id="L3916"><span class="ln">3916</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the top left corner
-</span></code><code id="L3917"><span class="ln">3917</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the top left corner
-</span></code><code id="L3918"><span class="ln">3918</span><span class="c">    <span class="s"> - </span>width (number) width
-</span></code><code id="L3919"><span class="ln">3919</span><span class="c">    <span class="s"> - </span>height (number) height
-</span></code><code id="L3920"><span class="ln">3920</span><span class="c">    <span class="s"> - </span>r (number) @optional radius <b>for</b> rounded corners, <b>default</b> is <span class="d">0</span>
-</span></code><code id="L3921"><span class="ln">3921</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “rect”
-</span></code><code id="L3922"><span class="ln">3922</span><span class="c">     **
-</span></code><code id="L3923"><span class="ln">3923</span><span class="c">     > Usage
-</span></code><code id="L3924"><span class="ln">3924</span><span class="c">     | <span class="c">// regular rectangle</span>
-</span></code><code id="L3925"><span class="ln">3925</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
-</span></code><code id="L3926"><span class="ln">3926</span><span class="c">     | <span class="c">// rectangle <b>with</b> rounded corners</span>
-</span></code><code id="L3927"><span class="ln">3927</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
-</span></code><code id="L3928"><span class="ln">3928</span><span class="c">    \*/</span>
-</code><code id="L3929"><span class="ln">3929</span>    paperproto.rect<span class="s"> = </span><b>function</b> (x, y, w, h, r) {
-</code><code id="L3930"><span class="ln">3930</span>        <b>return</b> theRect(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L3931"><span class="ln">3931</span>    };
-</code><code id="L3932"><span class="ln">3932</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3933"><span class="ln">3933</span><span class="c">    <span class="s"> * </span>Paper.ellipse
-</span></code><code id="L3934"><span class="ln">3934</span><span class="c">     [ method ]
-</span></code><code id="L3935"><span class="ln">3935</span><span class="c">     **
-</span></code><code id="L3936"><span class="ln">3936</span><span class="c">    <span class="s"> * </span>Draws an ellipse.
-</span></code><code id="L3937"><span class="ln">3937</span><span class="c">     **
-</span></code><code id="L3938"><span class="ln">3938</span><span class="c">     > Parameters
-</span></code><code id="L3939"><span class="ln">3939</span><span class="c">     **
-</span></code><code id="L3940"><span class="ln">3940</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the centre
-</span></code><code id="L3941"><span class="ln">3941</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the centre
-</span></code><code id="L3942"><span class="ln">3942</span><span class="c">    <span class="s"> - </span>rx (number) horisontal radius
-</span></code><code id="L3943"><span class="ln">3943</span><span class="c">    <span class="s"> - </span>ry (number) vertical radius
-</span></code><code id="L3944"><span class="ln">3944</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
-</span></code><code id="L3945"><span class="ln">3945</span><span class="c">     **
-</span></code><code id="L3946"><span class="ln">3946</span><span class="c">     > Usage
-</span></code><code id="L3947"><span class="ln">3947</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
-</span></code><code id="L3948"><span class="ln">3948</span><span class="c">    \*/</span>
-</code><code id="L3949"><span class="ln">3949</span>    paperproto.ellipse<span class="s"> = </span><b>function</b> (x, y, rx, ry) {
-</code><code id="L3950"><span class="ln">3950</span>        <b>return</b> theEllipse(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, rx<span class="s"> || </span><span class="d">0</span>, ry<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L3951"><span class="ln">3951</span>    };
-</code><code id="L3952"><span class="ln">3952</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3953"><span class="ln">3953</span><span class="c">    <span class="s"> * </span>Paper.path
-</span></code><code id="L3954"><span class="ln">3954</span><span class="c">     [ method ]
-</span></code><code id="L3955"><span class="ln">3955</span><span class="c">     **
-</span></code><code id="L3956"><span class="ln">3956</span><span class="c">    <span class="s"> * </span>Creates a path element by given path data string.
-</span></code><code id="L3957"><span class="ln">3957</span><span class="c">     **
-</span></code><code id="L3958"><span class="ln">3958</span><span class="c">     > Parameters
-</span></code><code id="L3959"><span class="ln">3959</span><span class="c">     **
-</span></code><code id="L3960"><span class="ln">3960</span><span class="c">    <span class="s"> - </span>pathString (string) path data <b>in</b> SVG path string format.
-</span></code><code id="L3961"><span class="ln">3961</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
-</span></code><code id="L3962"><span class="ln">3962</span><span class="c">     # Details of a path's data attribute's format are described <b>in</b> the &lt;a href=<i>"http:<span class="c">//www.w3.org/TR/SVG/paths.html#PathData"</i>>SVG specification&lt;/a>.</span>
-</span></code><code id="L3963"><span class="ln">3963</span><span class="c">     **
-</span></code><code id="L3964"><span class="ln">3964</span><span class="c">     > Usage
-</span></code><code id="L3965"><span class="ln">3965</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
-</span></code><code id="L3966"><span class="ln">3966</span><span class="c">     | <span class="c">// draw a diagonal line:</span>
-</span></code><code id="L3967"><span class="ln">3967</span><span class="c">     | <span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
-</span></code><code id="L3968"><span class="ln">3968</span><span class="c">    \*/</span>
-</code><code id="L3969"><span class="ln">3969</span>    paperproto.path<span class="s"> = </span><b>function</b> (pathString) {
-</code><code id="L3970"><span class="ln">3970</span>        pathString &amp;&amp; !R.is(pathString, string) &amp;&amp; !R.is(pathString[<span class="d">0</span>], array) &amp;&amp; (pathString += E);
-</code><code id="L3971"><span class="ln">3971</span>        <b>return</b> thePath(R.format[apply](R, arguments), <b>this</b>);
-</code><code id="L3972"><span class="ln">3972</span>    };
-</code><code id="L3973"><span class="ln">3973</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3974"><span class="ln">3974</span><span class="c">    <span class="s"> * </span>Paper.image
-</span></code><code id="L3975"><span class="ln">3975</span><span class="c">     [ method ]
-</span></code><code id="L3976"><span class="ln">3976</span><span class="c">     **
-</span></code><code id="L3977"><span class="ln">3977</span><span class="c">    <span class="s"> * </span>Embeds an image into the surface.
-</span></code><code id="L3978"><span class="ln">3978</span><span class="c">     **
-</span></code><code id="L3979"><span class="ln">3979</span><span class="c">     > Parameters
-</span></code><code id="L3980"><span class="ln">3980</span><span class="c">     **
-</span></code><code id="L3981"><span class="ln">3981</span><span class="c">    <span class="s"> - </span>src (string) URI of the source image
-</span></code><code id="L3982"><span class="ln">3982</span><span class="c">    <span class="s"> - </span>x (number) x coordinate position
-</span></code><code id="L3983"><span class="ln">3983</span><span class="c">    <span class="s"> - </span>y (number) y coordinate position
-</span></code><code id="L3984"><span class="ln">3984</span><span class="c">    <span class="s"> - </span>width (number) width of the image
-</span></code><code id="L3985"><span class="ln">3985</span><span class="c">    <span class="s"> - </span>height (number) height of the image
-</span></code><code id="L3986"><span class="ln">3986</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “image”
-</span></code><code id="L3987"><span class="ln">3987</span><span class="c">     **
-</span></code><code id="L3988"><span class="ln">3988</span><span class="c">     > Usage
-</span></code><code id="L3989"><span class="ln">3989</span><span class="c">     | <b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
-</span></code><code id="L3990"><span class="ln">3990</span><span class="c">    \*/</span>
-</code><code id="L3991"><span class="ln">3991</span>    paperproto.image<span class="s"> = </span><b>function</b> (src, x, y, w, h) {
-</code><code id="L3992"><span class="ln">3992</span>        <b>return</b> theImage(<b>this</b>, src<span class="s"> || </span><i>"about:blank"</i>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>);
-</code><code id="L3993"><span class="ln">3993</span>    };
-</code><code id="L3994"><span class="ln">3994</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L3995"><span class="ln">3995</span><span class="c">    <span class="s"> * </span>Paper.text
-</span></code><code id="L3996"><span class="ln">3996</span><span class="c">     [ method ]
-</span></code><code id="L3997"><span class="ln">3997</span><span class="c">     **
-</span></code><code id="L3998"><span class="ln">3998</span><span class="c">    <span class="s"> * </span>Draws a text string. If you need line breaks, put “\n” <b>in</b> the string.
-</span></code><code id="L3999"><span class="ln">3999</span><span class="c">     **
-</span></code><code id="L4000"><span class="ln">4000</span><span class="c">     > Parameters
-</span></code><code id="L4001"><span class="ln">4001</span><span class="c">     **
-</span></code><code id="L4002"><span class="ln">4002</span><span class="c">    <span class="s"> - </span>x (number) x coordinate position
-</span></code><code id="L4003"><span class="ln">4003</span><span class="c">    <span class="s"> - </span>y (number) y coordinate position
-</span></code><code id="L4004"><span class="ln">4004</span><span class="c">    <span class="s"> - </span>text (string) The text string to draw
-</span></code><code id="L4005"><span class="ln">4005</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “text”
-</span></code><code id="L4006"><span class="ln">4006</span><span class="c">     **
-</span></code><code id="L4007"><span class="ln">4007</span><span class="c">     > Usage
-</span></code><code id="L4008"><span class="ln">4008</span><span class="c">     | <b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
-</span></code><code id="L4009"><span class="ln">4009</span><span class="c">    \*/</span>
-</code><code id="L4010"><span class="ln">4010</span>    paperproto.text<span class="s"> = </span><b>function</b> (x, y, text) {
-</code><code id="L4011"><span class="ln">4011</span>        <b>return</b> theText(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, Str(text));
-</code><code id="L4012"><span class="ln">4012</span>    };
-</code><code id="L4013"><span class="ln">4013</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4014"><span class="ln">4014</span><span class="c">    <span class="s"> * </span>Paper.set
-</span></code><code id="L4015"><span class="ln">4015</span><span class="c">     [ method ]
-</span></code><code id="L4016"><span class="ln">4016</span><span class="c">     **
-</span></code><code id="L4017"><span class="ln">4017</span><span class="c">    <span class="s"> * </span>Creates array-like object to keep and operate couple of elements at once.
-</span></code><code id="L4018"><span class="ln">4018</span><span class="c">    <span class="s"> * </span>Warning: it doesn’t create any elements <b>for</b> itself <b>in</b> the page.
-</span></code><code id="L4019"><span class="ln">4019</span><span class="c">    <span class="s"> = </span>(object) array-like object that represents set of elements
-</span></code><code id="L4020"><span class="ln">4020</span><span class="c">     **
-</span></code><code id="L4021"><span class="ln">4021</span><span class="c">     > Usage
-</span></code><code id="L4022"><span class="ln">4022</span><span class="c">     | <b>var</b> st<span class="s"> = </span>paper.set();
-</span></code><code id="L4023"><span class="ln">4023</span><span class="c">     | st.push(
-</span></code><code id="L4024"><span class="ln">4024</span><span class="c">     |     paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
-</span></code><code id="L4025"><span class="ln">4025</span><span class="c">     |     paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
-</span></code><code id="L4026"><span class="ln">4026</span><span class="c">     | );
-</span></code><code id="L4027"><span class="ln">4027</span><span class="c">     | st.attr({fill: <i>"red"</i>});
-</span></code><code id="L4028"><span class="ln">4028</span><span class="c">    \*/</span>
-</code><code id="L4029"><span class="ln">4029</span>    paperproto.set<span class="s"> = </span><b>function</b> (itemsArray) {
-</code><code id="L4030"><span class="ln">4030</span>        arguments.length > <span class="d">1</span> &amp;&amp; (itemsArray<span class="s"> = </span>Array.prototype.splice.call(arguments, <span class="d">0</span>, arguments.length));
-</code><code id="L4031"><span class="ln">4031</span>        <b>return</b> <b>new</b> Set(itemsArray);
-</code><code id="L4032"><span class="ln">4032</span>    };
-</code><code id="L4033"><span class="ln">4033</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4034"><span class="ln">4034</span><span class="c">    <span class="s"> * </span>Paper.setSize
-</span></code><code id="L4035"><span class="ln">4035</span><span class="c">     [ method ]
-</span></code><code id="L4036"><span class="ln">4036</span><span class="c">     **
-</span></code><code id="L4037"><span class="ln">4037</span><span class="c">    <span class="s"> * </span>If you need to change dimensions of the canvas call <b>this</b> method
-</span></code><code id="L4038"><span class="ln">4038</span><span class="c">     **
-</span></code><code id="L4039"><span class="ln">4039</span><span class="c">     > Parameters
-</span></code><code id="L4040"><span class="ln">4040</span><span class="c">     **
-</span></code><code id="L4041"><span class="ln">4041</span><span class="c">    <span class="s"> - </span>width (number) <b>new</b> width of the canvas
-</span></code><code id="L4042"><span class="ln">4042</span><span class="c">    <span class="s"> - </span>height (number) <b>new</b> height of the canvas
-</span></code><code id="L4043"><span class="ln">4043</span><span class="c">     > Usage
-</span></code><code id="L4044"><span class="ln">4044</span><span class="c">     | <b>var</b> st<span class="s"> = </span>paper.set();
-</span></code><code id="L4045"><span class="ln">4045</span><span class="c">     | st.push(
-</span></code><code id="L4046"><span class="ln">4046</span><span class="c">     |     paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
-</span></code><code id="L4047"><span class="ln">4047</span><span class="c">     |     paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
-</span></code><code id="L4048"><span class="ln">4048</span><span class="c">     | );
-</span></code><code id="L4049"><span class="ln">4049</span><span class="c">     | st.attr({fill: <i>"red"</i>});
-</span></code><code id="L4050"><span class="ln">4050</span><span class="c">    \*/</span>
-</code><code id="L4051"><span class="ln">4051</span>    paperproto.setSize<span class="s"> = </span>setSize;
-</code><code id="L4052"><span class="ln">4052</span>    paperproto.setViewBox<span class="s"> = </span>setViewBox;
-</code><code id="L4053"><span class="ln">4053</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4054"><span class="ln">4054</span><span class="c">    <span class="s"> * </span>Paper.top
-</span></code><code id="L4055"><span class="ln">4055</span><span class="c">     [ property ]
-</span></code><code id="L4056"><span class="ln">4056</span><span class="c">     **
-</span></code><code id="L4057"><span class="ln">4057</span><span class="c">    <span class="s"> * </span>Points to the topmost element on the paper
-</span></code><code id="L4058"><span class="ln">4058</span><span class="c">    \*/</span>
-</code><code id="L4059"><span class="ln">4059</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4060"><span class="ln">4060</span><span class="c">    <span class="s"> * </span>Paper.bottom
-</span></code><code id="L4061"><span class="ln">4061</span><span class="c">     [ property ]
-</span></code><code id="L4062"><span class="ln">4062</span><span class="c">     **
-</span></code><code id="L4063"><span class="ln">4063</span><span class="c">    <span class="s"> * </span>Points to the bottom element on the paper
-</span></code><code id="L4064"><span class="ln">4064</span><span class="c">    \*/</span>
-</code><code id="L4065"><span class="ln">4065</span>    paperproto.top<span class="s"> = </span>paperproto.bottom<span class="s"> = </span><b>null</b>;
-</code><code id="L4066"><span class="ln">4066</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4067"><span class="ln">4067</span><span class="c">    <span class="s"> * </span>Paper.raphael
-</span></code><code id="L4068"><span class="ln">4068</span><span class="c">     [ property ]
-</span></code><code id="L4069"><span class="ln">4069</span><span class="c">     **
-</span></code><code id="L4070"><span class="ln">4070</span><span class="c">    <span class="s"> * </span>Points to the @Raphael object/<b>function</b>
-</span></code><code id="L4071"><span class="ln">4071</span><span class="c">    \*/</span>
-</code><code id="L4072"><span class="ln">4072</span>    paperproto.raphael<span class="s"> = </span>R;
-</code><code id="L4073"><span class="ln">4073</span>    <b>var</b> getOffset<span class="s"> = </span><b>function</b> (elem) {
-</code><code id="L4074"><span class="ln">4074</span>        <b>var</b> box<span class="s"> = </span>elem.getBoundingClientRect(),
-</code><code id="L4075"><span class="ln">4075</span>            doc<span class="s"> = </span>elem.ownerDocument,
-</code><code id="L4076"><span class="ln">4076</span>            body<span class="s"> = </span>doc.body,
-</code><code id="L4077"><span class="ln">4077</span>            docElem<span class="s"> = </span>doc.documentElement,
-</code><code id="L4078"><span class="ln">4078</span>            clientTop<span class="s"> = </span>docElem.clientTop<span class="s"> || </span>body.clientTop<span class="s"> || </span><span class="d">0</span>, clientLeft<span class="s"> = </span>docElem.clientLeft<span class="s"> || </span>body.clientLeft<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L4079"><span class="ln">4079</span>            top <span class="s"> = </span>box.top <span class="s"> + </span>(g.win.pageYOffset<span class="s"> || </span>docElem.scrollTop<span class="s"> || </span>body.scrollTop )<span class="s"> - </span>clientTop,
-</code><code id="L4080"><span class="ln">4080</span>            left<span class="s"> = </span>box.left<span class="s"> + </span>(g.win.pageXOffset<span class="s"> || </span>docElem.scrollLeft<span class="s"> || </span>body.scrollLeft)<span class="s"> - </span>clientLeft;
-</code><code id="L4081"><span class="ln">4081</span>        <b>return</b> {
-</code><code id="L4082"><span class="ln">4082</span>            y: top,
-</code><code id="L4083"><span class="ln">4083</span>            x: left
-</code><code id="L4084"><span class="ln">4084</span>        };
-</code><code id="L4085"><span class="ln">4085</span>    };
-</code><code id="L4086"><span class="ln">4086</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4087"><span class="ln">4087</span><span class="c">    <span class="s"> * </span>Paper.getElementByPoint
-</span></code><code id="L4088"><span class="ln">4088</span><span class="c">     [ method ]
-</span></code><code id="L4089"><span class="ln">4089</span><span class="c">     **
-</span></code><code id="L4090"><span class="ln">4090</span><span class="c">    <span class="s"> * </span>Returns you topmost element under given point.
-</span></code><code id="L4091"><span class="ln">4091</span><span class="c">     **
-</span></code><code id="L4092"><span class="ln">4092</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object
-</span></code><code id="L4093"><span class="ln">4093</span><span class="c">     > Parameters
-</span></code><code id="L4094"><span class="ln">4094</span><span class="c">     **
-</span></code><code id="L4095"><span class="ln">4095</span><span class="c">    <span class="s"> - </span>x (number) x coordinate from the top left corner of the window
-</span></code><code id="L4096"><span class="ln">4096</span><span class="c">    <span class="s"> - </span>y (number) y coordinate from the top left corner of the window
-</span></code><code id="L4097"><span class="ln">4097</span><span class="c">     > Usage
-</span></code><code id="L4098"><span class="ln">4098</span><span class="c">     | paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
-</span></code><code id="L4099"><span class="ln">4099</span><span class="c">    \*/</span>
-</code><code id="L4100"><span class="ln">4100</span>    paperproto.getElementByPoint<span class="s"> = </span><b>function</b> (x, y) {
-</code><code id="L4101"><span class="ln">4101</span>        <b>var</b> paper<span class="s"> = </span><b>this</b>,
-</code><code id="L4102"><span class="ln">4102</span>            svg<span class="s"> = </span>paper.canvas,
-</code><code id="L4103"><span class="ln">4103</span>            target<span class="s"> = </span>g.doc.elementFromPoint(x, y);
-</code><code id="L4104"><span class="ln">4104</span>        <b>if</b> (g.win.opera &amp;&amp; target.tagName<span class="s"> == </span><i>"svg"</i>) {
-</code><code id="L4105"><span class="ln">4105</span>            <b>var</b> so<span class="s"> = </span>getOffset(svg),
-</code><code id="L4106"><span class="ln">4106</span>                sr<span class="s"> = </span>svg.createSVGRect();
-</code><code id="L4107"><span class="ln">4107</span>            sr.x<span class="s"> = </span>x<span class="s"> - </span>so.x;
-</code><code id="L4108"><span class="ln">4108</span>            sr.y<span class="s"> = </span>y<span class="s"> - </span>so.y;
-</code><code id="L4109"><span class="ln">4109</span>            sr.width<span class="s"> = </span>sr.height<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L4110"><span class="ln">4110</span>            <b>var</b> hits<span class="s"> = </span>svg.getIntersectionList(sr, <b>null</b>);
-</code><code id="L4111"><span class="ln">4111</span>            <b>if</b> (hits.length) {
-</code><code id="L4112"><span class="ln">4112</span>                target<span class="s"> = </span>hits[hits.length<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L4113"><span class="ln">4113</span>            }
-</code><code id="L4114"><span class="ln">4114</span>        }
-</code><code id="L4115"><span class="ln">4115</span>        <b>if</b> (!target) {
-</code><code id="L4116"><span class="ln">4116</span>            <b>return</b> <b>null</b>;
-</code><code id="L4117"><span class="ln">4117</span>        }
-</code><code id="L4118"><span class="ln">4118</span>        <b>while</b> (target.parentNode &amp;&amp; target != svg.parentNode &amp;&amp; !target.raphael) {
-</code><code id="L4119"><span class="ln">4119</span>            target<span class="s"> = </span>target.parentNode;
-</code><code id="L4120"><span class="ln">4120</span>        }
-</code><code id="L4121"><span class="ln">4121</span>        target<span class="s"> == </span>paper.canvas.parentNode &amp;&amp; (target<span class="s"> = </span>svg);
-</code><code id="L4122"><span class="ln">4122</span>        target<span class="s"> = </span>target &amp;&amp; target.raphael ? paper.getById(target.raphaelid) : <b>null</b>;
-</code><code id="L4123"><span class="ln">4123</span>        <b>return</b> target;
-</code><code id="L4124"><span class="ln">4124</span>    };
-</code><code id="L4125"><span class="ln">4125</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4126"><span class="ln">4126</span><span class="c">    <span class="s"> * </span>Paper.getById
-</span></code><code id="L4127"><span class="ln">4127</span><span class="c">     [ method ]
-</span></code><code id="L4128"><span class="ln">4128</span><span class="c">     **
-</span></code><code id="L4129"><span class="ln">4129</span><span class="c">    <span class="s"> * </span>Returns you element by it’s internal ID.
-</span></code><code id="L4130"><span class="ln">4130</span><span class="c">     **
-</span></code><code id="L4131"><span class="ln">4131</span><span class="c">     > Parameters
-</span></code><code id="L4132"><span class="ln">4132</span><span class="c">     **
-</span></code><code id="L4133"><span class="ln">4133</span><span class="c">    <span class="s"> - </span>id (number) id
-</span></code><code id="L4134"><span class="ln">4134</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object
-</span></code><code id="L4135"><span class="ln">4135</span><span class="c">    \*/</span>
-</code><code id="L4136"><span class="ln">4136</span>    paperproto.getById<span class="s"> = </span><b>function</b> (id) {
-</code><code id="L4137"><span class="ln">4137</span>        <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
-</code><code id="L4138"><span class="ln">4138</span>        <b>while</b> (bot) {
-</code><code id="L4139"><span class="ln">4139</span>            <b>if</b> (bot.id<span class="s"> == </span>id) {
-</code><code id="L4140"><span class="ln">4140</span>                <b>return</b> bot;
-</code><code id="L4141"><span class="ln">4141</span>            }
-</code><code id="L4142"><span class="ln">4142</span>            bot<span class="s"> = </span>bot.next;
-</code><code id="L4143"><span class="ln">4143</span>        }
-</code><code id="L4144"><span class="ln">4144</span>        <b>return</b> <b>null</b>;
-</code><code id="L4145"><span class="ln">4145</span>    };
-</code><code id="L4146"><span class="ln">4146</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4147"><span class="ln">4147</span><span class="c">    <span class="s"> * </span>Paper.forEach
-</span></code><code id="L4148"><span class="ln">4148</span><span class="c">     [ method ]
-</span></code><code id="L4149"><span class="ln">4149</span><span class="c">     **
-</span></code><code id="L4150"><span class="ln">4150</span><span class="c">    <span class="s"> * </span>Executes given <b>function</b> <b>for</b> each element on the paper
-</span></code><code id="L4151"><span class="ln">4151</span><span class="c">     *
-</span></code><code id="L4152"><span class="ln">4152</span><span class="c">    <span class="s"> * </span>If <b>function</b> returns `<b>false</b>` it will stop loop running.
-</span></code><code id="L4153"><span class="ln">4153</span><span class="c">     **
-</span></code><code id="L4154"><span class="ln">4154</span><span class="c">     > Parameters
-</span></code><code id="L4155"><span class="ln">4155</span><span class="c">     **
-</span></code><code id="L4156"><span class="ln">4156</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) <b>function</b> to run
-</span></code><code id="L4157"><span class="ln">4157</span><span class="c">    <span class="s"> - </span>thisArg (object) context object <b>for</b> the callback
-</span></code><code id="L4158"><span class="ln">4158</span><span class="c">    <span class="s"> = </span>(object) Paper object
-</span></code><code id="L4159"><span class="ln">4159</span><span class="c">    \*/</span>
-</code><code id="L4160"><span class="ln">4160</span>    paperproto.forEach<span class="s"> = </span><b>function</b> (callback, thisArg) {
-</code><code id="L4161"><span class="ln">4161</span>        <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
-</code><code id="L4162"><span class="ln">4162</span>        <b>while</b> (bot) {
-</code><code id="L4163"><span class="ln">4163</span>            <b>if</b> (callback.call(thisArg, bot)<span class="s"> === </span><b>false</b>) {
-</code><code id="L4164"><span class="ln">4164</span>                <b>return</b> <b>this</b>;
-</code><code id="L4165"><span class="ln">4165</span>            }
-</code><code id="L4166"><span class="ln">4166</span>            bot<span class="s"> = </span>bot.next;
-</code><code id="L4167"><span class="ln">4167</span>        }
+</code><code id="L3662"><span class="ln">3662</span>            <b>return</b> <b>this</b>;
+</code><code id="L3663"><span class="ln">3663</span>        };
+</code><code id="L3664"><span class="ln">3664</span>        elproto.insertAfter<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L3665"><span class="ln">3665</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3666"><span class="ln">3666</span>                <b>return</b> <b>this</b>;
+</code><code id="L3667"><span class="ln">3667</span>            }
+</code><code id="L3668"><span class="ln">3668</span>            <b>if</b> (element.constructor<span class="s"> == </span>Set) {
+</code><code id="L3669"><span class="ln">3669</span>                element<span class="s"> = </span>element[element.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L3670"><span class="ln">3670</span>            }
+</code><code id="L3671"><span class="ln">3671</span>            <b>if</b> (element.node.nextSibling) {
+</code><code id="L3672"><span class="ln">3672</span>                element.node.parentNode.insertBefore(<b>this</b>.node, element.node.nextSibling);
+</code><code id="L3673"><span class="ln">3673</span>            } <b>else</b> {
+</code><code id="L3674"><span class="ln">3674</span>                element.node.parentNode.appendChild(<b>this</b>.node);
+</code><code id="L3675"><span class="ln">3675</span>            }
+</code><code id="L3676"><span class="ln">3676</span>            insertafter(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L3677"><span class="ln">3677</span>            <b>return</b> <b>this</b>;
+</code><code id="L3678"><span class="ln">3678</span>        };
+</code><code id="L3679"><span class="ln">3679</span>        elproto.insertBefore<span class="s"> = </span><b>function</b> (element) {
+</code><code id="L3680"><span class="ln">3680</span>            <b>if</b> (<b>this</b>.removed) {
+</code><code id="L3681"><span class="ln">3681</span>                <b>return</b> <b>this</b>;
+</code><code id="L3682"><span class="ln">3682</span>            }
+</code><code id="L3683"><span class="ln">3683</span>            <b>if</b> (element.constructor<span class="s"> == </span>Set) {
+</code><code id="L3684"><span class="ln">3684</span>                element<span class="s"> = </span>element[<span class="d">0</span>];
+</code><code id="L3685"><span class="ln">3685</span>            }
+</code><code id="L3686"><span class="ln">3686</span>            element.node.parentNode.insertBefore(<b>this</b>.node, element.node);
+</code><code id="L3687"><span class="ln">3687</span>            insertbefore(<b>this</b>, element, <b>this</b>.paper);
+</code><code id="L3688"><span class="ln">3688</span>            <b>return</b> <b>this</b>;
+</code><code id="L3689"><span class="ln">3689</span>        };
+</code><code id="L3690"><span class="ln">3690</span>        elproto.blur<span class="s"> = </span><b>function</b> (size) {
+</code><code id="L3691"><span class="ln">3691</span>            <b>var</b> s<span class="s"> = </span><b>this</b>.node.runtimeStyle,
+</code><code id="L3692"><span class="ln">3692</span>                f<span class="s"> = </span>s.filter;
+</code><code id="L3693"><span class="ln">3693</span>            f<span class="s"> = </span>f.replace(blurregexp, E);
+</code><code id="L3694"><span class="ln">3694</span>            <b>if</b> (+size !== <span class="d">0</span>) {
+</code><code id="L3695"><span class="ln">3695</span>                <b>this</b>.attrs.blur<span class="s"> = </span>size;
+</code><code id="L3696"><span class="ln">3696</span>                s.filter<span class="s"> = </span>f<span class="s"> + </span>S<span class="s"> + </span>ms<span class="s"> + </span><i>".Blur(pixelradius="</i><span class="s"> + </span>(+size<span class="s"> || </span><span class="d">1.5</span>)<span class="s"> + </span><i>")"</i>;
+</code><code id="L3697"><span class="ln">3697</span>                s.margin<span class="s"> = </span>R.format(<i>"-{<span class="d">0</span>}px <span class="d">0</span> <span class="d">0</span> -{<span class="d">0</span>}px"</i>, round(+size<span class="s"> || </span><span class="d">1.5</span>));
+</code><code id="L3698"><span class="ln">3698</span>            } <b>else</b> {
+</code><code id="L3699"><span class="ln">3699</span>                s.filter<span class="s"> = </span>f;
+</code><code id="L3700"><span class="ln">3700</span>                s.margin<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L3701"><span class="ln">3701</span>                <b>delete</b> <b>this</b>.attrs.blur;
+</code><code id="L3702"><span class="ln">3702</span>            }
+</code><code id="L3703"><span class="ln">3703</span>        };
+</code><code id="L3704"><span class="ln">3704</span>
+</code><code id="L3705"><span class="ln">3705</span>        thePath<span class="s"> = </span><b>function</b> (pathString, vml) {
+</code><code id="L3706"><span class="ln">3706</span>            <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>);
+</code><code id="L3707"><span class="ln">3707</span>            el.style.cssText<span class="s"> = </span>cssDot;
+</code><code id="L3708"><span class="ln">3708</span>            el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
+</code><code id="L3709"><span class="ln">3709</span>            el.coordorigin<span class="s"> = </span>vml.coordorigin;
+</code><code id="L3710"><span class="ln">3710</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
+</code><code id="L3711"><span class="ln">3711</span>                attr<span class="s"> = </span>{fill: <i>"none"</i>, stroke: <i>"#<span class="d">000</span>"</i>};
+</code><code id="L3712"><span class="ln">3712</span>            pathString<span class="s"> &amp;&amp; </span>(attr.path<span class="s"> = </span>pathString);
+</code><code id="L3713"><span class="ln">3713</span>            p.type<span class="s"> = </span><i>"path"</i>;
+</code><code id="L3714"><span class="ln">3714</span>            p.path<span class="s"> = </span>[];
+</code><code id="L3715"><span class="ln">3715</span>            p.Path<span class="s"> = </span>E;
+</code><code id="L3716"><span class="ln">3716</span>            setFillAndStroke(p, attr);
+</code><code id="L3717"><span class="ln">3717</span>            vml.canvas.appendChild(el);
+</code><code id="L3718"><span class="ln">3718</span>            <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
+</code><code id="L3719"><span class="ln">3719</span>            skew.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3720"><span class="ln">3720</span>            el.appendChild(skew);
+</code><code id="L3721"><span class="ln">3721</span>            p.skew<span class="s"> = </span>skew;
+</code><code id="L3722"><span class="ln">3722</span>            p.transform(E);
+</code><code id="L3723"><span class="ln">3723</span>            <b>return</b> p;
+</code><code id="L3724"><span class="ln">3724</span>        };
+</code><code id="L3725"><span class="ln">3725</span>        theRect<span class="s"> = </span><b>function</b> (vml, x, y, w, h, r) {
+</code><code id="L3726"><span class="ln">3726</span>            <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h, r),
+</code><code id="L3727"><span class="ln">3727</span>                res<span class="s"> = </span>vml.path(path),
+</code><code id="L3728"><span class="ln">3728</span>                a<span class="s"> = </span>res.attrs;
+</code><code id="L3729"><span class="ln">3729</span>            res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
+</code><code id="L3730"><span class="ln">3730</span>            res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
+</code><code id="L3731"><span class="ln">3731</span>            res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
+</code><code id="L3732"><span class="ln">3732</span>            res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
+</code><code id="L3733"><span class="ln">3733</span>            a.r<span class="s"> = </span>r;
+</code><code id="L3734"><span class="ln">3734</span>            a.path<span class="s"> = </span>path;
+</code><code id="L3735"><span class="ln">3735</span>            res.type<span class="s"> = </span><i>"rect"</i>;
+</code><code id="L3736"><span class="ln">3736</span>            <b>return</b> res;
+</code><code id="L3737"><span class="ln">3737</span>        };
+</code><code id="L3738"><span class="ln">3738</span>        theEllipse<span class="s"> = </span><b>function</b> (vml, x, y, rx, ry) {
+</code><code id="L3739"><span class="ln">3739</span>            <b>var</b> res<span class="s"> = </span>vml.path(),
+</code><code id="L3740"><span class="ln">3740</span>                a<span class="s"> = </span>res.attrs;
+</code><code id="L3741"><span class="ln">3741</span>            res.X<span class="s"> = </span>x<span class="s"> - </span>rx;
+</code><code id="L3742"><span class="ln">3742</span>            res.Y<span class="s"> = </span>y<span class="s"> - </span>ry;
+</code><code id="L3743"><span class="ln">3743</span>            res.W<span class="s"> = </span>rx<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3744"><span class="ln">3744</span>            res.H<span class="s"> = </span>ry<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3745"><span class="ln">3745</span>            res.type<span class="s"> = </span><i>"ellipse"</i>;
+</code><code id="L3746"><span class="ln">3746</span>            setFillAndStroke(res, {
+</code><code id="L3747"><span class="ln">3747</span>                cx: x,
+</code><code id="L3748"><span class="ln">3748</span>                cy: y,
+</code><code id="L3749"><span class="ln">3749</span>                rx: rx,
+</code><code id="L3750"><span class="ln">3750</span>                ry: ry
+</code><code id="L3751"><span class="ln">3751</span>            });
+</code><code id="L3752"><span class="ln">3752</span>            <b>return</b> res;
+</code><code id="L3753"><span class="ln">3753</span>        };
+</code><code id="L3754"><span class="ln">3754</span>        theCircle<span class="s"> = </span><b>function</b> (vml, x, y, r) {
+</code><code id="L3755"><span class="ln">3755</span>            <b>var</b> res<span class="s"> = </span>vml.path(),
+</code><code id="L3756"><span class="ln">3756</span>                a<span class="s"> = </span>res.attrs;
+</code><code id="L3757"><span class="ln">3757</span>            res.X<span class="s"> = </span>x<span class="s"> - </span>r;
+</code><code id="L3758"><span class="ln">3758</span>            res.Y<span class="s"> = </span>y<span class="s"> - </span>r;
+</code><code id="L3759"><span class="ln">3759</span>            res.W<span class="s"> = </span>res.H<span class="s"> = </span>r<span class="s"> * </span><span class="d">2</span>;
+</code><code id="L3760"><span class="ln">3760</span>            res.type<span class="s"> = </span><i>"circle"</i>;
+</code><code id="L3761"><span class="ln">3761</span>            setFillAndStroke(res, {
+</code><code id="L3762"><span class="ln">3762</span>                cx: x,
+</code><code id="L3763"><span class="ln">3763</span>                cy: y,
+</code><code id="L3764"><span class="ln">3764</span>                r: r
+</code><code id="L3765"><span class="ln">3765</span>            });
+</code><code id="L3766"><span class="ln">3766</span>            <b>return</b> res;
+</code><code id="L3767"><span class="ln">3767</span>        };
+</code><code id="L3768"><span class="ln">3768</span>        theImage<span class="s"> = </span><b>function</b> (vml, src, x, y, w, h) {
+</code><code id="L3769"><span class="ln">3769</span>            <b>var</b> path<span class="s"> = </span>rectPath(x, y, w, h),
+</code><code id="L3770"><span class="ln">3770</span>                res<span class="s"> = </span>vml.path(path).attr({stroke: <i>"none"</i>}),
+</code><code id="L3771"><span class="ln">3771</span>                a<span class="s"> = </span>res.attrs,
+</code><code id="L3772"><span class="ln">3772</span>                node<span class="s"> = </span>res.node,
+</code><code id="L3773"><span class="ln">3773</span>                fill<span class="s"> = </span>node.getElementsByTagName(fillString)[<span class="d">0</span>];
+</code><code id="L3774"><span class="ln">3774</span>            a.src<span class="s"> = </span>src;
+</code><code id="L3775"><span class="ln">3775</span>            res.X<span class="s"> = </span>a.x<span class="s"> = </span>x;
+</code><code id="L3776"><span class="ln">3776</span>            res.Y<span class="s"> = </span>a.y<span class="s"> = </span>y;
+</code><code id="L3777"><span class="ln">3777</span>            res.W<span class="s"> = </span>a.width<span class="s"> = </span>w;
+</code><code id="L3778"><span class="ln">3778</span>            res.H<span class="s"> = </span>a.height<span class="s"> = </span>h;
+</code><code id="L3779"><span class="ln">3779</span>            a.path<span class="s"> = </span>path;
+</code><code id="L3780"><span class="ln">3780</span>            res.type<span class="s"> = </span><i>"image"</i>;
+</code><code id="L3781"><span class="ln">3781</span>            fill.parentNode<span class="s"> == </span>node<span class="s"> &amp;&amp; </span>node.removeChild(fill);
+</code><code id="L3782"><span class="ln">3782</span>            fill.rotate<span class="s"> = </span><b>true</b>;
+</code><code id="L3783"><span class="ln">3783</span>            fill.src<span class="s"> = </span>src;
+</code><code id="L3784"><span class="ln">3784</span>            fill.type<span class="s"> = </span><i>"tile"</i>;
+</code><code id="L3785"><span class="ln">3785</span>            res._.fillpos<span class="s"> = </span>[x, y];
+</code><code id="L3786"><span class="ln">3786</span>            res._.fillsize<span class="s"> = </span>[w, h];
+</code><code id="L3787"><span class="ln">3787</span>            node.appendChild(fill);
+</code><code id="L3788"><span class="ln">3788</span>            setCoords(res);
+</code><code id="L3789"><span class="ln">3789</span>            <b>return</b> res;
+</code><code id="L3790"><span class="ln">3790</span>        };
+</code><code id="L3791"><span class="ln">3791</span>        theText<span class="s"> = </span><b>function</b> (vml, x, y, text) {
+</code><code id="L3792"><span class="ln">3792</span>            <b>var</b> el<span class="s"> = </span>createNode(<i>"shape"</i>),
+</code><code id="L3793"><span class="ln">3793</span>                path<span class="s"> = </span>createNode(<i>"path"</i>),
+</code><code id="L3794"><span class="ln">3794</span>                o<span class="s"> = </span>createNode(<i>"textpath"</i>);
+</code><code id="L3795"><span class="ln">3795</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3796"><span class="ln">3796</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3797"><span class="ln">3797</span>            text<span class="s"> = </span>text<span class="s"> || </span><i>""</i>;
+</code><code id="L3798"><span class="ln">3798</span>            path.v<span class="s"> = </span>R.format(<i>"m{<span class="d">0</span>},{<span class="d">1</span>}l{<span class="d">2</span>},{<span class="d">1</span>}"</i>, round(x<span class="s"> * </span>zoom), round(y<span class="s"> * </span>zoom), round(x<span class="s"> * </span>zoom)<span class="s"> + </span><span class="d">1</span>);
+</code><code id="L3799"><span class="ln">3799</span>            path.textpathok<span class="s"> = </span><b>true</b>;
+</code><code id="L3800"><span class="ln">3800</span>            o.string<span class="s"> = </span>Str(text);
+</code><code id="L3801"><span class="ln">3801</span>            o.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3802"><span class="ln">3802</span>            el.style.cssText<span class="s"> = </span><i>"position:absolute;left:<span class="d">0</span>;top:<span class="d">0</span>;width:<span class="d">1</span>;height:<span class="d">1</span>"</i>;
+</code><code id="L3803"><span class="ln">3803</span>            el.coordsize<span class="s"> = </span>zoom<span class="s"> + </span>S<span class="s"> + </span>zoom;
+</code><code id="L3804"><span class="ln">3804</span>            el.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3805"><span class="ln">3805</span>            <b>var</b> p<span class="s"> = </span><b>new</b> Element(el, vml),
+</code><code id="L3806"><span class="ln">3806</span>                attr<span class="s"> = </span>{fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, font: availableAttrs.font, text: text};
+</code><code id="L3807"><span class="ln">3807</span>            p.shape<span class="s"> = </span>el;
+</code><code id="L3808"><span class="ln">3808</span>            p.path<span class="s"> = </span>path;
+</code><code id="L3809"><span class="ln">3809</span>            p.textpath<span class="s"> = </span>o;
+</code><code id="L3810"><span class="ln">3810</span>            p.type<span class="s"> = </span><i>"text"</i>;
+</code><code id="L3811"><span class="ln">3811</span>            p.attrs.text<span class="s"> = </span>Str(text);
+</code><code id="L3812"><span class="ln">3812</span>            p.attrs.x<span class="s"> = </span>x;
+</code><code id="L3813"><span class="ln">3813</span>            p.attrs.y<span class="s"> = </span>y;
+</code><code id="L3814"><span class="ln">3814</span>            p.attrs.w<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3815"><span class="ln">3815</span>            p.attrs.h<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L3816"><span class="ln">3816</span>            setFillAndStroke(p, attr);
+</code><code id="L3817"><span class="ln">3817</span>            el.appendChild(o);
+</code><code id="L3818"><span class="ln">3818</span>            el.appendChild(path);
+</code><code id="L3819"><span class="ln">3819</span>            vml.canvas.appendChild(el);
+</code><code id="L3820"><span class="ln">3820</span>            <b>var</b> skew<span class="s"> = </span>createNode(<i>"skew"</i>);
+</code><code id="L3821"><span class="ln">3821</span>            skew.on<span class="s"> = </span><b>true</b>;
+</code><code id="L3822"><span class="ln">3822</span>            el.appendChild(skew);
+</code><code id="L3823"><span class="ln">3823</span>            p.skew<span class="s"> = </span>skew;
+</code><code id="L3824"><span class="ln">3824</span>            p.transform(E);
+</code><code id="L3825"><span class="ln">3825</span>            <b>return</b> p;
+</code><code id="L3826"><span class="ln">3826</span>        };
+</code><code id="L3827"><span class="ln">3827</span>        setSize<span class="s"> = </span><b>function</b> (width, height) {
+</code><code id="L3828"><span class="ln">3828</span>            <b>var</b> cs<span class="s"> = </span><b>this</b>.canvas.style;
+</code><code id="L3829"><span class="ln">3829</span>            <b>this</b>.width<span class="s"> = </span>width;
+</code><code id="L3830"><span class="ln">3830</span>            <b>this</b>.height<span class="s"> = </span>height;
+</code><code id="L3831"><span class="ln">3831</span>            width<span class="s"> == </span>+width<span class="s"> &amp;&amp; </span>(width += <i>"px"</i>);
+</code><code id="L3832"><span class="ln">3832</span>            height<span class="s"> == </span>+height<span class="s"> &amp;&amp; </span>(height += <i>"px"</i>);
+</code><code id="L3833"><span class="ln">3833</span>            cs.width<span class="s"> = </span>width;
+</code><code id="L3834"><span class="ln">3834</span>            cs.height<span class="s"> = </span>height;
+</code><code id="L3835"><span class="ln">3835</span>            cs.clip<span class="s"> = </span><i>"rect(<span class="d">0</span> "</i><span class="s"> + </span>width<span class="s"> + </span><i>" "</i><span class="s"> + </span>height<span class="s"> + </span><i>" <span class="d">0</span>)"</i>;
+</code><code id="L3836"><span class="ln">3836</span>            <b>if</b> (<b>this</b>._viewBox) {
+</code><code id="L3837"><span class="ln">3837</span>                setViewBox.apply(<b>this</b>, <b>this</b>._viewBox);
+</code><code id="L3838"><span class="ln">3838</span>            }
+</code><code id="L3839"><span class="ln">3839</span>            <b>return</b> <b>this</b>;
+</code><code id="L3840"><span class="ln">3840</span>        };
+</code><code id="L3841"><span class="ln">3841</span>        setViewBox<span class="s"> = </span><b>function</b> (x, y, w, h, fit) {
+</code><code id="L3842"><span class="ln">3842</span>            eve(<i>"setViewBox"</i>, <b>this</b>, <b>this</b>._viewBox, [x, y, w, h, fit]);
+</code><code id="L3843"><span class="ln">3843</span>            <b>var</b> width<span class="s"> = </span><b>this</b>.width,
+</code><code id="L3844"><span class="ln">3844</span>                height<span class="s"> = </span><b>this</b>.height,
+</code><code id="L3845"><span class="ln">3845</span>                size<span class="s"> = </span><span class="d">1e3</span><span class="s"> * </span>mmax(w<span class="s"> / </span>width, h<span class="s"> / </span>height),
+</code><code id="L3846"><span class="ln">3846</span>                H, W;
+</code><code id="L3847"><span class="ln">3847</span>            <b>if</b> (fit) {
+</code><code id="L3848"><span class="ln">3848</span>                H<span class="s"> = </span>height<span class="s"> / </span>h;
+</code><code id="L3849"><span class="ln">3849</span>                W<span class="s"> = </span>width<span class="s"> / </span>w;
+</code><code id="L3850"><span class="ln">3850</span>                <b>if</b> (w<span class="s"> * </span>H &lt; width) {
+</code><code id="L3851"><span class="ln">3851</span>                    x -= (width<span class="s"> - </span>w<span class="s"> * </span>H)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>H;
+</code><code id="L3852"><span class="ln">3852</span>                }
+</code><code id="L3853"><span class="ln">3853</span>                <b>if</b> (h<span class="s"> * </span>W &lt; height) {
+</code><code id="L3854"><span class="ln">3854</span>                    y -= (height<span class="s"> - </span>h<span class="s"> * </span>W)<span class="s"> / </span><span class="d">2</span><span class="s"> / </span>W;
+</code><code id="L3855"><span class="ln">3855</span>                }
+</code><code id="L3856"><span class="ln">3856</span>            }
+</code><code id="L3857"><span class="ln">3857</span>            <b>this</b>._viewBox<span class="s"> = </span>[x, y, w, h, !!fit];
+</code><code id="L3858"><span class="ln">3858</span>            <b>this</b>.forEach(<b>function</b> (el) {
+</code><code id="L3859"><span class="ln">3859</span>                el.transform(<i>"..."</i>);
+</code><code id="L3860"><span class="ln">3860</span>            });
+</code><code id="L3861"><span class="ln">3861</span>            <b>return</b> <b>this</b>;
+</code><code id="L3862"><span class="ln">3862</span>        };
+</code><code id="L3863"><span class="ln">3863</span>        <b>var</b> createNode,
+</code><code id="L3864"><span class="ln">3864</span>            initWin<span class="s"> = </span><b>function</b> (win) {
+</code><code id="L3865"><span class="ln">3865</span>                <b>var</b> doc<span class="s"> = </span>win.document;
+</code><code id="L3866"><span class="ln">3866</span>                doc.createStyleSheet().addRule(<i>".rvml"</i>, <i>"behavior:url(#<b>default</b>#VML)"</i>);
+</code><code id="L3867"><span class="ln">3867</span>                <b>try</b> {
+</code><code id="L3868"><span class="ln">3868</span>                    !doc.namespaces.rvml<span class="s"> &amp;&amp; </span>doc.namespaces.add(<i>"rvml"</i>, <i>"urn:schemas-microsoft-com:vml"</i>);
+</code><code id="L3869"><span class="ln">3869</span>                    createNode<span class="s"> = </span><b>function</b> (tagName) {
+</code><code id="L3870"><span class="ln">3870</span>                        <b>return</b> doc.createElement(<i>'&lt;rvml:'</i><span class="s"> + </span>tagName<span class="s"> + </span><i>' <b>class</b>="rvml">'</i>);
+</code><code id="L3871"><span class="ln">3871</span>                    };
+</code><code id="L3872"><span class="ln">3872</span>                } <b>catch</b> (e) {
+</code><code id="L3873"><span class="ln">3873</span>                    createNode<span class="s"> = </span><b>function</b> (tagName) {
+</code><code id="L3874"><span class="ln">3874</span>                        <b>return</b> doc.createElement(<i>'&lt;'</i><span class="s"> + </span>tagName<span class="s"> + </span><i>' xmlns="urn:schemas-microsoft.com:vml" <b>class</b>="rvml">'</i>);
+</code><code id="L3875"><span class="ln">3875</span>                    };
+</code><code id="L3876"><span class="ln">3876</span>                }
+</code><code id="L3877"><span class="ln">3877</span>            };
+</code><code id="L3878"><span class="ln">3878</span>        initWin(g.win);
+</code><code id="L3879"><span class="ln">3879</span>        create<span class="s"> = </span><b>function</b> () {
+</code><code id="L3880"><span class="ln">3880</span>            <b>var</b> con<span class="s"> = </span>getContainer[apply](<span class="d">0</span>, arguments),
+</code><code id="L3881"><span class="ln">3881</span>                container<span class="s"> = </span>con.container,
+</code><code id="L3882"><span class="ln">3882</span>                height<span class="s"> = </span>con.height,
+</code><code id="L3883"><span class="ln">3883</span>                s,
+</code><code id="L3884"><span class="ln">3884</span>                width<span class="s"> = </span>con.width,
+</code><code id="L3885"><span class="ln">3885</span>                x<span class="s"> = </span>con.x,
+</code><code id="L3886"><span class="ln">3886</span>                y<span class="s"> = </span>con.y;
+</code><code id="L3887"><span class="ln">3887</span>            <b>if</b> (!container) {
+</code><code id="L3888"><span class="ln">3888</span>                <b>throw</b> <b>new</b> Error(<i>"VML container not found."</i>);
+</code><code id="L3889"><span class="ln">3889</span>            }
+</code><code id="L3890"><span class="ln">3890</span>            <b>var</b> res<span class="s"> = </span><b>new</b> Paper,
+</code><code id="L3891"><span class="ln">3891</span>                c<span class="s"> = </span>res.canvas<span class="s"> = </span>g.doc.createElement(<i>"div"</i>),
+</code><code id="L3892"><span class="ln">3892</span>                cs<span class="s"> = </span>c.style;
+</code><code id="L3893"><span class="ln">3893</span>            x<span class="s"> = </span>x<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3894"><span class="ln">3894</span>            y<span class="s"> = </span>y<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L3895"><span class="ln">3895</span>            width<span class="s"> = </span>width<span class="s"> || </span><span class="d">512</span>;
+</code><code id="L3896"><span class="ln">3896</span>            height<span class="s"> = </span>height<span class="s"> || </span><span class="d">342</span>;
+</code><code id="L3897"><span class="ln">3897</span>            res.width<span class="s"> = </span>width;
+</code><code id="L3898"><span class="ln">3898</span>            res.height<span class="s"> = </span>height;
+</code><code id="L3899"><span class="ln">3899</span>            width<span class="s"> == </span>+width<span class="s"> &amp;&amp; </span>(width += <i>"px"</i>);
+</code><code id="L3900"><span class="ln">3900</span>            height<span class="s"> == </span>+height<span class="s"> &amp;&amp; </span>(height += <i>"px"</i>);
+</code><code id="L3901"><span class="ln">3901</span>            res.coordsize<span class="s"> = </span>zoom<span class="s"> * </span><span class="d">1e3</span><span class="s"> + </span>S<span class="s"> + </span>zoom<span class="s"> * </span><span class="d">1e3</span>;
+</code><code id="L3902"><span class="ln">3902</span>            res.coordorigin<span class="s"> = </span><i>"<span class="d">0</span> <span class="d">0</span>"</i>;
+</code><code id="L3903"><span class="ln">3903</span>            res.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
+</code><code id="L3904"><span class="ln">3904</span>            res.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;"</i>;
+</code><code id="L3905"><span class="ln">3905</span>            c.appendChild(res.span);
+</code><code id="L3906"><span class="ln">3906</span>            cs.cssText<span class="s"> = </span>R.format(<i>"top:<span class="d">0</span>;left:<span class="d">0</span>;width:{<span class="d">0</span>};height:{<span class="d">1</span>};display:inline-block;position:relative;clip:rect(<span class="d">0</span> {<span class="d">0</span>} {<span class="d">1</span>} <span class="d">0</span>);overflow:hidden"</i>, width, height);
+</code><code id="L3907"><span class="ln">3907</span>            <b>if</b> (container<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L3908"><span class="ln">3908</span>                g.doc.body.appendChild(c);
+</code><code id="L3909"><span class="ln">3909</span>                cs.left<span class="s"> = </span>x<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3910"><span class="ln">3910</span>                cs.top<span class="s"> = </span>y<span class="s"> + </span><i>"px"</i>;
+</code><code id="L3911"><span class="ln">3911</span>                cs.position<span class="s"> = </span><i>"absolute"</i>;
+</code><code id="L3912"><span class="ln">3912</span>            } <b>else</b> {
+</code><code id="L3913"><span class="ln">3913</span>                <b>if</b> (container.firstChild) {
+</code><code id="L3914"><span class="ln">3914</span>                    container.insertBefore(c, container.firstChild);
+</code><code id="L3915"><span class="ln">3915</span>                } <b>else</b> {
+</code><code id="L3916"><span class="ln">3916</span>                    container.appendChild(c);
+</code><code id="L3917"><span class="ln">3917</span>                }
+</code><code id="L3918"><span class="ln">3918</span>            }
+</code><code id="L3919"><span class="ln">3919</span>            plugins.call(res, res, R.fn);
+</code><code id="L3920"><span class="ln">3920</span>            <b>return</b> res;
+</code><code id="L3921"><span class="ln">3921</span>        };
+</code><code id="L3922"><span class="ln">3922</span>        paperproto.clear<span class="s"> = </span><b>function</b> () {
+</code><code id="L3923"><span class="ln">3923</span>            eve(<i>"clear"</i>, <b>this</b>);
+</code><code id="L3924"><span class="ln">3924</span>            <b>this</b>.canvas.innerHTML<span class="s"> = </span>E;
+</code><code id="L3925"><span class="ln">3925</span>            <b>this</b>.span<span class="s"> = </span>g.doc.createElement(<i>"span"</i>);
+</code><code id="L3926"><span class="ln">3926</span>            <b>this</b>.span.style.cssText<span class="s"> = </span><i>"position:absolute;left:-9999em;top:-9999em;padding:<span class="d">0</span>;margin:<span class="d">0</span>;line-height:<span class="d">1</span>;display:inline;"</i>;
+</code><code id="L3927"><span class="ln">3927</span>            <b>this</b>.canvas.appendChild(<b>this</b>.span);
+</code><code id="L3928"><span class="ln">3928</span>            <b>this</b>.bottom<span class="s"> = </span><b>this</b>.top<span class="s"> = </span><b>null</b>;
+</code><code id="L3929"><span class="ln">3929</span>        };
+</code><code id="L3930"><span class="ln">3930</span>        paperproto.remove<span class="s"> = </span><b>function</b> () {
+</code><code id="L3931"><span class="ln">3931</span>            eve(<i>"remove"</i>, <b>this</b>);
+</code><code id="L3932"><span class="ln">3932</span>            <b>this</b>.canvas.parentNode.removeChild(<b>this</b>.canvas);
+</code><code id="L3933"><span class="ln">3933</span>            <b>for</b> (<b>var</b> i <b>in</b> <b>this</b>) {
+</code><code id="L3934"><span class="ln">3934</span>                <b>this</b>[i]<span class="s"> = </span>removed(i);
+</code><code id="L3935"><span class="ln">3935</span>            }
+</code><code id="L3936"><span class="ln">3936</span>            <b>return</b> <b>true</b>;
+</code><code id="L3937"><span class="ln">3937</span>        };
+</code><code id="L3938"><span class="ln">3938</span>    }
+</code><code id="L3939"><span class="ln">3939</span> 
+</code><code id="L3940"><span class="ln">3940</span>    <span class="c">// WebKit rendering bug workaround method</span>
+</code><code id="L3941"><span class="ln">3941</span>    <b>var</b> version<span class="s"> = </span>navigator.userAgent.match(/Version\/(.*?)\s/)<span class="s"> || </span>navigator.userAgent.match(/Chrome\/(\d+)/);
+</code><code id="L3942"><span class="ln">3942</span>    <b>if</b> ((navigator.vendor<span class="s"> == </span><i>"Apple Computer, Inc."</i>)<span class="s"> &amp;&amp; </span>(version<span class="s"> &amp;&amp; </span>version[<span class="d">1</span>] &lt; <span class="d">4</span><span class="s"> || </span>navigator.platform.slice(<span class="d">0</span>, <span class="d">2</span>)<span class="s"> == </span><i>"iP"</i>) ||
+</code><code id="L3943"><span class="ln">3943</span>        (navigator.vendor<span class="s"> == </span><i>"Google Inc."</i><span class="s"> &amp;&amp; </span>version<span class="s"> &amp;&amp; </span>version[<span class="d">1</span>] &lt; <span class="d">8</span>)) {
+</code><code id="L3944"><span class="ln">3944</span><span class="c">        <span class="c">/*\</span>
+</span></code><code id="L3945"><span class="ln">3945</span><span class="c">        <span class="s"> * </span>Paper.safari
+</span></code><code id="L3946"><span class="ln">3946</span><span class="c">         [ method ]
+</span></code><code id="L3947"><span class="ln">3947</span><span class="c">         **
+</span></code><code id="L3948"><span class="ln">3948</span><span class="c">        <span class="s"> * </span>Adds event handlers <b>for</b> hover <b>for</b> the element.
+</span></code><code id="L3949"><span class="ln">3949</span><span class="c">         > Parameters
+</span></code><code id="L3950"><span class="ln">3950</span><span class="c">        <span class="s"> - </span>f_in (<b>function</b>) handler <b>for</b> hover <b>in</b>
+</span></code><code id="L3951"><span class="ln">3951</span><span class="c">        <span class="s"> - </span>f_out (<b>function</b>) handler <b>for</b> hover out
+</span></code><code id="L3952"><span class="ln">3952</span><span class="c">        <span class="s"> - </span>icontext (object) #optional context <b>for</b> hover <b>in</b> handler
+</span></code><code id="L3953"><span class="ln">3953</span><span class="c">        <span class="s"> - </span>ocontext (object) #optional context <b>for</b> hover out handler
+</span></code><code id="L3954"><span class="ln">3954</span><span class="c">        <span class="s"> = </span>(object) @Element
+</span></code><code id="L3955"><span class="ln">3955</span><span class="c">        \*/</span>
+</code><code id="L3956"><span class="ln">3956</span>        paperproto.safari<span class="s"> = </span><b>function</b> () {
+</code><code id="L3957"><span class="ln">3957</span>            <b>var</b> rect<span class="s"> = </span><b>this</b>.rect(-<span class="d">99</span>, -<span class="d">99</span>, <b>this</b>.width<span class="s"> + </span><span class="d">99</span>, <b>this</b>.height<span class="s"> + </span><span class="d">99</span>).attr({stroke: <i>"none"</i>});
+</code><code id="L3958"><span class="ln">3958</span>            setTimeout(<b>function</b> () {rect.remove();});
+</code><code id="L3959"><span class="ln">3959</span>        };
+</code><code id="L3960"><span class="ln">3960</span>    } <b>else</b> {
+</code><code id="L3961"><span class="ln">3961</span>        paperproto.safari<span class="s"> = </span>fun;
+</code><code id="L3962"><span class="ln">3962</span>    }
+</code><code id="L3963"><span class="ln">3963</span> 
+</code><code id="L3964"><span class="ln">3964</span>    <span class="c">// Events</span>
+</code><code id="L3965"><span class="ln">3965</span>    <b>var</b> preventDefault<span class="s"> = </span><b>function</b> () {
+</code><code id="L3966"><span class="ln">3966</span>        <b>this</b>.returnValue<span class="s"> = </span><b>false</b>;
+</code><code id="L3967"><span class="ln">3967</span>    },
+</code><code id="L3968"><span class="ln">3968</span>    preventTouch<span class="s"> = </span><b>function</b> () {
+</code><code id="L3969"><span class="ln">3969</span>        <b>return</b> <b>this</b>.originalEvent.preventDefault();
+</code><code id="L3970"><span class="ln">3970</span>    },
+</code><code id="L3971"><span class="ln">3971</span>    stopPropagation<span class="s"> = </span><b>function</b> () {
+</code><code id="L3972"><span class="ln">3972</span>        <b>this</b>.cancelBubble<span class="s"> = </span><b>true</b>;
+</code><code id="L3973"><span class="ln">3973</span>    },
+</code><code id="L3974"><span class="ln">3974</span>    stopTouch<span class="s"> = </span><b>function</b> () {
+</code><code id="L3975"><span class="ln">3975</span>        <b>return</b> <b>this</b>.originalEvent.stopPropagation();
+</code><code id="L3976"><span class="ln">3976</span>    },
+</code><code id="L3977"><span class="ln">3977</span>    addEvent<span class="s"> = </span>(<b>function</b> () {
+</code><code id="L3978"><span class="ln">3978</span>        <b>if</b> (g.doc.addEventListener) {
+</code><code id="L3979"><span class="ln">3979</span>            <b>return</b> <b>function</b> (obj, type, fn, element) {
+</code><code id="L3980"><span class="ln">3980</span>                <b>var</b> realName<span class="s"> = </span>supportsTouch<span class="s"> &amp;&amp; </span>touchMap[type] ? touchMap[type] : type;
+</code><code id="L3981"><span class="ln">3981</span>                <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L3982"><span class="ln">3982</span>                    <b>if</b> (supportsTouch<span class="s"> &amp;&amp; </span>touchMap[has](type)) {
+</code><code id="L3983"><span class="ln">3983</span>                        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.targetTouches<span class="s"> &amp;&amp; </span>e.targetTouches.length; i &lt; ii; i++) {
+</code><code id="L3984"><span class="ln">3984</span>                            <b>if</b> (e.targetTouches[i].target<span class="s"> == </span>obj) {
+</code><code id="L3985"><span class="ln">3985</span>                                <b>var</b> olde<span class="s"> = </span>e;
+</code><code id="L3986"><span class="ln">3986</span>                                e<span class="s"> = </span>e.targetTouches[i];
+</code><code id="L3987"><span class="ln">3987</span>                                e.originalEvent<span class="s"> = </span>olde;
+</code><code id="L3988"><span class="ln">3988</span>                                e.preventDefault<span class="s"> = </span>preventTouch;
+</code><code id="L3989"><span class="ln">3989</span>                                e.stopPropagation<span class="s"> = </span>stopTouch;
+</code><code id="L3990"><span class="ln">3990</span>                                <b>break</b>;
+</code><code id="L3991"><span class="ln">3991</span>                            }
+</code><code id="L3992"><span class="ln">3992</span>                        }
+</code><code id="L3993"><span class="ln">3993</span>                    }
+</code><code id="L3994"><span class="ln">3994</span>                    <b>return</b> fn.call(element, e);
+</code><code id="L3995"><span class="ln">3995</span>                };
+</code><code id="L3996"><span class="ln">3996</span>                obj.addEventListener(realName, f, <b>false</b>);
+</code><code id="L3997"><span class="ln">3997</span>                <b>return</b> <b>function</b> () {
+</code><code id="L3998"><span class="ln">3998</span>                    obj.removeEventListener(realName, f, <b>false</b>);
+</code><code id="L3999"><span class="ln">3999</span>                    <b>return</b> <b>true</b>;
+</code><code id="L4000"><span class="ln">4000</span>                };
+</code><code id="L4001"><span class="ln">4001</span>            };
+</code><code id="L4002"><span class="ln">4002</span>        } <b>else</b> <b>if</b> (g.doc.attachEvent) {
+</code><code id="L4003"><span class="ln">4003</span>            <b>return</b> <b>function</b> (obj, type, fn, element) {
+</code><code id="L4004"><span class="ln">4004</span>                <b>var</b> f<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L4005"><span class="ln">4005</span>                    e<span class="s"> = </span>e<span class="s"> || </span>g.win.event;
+</code><code id="L4006"><span class="ln">4006</span>                    e.preventDefault<span class="s"> = </span>e.preventDefault<span class="s"> || </span>preventDefault;
+</code><code id="L4007"><span class="ln">4007</span>                    e.stopPropagation<span class="s"> = </span>e.stopPropagation<span class="s"> || </span>stopPropagation;
+</code><code id="L4008"><span class="ln">4008</span>                    <b>return</b> fn.call(element, e);
+</code><code id="L4009"><span class="ln">4009</span>                };
+</code><code id="L4010"><span class="ln">4010</span>                obj.attachEvent(<i>"on"</i><span class="s"> + </span>type, f);
+</code><code id="L4011"><span class="ln">4011</span>                <b>var</b> detacher<span class="s"> = </span><b>function</b> () {
+</code><code id="L4012"><span class="ln">4012</span>                    obj.detachEvent(<i>"on"</i><span class="s"> + </span>type, f);
+</code><code id="L4013"><span class="ln">4013</span>                    <b>return</b> <b>true</b>;
+</code><code id="L4014"><span class="ln">4014</span>                };
+</code><code id="L4015"><span class="ln">4015</span>                <b>return</b> detacher;
+</code><code id="L4016"><span class="ln">4016</span>            };
+</code><code id="L4017"><span class="ln">4017</span>        }
+</code><code id="L4018"><span class="ln">4018</span>    })(),
+</code><code id="L4019"><span class="ln">4019</span>    drag<span class="s"> = </span>[],
+</code><code id="L4020"><span class="ln">4020</span>    dragMove<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L4021"><span class="ln">4021</span>        <b>var</b> x<span class="s"> = </span>e.clientX,
+</code><code id="L4022"><span class="ln">4022</span>            y<span class="s"> = </span>e.clientY,
+</code><code id="L4023"><span class="ln">4023</span>            scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
+</code><code id="L4024"><span class="ln">4024</span>            scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft,
+</code><code id="L4025"><span class="ln">4025</span>            dragi,
+</code><code id="L4026"><span class="ln">4026</span>            j<span class="s"> = </span>drag.length;
+</code><code id="L4027"><span class="ln">4027</span>        <b>while</b> (j--) {
+</code><code id="L4028"><span class="ln">4028</span>            dragi<span class="s"> = </span>drag[j];
+</code><code id="L4029"><span class="ln">4029</span>            <b>if</b> (supportsTouch) {
+</code><code id="L4030"><span class="ln">4030</span>                <b>var</b> i<span class="s"> = </span>e.touches.length,
+</code><code id="L4031"><span class="ln">4031</span>                    touch;
+</code><code id="L4032"><span class="ln">4032</span>                <b>while</b> (i--) {
+</code><code id="L4033"><span class="ln">4033</span>                    touch<span class="s"> = </span>e.touches[i];
+</code><code id="L4034"><span class="ln">4034</span>                    <b>if</b> (touch.identifier<span class="s"> == </span>dragi.el._drag.id) {
+</code><code id="L4035"><span class="ln">4035</span>                        x<span class="s"> = </span>touch.clientX;
+</code><code id="L4036"><span class="ln">4036</span>                        y<span class="s"> = </span>touch.clientY;
+</code><code id="L4037"><span class="ln">4037</span>                        (e.originalEvent ? e.originalEvent : e).preventDefault();
+</code><code id="L4038"><span class="ln">4038</span>                        <b>break</b>;
+</code><code id="L4039"><span class="ln">4039</span>                    }
+</code><code id="L4040"><span class="ln">4040</span>                }
+</code><code id="L4041"><span class="ln">4041</span>            } <b>else</b> {
+</code><code id="L4042"><span class="ln">4042</span>                e.preventDefault();
+</code><code id="L4043"><span class="ln">4043</span>            }
+</code><code id="L4044"><span class="ln">4044</span>            <b>var</b> node<span class="s"> = </span>dragi.el.node,
+</code><code id="L4045"><span class="ln">4045</span>                o,
+</code><code id="L4046"><span class="ln">4046</span>                next<span class="s"> = </span>node.nextSibling,
+</code><code id="L4047"><span class="ln">4047</span>                parent<span class="s"> = </span>node.parentNode,
+</code><code id="L4048"><span class="ln">4048</span>                display<span class="s"> = </span>node.style.display;
+</code><code id="L4049"><span class="ln">4049</span>            g.win.opera<span class="s"> &amp;&amp; </span>parent.removeChild(node);
+</code><code id="L4050"><span class="ln">4050</span>            node.style.display<span class="s"> = </span><i>"none"</i>;
+</code><code id="L4051"><span class="ln">4051</span>            o<span class="s"> = </span>dragi.el.paper.getElementByPoint(x, y);
+</code><code id="L4052"><span class="ln">4052</span>            node.style.display<span class="s"> = </span>display;
+</code><code id="L4053"><span class="ln">4053</span>            g.win.opera<span class="s"> &amp;&amp; </span>(next ? parent.insertBefore(node, next) : parent.appendChild(node));
+</code><code id="L4054"><span class="ln">4054</span>            o<span class="s"> &amp;&amp; </span>eve(<i>"drag.over."</i><span class="s"> + </span>dragi.el.id, dragi.el, o);
+</code><code id="L4055"><span class="ln">4055</span>            x += scrollX;
+</code><code id="L4056"><span class="ln">4056</span>            y += scrollY;
+</code><code id="L4057"><span class="ln">4057</span>            eve(<i>"drag.move."</i><span class="s"> + </span>dragi.el.id, dragi.move_scope<span class="s"> || </span>dragi.el, x<span class="s"> - </span>dragi.el._drag.x, y<span class="s"> - </span>dragi.el._drag.y, x, y, e);
+</code><code id="L4058"><span class="ln">4058</span>        }
+</code><code id="L4059"><span class="ln">4059</span>    },
+</code><code id="L4060"><span class="ln">4060</span>    dragUp<span class="s"> = </span><b>function</b> (e) {
+</code><code id="L4061"><span class="ln">4061</span>        R.unmousemove(dragMove).unmouseup(dragUp);
+</code><code id="L4062"><span class="ln">4062</span>        <b>var</b> i<span class="s"> = </span>drag.length,
+</code><code id="L4063"><span class="ln">4063</span>            dragi;
+</code><code id="L4064"><span class="ln">4064</span>        <b>while</b> (i--) {
+</code><code id="L4065"><span class="ln">4065</span>            dragi<span class="s"> = </span>drag[i];
+</code><code id="L4066"><span class="ln">4066</span>            dragi.el._drag<span class="s"> = </span>{};
+</code><code id="L4067"><span class="ln">4067</span>            eve(<i>"drag.end."</i><span class="s"> + </span>dragi.el.id, dragi.end_scope<span class="s"> || </span>dragi.start_scope<span class="s"> || </span>dragi.move_scope<span class="s"> || </span>dragi.el, e);
+</code><code id="L4068"><span class="ln">4068</span>        }
+</code><code id="L4069"><span class="ln">4069</span>        drag<span class="s"> = </span>[];
+</code><code id="L4070"><span class="ln">4070</span>    };
+</code><code id="L4071"><span class="ln">4071</span>    <b>for</b> (<b>var</b> i<span class="s"> = </span>events.length; i--;) {
+</code><code id="L4072"><span class="ln">4072</span>        (<b>function</b> (eventName) {
+</code><code id="L4073"><span class="ln">4073</span>            R[eventName]<span class="s"> = </span>Element.prototype[eventName]<span class="s"> = </span><b>function</b> (fn, scope) {
+</code><code id="L4074"><span class="ln">4074</span>                <b>if</b> (R.is(fn, <i>"<b>function</b>"</i>)) {
+</code><code id="L4075"><span class="ln">4075</span>                    <b>this</b>.events<span class="s"> = </span><b>this</b>.events<span class="s"> || </span>[];
+</code><code id="L4076"><span class="ln">4076</span>                    <b>this</b>.events.push({name: eventName, f: fn, unbind: addEvent(<b>this</b>.shape<span class="s"> || </span><b>this</b>.node<span class="s"> || </span>g.doc, eventName, fn, scope<span class="s"> || </span><b>this</b>)});
+</code><code id="L4077"><span class="ln">4077</span>                }
+</code><code id="L4078"><span class="ln">4078</span>                <b>return</b> <b>this</b>;
+</code><code id="L4079"><span class="ln">4079</span>            };
+</code><code id="L4080"><span class="ln">4080</span>            R[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span>Element.prototype[<i>"un"</i><span class="s"> + </span>eventName]<span class="s"> = </span><b>function</b> (fn) {
+</code><code id="L4081"><span class="ln">4081</span>                <b>var</b> events<span class="s"> = </span><b>this</b>.events,
+</code><code id="L4082"><span class="ln">4082</span>                    l<span class="s"> = </span>events.length;
+</code><code id="L4083"><span class="ln">4083</span>                <b>while</b> (l--) <b>if</b> (events[l].name<span class="s"> == </span>eventName<span class="s"> &amp;&amp; </span>events[l].f<span class="s"> == </span>fn) {
+</code><code id="L4084"><span class="ln">4084</span>                    events[l].unbind();
+</code><code id="L4085"><span class="ln">4085</span>                    events.splice(l, <span class="d">1</span>);
+</code><code id="L4086"><span class="ln">4086</span>                    !events.length<span class="s"> &amp;&amp; </span><b>delete</b> <b>this</b>.events;
+</code><code id="L4087"><span class="ln">4087</span>                    <b>return</b> <b>this</b>;
+</code><code id="L4088"><span class="ln">4088</span>                }
+</code><code id="L4089"><span class="ln">4089</span>                <b>return</b> <b>this</b>;
+</code><code id="L4090"><span class="ln">4090</span>            };
+</code><code id="L4091"><span class="ln">4091</span>        })(events[i]);
+</code><code id="L4092"><span class="ln">4092</span>    }
+</code><code id="L4093"><span class="ln">4093</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4094"><span class="ln">4094</span><span class="c">    <span class="s"> * </span>Element.hover
+</span></code><code id="L4095"><span class="ln">4095</span><span class="c">     [ method ]
+</span></code><code id="L4096"><span class="ln">4096</span><span class="c">     **
+</span></code><code id="L4097"><span class="ln">4097</span><span class="c">    <span class="s"> * </span>Adds event handlers <b>for</b> hover <b>for</b> the element.
+</span></code><code id="L4098"><span class="ln">4098</span><span class="c">     > Parameters
+</span></code><code id="L4099"><span class="ln">4099</span><span class="c">    <span class="s"> - </span>f_in (<b>function</b>) handler <b>for</b> hover <b>in</b>
+</span></code><code id="L4100"><span class="ln">4100</span><span class="c">    <span class="s"> - </span>f_out (<b>function</b>) handler <b>for</b> hover out
+</span></code><code id="L4101"><span class="ln">4101</span><span class="c">    <span class="s"> - </span>icontext (object) #optional context <b>for</b> hover <b>in</b> handler
+</span></code><code id="L4102"><span class="ln">4102</span><span class="c">    <span class="s"> - </span>ocontext (object) #optional context <b>for</b> hover out handler
+</span></code><code id="L4103"><span class="ln">4103</span><span class="c">    <span class="s"> = </span>(object) @Element
+</span></code><code id="L4104"><span class="ln">4104</span><span class="c">    \*/</span>
+</code><code id="L4105"><span class="ln">4105</span>    elproto.hover<span class="s"> = </span><b>function</b> (f_in, f_out, scope_in, scope_out) {
+</code><code id="L4106"><span class="ln">4106</span>        <b>return</b> <b>this</b>.mouseover(f_in, scope_in).mouseout(f_out, scope_out<span class="s"> || </span>scope_in);
+</code><code id="L4107"><span class="ln">4107</span>    };
+</code><code id="L4108"><span class="ln">4108</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4109"><span class="ln">4109</span><span class="c">    <span class="s"> * </span>Element.unhover
+</span></code><code id="L4110"><span class="ln">4110</span><span class="c">     [ method ]
+</span></code><code id="L4111"><span class="ln">4111</span><span class="c">     **
+</span></code><code id="L4112"><span class="ln">4112</span><span class="c">    <span class="s"> * </span>Removes event handlers <b>for</b> hover <b>for</b> the element.
+</span></code><code id="L4113"><span class="ln">4113</span><span class="c">     > Parameters
+</span></code><code id="L4114"><span class="ln">4114</span><span class="c">    <span class="s"> - </span>f_in (<b>function</b>) handler <b>for</b> hover <b>in</b>
+</span></code><code id="L4115"><span class="ln">4115</span><span class="c">    <span class="s"> - </span>f_out (<b>function</b>) handler <b>for</b> hover out
+</span></code><code id="L4116"><span class="ln">4116</span><span class="c">    <span class="s"> = </span>(object) @Element
+</span></code><code id="L4117"><span class="ln">4117</span><span class="c">    \*/</span>
+</code><code id="L4118"><span class="ln">4118</span>    elproto.unhover<span class="s"> = </span><b>function</b> (f_in, f_out) {
+</code><code id="L4119"><span class="ln">4119</span>        <b>return</b> <b>this</b>.unmouseover(f_in).unmouseout(f_out);
+</code><code id="L4120"><span class="ln">4120</span>    };
+</code><code id="L4121"><span class="ln">4121</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4122"><span class="ln">4122</span><span class="c">    <span class="s"> * </span>Element.drag
+</span></code><code id="L4123"><span class="ln">4123</span><span class="c">     [ method ]
+</span></code><code id="L4124"><span class="ln">4124</span><span class="c">     **
+</span></code><code id="L4125"><span class="ln">4125</span><span class="c">    <span class="s"> * </span>Adds event handlers <b>for</b> drag of the element.
+</span></code><code id="L4126"><span class="ln">4126</span><span class="c">     > Parameters
+</span></code><code id="L4127"><span class="ln">4127</span><span class="c">    <span class="s"> - </span>onmove (<b>function</b>) handler <b>for</b> moving
+</span></code><code id="L4128"><span class="ln">4128</span><span class="c">    <span class="s"> - </span>onstart (<b>function</b>) handler <b>for</b> drag start
+</span></code><code id="L4129"><span class="ln">4129</span><span class="c">    <span class="s"> - </span>onend (<b>function</b>) handler <b>for</b> drag end
+</span></code><code id="L4130"><span class="ln">4130</span><span class="c">    <span class="s"> - </span>mcontext (object) #optional context <b>for</b> moving handler
+</span></code><code id="L4131"><span class="ln">4131</span><span class="c">    <span class="s"> - </span>scontext (object) #optional context <b>for</b> drag start handler
+</span></code><code id="L4132"><span class="ln">4132</span><span class="c">    <span class="s"> - </span>econtext (object) #optional context <b>for</b> drag end handler
+</span></code><code id="L4133"><span class="ln">4133</span><span class="c">    <span class="s"> * </span>Additionaly following `drag` events will be triggered: `drag.start.&lt;id>` on start, 
+</span></code><code id="L4134"><span class="ln">4134</span><span class="c">    <span class="s"> * </span>`drag.end.&lt;id>` on end and `drag.move.&lt;id>` on every move. When element will be dragged over another element 
+</span></code><code id="L4135"><span class="ln">4135</span><span class="c">    <span class="s"> * </span>`drag.over.&lt;id>` will be fired as well.
+</span></code><code id="L4136"><span class="ln">4136</span><span class="c">     *
+</span></code><code id="L4137"><span class="ln">4137</span><span class="c">    <span class="s"> * </span>Start event and start handler will be called <b>in</b> specified context or <b>in</b> context of the element <b>with</b> following parameters:
+</span></code><code id="L4138"><span class="ln">4138</span><span class="c">     o x (number) x position of the mouse
+</span></code><code id="L4139"><span class="ln">4139</span><span class="c">     o y (number) y position of the mouse
+</span></code><code id="L4140"><span class="ln">4140</span><span class="c">     o event (object) DOM event object
+</span></code><code id="L4141"><span class="ln">4141</span><span class="c">    <span class="s"> * </span>Move event and move handler will be called <b>in</b> specified context or <b>in</b> context of the element <b>with</b> following parameters:
+</span></code><code id="L4142"><span class="ln">4142</span><span class="c">     o dx (number) shift by x from the start point
+</span></code><code id="L4143"><span class="ln">4143</span><span class="c">     o dy (number) shift by y from the start point
+</span></code><code id="L4144"><span class="ln">4144</span><span class="c">     o x (number) x position of the mouse
+</span></code><code id="L4145"><span class="ln">4145</span><span class="c">     o y (number) y position of the mouse
+</span></code><code id="L4146"><span class="ln">4146</span><span class="c">     o event (object) DOM event object
+</span></code><code id="L4147"><span class="ln">4147</span><span class="c">    <span class="s"> * </span>End event and end handler will be called <b>in</b> specified context or <b>in</b> context of the element <b>with</b> following parameters:
+</span></code><code id="L4148"><span class="ln">4148</span><span class="c">     o event (object) DOM event object
+</span></code><code id="L4149"><span class="ln">4149</span><span class="c">    <span class="s"> = </span>(object) @Element
+</span></code><code id="L4150"><span class="ln">4150</span><span class="c">    \*/</span>
+</code><code id="L4151"><span class="ln">4151</span>    elproto.drag<span class="s"> = </span><b>function</b> (onmove, onstart, onend, move_scope, start_scope, end_scope) {
+</code><code id="L4152"><span class="ln">4152</span>        <b>function</b> start(e) {
+</code><code id="L4153"><span class="ln">4153</span>            (e.originalEvent<span class="s"> || </span>e).preventDefault();
+</code><code id="L4154"><span class="ln">4154</span>            <b>var</b> scrollY<span class="s"> = </span>g.doc.documentElement.scrollTop<span class="s"> || </span>g.doc.body.scrollTop,
+</code><code id="L4155"><span class="ln">4155</span>                scrollX<span class="s"> = </span>g.doc.documentElement.scrollLeft<span class="s"> || </span>g.doc.body.scrollLeft;
+</code><code id="L4156"><span class="ln">4156</span>            <b>this</b>._drag.x<span class="s"> = </span>e.clientX<span class="s"> + </span>scrollX;
+</code><code id="L4157"><span class="ln">4157</span>            <b>this</b>._drag.y<span class="s"> = </span>e.clientY<span class="s"> + </span>scrollY;
+</code><code id="L4158"><span class="ln">4158</span>            <b>this</b>._drag.id<span class="s"> = </span>e.identifier;
+</code><code id="L4159"><span class="ln">4159</span>            !drag.length<span class="s"> &amp;&amp; </span>R.mousemove(dragMove).mouseup(dragUp);
+</code><code id="L4160"><span class="ln">4160</span>            drag.push({el: <b>this</b>, move_scope: move_scope, start_scope: start_scope, end_scope: end_scope});
+</code><code id="L4161"><span class="ln">4161</span>            onstart<span class="s"> &amp;&amp; </span>eve.on(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, onstart);
+</code><code id="L4162"><span class="ln">4162</span>            onmove<span class="s"> &amp;&amp; </span>eve.on(<i>"drag.move."</i><span class="s"> + </span><b>this</b>.id, onmove);
+</code><code id="L4163"><span class="ln">4163</span>            onend<span class="s"> &amp;&amp; </span>eve.on(<i>"drag.end."</i><span class="s"> + </span><b>this</b>.id, onend);
+</code><code id="L4164"><span class="ln">4164</span>            eve(<i>"drag.start."</i><span class="s"> + </span><b>this</b>.id, start_scope<span class="s"> || </span>move_scope<span class="s"> || </span><b>this</b>, e.clientX<span class="s"> + </span>scrollX, e.clientY<span class="s"> + </span>scrollY, e);
+</code><code id="L4165"><span class="ln">4165</span>        }
+</code><code id="L4166"><span class="ln">4166</span>        <b>this</b>._drag<span class="s"> = </span>{};
+</code><code id="L4167"><span class="ln">4167</span>        <b>this</b>.mousedown(start);
 </code><code id="L4168"><span class="ln">4168</span>        <b>return</b> <b>this</b>;
 </code><code id="L4169"><span class="ln">4169</span>    };
-</code><code id="L4170"><span class="ln">4170</span>    <b>function</b> x_y() {
-</code><code id="L4171"><span class="ln">4171</span>        <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y;
-</code><code id="L4172"><span class="ln">4172</span>    }
-</code><code id="L4173"><span class="ln">4173</span>    <b>function</b> x_y_w_h() {
-</code><code id="L4174"><span class="ln">4174</span>        <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.width<span class="s"> + </span><i>"\xd7"</i><span class="s"> + </span><b>this</b>.height;
-</code><code id="L4175"><span class="ln">4175</span>    }
-</code><code id="L4176"><span class="ln">4176</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4177"><span class="ln">4177</span><span class="c">    <span class="s"> * </span>Element.getBBox
-</span></code><code id="L4178"><span class="ln">4178</span><span class="c">     [ method ]
-</span></code><code id="L4179"><span class="ln">4179</span><span class="c">     **
-</span></code><code id="L4180"><span class="ln">4180</span><span class="c">    <span class="s"> * </span>Return bounding box <b>for</b> a given element
-</span></code><code id="L4181"><span class="ln">4181</span><span class="c">     **
-</span></code><code id="L4182"><span class="ln">4182</span><span class="c">     > Parameters
-</span></code><code id="L4183"><span class="ln">4183</span><span class="c">     **
-</span></code><code id="L4184"><span class="ln">4184</span><span class="c">    <span class="s"> - </span>isWithoutTransform (<b>boolean</b>) flag, `<b>true</b>` <b>if</b> you want to have bounding box before transformations. Default is `<b>false</b>`.
-</span></code><code id="L4185"><span class="ln">4185</span><span class="c">    <span class="s"> = </span>(object) Bounding box object:
-</span></code><code id="L4186"><span class="ln">4186</span><span class="c">     | {
-</span></code><code id="L4187"><span class="ln">4187</span><span class="c">     |     x: <span class="c">//top left corner x,</span>
-</span></code><code id="L4188"><span class="ln">4188</span><span class="c">     |     y: <span class="c">//top left corner y,</span>
-</span></code><code id="L4189"><span class="ln">4189</span><span class="c">     |     width: <span class="c">//width,</span>
-</span></code><code id="L4190"><span class="ln">4190</span><span class="c">     |     height: <span class="c">//height</span>
-</span></code><code id="L4191"><span class="ln">4191</span><span class="c">     | }
-</span></code><code id="L4192"><span class="ln">4192</span><span class="c">    \*/</span>
-</code><code id="L4193"><span class="ln">4193</span>    elproto.getBBox<span class="s"> = </span><b>function</b> (isWithoutTransform) {
-</code><code id="L4194"><span class="ln">4194</span>        <b>if</b> (<b>this</b>.removed) {
-</code><code id="L4195"><span class="ln">4195</span>            <b>return</b> {};
-</code><code id="L4196"><span class="ln">4196</span>        }
-</code><code id="L4197"><span class="ln">4197</span>        <b>var</b> _<span class="s"> = </span><b>this</b>._;
-</code><code id="L4198"><span class="ln">4198</span>        <b>if</b> (isWithoutTransform) {
-</code><code id="L4199"><span class="ln">4199</span>            <b>if</b> (_.dirty<span class="s"> || </span>!_.bboxwt) {
-</code><code id="L4200"><span class="ln">4200</span>                <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
-</code><code id="L4201"><span class="ln">4201</span>                _.bboxwt<span class="s"> = </span>pathDimensions(<b>this</b>.realPath);
-</code><code id="L4202"><span class="ln">4202</span>                _.bboxwt.toString<span class="s"> = </span>x_y_w_h;
-</code><code id="L4203"><span class="ln">4203</span>                _.dirty<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4204"><span class="ln">4204</span>            }
-</code><code id="L4205"><span class="ln">4205</span>            <b>return</b> _.bboxwt;
-</code><code id="L4206"><span class="ln">4206</span>        }
-</code><code id="L4207"><span class="ln">4207</span>        <b>if</b> (_.dirty<span class="s"> || </span>_.dirtyT<span class="s"> || </span>!_.bbox) {
-</code><code id="L4208"><span class="ln">4208</span>            <b>if</b> (_.dirty<span class="s"> || </span>!<b>this</b>.realPath) {
-</code><code id="L4209"><span class="ln">4209</span>                _.bboxwt<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4210"><span class="ln">4210</span>                <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
-</code><code id="L4211"><span class="ln">4211</span>            }
-</code><code id="L4212"><span class="ln">4212</span>            _.bbox<span class="s"> = </span>pathDimensions(mapPath(<b>this</b>.realPath, <b>this</b>.matrix));
-</code><code id="L4213"><span class="ln">4213</span>            _.bbox.toString<span class="s"> = </span>x_y_w_h;
-</code><code id="L4214"><span class="ln">4214</span>            _.dirty<span class="s"> = </span>_.dirtyT<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4215"><span class="ln">4215</span>        }
-</code><code id="L4216"><span class="ln">4216</span>        <b>return</b> _.bbox;
-</code><code id="L4217"><span class="ln">4217</span>    };
-</code><code id="L4218"><span class="ln">4218</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4219"><span class="ln">4219</span><span class="c">    <span class="s"> * </span>Element.clone
-</span></code><code id="L4220"><span class="ln">4220</span><span class="c">     [ method ]
-</span></code><code id="L4221"><span class="ln">4221</span><span class="c">     **
-</span></code><code id="L4222"><span class="ln">4222</span><span class="c">    <span class="s"> = </span>(object) clone of a given element
-</span></code><code id="L4223"><span class="ln">4223</span><span class="c">     **
-</span></code><code id="L4224"><span class="ln">4224</span><span class="c">    \*/</span>
-</code><code id="L4225"><span class="ln">4225</span>    elproto.clone<span class="s"> = </span><b>function</b> () {
-</code><code id="L4226"><span class="ln">4226</span>        <b>if</b> (<b>this</b>.removed) {
-</code><code id="L4227"><span class="ln">4227</span>            <b>return</b> <b>null</b>;
-</code><code id="L4228"><span class="ln">4228</span>        }
-</code><code id="L4229"><span class="ln">4229</span>        <b>var</b> attr<span class="s"> = </span><b>this</b>.attr();
-</code><code id="L4230"><span class="ln">4230</span>        <b>delete</b> attr.scale;
-</code><code id="L4231"><span class="ln">4231</span>        <b>delete</b> attr.translation;
-</code><code id="L4232"><span class="ln">4232</span>        <b>return</b> <b>this</b>.paper[<b>this</b>.type]().attr(attr);
-</code><code id="L4233"><span class="ln">4233</span>    };
-</code><code id="L4234"><span class="ln">4234</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4235"><span class="ln">4235</span><span class="c">    <span class="s"> * </span>Element.glow
-</span></code><code id="L4236"><span class="ln">4236</span><span class="c">     [ method ]
-</span></code><code id="L4237"><span class="ln">4237</span><span class="c">     **
-</span></code><code id="L4238"><span class="ln">4238</span><span class="c">    <span class="s"> * </span>Return set of elements that create glow-like effect around given element. See @Paper.set.
-</span></code><code id="L4239"><span class="ln">4239</span><span class="c">     *
-</span></code><code id="L4240"><span class="ln">4240</span><span class="c">    <span class="s"> * </span>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
-</span></code><code id="L4241"><span class="ln">4241</span><span class="c">     **
-</span></code><code id="L4242"><span class="ln">4242</span><span class="c">    <span class="s"> = </span>(object) set of elements that represents glow
-</span></code><code id="L4243"><span class="ln">4243</span><span class="c">    \*/</span>
-</code><code id="L4244"><span class="ln">4244</span>    elproto.glow<span class="s"> = </span><b>function</b> (glow) {
-</code><code id="L4245"><span class="ln">4245</span>        <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
-</code><code id="L4246"><span class="ln">4246</span>            <b>return</b> <b>null</b>;
-</code><code id="L4247"><span class="ln">4247</span>        }
-</code><code id="L4248"><span class="ln">4248</span>        glow<span class="s"> = </span>glow<span class="s"> || </span>{};
-</code><code id="L4249"><span class="ln">4249</span>        <b>var</b> s<span class="s"> = </span>{
-</code><code id="L4250"><span class="ln">4250</span>            width: glow.width<span class="s"> || </span><span class="d">10</span>,
-</code><code id="L4251"><span class="ln">4251</span>            fill: glow.fill<span class="s"> || </span><b>false</b>,
-</code><code id="L4252"><span class="ln">4252</span>            opacity: glow.opacity<span class="s"> || </span><span class="d">.5</span>,
-</code><code id="L4253"><span class="ln">4253</span>            offsetx: glow.offsetx<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L4254"><span class="ln">4254</span>            offsety: glow.offsety<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L4255"><span class="ln">4255</span>            color: glow.color<span class="s"> || </span><i>"#<span class="d">000</span>"</i>
-</code><code id="L4256"><span class="ln">4256</span>        },
-</code><code id="L4257"><span class="ln">4257</span>            c<span class="s"> = </span>s.width<span class="s"> / </span><span class="d">2</span>,
-</code><code id="L4258"><span class="ln">4258</span>            r<span class="s"> = </span><b>this</b>.paper,
-</code><code id="L4259"><span class="ln">4259</span>            out<span class="s"> = </span>r.set(),
-</code><code id="L4260"><span class="ln">4260</span>            path<span class="s"> = </span><b>this</b>.realPath<span class="s"> || </span>getPath[<b>this</b>.type](<b>this</b>);
-</code><code id="L4261"><span class="ln">4261</span>        path<span class="s"> = </span><b>this</b>.matrix ? mapPath(path, <b>this</b>.matrix) : path;
-</code><code id="L4262"><span class="ln">4262</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">1</span>; i &lt; c<span class="s"> + </span><span class="d">1</span>; i++) {
-</code><code id="L4263"><span class="ln">4263</span>            out.push(r.path(path).attr({stroke: s.color, fill: s.fill ? s.color : <i>"none"</i>, <i>"stroke-linejoin"</i>: <i>"round"</i>, <i>"stroke-linecap"</i>: <i>"round"</i>, <i>"stroke-width"</i>: +(s.width<span class="s"> / </span>c<span class="s"> * </span>i).toFixed(<span class="d">3</span>), opacity: +(s.opacity<span class="s"> / </span>c).toFixed(<span class="d">3</span>)}));
-</code><code id="L4264"><span class="ln">4264</span>        }
-</code><code id="L4265"><span class="ln">4265</span>        <b>return</b> out.insertBefore(<b>this</b>).translate(s.offsetx, s.offsety);
-</code><code id="L4266"><span class="ln">4266</span>    };
-</code><code id="L4267"><span class="ln">4267</span>    <b>var</b> curveslengths<span class="s"> = </span>{},
-</code><code id="L4268"><span class="ln">4268</span>    getPointAtSegmentLength<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
-</code><code id="L4269"><span class="ln">4269</span>        <b>var</b> len<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L4270"><span class="ln">4270</span>            precision<span class="s"> = </span><span class="d">100</span>,
-</code><code id="L4271"><span class="ln">4271</span>            name<span class="s"> = </span>[p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y].join(),
-</code><code id="L4272"><span class="ln">4272</span>            cache<span class="s"> = </span>curveslengths[name],
-</code><code id="L4273"><span class="ln">4273</span>            old, dot;
-</code><code id="L4274"><span class="ln">4274</span>        !cache &amp;&amp; (curveslengths[name]<span class="s"> = </span>cache<span class="s"> = </span>{data: []});
-</code><code id="L4275"><span class="ln">4275</span>        cache.timer &amp;&amp; clearTimeout(cache.timer);
-</code><code id="L4276"><span class="ln">4276</span>        cache.timer<span class="s"> = </span>setTimeout(<b>function</b> () {<b>delete</b> curveslengths[name];}, <span class="d">2e3</span>);
-</code><code id="L4277"><span class="ln">4277</span>        <b>if</b> (length != <b>null</b> &amp;&amp; !cache.precision) {
-</code><code id="L4278"><span class="ln">4278</span>            <b>var</b> total<span class="s"> = </span>getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y);
-</code><code id="L4279"><span class="ln">4279</span>            cache.precision<span class="s"> = </span>~~total<span class="s"> * </span><span class="d">10</span>;
-</code><code id="L4280"><span class="ln">4280</span>            cache.data<span class="s"> = </span>[];
-</code><code id="L4281"><span class="ln">4281</span>        }
-</code><code id="L4282"><span class="ln">4282</span>        precision<span class="s"> = </span>cache.precision<span class="s"> || </span>precision;
-</code><code id="L4283"><span class="ln">4283</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; precision<span class="s"> + </span><span class="d">1</span>; i++) {
-</code><code id="L4284"><span class="ln">4284</span>            <b>if</b> (cache.data[i<span class="s"> * </span>precision]) {
-</code><code id="L4285"><span class="ln">4285</span>                dot<span class="s"> = </span>cache.data[i<span class="s"> * </span>precision];
-</code><code id="L4286"><span class="ln">4286</span>            } <b>else</b> {
-</code><code id="L4287"><span class="ln">4287</span>                dot<span class="s"> = </span>R.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i<span class="s"> / </span>precision);
-</code><code id="L4288"><span class="ln">4288</span>                cache.data[i<span class="s"> * </span>precision]<span class="s"> = </span>dot;
-</code><code id="L4289"><span class="ln">4289</span>            }
-</code><code id="L4290"><span class="ln">4290</span>            i &amp;&amp; (len += pow(pow(old.x<span class="s"> - </span>dot.x, <span class="d">2</span>)<span class="s"> + </span>pow(old.y<span class="s"> - </span>dot.y, <span class="d">2</span>), <span class="d">.5</span>));
-</code><code id="L4291"><span class="ln">4291</span>            <b>if</b> (length != <b>null</b> &amp;&amp; len >= length) {
-</code><code id="L4292"><span class="ln">4292</span>                <b>return</b> dot;
-</code><code id="L4293"><span class="ln">4293</span>            }
-</code><code id="L4294"><span class="ln">4294</span>            old<span class="s"> = </span>dot;
-</code><code id="L4295"><span class="ln">4295</span>        }
-</code><code id="L4296"><span class="ln">4296</span>        <b>if</b> (length<span class="s"> == </span><b>null</b>) {
-</code><code id="L4297"><span class="ln">4297</span>            <b>return</b> len;
-</code><code id="L4298"><span class="ln">4298</span>        }
-</code><code id="L4299"><span class="ln">4299</span>    },
-</code><code id="L4300"><span class="ln">4300</span>    getLengthFactory<span class="s"> = </span><b>function</b> (istotal, subpath) {
-</code><code id="L4301"><span class="ln">4301</span>        <b>return</b> <b>function</b> (path, length, onlystart) {
-</code><code id="L4302"><span class="ln">4302</span>            path<span class="s"> = </span>path2curve(path);
-</code><code id="L4303"><span class="ln">4303</span>            <b>var</b> x, y, p, l, sp<span class="s"> = </span><i>""</i>, subpaths<span class="s"> = </span>{}, point,
-</code><code id="L4304"><span class="ln">4304</span>                len<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4305"><span class="ln">4305</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i &lt; ii; i++) {
-</code><code id="L4306"><span class="ln">4306</span>                p<span class="s"> = </span>path[i];
-</code><code id="L4307"><span class="ln">4307</span>                <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
-</code><code id="L4308"><span class="ln">4308</span>                    x<span class="s"> = </span>+p[<span class="d">1</span>];
-</code><code id="L4309"><span class="ln">4309</span>                    y<span class="s"> = </span>+p[<span class="d">2</span>];
-</code><code id="L4310"><span class="ln">4310</span>                } <b>else</b> {
-</code><code id="L4311"><span class="ln">4311</span>                    l<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
-</code><code id="L4312"><span class="ln">4312</span>                    <b>if</b> (len<span class="s"> + </span>l > length) {
-</code><code id="L4313"><span class="ln">4313</span>                        <b>if</b> (subpath &amp;&amp; !subpaths.start) {
-</code><code id="L4314"><span class="ln">4314</span>                            point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
-</code><code id="L4315"><span class="ln">4315</span>                            sp += [<i>"C"</i><span class="s"> + </span>point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
-</code><code id="L4316"><span class="ln">4316</span>                            <b>if</b> (onlystart) {<b>return</b> sp;}
-</code><code id="L4317"><span class="ln">4317</span>                            subpaths.start<span class="s"> = </span>sp;
-</code><code id="L4318"><span class="ln">4318</span>                            sp<span class="s"> = </span>[<i>"M"</i><span class="s"> + </span>point.x, point.y<span class="s"> + </span><i>"C"</i><span class="s"> + </span>point.n.x, point.n.y, point.end.x, point.end.y, p[<span class="d">5</span>], p[<span class="d">6</span>]].join();
-</code><code id="L4319"><span class="ln">4319</span>                            len += l;
-</code><code id="L4320"><span class="ln">4320</span>                            x<span class="s"> = </span>+p[<span class="d">5</span>];
-</code><code id="L4321"><span class="ln">4321</span>                            y<span class="s"> = </span>+p[<span class="d">6</span>];
-</code><code id="L4322"><span class="ln">4322</span>                            <b>continue</b>;
-</code><code id="L4323"><span class="ln">4323</span>                        }
-</code><code id="L4324"><span class="ln">4324</span>                        <b>if</b> (!istotal &amp;&amp; !subpath) {
-</code><code id="L4325"><span class="ln">4325</span>                            point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
-</code><code id="L4326"><span class="ln">4326</span>                            <b>return</b> {x: point.x, y: point.y, alpha: point.alpha};
-</code><code id="L4327"><span class="ln">4327</span>                        }
-</code><code id="L4328"><span class="ln">4328</span>                    }
-</code><code id="L4329"><span class="ln">4329</span>                    len += l;
-</code><code id="L4330"><span class="ln">4330</span>                    x<span class="s"> = </span>+p[<span class="d">5</span>];
-</code><code id="L4331"><span class="ln">4331</span>                    y<span class="s"> = </span>+p[<span class="d">6</span>];
-</code><code id="L4332"><span class="ln">4332</span>                }
-</code><code id="L4333"><span class="ln">4333</span>                sp += p.shift()<span class="s"> + </span>p;
-</code><code id="L4334"><span class="ln">4334</span>            }
-</code><code id="L4335"><span class="ln">4335</span>            subpaths.end<span class="s"> = </span>sp;
-</code><code id="L4336"><span class="ln">4336</span>            point<span class="s"> = </span>istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], <span class="d">1</span>);
-</code><code id="L4337"><span class="ln">4337</span>            point.alpha &amp;&amp; (point<span class="s"> = </span>{x: point.x, y: point.y, alpha: point.alpha});
-</code><code id="L4338"><span class="ln">4338</span>            <b>return</b> point;
-</code><code id="L4339"><span class="ln">4339</span>        };
-</code><code id="L4340"><span class="ln">4340</span>    };
-</code><code id="L4341"><span class="ln">4341</span>    <b>var</b> getTotalLength<span class="s"> = </span>getLengthFactory(<span class="d">1</span>),
-</code><code id="L4342"><span class="ln">4342</span>        getPointAtLength<span class="s"> = </span>getLengthFactory(),
-</code><code id="L4343"><span class="ln">4343</span>        getSubpathsAtLength<span class="s"> = </span>getLengthFactory(<span class="d">0</span>, <span class="d">1</span>);
-</code><code id="L4344"><span class="ln">4344</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4345"><span class="ln">4345</span><span class="c">    <span class="s"> * </span>Raphael.getTotalLength
-</span></code><code id="L4346"><span class="ln">4346</span><span class="c">     [ method ]
+</code><code id="L4170"><span class="ln">4170</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4171"><span class="ln">4171</span><span class="c">    <span class="s"> * </span>Element.onDragOver
+</span></code><code id="L4172"><span class="ln">4172</span><span class="c">     [ method ]
+</span></code><code id="L4173"><span class="ln">4173</span><span class="c">     **
+</span></code><code id="L4174"><span class="ln">4174</span><span class="c">    <span class="s"> * </span>Shortcut <b>for</b> assigning event handler <b>for</b> `drag.over.&lt;id>` event, where id is id of the element (see @Element.id).
+</span></code><code id="L4175"><span class="ln">4175</span><span class="c">     > Parameters
+</span></code><code id="L4176"><span class="ln">4176</span><span class="c">    <span class="s"> - </span>f (<b>function</b>) handler <b>for</b> event
+</span></code><code id="L4177"><span class="ln">4177</span><span class="c">    \*/</span>
+</code><code id="L4178"><span class="ln">4178</span>    elproto.onDragOver<span class="s"> = </span><b>function</b> (f) {
+</code><code id="L4179"><span class="ln">4179</span>        f ? eve.on(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"drag.over."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L4180"><span class="ln">4180</span>    };
+</code><code id="L4181"><span class="ln">4181</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4182"><span class="ln">4182</span><span class="c">    <span class="s"> * </span>Element.undrag
+</span></code><code id="L4183"><span class="ln">4183</span><span class="c">     [ method ]
+</span></code><code id="L4184"><span class="ln">4184</span><span class="c">     **
+</span></code><code id="L4185"><span class="ln">4185</span><span class="c">    <span class="s"> * </span>Removes all drag event handlers from given element.
+</span></code><code id="L4186"><span class="ln">4186</span><span class="c">    \*/</span>
+</code><code id="L4187"><span class="ln">4187</span>    elproto.undrag<span class="s"> = </span><b>function</b> () {
+</code><code id="L4188"><span class="ln">4188</span>        <b>var</b> i<span class="s"> = </span>drag.length;
+</code><code id="L4189"><span class="ln">4189</span>        <b>while</b> (i--) <b>if</b> (drag[i].el<span class="s"> == </span><b>this</b>) {
+</code><code id="L4190"><span class="ln">4190</span>            R.unmousedown(drag[i].start);
+</code><code id="L4191"><span class="ln">4191</span>            drag.splice(i++, <span class="d">1</span>);
+</code><code id="L4192"><span class="ln">4192</span>            eve.unbind(<i>"drag.*."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L4193"><span class="ln">4193</span>        }
+</code><code id="L4194"><span class="ln">4194</span>        !drag.length<span class="s"> &amp;&amp; </span>R.unmousemove(dragMove).unmouseup(dragUp);
+</code><code id="L4195"><span class="ln">4195</span>    };
+</code><code id="L4196"><span class="ln">4196</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4197"><span class="ln">4197</span><span class="c">    <span class="s"> * </span>Paper.circle
+</span></code><code id="L4198"><span class="ln">4198</span><span class="c">     [ method ]
+</span></code><code id="L4199"><span class="ln">4199</span><span class="c">     **
+</span></code><code id="L4200"><span class="ln">4200</span><span class="c">    <span class="s"> * </span>Draws a circle.
+</span></code><code id="L4201"><span class="ln">4201</span><span class="c">     **
+</span></code><code id="L4202"><span class="ln">4202</span><span class="c">     > Parameters
+</span></code><code id="L4203"><span class="ln">4203</span><span class="c">     **
+</span></code><code id="L4204"><span class="ln">4204</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the centre
+</span></code><code id="L4205"><span class="ln">4205</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the centre
+</span></code><code id="L4206"><span class="ln">4206</span><span class="c">    <span class="s"> - </span>r (number) radius
+</span></code><code id="L4207"><span class="ln">4207</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “circle”
+</span></code><code id="L4208"><span class="ln">4208</span><span class="c">     **
+</span></code><code id="L4209"><span class="ln">4209</span><span class="c">     > Usage
+</span></code><code id="L4210"><span class="ln">4210</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
+</span></code><code id="L4211"><span class="ln">4211</span><span class="c">    \*/</span>
+</code><code id="L4212"><span class="ln">4212</span>    paperproto.circle<span class="s"> = </span><b>function</b> (x, y, r) {
+</code><code id="L4213"><span class="ln">4213</span>        <b>return</b> theCircle(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L4214"><span class="ln">4214</span>    };
+</code><code id="L4215"><span class="ln">4215</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4216"><span class="ln">4216</span><span class="c">    <span class="s"> * </span>Paper.rect
+</span></code><code id="L4217"><span class="ln">4217</span><span class="c">     [ method ]
+</span></code><code id="L4218"><span class="ln">4218</span><span class="c">     *
+</span></code><code id="L4219"><span class="ln">4219</span><span class="c">    <span class="s"> * </span>Draws a rectangle.
+</span></code><code id="L4220"><span class="ln">4220</span><span class="c">     **
+</span></code><code id="L4221"><span class="ln">4221</span><span class="c">     > Parameters
+</span></code><code id="L4222"><span class="ln">4222</span><span class="c">     **
+</span></code><code id="L4223"><span class="ln">4223</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the top left corner
+</span></code><code id="L4224"><span class="ln">4224</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the top left corner
+</span></code><code id="L4225"><span class="ln">4225</span><span class="c">    <span class="s"> - </span>width (number) width
+</span></code><code id="L4226"><span class="ln">4226</span><span class="c">    <span class="s"> - </span>height (number) height
+</span></code><code id="L4227"><span class="ln">4227</span><span class="c">    <span class="s"> - </span>r (number) @optional radius <b>for</b> rounded corners, <b>default</b> is <span class="d">0</span>
+</span></code><code id="L4228"><span class="ln">4228</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “rect”
+</span></code><code id="L4229"><span class="ln">4229</span><span class="c">     **
+</span></code><code id="L4230"><span class="ln">4230</span><span class="c">     > Usage
+</span></code><code id="L4231"><span class="ln">4231</span><span class="c">    <span class="s"> | </span><span class="c">// regular rectangle</span>
+</span></code><code id="L4232"><span class="ln">4232</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">10</span>, <span class="d">50</span>, <span class="d">50</span>);
+</span></code><code id="L4233"><span class="ln">4233</span><span class="c">    <span class="s"> | </span><span class="c">// rectangle <b>with</b> rounded corners</span>
+</span></code><code id="L4234"><span class="ln">4234</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
+</span></code><code id="L4235"><span class="ln">4235</span><span class="c">    \*/</span>
+</code><code id="L4236"><span class="ln">4236</span>    paperproto.rect<span class="s"> = </span><b>function</b> (x, y, w, h, r) {
+</code><code id="L4237"><span class="ln">4237</span>        <b>return</b> theRect(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>, r<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L4238"><span class="ln">4238</span>    };
+</code><code id="L4239"><span class="ln">4239</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4240"><span class="ln">4240</span><span class="c">    <span class="s"> * </span>Paper.ellipse
+</span></code><code id="L4241"><span class="ln">4241</span><span class="c">     [ method ]
+</span></code><code id="L4242"><span class="ln">4242</span><span class="c">     **
+</span></code><code id="L4243"><span class="ln">4243</span><span class="c">    <span class="s"> * </span>Draws an ellipse.
+</span></code><code id="L4244"><span class="ln">4244</span><span class="c">     **
+</span></code><code id="L4245"><span class="ln">4245</span><span class="c">     > Parameters
+</span></code><code id="L4246"><span class="ln">4246</span><span class="c">     **
+</span></code><code id="L4247"><span class="ln">4247</span><span class="c">    <span class="s"> - </span>x (number) x coordinate of the centre
+</span></code><code id="L4248"><span class="ln">4248</span><span class="c">    <span class="s"> - </span>y (number) y coordinate of the centre
+</span></code><code id="L4249"><span class="ln">4249</span><span class="c">    <span class="s"> - </span>rx (number) horisontal radius
+</span></code><code id="L4250"><span class="ln">4250</span><span class="c">    <span class="s"> - </span>ry (number) vertical radius
+</span></code><code id="L4251"><span class="ln">4251</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
+</span></code><code id="L4252"><span class="ln">4252</span><span class="c">     **
+</span></code><code id="L4253"><span class="ln">4253</span><span class="c">     > Usage
+</span></code><code id="L4254"><span class="ln">4254</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
+</span></code><code id="L4255"><span class="ln">4255</span><span class="c">    \*/</span>
+</code><code id="L4256"><span class="ln">4256</span>    paperproto.ellipse<span class="s"> = </span><b>function</b> (x, y, rx, ry) {
+</code><code id="L4257"><span class="ln">4257</span>        <b>return</b> theEllipse(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, rx<span class="s"> || </span><span class="d">0</span>, ry<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L4258"><span class="ln">4258</span>    };
+</code><code id="L4259"><span class="ln">4259</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4260"><span class="ln">4260</span><span class="c">    <span class="s"> * </span>Paper.path
+</span></code><code id="L4261"><span class="ln">4261</span><span class="c">     [ method ]
+</span></code><code id="L4262"><span class="ln">4262</span><span class="c">     **
+</span></code><code id="L4263"><span class="ln">4263</span><span class="c">    <span class="s"> * </span>Creates a path element by given path data string.
+</span></code><code id="L4264"><span class="ln">4264</span><span class="c">     **
+</span></code><code id="L4265"><span class="ln">4265</span><span class="c">     > Parameters
+</span></code><code id="L4266"><span class="ln">4266</span><span class="c">     **
+</span></code><code id="L4267"><span class="ln">4267</span><span class="c">    <span class="s"> - </span>pathString (string) path data <b>in</b> SVG path string format.
+</span></code><code id="L4268"><span class="ln">4268</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “ellipse”
+</span></code><code id="L4269"><span class="ln">4269</span><span class="c">     # Details of a path<i>'s data attribute'</i>s format are described <b>in</b> the &lt;a href=<i>"http:<span class="c">//www.w3.org/TR/SVG/paths.html#PathData"</i>>SVG specification&lt;/a>.</span>
+</span></code><code id="L4270"><span class="ln">4270</span><span class="c">     **
+</span></code><code id="L4271"><span class="ln">4271</span><span class="c">     > Usage
+</span></code><code id="L4272"><span class="ln">4272</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.path(<i>"M10 10L90 <span class="d">90</span>"</i>);
+</span></code><code id="L4273"><span class="ln">4273</span><span class="c">    <span class="s"> | </span><span class="c">// draw a diagonal line:</span>
+</span></code><code id="L4274"><span class="ln">4274</span><span class="c">    <span class="s"> | </span><span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
+</span></code><code id="L4275"><span class="ln">4275</span><span class="c">    \*/</span>
+</code><code id="L4276"><span class="ln">4276</span>    paperproto.path<span class="s"> = </span><b>function</b> (pathString) {
+</code><code id="L4277"><span class="ln">4277</span>        pathString<span class="s"> &amp;&amp; </span>!R.is(pathString, string)<span class="s"> &amp;&amp; </span>!R.is(pathString[<span class="d">0</span>], array)<span class="s"> &amp;&amp; </span>(pathString += E);
+</code><code id="L4278"><span class="ln">4278</span>        <b>return</b> thePath(R.format[apply](R, arguments), <b>this</b>);
+</code><code id="L4279"><span class="ln">4279</span>    };
+</code><code id="L4280"><span class="ln">4280</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4281"><span class="ln">4281</span><span class="c">    <span class="s"> * </span>Paper.image
+</span></code><code id="L4282"><span class="ln">4282</span><span class="c">     [ method ]
+</span></code><code id="L4283"><span class="ln">4283</span><span class="c">     **
+</span></code><code id="L4284"><span class="ln">4284</span><span class="c">    <span class="s"> * </span>Embeds an image into the surface.
+</span></code><code id="L4285"><span class="ln">4285</span><span class="c">     **
+</span></code><code id="L4286"><span class="ln">4286</span><span class="c">     > Parameters
+</span></code><code id="L4287"><span class="ln">4287</span><span class="c">     **
+</span></code><code id="L4288"><span class="ln">4288</span><span class="c">    <span class="s"> - </span>src (string) URI of the source image
+</span></code><code id="L4289"><span class="ln">4289</span><span class="c">    <span class="s"> - </span>x (number) x coordinate position
+</span></code><code id="L4290"><span class="ln">4290</span><span class="c">    <span class="s"> - </span>y (number) y coordinate position
+</span></code><code id="L4291"><span class="ln">4291</span><span class="c">    <span class="s"> - </span>width (number) width of the image
+</span></code><code id="L4292"><span class="ln">4292</span><span class="c">    <span class="s"> - </span>height (number) height of the image
+</span></code><code id="L4293"><span class="ln">4293</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “image”
+</span></code><code id="L4294"><span class="ln">4294</span><span class="c">     **
+</span></code><code id="L4295"><span class="ln">4295</span><span class="c">     > Usage
+</span></code><code id="L4296"><span class="ln">4296</span><span class="c">    <span class="s"> | </span><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
+</span></code><code id="L4297"><span class="ln">4297</span><span class="c">    \*/</span>
+</code><code id="L4298"><span class="ln">4298</span>    paperproto.image<span class="s"> = </span><b>function</b> (src, x, y, w, h) {
+</code><code id="L4299"><span class="ln">4299</span>        <b>return</b> theImage(<b>this</b>, src<span class="s"> || </span><i>"about:blank"</i>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, w<span class="s"> || </span><span class="d">0</span>, h<span class="s"> || </span><span class="d">0</span>);
+</code><code id="L4300"><span class="ln">4300</span>    };
+</code><code id="L4301"><span class="ln">4301</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4302"><span class="ln">4302</span><span class="c">    <span class="s"> * </span>Paper.text
+</span></code><code id="L4303"><span class="ln">4303</span><span class="c">     [ method ]
+</span></code><code id="L4304"><span class="ln">4304</span><span class="c">     **
+</span></code><code id="L4305"><span class="ln">4305</span><span class="c">    <span class="s"> * </span>Draws a text string. If you need line breaks, put “\n” <b>in</b> the string.
+</span></code><code id="L4306"><span class="ln">4306</span><span class="c">     **
+</span></code><code id="L4307"><span class="ln">4307</span><span class="c">     > Parameters
+</span></code><code id="L4308"><span class="ln">4308</span><span class="c">     **
+</span></code><code id="L4309"><span class="ln">4309</span><span class="c">    <span class="s"> - </span>x (number) x coordinate position
+</span></code><code id="L4310"><span class="ln">4310</span><span class="c">    <span class="s"> - </span>y (number) y coordinate position
+</span></code><code id="L4311"><span class="ln">4311</span><span class="c">    <span class="s"> - </span>text (string) The text string to draw
+</span></code><code id="L4312"><span class="ln">4312</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object <b>with</b> type “text”
+</span></code><code id="L4313"><span class="ln">4313</span><span class="c">     **
+</span></code><code id="L4314"><span class="ln">4314</span><span class="c">     > Usage
+</span></code><code id="L4315"><span class="ln">4315</span><span class="c">    <span class="s"> | </span><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
+</span></code><code id="L4316"><span class="ln">4316</span><span class="c">    \*/</span>
+</code><code id="L4317"><span class="ln">4317</span>    paperproto.text<span class="s"> = </span><b>function</b> (x, y, text) {
+</code><code id="L4318"><span class="ln">4318</span>        <b>return</b> theText(<b>this</b>, x<span class="s"> || </span><span class="d">0</span>, y<span class="s"> || </span><span class="d">0</span>, Str(text));
+</code><code id="L4319"><span class="ln">4319</span>    };
+</code><code id="L4320"><span class="ln">4320</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4321"><span class="ln">4321</span><span class="c">    <span class="s"> * </span>Paper.set
+</span></code><code id="L4322"><span class="ln">4322</span><span class="c">     [ method ]
+</span></code><code id="L4323"><span class="ln">4323</span><span class="c">     **
+</span></code><code id="L4324"><span class="ln">4324</span><span class="c">    <span class="s"> * </span>Creates array-like object to keep and operate couple of elements at once.
+</span></code><code id="L4325"><span class="ln">4325</span><span class="c">    <span class="s"> * </span>Warning: it doesn’t create any elements <b>for</b> itself <b>in</b> the page.
+</span></code><code id="L4326"><span class="ln">4326</span><span class="c">    <span class="s"> = </span>(object) array-like object that represents set of elements
+</span></code><code id="L4327"><span class="ln">4327</span><span class="c">     **
+</span></code><code id="L4328"><span class="ln">4328</span><span class="c">     > Usage
+</span></code><code id="L4329"><span class="ln">4329</span><span class="c">    <span class="s"> | </span><b>var</b> st<span class="s"> = </span>paper.set();
+</span></code><code id="L4330"><span class="ln">4330</span><span class="c">    <span class="s"> | </span>st.push(
+</span></code><code id="L4331"><span class="ln">4331</span><span class="c">    <span class="s"> | </span>    paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+</span></code><code id="L4332"><span class="ln">4332</span><span class="c">    <span class="s"> | </span>    paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+</span></code><code id="L4333"><span class="ln">4333</span><span class="c">    <span class="s"> | </span>);
+</span></code><code id="L4334"><span class="ln">4334</span><span class="c">    <span class="s"> | </span>st.attr({fill: <i>"red"</i>});
+</span></code><code id="L4335"><span class="ln">4335</span><span class="c">    \*/</span>
+</code><code id="L4336"><span class="ln">4336</span>    paperproto.set<span class="s"> = </span><b>function</b> (itemsArray) {
+</code><code id="L4337"><span class="ln">4337</span>        arguments.length > <span class="d">1</span><span class="s"> &amp;&amp; </span>(itemsArray<span class="s"> = </span>Array.prototype.splice.call(arguments, <span class="d">0</span>, arguments.length));
+</code><code id="L4338"><span class="ln">4338</span>        <b>return</b> <b>new</b> Set(itemsArray);
+</code><code id="L4339"><span class="ln">4339</span>    };
+</code><code id="L4340"><span class="ln">4340</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4341"><span class="ln">4341</span><span class="c">    <span class="s"> * </span>Paper.setSize
+</span></code><code id="L4342"><span class="ln">4342</span><span class="c">     [ method ]
+</span></code><code id="L4343"><span class="ln">4343</span><span class="c">     **
+</span></code><code id="L4344"><span class="ln">4344</span><span class="c">    <span class="s"> * </span>If you need to change dimensions of the canvas call <b>this</b> method
+</span></code><code id="L4345"><span class="ln">4345</span><span class="c">     **
+</span></code><code id="L4346"><span class="ln">4346</span><span class="c">     > Parameters
 </span></code><code id="L4347"><span class="ln">4347</span><span class="c">     **
-</span></code><code id="L4348"><span class="ln">4348</span><span class="c">    <span class="s"> * </span>Returns length of the given path <b>in</b> pixels.
-</span></code><code id="L4349"><span class="ln">4349</span><span class="c">     **
-</span></code><code id="L4350"><span class="ln">4350</span><span class="c">     > Parameters
-</span></code><code id="L4351"><span class="ln">4351</span><span class="c">     **
-</span></code><code id="L4352"><span class="ln">4352</span><span class="c">    <span class="s"> - </span>path (string) SVG path string.
-</span></code><code id="L4353"><span class="ln">4353</span><span class="c">     **
-</span></code><code id="L4354"><span class="ln">4354</span><span class="c">    <span class="s"> = </span>(number) length.
-</span></code><code id="L4355"><span class="ln">4355</span><span class="c">    \*/</span>
-</code><code id="L4356"><span class="ln">4356</span>    R.getTotalLength<span class="s"> = </span>getTotalLength;
-</code><code id="L4357"><span class="ln">4357</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4358"><span class="ln">4358</span><span class="c">    <span class="s"> * </span>Raphael.getPointAtLength
-</span></code><code id="L4359"><span class="ln">4359</span><span class="c">     [ method ]
-</span></code><code id="L4360"><span class="ln">4360</span><span class="c">     **
-</span></code><code id="L4361"><span class="ln">4361</span><span class="c">    <span class="s"> * </span>Return coordinates of the point located at the given length on the given path.
+</span></code><code id="L4348"><span class="ln">4348</span><span class="c">    <span class="s"> - </span>width (number) <b>new</b> width of the canvas
+</span></code><code id="L4349"><span class="ln">4349</span><span class="c">    <span class="s"> - </span>height (number) <b>new</b> height of the canvas
+</span></code><code id="L4350"><span class="ln">4350</span><span class="c">     > Usage
+</span></code><code id="L4351"><span class="ln">4351</span><span class="c">    <span class="s"> | </span><b>var</b> st<span class="s"> = </span>paper.set();
+</span></code><code id="L4352"><span class="ln">4352</span><span class="c">    <span class="s"> | </span>st.push(
+</span></code><code id="L4353"><span class="ln">4353</span><span class="c">    <span class="s"> | </span>    paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">5</span>),
+</span></code><code id="L4354"><span class="ln">4354</span><span class="c">    <span class="s"> | </span>    paper.circle(<span class="d">30</span>, <span class="d">10</span>, <span class="d">5</span>)
+</span></code><code id="L4355"><span class="ln">4355</span><span class="c">    <span class="s"> | </span>);
+</span></code><code id="L4356"><span class="ln">4356</span><span class="c">    <span class="s"> | </span>st.attr({fill: <i>"red"</i>});
+</span></code><code id="L4357"><span class="ln">4357</span><span class="c">    \*/</span>
+</code><code id="L4358"><span class="ln">4358</span>    paperproto.setSize<span class="s"> = </span>setSize;
+</code><code id="L4359"><span class="ln">4359</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4360"><span class="ln">4360</span><span class="c">    <span class="s"> * </span>Paper.setViewBox
+</span></code><code id="L4361"><span class="ln">4361</span><span class="c">     [ method ]
 </span></code><code id="L4362"><span class="ln">4362</span><span class="c">     **
-</span></code><code id="L4363"><span class="ln">4363</span><span class="c">     > Parameters
-</span></code><code id="L4364"><span class="ln">4364</span><span class="c">     **
-</span></code><code id="L4365"><span class="ln">4365</span><span class="c">    <span class="s"> - </span>path (string) SVG path string
-</span></code><code id="L4366"><span class="ln">4366</span><span class="c">    <span class="s"> - </span>length (number)
+</span></code><code id="L4363"><span class="ln">4363</span><span class="c">    <span class="s"> * </span>Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by 
+</span></code><code id="L4364"><span class="ln">4364</span><span class="c">    <span class="s"> * </span>specifying <b>new</b> boundaries.
+</span></code><code id="L4365"><span class="ln">4365</span><span class="c">     **
+</span></code><code id="L4366"><span class="ln">4366</span><span class="c">     > Parameters
 </span></code><code id="L4367"><span class="ln">4367</span><span class="c">     **
-</span></code><code id="L4368"><span class="ln">4368</span><span class="c">    <span class="s"> = </span>(object) representation of the point:
-</span></code><code id="L4369"><span class="ln">4369</span><span class="c">     | {
-</span></code><code id="L4370"><span class="ln">4370</span><span class="c">     |     x: <span class="c">//x coordinate,</span>
-</span></code><code id="L4371"><span class="ln">4371</span><span class="c">     |     y: <span class="c">//y coordinate,</span>
-</span></code><code id="L4372"><span class="ln">4372</span><span class="c">     |     alpha: <span class="c">//angle of derivative</span>
-</span></code><code id="L4373"><span class="ln">4373</span><span class="c">     | }
+</span></code><code id="L4368"><span class="ln">4368</span><span class="c">     x, y, w, h, fit
+</span></code><code id="L4369"><span class="ln">4369</span><span class="c">    <span class="s"> - </span>x (number) <b>new</b> x position, <b>default</b> is `<span class="d">0</span>`
+</span></code><code id="L4370"><span class="ln">4370</span><span class="c">    <span class="s"> - </span>y (number) <b>new</b> y position, <b>default</b> is `<span class="d">0</span>`
+</span></code><code id="L4371"><span class="ln">4371</span><span class="c">    <span class="s"> - </span>w (number) <b>new</b> width of the canvas
+</span></code><code id="L4372"><span class="ln">4372</span><span class="c">    <span class="s"> - </span>h (number) <b>new</b> height of the canvas
+</span></code><code id="L4373"><span class="ln">4373</span><span class="c">    <span class="s"> - </span>fit (<b>boolean</b>) `<b>true</b>` <b>if</b> you want graphics to fit into <b>new</b> boundary box
 </span></code><code id="L4374"><span class="ln">4374</span><span class="c">    \*/</span>
-</code><code id="L4375"><span class="ln">4375</span>    R.getPointAtLength<span class="s"> = </span>getPointAtLength;
+</code><code id="L4375"><span class="ln">4375</span>    paperproto.setViewBox<span class="s"> = </span>setViewBox;
 </code><code id="L4376"><span class="ln">4376</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4377"><span class="ln">4377</span><span class="c">    <span class="s"> * </span>Raphael.getSubpath
-</span></code><code id="L4378"><span class="ln">4378</span><span class="c">     [ method ]
+</span></code><code id="L4377"><span class="ln">4377</span><span class="c">    <span class="s"> * </span>Paper.top
+</span></code><code id="L4378"><span class="ln">4378</span><span class="c">     [ property ]
 </span></code><code id="L4379"><span class="ln">4379</span><span class="c">     **
-</span></code><code id="L4380"><span class="ln">4380</span><span class="c">    <span class="s"> * </span>Return subpath of a given path from given length to given length.
-</span></code><code id="L4381"><span class="ln">4381</span><span class="c">     **
-</span></code><code id="L4382"><span class="ln">4382</span><span class="c">     > Parameters
-</span></code><code id="L4383"><span class="ln">4383</span><span class="c">     **
-</span></code><code id="L4384"><span class="ln">4384</span><span class="c">    <span class="s"> - </span>path (string) SVG path string
-</span></code><code id="L4385"><span class="ln">4385</span><span class="c">    <span class="s"> - </span>from (number) position of the start of the segment
-</span></code><code id="L4386"><span class="ln">4386</span><span class="c">    <span class="s"> - </span>to (number) position of the end of the segment
-</span></code><code id="L4387"><span class="ln">4387</span><span class="c">     **
-</span></code><code id="L4388"><span class="ln">4388</span><span class="c">    <span class="s"> = </span>(string) pathstring <b>for</b> the segment
-</span></code><code id="L4389"><span class="ln">4389</span><span class="c">    \*/</span>
-</code><code id="L4390"><span class="ln">4390</span>    R.getSubpath<span class="s"> = </span><b>function</b> (path, from, to) {
-</code><code id="L4391"><span class="ln">4391</span>        <b>if</b> (abs(<b>this</b>.getTotalLength(path)<span class="s"> - </span>to) &lt; <span class="d">1e-6</span>) {
-</code><code id="L4392"><span class="ln">4392</span>            <b>return</b> getSubpathsAtLength(path, from).end;
-</code><code id="L4393"><span class="ln">4393</span>        }
-</code><code id="L4394"><span class="ln">4394</span>        <b>var</b> a<span class="s"> = </span>getSubpathsAtLength(path, to, <span class="d">1</span>);
-</code><code id="L4395"><span class="ln">4395</span>        <b>return</b> from ? getSubpathsAtLength(a, from).end : a;
-</code><code id="L4396"><span class="ln">4396</span>    };
-</code><code id="L4397"><span class="ln">4397</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4398"><span class="ln">4398</span><span class="c">    <span class="s"> * </span>Element.getTotalLength
-</span></code><code id="L4399"><span class="ln">4399</span><span class="c">     [ method ]
-</span></code><code id="L4400"><span class="ln">4400</span><span class="c">     **
-</span></code><code id="L4401"><span class="ln">4401</span><span class="c">    <span class="s"> * </span>Returns length of the path <b>in</b> pixels. Only works <b>for</b> element of “path” type.
-</span></code><code id="L4402"><span class="ln">4402</span><span class="c">    <span class="s"> = </span>(number) length.
-</span></code><code id="L4403"><span class="ln">4403</span><span class="c">    \*/</span>
-</code><code id="L4404"><span class="ln">4404</span>    elproto.getTotalLength<span class="s"> = </span><b>function</b> () {
-</code><code id="L4405"><span class="ln">4405</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
-</code><code id="L4406"><span class="ln">4406</span>        <b>if</b> (<b>this</b>.node.getTotalLength) {
-</code><code id="L4407"><span class="ln">4407</span>            <b>return</b> <b>this</b>.node.getTotalLength();
-</code><code id="L4408"><span class="ln">4408</span>        }
-</code><code id="L4409"><span class="ln">4409</span>        <b>return</b> getTotalLength(<b>this</b>.attrs.path);
-</code><code id="L4410"><span class="ln">4410</span>    };
-</code><code id="L4411"><span class="ln">4411</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4412"><span class="ln">4412</span><span class="c">    <span class="s"> * </span>Element.getPointAtLength
-</span></code><code id="L4413"><span class="ln">4413</span><span class="c">     [ method ]
+</span></code><code id="L4380"><span class="ln">4380</span><span class="c">    <span class="s"> * </span>Points to the topmost element on the paper
+</span></code><code id="L4381"><span class="ln">4381</span><span class="c">    \*/</span>
+</code><code id="L4382"><span class="ln">4382</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4383"><span class="ln">4383</span><span class="c">    <span class="s"> * </span>Paper.bottom
+</span></code><code id="L4384"><span class="ln">4384</span><span class="c">     [ property ]
+</span></code><code id="L4385"><span class="ln">4385</span><span class="c">     **
+</span></code><code id="L4386"><span class="ln">4386</span><span class="c">    <span class="s"> * </span>Points to the bottom element on the paper
+</span></code><code id="L4387"><span class="ln">4387</span><span class="c">    \*/</span>
+</code><code id="L4388"><span class="ln">4388</span>    paperproto.top<span class="s"> = </span>paperproto.bottom<span class="s"> = </span><b>null</b>;
+</code><code id="L4389"><span class="ln">4389</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4390"><span class="ln">4390</span><span class="c">    <span class="s"> * </span>Paper.raphael
+</span></code><code id="L4391"><span class="ln">4391</span><span class="c">     [ property ]
+</span></code><code id="L4392"><span class="ln">4392</span><span class="c">     **
+</span></code><code id="L4393"><span class="ln">4393</span><span class="c">    <span class="s"> * </span>Points to the @Raphael object/<b>function</b>
+</span></code><code id="L4394"><span class="ln">4394</span><span class="c">    \*/</span>
+</code><code id="L4395"><span class="ln">4395</span>    paperproto.raphael<span class="s"> = </span>R;
+</code><code id="L4396"><span class="ln">4396</span>    <b>var</b> getOffset<span class="s"> = </span><b>function</b> (elem) {
+</code><code id="L4397"><span class="ln">4397</span>        <b>var</b> box<span class="s"> = </span>elem.getBoundingClientRect(),
+</code><code id="L4398"><span class="ln">4398</span>            doc<span class="s"> = </span>elem.ownerDocument,
+</code><code id="L4399"><span class="ln">4399</span>            body<span class="s"> = </span>doc.body,
+</code><code id="L4400"><span class="ln">4400</span>            docElem<span class="s"> = </span>doc.documentElement,
+</code><code id="L4401"><span class="ln">4401</span>            clientTop<span class="s"> = </span>docElem.clientTop<span class="s"> || </span>body.clientTop<span class="s"> || </span><span class="d">0</span>, clientLeft<span class="s"> = </span>docElem.clientLeft<span class="s"> || </span>body.clientLeft<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4402"><span class="ln">4402</span>            top <span class="s"> = </span>box.top <span class="s"> + </span>(g.win.pageYOffset<span class="s"> || </span>docElem.scrollTop<span class="s"> || </span>body.scrollTop )<span class="s"> - </span>clientTop,
+</code><code id="L4403"><span class="ln">4403</span>            left<span class="s"> = </span>box.left<span class="s"> + </span>(g.win.pageXOffset<span class="s"> || </span>docElem.scrollLeft<span class="s"> || </span>body.scrollLeft)<span class="s"> - </span>clientLeft;
+</code><code id="L4404"><span class="ln">4404</span>        <b>return</b> {
+</code><code id="L4405"><span class="ln">4405</span>            y: top,
+</code><code id="L4406"><span class="ln">4406</span>            x: left
+</code><code id="L4407"><span class="ln">4407</span>        };
+</code><code id="L4408"><span class="ln">4408</span>    };
+</code><code id="L4409"><span class="ln">4409</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4410"><span class="ln">4410</span><span class="c">    <span class="s"> * </span>Paper.getElementByPoint
+</span></code><code id="L4411"><span class="ln">4411</span><span class="c">     [ method ]
+</span></code><code id="L4412"><span class="ln">4412</span><span class="c">     **
+</span></code><code id="L4413"><span class="ln">4413</span><span class="c">    <span class="s"> * </span>Returns you topmost element under given point.
 </span></code><code id="L4414"><span class="ln">4414</span><span class="c">     **
-</span></code><code id="L4415"><span class="ln">4415</span><span class="c">    <span class="s"> * </span>Return coordinates of the point located at the given length on the given path. Only works <b>for</b> element of “path” type.
-</span></code><code id="L4416"><span class="ln">4416</span><span class="c">     **
-</span></code><code id="L4417"><span class="ln">4417</span><span class="c">     > Parameters
-</span></code><code id="L4418"><span class="ln">4418</span><span class="c">     **
-</span></code><code id="L4419"><span class="ln">4419</span><span class="c">    <span class="s"> - </span>length (number)
-</span></code><code id="L4420"><span class="ln">4420</span><span class="c">     **
-</span></code><code id="L4421"><span class="ln">4421</span><span class="c">    <span class="s"> = </span>(object) representation of the point:
-</span></code><code id="L4422"><span class="ln">4422</span><span class="c">     | {
-</span></code><code id="L4423"><span class="ln">4423</span><span class="c">     |     x: <span class="c">//x coordinate,</span>
-</span></code><code id="L4424"><span class="ln">4424</span><span class="c">     |     y: <span class="c">//y coordinate,</span>
-</span></code><code id="L4425"><span class="ln">4425</span><span class="c">     |     alpha: <span class="c">//angle of derivative</span>
-</span></code><code id="L4426"><span class="ln">4426</span><span class="c">     | }
-</span></code><code id="L4427"><span class="ln">4427</span><span class="c">    \*/</span>
-</code><code id="L4428"><span class="ln">4428</span>    elproto.getPointAtLength<span class="s"> = </span><b>function</b> (length) {
-</code><code id="L4429"><span class="ln">4429</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
-</code><code id="L4430"><span class="ln">4430</span>        <b>return</b> getPointAtLength(<b>this</b>.attrs.path, length);
-</code><code id="L4431"><span class="ln">4431</span>    };
-</code><code id="L4432"><span class="ln">4432</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4433"><span class="ln">4433</span><span class="c">    <span class="s"> * </span>Element.getSubpath
-</span></code><code id="L4434"><span class="ln">4434</span><span class="c">     [ method ]
-</span></code><code id="L4435"><span class="ln">4435</span><span class="c">     **
-</span></code><code id="L4436"><span class="ln">4436</span><span class="c">    <span class="s"> * </span>Return subpath of a given element from given length to given length. Only works <b>for</b> element of “path” type.
-</span></code><code id="L4437"><span class="ln">4437</span><span class="c">     **
-</span></code><code id="L4438"><span class="ln">4438</span><span class="c">     > Parameters
-</span></code><code id="L4439"><span class="ln">4439</span><span class="c">     **
-</span></code><code id="L4440"><span class="ln">4440</span><span class="c">    <span class="s"> - </span>from (number) position of the start of the segment
-</span></code><code id="L4441"><span class="ln">4441</span><span class="c">    <span class="s"> - </span>to (number) position of the end of the segment
-</span></code><code id="L4442"><span class="ln">4442</span><span class="c">     **
-</span></code><code id="L4443"><span class="ln">4443</span><span class="c">    <span class="s"> = </span>(string) pathstring <b>for</b> the segment
-</span></code><code id="L4444"><span class="ln">4444</span><span class="c">    \*/</span>
-</code><code id="L4445"><span class="ln">4445</span>    elproto.getSubpath<span class="s"> = </span><b>function</b> (from, to) {
-</code><code id="L4446"><span class="ln">4446</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
-</code><code id="L4447"><span class="ln">4447</span>        <b>return</b> R.getSubpath(<b>this</b>.attrs.path, from, to);
-</code><code id="L4448"><span class="ln">4448</span>    };
-</code><code id="L4449"><span class="ln">4449</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4450"><span class="ln">4450</span><span class="c">    <span class="s"> * </span>Raphael.easing_formulas
-</span></code><code id="L4451"><span class="ln">4451</span><span class="c">     [ property ]
-</span></code><code id="L4452"><span class="ln">4452</span><span class="c">     **
-</span></code><code id="L4453"><span class="ln">4453</span><span class="c">    <span class="s"> * </span>Object that contains easing formulas <b>for</b> animation. You could extend it <b>with</b> your owns. By <b>default</b> it has following list of easing:
-</span></code><code id="L4454"><span class="ln">4454</span><span class="c">     # &lt;ul>
-</span></code><code id="L4455"><span class="ln">4455</span><span class="c">     #     &lt;li>“linear”&lt;/li>
-</span></code><code id="L4456"><span class="ln">4456</span><span class="c">     #     &lt;li>“&lt;” or “easeIn” or “ease-<b>in</b>”&lt;/li>
-</span></code><code id="L4457"><span class="ln">4457</span><span class="c">     #     &lt;li>“>” or “easeOut” or “ease-out”&lt;/li>
-</span></code><code id="L4458"><span class="ln">4458</span><span class="c">     #     &lt;li>“&lt;>” or “easeInOut” or “ease-<b>in</b>-out”&lt;/li>
-</span></code><code id="L4459"><span class="ln">4459</span><span class="c">     #     &lt;li>“backIn” or “back-<b>in</b>”&lt;/li>
-</span></code><code id="L4460"><span class="ln">4460</span><span class="c">     #     &lt;li>“backOut” or “back-out”&lt;/li>
-</span></code><code id="L4461"><span class="ln">4461</span><span class="c">     #     &lt;li>“elastic”&lt;/li>
-</span></code><code id="L4462"><span class="ln">4462</span><span class="c">     #     &lt;li>“bounce”&lt;/li>
-</span></code><code id="L4463"><span class="ln">4463</span><span class="c">     # &lt;/ul>
-</span></code><code id="L4464"><span class="ln">4464</span><span class="c">     # &lt;p>See also &lt;a href=<i>"http:<span class="c">//raphaeljs.com/easing.html"</i>>Easing demo&lt;/a>.&lt;/p></span>
-</span></code><code id="L4465"><span class="ln">4465</span><span class="c">    \*/</span>
-</code><code id="L4466"><span class="ln">4466</span>    <b>var</b> ef<span class="s"> = </span>R.easing_formulas<span class="s"> = </span>{
-</code><code id="L4467"><span class="ln">4467</span>        linear: <b>function</b> (n) {
-</code><code id="L4468"><span class="ln">4468</span>            <b>return</b> n;
-</code><code id="L4469"><span class="ln">4469</span>        },
-</code><code id="L4470"><span class="ln">4470</span>        <i>"&lt;"</i>: <b>function</b> (n) {
-</code><code id="L4471"><span class="ln">4471</span>            <b>return</b> pow(n, <span class="d">1.7</span>);
-</code><code id="L4472"><span class="ln">4472</span>        },
-</code><code id="L4473"><span class="ln">4473</span>        <i>">"</i>: <b>function</b> (n) {
-</code><code id="L4474"><span class="ln">4474</span>            <b>return</b> pow(n, <span class="d">.48</span>);
-</code><code id="L4475"><span class="ln">4475</span>        },
-</code><code id="L4476"><span class="ln">4476</span>        <i>"&lt;>"</i>: <b>function</b> (n) {
-</code><code id="L4477"><span class="ln">4477</span>            <b>var</b> q<span class="s"> = </span><span class="d">.48</span><span class="s"> - </span>n<span class="s"> / </span><span class="d">1.04</span>,
-</code><code id="L4478"><span class="ln">4478</span>                Q<span class="s"> = </span>math.sqrt(<span class="d">.1734</span><span class="s"> + </span>q<span class="s"> * </span>q),
-</code><code id="L4479"><span class="ln">4479</span>                x<span class="s"> = </span>Q<span class="s"> - </span>q,
-</code><code id="L4480"><span class="ln">4480</span>                X<span class="s"> = </span>pow(abs(x), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(x &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
-</code><code id="L4481"><span class="ln">4481</span>                y<span class="s"> = </span>-Q<span class="s"> - </span>q,
-</code><code id="L4482"><span class="ln">4482</span>                Y<span class="s"> = </span>pow(abs(y), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(y &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
-</code><code id="L4483"><span class="ln">4483</span>                t<span class="s"> = </span>X<span class="s"> + </span>Y<span class="s"> + </span><span class="d">.5</span>;
-</code><code id="L4484"><span class="ln">4484</span>            <b>return</b> (<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>t;
-</code><code id="L4485"><span class="ln">4485</span>        },
-</code><code id="L4486"><span class="ln">4486</span>        backIn: <b>function</b> (n) {
-</code><code id="L4487"><span class="ln">4487</span>            <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
-</code><code id="L4488"><span class="ln">4488</span>            <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> - </span>s);
-</code><code id="L4489"><span class="ln">4489</span>        },
-</code><code id="L4490"><span class="ln">4490</span>        backOut: <b>function</b> (n) {
-</code><code id="L4491"><span class="ln">4491</span>            n<span class="s"> = </span>n<span class="s"> - </span><span class="d">1</span>;
-</code><code id="L4492"><span class="ln">4492</span>            <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
-</code><code id="L4493"><span class="ln">4493</span>            <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> + </span>s)<span class="s"> + </span><span class="d">1</span>;
-</code><code id="L4494"><span class="ln">4494</span>        },
-</code><code id="L4495"><span class="ln">4495</span>        elastic: <b>function</b> (n) {
-</code><code id="L4496"><span class="ln">4496</span>            <b>if</b> (n<span class="s"> == </span>!!n) {
-</code><code id="L4497"><span class="ln">4497</span>                <b>return</b> n;
-</code><code id="L4498"><span class="ln">4498</span>            }
-</code><code id="L4499"><span class="ln">4499</span>            <b>return</b> pow(<span class="d">2</span>, -<span class="d">10</span><span class="s"> * </span>n)<span class="s"> * </span>math.sin((n<span class="s"> - </span><span class="d">.075</span>)<span class="s"> * </span>(<span class="d">2</span><span class="s"> * </span>PI)<span class="s"> / </span><span class="d">.3</span>)<span class="s"> + </span><span class="d">1</span>;
-</code><code id="L4500"><span class="ln">4500</span>        },
-</code><code id="L4501"><span class="ln">4501</span>        bounce: <b>function</b> (n) {
-</code><code id="L4502"><span class="ln">4502</span>            <b>var</b> s<span class="s"> = </span><span class="d">7.5625</span>,
-</code><code id="L4503"><span class="ln">4503</span>                p<span class="s"> = </span><span class="d">2.75</span>,
-</code><code id="L4504"><span class="ln">4504</span>                l;
-</code><code id="L4505"><span class="ln">4505</span>            <b>if</b> (n &lt; (<span class="d">1</span><span class="s"> / </span>p)) {
-</code><code id="L4506"><span class="ln">4506</span>                l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n;
-</code><code id="L4507"><span class="ln">4507</span>            } <b>else</b> {
-</code><code id="L4508"><span class="ln">4508</span>                <b>if</b> (n &lt; (<span class="d">2</span><span class="s"> / </span>p)) {
-</code><code id="L4509"><span class="ln">4509</span>                    n -= (<span class="d">1.5</span><span class="s"> / </span>p);
-</code><code id="L4510"><span class="ln">4510</span>                    l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.75</span>;
-</code><code id="L4511"><span class="ln">4511</span>                } <b>else</b> {
-</code><code id="L4512"><span class="ln">4512</span>                    <b>if</b> (n &lt; (<span class="d">2.5</span><span class="s"> / </span>p)) {
-</code><code id="L4513"><span class="ln">4513</span>                        n -= (<span class="d">2.25</span><span class="s"> / </span>p);
-</code><code id="L4514"><span class="ln">4514</span>                        l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.9375</span>;
-</code><code id="L4515"><span class="ln">4515</span>                    } <b>else</b> {
-</code><code id="L4516"><span class="ln">4516</span>                        n -= (<span class="d">2.625</span><span class="s"> / </span>p);
-</code><code id="L4517"><span class="ln">4517</span>                        l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.984375</span>;
-</code><code id="L4518"><span class="ln">4518</span>                    }
-</code><code id="L4519"><span class="ln">4519</span>                }
-</code><code id="L4520"><span class="ln">4520</span>            }
-</code><code id="L4521"><span class="ln">4521</span>            <b>return</b> l;
-</code><code id="L4522"><span class="ln">4522</span>        }
-</code><code id="L4523"><span class="ln">4523</span>    };
-</code><code id="L4524"><span class="ln">4524</span>    ef.easeIn<span class="s"> = </span>ef[<i>"ease-<b>in</b>"</i>]<span class="s"> = </span>ef[<i>"&lt;"</i>];
-</code><code id="L4525"><span class="ln">4525</span>    ef.easeOut<span class="s"> = </span>ef[<i>"ease-out"</i>]<span class="s"> = </span>ef[<i>">"</i>];
-</code><code id="L4526"><span class="ln">4526</span>    ef.easeInOut<span class="s"> = </span>ef[<i>"ease-<b>in</b>-out"</i>]<span class="s"> = </span>ef[<i>"&lt;>"</i>];
-</code><code id="L4527"><span class="ln">4527</span>    ef[<i>"back-<b>in</b>"</i>]<span class="s"> = </span>ef.backIn;
-</code><code id="L4528"><span class="ln">4528</span>    ef[<i>"back-out"</i>]<span class="s"> = </span>ef.backOut;
-</code><code id="L4529"><span class="ln">4529</span>
-</code><code id="L4530"><span class="ln">4530</span>    <b>var</b> animationElements<span class="s"> = </span>[],
-</code><code id="L4531"><span class="ln">4531</span>        requestAnimFrame<span class="s"> = </span>window.requestAnimationFrame       ||
-</code><code id="L4532"><span class="ln">4532</span>                           window.webkitRequestAnimationFrame ||
-</code><code id="L4533"><span class="ln">4533</span>                           window.mozRequestAnimationFrame    ||
-</code><code id="L4534"><span class="ln">4534</span>                           window.oRequestAnimationFrame      ||
-</code><code id="L4535"><span class="ln">4535</span>                           window.msRequestAnimationFrame     ||
-</code><code id="L4536"><span class="ln">4536</span>                           <b>function</b> (callback) {
-</code><code id="L4537"><span class="ln">4537</span>                               setTimeout(callback, <span class="d">16</span>);
-</code><code id="L4538"><span class="ln">4538</span>                           },
-</code><code id="L4539"><span class="ln">4539</span>        animation<span class="s"> = </span><b>function</b> () {
-</code><code id="L4540"><span class="ln">4540</span>            <b>var</b> Now<span class="s"> = </span>+<b>new</b> Date,
-</code><code id="L4541"><span class="ln">4541</span>                l<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4542"><span class="ln">4542</span>            <b>for</b> (; l &lt; animationElements.length; l++) {
-</code><code id="L4543"><span class="ln">4543</span>                <b>var</b> e<span class="s"> = </span>animationElements[l];
-</code><code id="L4544"><span class="ln">4544</span>                <b>if</b> (e.el.removed<span class="s"> || </span>e.paused) {
-</code><code id="L4545"><span class="ln">4545</span>                    <b>continue</b>;
-</code><code id="L4546"><span class="ln">4546</span>                }
-</code><code id="L4547"><span class="ln">4547</span>                <b>var</b> time<span class="s"> = </span>Now<span class="s"> - </span>e.start,
-</code><code id="L4548"><span class="ln">4548</span>                    ms<span class="s"> = </span>e.ms,
-</code><code id="L4549"><span class="ln">4549</span>                    easing<span class="s"> = </span>e.easing,
-</code><code id="L4550"><span class="ln">4550</span>                    from<span class="s"> = </span>e.from,
-</code><code id="L4551"><span class="ln">4551</span>                    diff<span class="s"> = </span>e.diff,
-</code><code id="L4552"><span class="ln">4552</span>                    to<span class="s"> = </span>e.to,
-</code><code id="L4553"><span class="ln">4553</span>                    t<span class="s"> = </span>e.t,
-</code><code id="L4554"><span class="ln">4554</span>                    that<span class="s"> = </span>e.el,
-</code><code id="L4555"><span class="ln">4555</span>                    set<span class="s"> = </span>{},
-</code><code id="L4556"><span class="ln">4556</span>                    now;
-</code><code id="L4557"><span class="ln">4557</span>                <b>if</b> (e.initstatus) {
-</code><code id="L4558"><span class="ln">4558</span>                    time<span class="s"> = </span>(e.initstatus<span class="s"> * </span>e.anim.top<span class="s"> - </span>e.prev)<span class="s"> / </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>ms;
-</code><code id="L4559"><span class="ln">4559</span>                    e.status<span class="s"> = </span>e.initstatus;
-</code><code id="L4560"><span class="ln">4560</span>                    <b>delete</b> e.initstatus;
-</code><code id="L4561"><span class="ln">4561</span>                    e.stop &amp;&amp; animationElements.splice(l--, <span class="d">1</span>);
-</code><code id="L4562"><span class="ln">4562</span>                } <b>else</b> {
-</code><code id="L4563"><span class="ln">4563</span>                    e.status<span class="s"> = </span>(e.prev<span class="s"> + </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>(time<span class="s"> / </span>ms))<span class="s"> / </span>e.anim.top;
-</code><code id="L4564"><span class="ln">4564</span>                }
-</code><code id="L4565"><span class="ln">4565</span>                <b>if</b> (time &lt; <span class="d">0</span>) {
-</code><code id="L4566"><span class="ln">4566</span>                    <b>continue</b>;
-</code><code id="L4567"><span class="ln">4567</span>                }
-</code><code id="L4568"><span class="ln">4568</span>                <b>if</b> (time &lt; ms) {
-</code><code id="L4569"><span class="ln">4569</span>                    <b>var</b> pos<span class="s"> = </span>easing(time<span class="s"> / </span>ms);
-</code><code id="L4570"><span class="ln">4570</span>                    <b>for</b> (<b>var</b> attr <b>in</b> from) <b>if</b> (from[has](attr)) {
-</code><code id="L4571"><span class="ln">4571</span>                        <b>switch</b> (availableAnimAttrs[attr]) {
-</code><code id="L4572"><span class="ln">4572</span>                            <b>case</b> nu:
-</code><code id="L4573"><span class="ln">4573</span>                                now<span class="s"> = </span>+from[attr]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr];
-</code><code id="L4574"><span class="ln">4574</span>                                <b>break</b>;
-</code><code id="L4575"><span class="ln">4575</span>                            <b>case</b> <i>"colour"</i>:
-</code><code id="L4576"><span class="ln">4576</span>                                now<span class="s"> = </span><i>"rgb("</i><span class="s"> + </span>[
-</code><code id="L4577"><span class="ln">4577</span>                                    upto255(round(from[attr].r<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].r)),
-</code><code id="L4578"><span class="ln">4578</span>                                    upto255(round(from[attr].g<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].g)),
-</code><code id="L4579"><span class="ln">4579</span>                                    upto255(round(from[attr].b<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].b))
-</code><code id="L4580"><span class="ln">4580</span>                                ].join(<i>","</i>)<span class="s"> + </span><i>")"</i>;
-</code><code id="L4581"><span class="ln">4581</span>                                <b>break</b>;
-</code><code id="L4582"><span class="ln">4582</span>                            <b>case</b> <i>"path"</i>:
-</code><code id="L4583"><span class="ln">4583</span>                                now<span class="s"> = </span>[];
-</code><code id="L4584"><span class="ln">4584</span>                                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
-</code><code id="L4585"><span class="ln">4585</span>                                    now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
-</code><code id="L4586"><span class="ln">4586</span>                                    <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
-</code><code id="L4587"><span class="ln">4587</span>                                        now[i][j]<span class="s"> = </span>+from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
-</code><code id="L4588"><span class="ln">4588</span>                                    }
-</code><code id="L4589"><span class="ln">4589</span>                                    now[i]<span class="s"> = </span>now[i].join(S);
-</code><code id="L4590"><span class="ln">4590</span>                                }
-</code><code id="L4591"><span class="ln">4591</span>                                now<span class="s"> = </span>now.join(S);
-</code><code id="L4592"><span class="ln">4592</span>                                <b>break</b>;
-</code><code id="L4593"><span class="ln">4593</span>                            <b>case</b> <i>"transform"</i>:
-</code><code id="L4594"><span class="ln">4594</span>                                <b>if</b> (diff[attr].real) {
-</code><code id="L4595"><span class="ln">4595</span>                                    now<span class="s"> = </span>[];
-</code><code id="L4596"><span class="ln">4596</span>                                    <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
-</code><code id="L4597"><span class="ln">4597</span>                                        now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
-</code><code id="L4598"><span class="ln">4598</span>                                        <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
-</code><code id="L4599"><span class="ln">4599</span>                                            now[i][j]<span class="s"> = </span>from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
-</code><code id="L4600"><span class="ln">4600</span>                                        }
-</code><code id="L4601"><span class="ln">4601</span>                                    }
-</code><code id="L4602"><span class="ln">4602</span>                                } <b>else</b> {
-</code><code id="L4603"><span class="ln">4603</span>                                    <b>var</b> get<span class="s"> = </span><b>function</b> (i) {
-</code><code id="L4604"><span class="ln">4604</span>                                        <b>return</b> +from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
-</code><code id="L4605"><span class="ln">4605</span>                                    };
-</code><code id="L4606"><span class="ln">4606</span>                                    <span class="c">// now<span class="s"> = </span>[[<i>"r"</i>, get(<span class="d">2</span>), <span class="d">0</span>, <span class="d">0</span>], [<i>"t"</i>, get(<span class="d">3</span>), get(<span class="d">4</span>)], [<i>"s"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>]];</span>
-</code><code id="L4607"><span class="ln">4607</span>                                    now<span class="s"> = </span>[[<i>"m"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), get(<span class="d">2</span>), get(<span class="d">3</span>), get(<span class="d">4</span>), get(<span class="d">5</span>)]];
-</code><code id="L4608"><span class="ln">4608</span>                                }
-</code><code id="L4609"><span class="ln">4609</span>                                <b>break</b>;
-</code><code id="L4610"><span class="ln">4610</span>                            <b>case</b> <i>"csv"</i>:
-</code><code id="L4611"><span class="ln">4611</span>                                <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
-</code><code id="L4612"><span class="ln">4612</span>                                    now<span class="s"> = </span>[];
-</code><code id="L4613"><span class="ln">4613</span>                                    i<span class="s"> = </span><span class="d">4</span>;
-</code><code id="L4614"><span class="ln">4614</span>                                    <b>while</b> (i--) {
-</code><code id="L4615"><span class="ln">4615</span>                                        now[i]<span class="s"> = </span>+from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
-</code><code id="L4616"><span class="ln">4616</span>                                    }
-</code><code id="L4617"><span class="ln">4617</span>                                }
-</code><code id="L4618"><span class="ln">4618</span>                                <b>break</b>;
-</code><code id="L4619"><span class="ln">4619</span>                            <b>default</b>:
-</code><code id="L4620"><span class="ln">4620</span>                                <b>var</b> from2<span class="s"> = </span>[].concat(from[attr]);
-</code><code id="L4621"><span class="ln">4621</span>                                now<span class="s"> = </span>[];
-</code><code id="L4622"><span class="ln">4622</span>                                i<span class="s"> = </span>that.paper.customAttributes[attr].length;
-</code><code id="L4623"><span class="ln">4623</span>                                <b>while</b> (i--) {
-</code><code id="L4624"><span class="ln">4624</span>                                    now[i]<span class="s"> = </span>+from2[i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
-</code><code id="L4625"><span class="ln">4625</span>                                }
-</code><code id="L4626"><span class="ln">4626</span>                                <b>break</b>;
-</code><code id="L4627"><span class="ln">4627</span>                        }
-</code><code id="L4628"><span class="ln">4628</span>                        set[attr]<span class="s"> = </span>now;
-</code><code id="L4629"><span class="ln">4629</span>                    }
-</code><code id="L4630"><span class="ln">4630</span>                    that.attr(set);
-</code><code id="L4631"><span class="ln">4631</span>                    (<b>function</b> (id, that, anim) {
-</code><code id="L4632"><span class="ln">4632</span>                        setTimeout(<b>function</b> () {
-</code><code id="L4633"><span class="ln">4633</span>                            eve(<i>"anim.frame."</i><span class="s"> + </span>id, that, anim);
-</code><code id="L4634"><span class="ln">4634</span>                        });
-</code><code id="L4635"><span class="ln">4635</span>                    })(that.id, that, e.anim);
-</code><code id="L4636"><span class="ln">4636</span>                } <b>else</b> {
-</code><code id="L4637"><span class="ln">4637</span>                    (<b>function</b>(f, el, a) {
-</code><code id="L4638"><span class="ln">4638</span>                        setTimeout(<b>function</b>() {
-</code><code id="L4639"><span class="ln">4639</span>                            eve(<i>"anim.finish."</i><span class="s"> + </span>el.id, el, a);
-</code><code id="L4640"><span class="ln">4640</span>                            R.is(f, <i>"<b>function</b>"</i>) &amp;&amp; f.call(el);
-</code><code id="L4641"><span class="ln">4641</span>                        });
-</code><code id="L4642"><span class="ln">4642</span>                    })(e.callback, that, e.anim);
-</code><code id="L4643"><span class="ln">4643</span>                    <b>if</b> (--e.repeat) {
-</code><code id="L4644"><span class="ln">4644</span>                        that.attr(e.origin);
-</code><code id="L4645"><span class="ln">4645</span>                        e.start<span class="s"> = </span>Now;
-</code><code id="L4646"><span class="ln">4646</span>                    } <b>else</b> {
-</code><code id="L4647"><span class="ln">4647</span>                        that.attr(to);
-</code><code id="L4648"><span class="ln">4648</span>                        animationElements.splice(l--, <span class="d">1</span>);
-</code><code id="L4649"><span class="ln">4649</span>                    }
-</code><code id="L4650"><span class="ln">4650</span>                    <b>if</b> (e.next &amp;&amp; !e.stop) {
-</code><code id="L4651"><span class="ln">4651</span>                        runAnimation(e.anim, e.el, e.next, <b>null</b>, e.totalOrigin);
-</code><code id="L4652"><span class="ln">4652</span>                    }
-</code><code id="L4653"><span class="ln">4653</span>                }
-</code><code id="L4654"><span class="ln">4654</span>            }
-</code><code id="L4655"><span class="ln">4655</span>            R.svg &amp;&amp; that &amp;&amp; that.paper &amp;&amp; that.paper.safari();
-</code><code id="L4656"><span class="ln">4656</span>            animationElements.length &amp;&amp; requestAnimFrame(animation);
-</code><code id="L4657"><span class="ln">4657</span>        },
-</code><code id="L4658"><span class="ln">4658</span>        upto255<span class="s"> = </span><b>function</b> (color) {
-</code><code id="L4659"><span class="ln">4659</span>            <b>return</b> mmax(mmin(color, <span class="d">255</span>), <span class="d">0</span>);
-</code><code id="L4660"><span class="ln">4660</span>        };
-</code><code id="L4661"><span class="ln">4661</span>    elproto.animateWith<span class="s"> = </span><b>function</b> (element, params, ms, easing, callback) {
-</code><code id="L4662"><span class="ln">4662</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i &lt; ii; i++) {
-</code><code id="L4663"><span class="ln">4663</span>            <b>if</b> (animationElements[i].el.id<span class="s"> == </span>element.id) {
-</code><code id="L4664"><span class="ln">4664</span>                params.start<span class="s"> = </span>animationElements[i].timestamp;
-</code><code id="L4665"><span class="ln">4665</span>                <b>break</b>;
-</code><code id="L4666"><span class="ln">4666</span>            }
-</code><code id="L4667"><span class="ln">4667</span>        }
-</code><code id="L4668"><span class="ln">4668</span>        <b>return</b> <b>this</b>.animate(params, ms, easing, callback);
-</code><code id="L4669"><span class="ln">4669</span>    };
-</code><code id="L4670"><span class="ln">4670</span>    <b>function</b> CubicBezierAtTime(t, p1x, p1y, p2x, p2y, duration) {
-</code><code id="L4671"><span class="ln">4671</span>        <b>var</b> cx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1x,
-</code><code id="L4672"><span class="ln">4672</span>            bx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2x<span class="s"> - </span>p1x)<span class="s"> - </span>cx,
-</code><code id="L4673"><span class="ln">4673</span>            ax<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cx<span class="s"> - </span>bx,
-</code><code id="L4674"><span class="ln">4674</span>            cy<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1y,
-</code><code id="L4675"><span class="ln">4675</span>            by<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2y<span class="s"> - </span>p1y)<span class="s"> - </span>cy,
-</code><code id="L4676"><span class="ln">4676</span>            ay<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cy<span class="s"> - </span>by;
-</code><code id="L4677"><span class="ln">4677</span>        <b>function</b> sampleCurveX(t) {
-</code><code id="L4678"><span class="ln">4678</span>            <b>return</b> ((ax<span class="s"> * </span>t<span class="s"> + </span>bx)<span class="s"> * </span>t<span class="s"> + </span>cx)<span class="s"> * </span>t;
-</code><code id="L4679"><span class="ln">4679</span>        }
-</code><code id="L4680"><span class="ln">4680</span>        <b>function</b> solve(x, epsilon) {
-</code><code id="L4681"><span class="ln">4681</span>            <b>var</b> t<span class="s"> = </span>solveCurveX(x, epsilon);
-</code><code id="L4682"><span class="ln">4682</span>            <b>return</b> ((ay<span class="s"> * </span>t<span class="s"> + </span>by)<span class="s"> * </span>t<span class="s"> + </span>cy)<span class="s"> * </span>t;
-</code><code id="L4683"><span class="ln">4683</span>        }
-</code><code id="L4684"><span class="ln">4684</span>        <b>function</b> solveCurveX(x, epsilon) {
-</code><code id="L4685"><span class="ln">4685</span>            <b>var</b> t0, t1, t2, x2, d2, i;
-</code><code id="L4686"><span class="ln">4686</span>            <b>for</b>(t2<span class="s"> = </span>x, i<span class="s"> = </span><span class="d">0</span>; i &lt; <span class="d">8</span>; i++) {
-</code><code id="L4687"><span class="ln">4687</span>                x2<span class="s"> = </span>sampleCurveX(t2)<span class="s"> - </span>x;
-</code><code id="L4688"><span class="ln">4688</span>                <b>if</b> (abs(x2) &lt; epsilon) {
-</code><code id="L4689"><span class="ln">4689</span>                    <b>return</b> t2;
-</code><code id="L4690"><span class="ln">4690</span>                }
-</code><code id="L4691"><span class="ln">4691</span>                d2<span class="s"> = </span>(<span class="d">3</span><span class="s"> * </span>ax<span class="s"> * </span>t2<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>bx)<span class="s"> * </span>t2<span class="s"> + </span>cx;
-</code><code id="L4692"><span class="ln">4692</span>                <b>if</b> (abs(d2) &lt; <span class="d">1e-6</span>) {
-</code><code id="L4693"><span class="ln">4693</span>                    <b>break</b>;
-</code><code id="L4694"><span class="ln">4694</span>                }
-</code><code id="L4695"><span class="ln">4695</span>                t2<span class="s"> = </span>t2<span class="s"> - </span>x2<span class="s"> / </span>d2;
-</code><code id="L4696"><span class="ln">4696</span>            }
-</code><code id="L4697"><span class="ln">4697</span>            t0<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L4698"><span class="ln">4698</span>            t1<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L4699"><span class="ln">4699</span>            t2<span class="s"> = </span>x;
-</code><code id="L4700"><span class="ln">4700</span>            <b>if</b> (t2 &lt; t0) {
-</code><code id="L4701"><span class="ln">4701</span>                <b>return</b> t0;
-</code><code id="L4702"><span class="ln">4702</span>            }
-</code><code id="L4703"><span class="ln">4703</span>            <b>if</b> (t2 > t1) {
-</code><code id="L4704"><span class="ln">4704</span>                <b>return</b> t1;
-</code><code id="L4705"><span class="ln">4705</span>            }
-</code><code id="L4706"><span class="ln">4706</span>            <b>while</b> (t0 &lt; t1) {
-</code><code id="L4707"><span class="ln">4707</span>                x2<span class="s"> = </span>sampleCurveX(t2);
-</code><code id="L4708"><span class="ln">4708</span>                <b>if</b> (abs(x2<span class="s"> - </span>x) &lt; epsilon) {
-</code><code id="L4709"><span class="ln">4709</span>                    <b>return</b> t2;
-</code><code id="L4710"><span class="ln">4710</span>                }
-</code><code id="L4711"><span class="ln">4711</span>                <b>if</b> (x > x2) {
-</code><code id="L4712"><span class="ln">4712</span>                    t0<span class="s"> = </span>t2;
-</code><code id="L4713"><span class="ln">4713</span>                } <b>else</b> {
-</code><code id="L4714"><span class="ln">4714</span>                    t1<span class="s"> = </span>t2;
-</code><code id="L4715"><span class="ln">4715</span>                }
-</code><code id="L4716"><span class="ln">4716</span>                t2<span class="s"> = </span>(t1<span class="s"> - </span>t0)<span class="s"> / </span><span class="d">2</span><span class="s"> + </span>t0;
-</code><code id="L4717"><span class="ln">4717</span>            }
-</code><code id="L4718"><span class="ln">4718</span>            <b>return</b> t2;
-</code><code id="L4719"><span class="ln">4719</span>        }
-</code><code id="L4720"><span class="ln">4720</span>        <b>return</b> solve(t, <span class="d">1</span><span class="s"> / </span>(<span class="d">200</span><span class="s"> * </span>duration));
-</code><code id="L4721"><span class="ln">4721</span>    }
-</code><code id="L4722"><span class="ln">4722</span>    elproto.onAnimation<span class="s"> = </span><b>function</b> (f) {
-</code><code id="L4723"><span class="ln">4723</span>        f ? eve.on(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id);
-</code><code id="L4724"><span class="ln">4724</span>        <b>return</b> <b>this</b>;
-</code><code id="L4725"><span class="ln">4725</span>    };
-</code><code id="L4726"><span class="ln">4726</span>    <b>function</b> Animation(anim, ms) {
-</code><code id="L4727"><span class="ln">4727</span>        <b>var</b> percents<span class="s"> = </span>[];
-</code><code id="L4728"><span class="ln">4728</span>        <b>this</b>.anim<span class="s"> = </span>anim;
-</code><code id="L4729"><span class="ln">4729</span>        <b>this</b>.ms<span class="s"> = </span>ms;
-</code><code id="L4730"><span class="ln">4730</span>        <b>this</b>.times<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L4731"><span class="ln">4731</span>        <b>if</b> (<b>this</b>.anim) {
-</code><code id="L4732"><span class="ln">4732</span>            <b>for</b> (<b>var</b> attr <b>in</b> <b>this</b>.anim) <b>if</b> (<b>this</b>.anim[has](attr)) {
-</code><code id="L4733"><span class="ln">4733</span>                percents.push(+attr);
-</code><code id="L4734"><span class="ln">4734</span>            }
-</code><code id="L4735"><span class="ln">4735</span>            percents.sort(sortByNumber);
-</code><code id="L4736"><span class="ln">4736</span>        }
-</code><code id="L4737"><span class="ln">4737</span>        <b>this</b>.top<span class="s"> = </span>percents[percents.length<span class="s"> - </span><span class="d">1</span>];
-</code><code id="L4738"><span class="ln">4738</span>        <b>this</b>.percents<span class="s"> = </span>percents;
-</code><code id="L4739"><span class="ln">4739</span>    }
-</code><code id="L4740"><span class="ln">4740</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4741"><span class="ln">4741</span><span class="c">    <span class="s"> * </span>Animation.delay
-</span></code><code id="L4742"><span class="ln">4742</span><span class="c">     [ method ]
+</span></code><code id="L4415"><span class="ln">4415</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object
+</span></code><code id="L4416"><span class="ln">4416</span><span class="c">     > Parameters
+</span></code><code id="L4417"><span class="ln">4417</span><span class="c">     **
+</span></code><code id="L4418"><span class="ln">4418</span><span class="c">    <span class="s"> - </span>x (number) x coordinate from the top left corner of the window
+</span></code><code id="L4419"><span class="ln">4419</span><span class="c">    <span class="s"> - </span>y (number) y coordinate from the top left corner of the window
+</span></code><code id="L4420"><span class="ln">4420</span><span class="c">     > Usage
+</span></code><code id="L4421"><span class="ln">4421</span><span class="c">    <span class="s"> | </span>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
+</span></code><code id="L4422"><span class="ln">4422</span><span class="c">    \*/</span>
+</code><code id="L4423"><span class="ln">4423</span>    paperproto.getElementByPoint<span class="s"> = </span><b>function</b> (x, y) {
+</code><code id="L4424"><span class="ln">4424</span>        <b>var</b> paper<span class="s"> = </span><b>this</b>,
+</code><code id="L4425"><span class="ln">4425</span>            svg<span class="s"> = </span>paper.canvas,
+</code><code id="L4426"><span class="ln">4426</span>            target<span class="s"> = </span>g.doc.elementFromPoint(x, y);
+</code><code id="L4427"><span class="ln">4427</span>        <b>if</b> (g.win.opera<span class="s"> &amp;&amp; </span>target.tagName<span class="s"> == </span><i>"svg"</i>) {
+</code><code id="L4428"><span class="ln">4428</span>            <b>var</b> so<span class="s"> = </span>getOffset(svg),
+</code><code id="L4429"><span class="ln">4429</span>                sr<span class="s"> = </span>svg.createSVGRect();
+</code><code id="L4430"><span class="ln">4430</span>            sr.x<span class="s"> = </span>x<span class="s"> - </span>so.x;
+</code><code id="L4431"><span class="ln">4431</span>            sr.y<span class="s"> = </span>y<span class="s"> - </span>so.y;
+</code><code id="L4432"><span class="ln">4432</span>            sr.width<span class="s"> = </span>sr.height<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L4433"><span class="ln">4433</span>            <b>var</b> hits<span class="s"> = </span>svg.getIntersectionList(sr, <b>null</b>);
+</code><code id="L4434"><span class="ln">4434</span>            <b>if</b> (hits.length) {
+</code><code id="L4435"><span class="ln">4435</span>                target<span class="s"> = </span>hits[hits.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L4436"><span class="ln">4436</span>            }
+</code><code id="L4437"><span class="ln">4437</span>        }
+</code><code id="L4438"><span class="ln">4438</span>        <b>if</b> (!target) {
+</code><code id="L4439"><span class="ln">4439</span>            <b>return</b> <b>null</b>;
+</code><code id="L4440"><span class="ln">4440</span>        }
+</code><code id="L4441"><span class="ln">4441</span>        <b>while</b> (target.parentNode<span class="s"> &amp;&amp; </span>target != svg.parentNode<span class="s"> &amp;&amp; </span>!target.raphael) {
+</code><code id="L4442"><span class="ln">4442</span>            target<span class="s"> = </span>target.parentNode;
+</code><code id="L4443"><span class="ln">4443</span>        }
+</code><code id="L4444"><span class="ln">4444</span>        target<span class="s"> == </span>paper.canvas.parentNode<span class="s"> &amp;&amp; </span>(target<span class="s"> = </span>svg);
+</code><code id="L4445"><span class="ln">4445</span>        target<span class="s"> = </span>target<span class="s"> &amp;&amp; </span>target.raphael ? paper.getById(target.raphaelid) : <b>null</b>;
+</code><code id="L4446"><span class="ln">4446</span>        <b>return</b> target;
+</code><code id="L4447"><span class="ln">4447</span>    };
+</code><code id="L4448"><span class="ln">4448</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4449"><span class="ln">4449</span><span class="c">    <span class="s"> * </span>Paper.getById
+</span></code><code id="L4450"><span class="ln">4450</span><span class="c">     [ method ]
+</span></code><code id="L4451"><span class="ln">4451</span><span class="c">     **
+</span></code><code id="L4452"><span class="ln">4452</span><span class="c">    <span class="s"> * </span>Returns you element by it’s internal ID.
+</span></code><code id="L4453"><span class="ln">4453</span><span class="c">     **
+</span></code><code id="L4454"><span class="ln">4454</span><span class="c">     > Parameters
+</span></code><code id="L4455"><span class="ln">4455</span><span class="c">     **
+</span></code><code id="L4456"><span class="ln">4456</span><span class="c">    <span class="s"> - </span>id (number) id
+</span></code><code id="L4457"><span class="ln">4457</span><span class="c">    <span class="s"> = </span>(object) Raphaël element object
+</span></code><code id="L4458"><span class="ln">4458</span><span class="c">    \*/</span>
+</code><code id="L4459"><span class="ln">4459</span>    paperproto.getById<span class="s"> = </span><b>function</b> (id) {
+</code><code id="L4460"><span class="ln">4460</span>        <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
+</code><code id="L4461"><span class="ln">4461</span>        <b>while</b> (bot) {
+</code><code id="L4462"><span class="ln">4462</span>            <b>if</b> (bot.id<span class="s"> == </span>id) {
+</code><code id="L4463"><span class="ln">4463</span>                <b>return</b> bot;
+</code><code id="L4464"><span class="ln">4464</span>            }
+</code><code id="L4465"><span class="ln">4465</span>            bot<span class="s"> = </span>bot.next;
+</code><code id="L4466"><span class="ln">4466</span>        }
+</code><code id="L4467"><span class="ln">4467</span>        <b>return</b> <b>null</b>;
+</code><code id="L4468"><span class="ln">4468</span>    };
+</code><code id="L4469"><span class="ln">4469</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4470"><span class="ln">4470</span><span class="c">    <span class="s"> * </span>Paper.forEach
+</span></code><code id="L4471"><span class="ln">4471</span><span class="c">     [ method ]
+</span></code><code id="L4472"><span class="ln">4472</span><span class="c">     **
+</span></code><code id="L4473"><span class="ln">4473</span><span class="c">    <span class="s"> * </span>Executes given <b>function</b> <b>for</b> each element on the paper
+</span></code><code id="L4474"><span class="ln">4474</span><span class="c">     *
+</span></code><code id="L4475"><span class="ln">4475</span><span class="c">    <span class="s"> * </span>If <b>function</b> returns `<b>false</b>` it will stop loop running.
+</span></code><code id="L4476"><span class="ln">4476</span><span class="c">     **
+</span></code><code id="L4477"><span class="ln">4477</span><span class="c">     > Parameters
+</span></code><code id="L4478"><span class="ln">4478</span><span class="c">     **
+</span></code><code id="L4479"><span class="ln">4479</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) <b>function</b> to run
+</span></code><code id="L4480"><span class="ln">4480</span><span class="c">    <span class="s"> - </span>thisArg (object) context object <b>for</b> the callback
+</span></code><code id="L4481"><span class="ln">4481</span><span class="c">    <span class="s"> = </span>(object) Paper object
+</span></code><code id="L4482"><span class="ln">4482</span><span class="c">    \*/</span>
+</code><code id="L4483"><span class="ln">4483</span>    paperproto.forEach<span class="s"> = </span><b>function</b> (callback, thisArg) {
+</code><code id="L4484"><span class="ln">4484</span>        <b>var</b> bot<span class="s"> = </span><b>this</b>.bottom;
+</code><code id="L4485"><span class="ln">4485</span>        <b>while</b> (bot) {
+</code><code id="L4486"><span class="ln">4486</span>            <b>if</b> (callback.call(thisArg, bot)<span class="s"> === </span><b>false</b>) {
+</code><code id="L4487"><span class="ln">4487</span>                <b>return</b> <b>this</b>;
+</code><code id="L4488"><span class="ln">4488</span>            }
+</code><code id="L4489"><span class="ln">4489</span>            bot<span class="s"> = </span>bot.next;
+</code><code id="L4490"><span class="ln">4490</span>        }
+</code><code id="L4491"><span class="ln">4491</span>        <b>return</b> <b>this</b>;
+</code><code id="L4492"><span class="ln">4492</span>    };
+</code><code id="L4493"><span class="ln">4493</span>    <b>function</b> x_y() {
+</code><code id="L4494"><span class="ln">4494</span>        <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y;
+</code><code id="L4495"><span class="ln">4495</span>    }
+</code><code id="L4496"><span class="ln">4496</span>    <b>function</b> x_y_w_h() {
+</code><code id="L4497"><span class="ln">4497</span>        <b>return</b> <b>this</b>.x<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.y<span class="s"> + </span>S<span class="s"> + </span><b>this</b>.width<span class="s"> + </span><i>"\xd7"</i><span class="s"> + </span><b>this</b>.height;
+</code><code id="L4498"><span class="ln">4498</span>    }
+</code><code id="L4499"><span class="ln">4499</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4500"><span class="ln">4500</span><span class="c">    <span class="s"> * </span>Element.getBBox
+</span></code><code id="L4501"><span class="ln">4501</span><span class="c">     [ method ]
+</span></code><code id="L4502"><span class="ln">4502</span><span class="c">     **
+</span></code><code id="L4503"><span class="ln">4503</span><span class="c">    <span class="s"> * </span>Return bounding box <b>for</b> a given element
+</span></code><code id="L4504"><span class="ln">4504</span><span class="c">     **
+</span></code><code id="L4505"><span class="ln">4505</span><span class="c">     > Parameters
+</span></code><code id="L4506"><span class="ln">4506</span><span class="c">     **
+</span></code><code id="L4507"><span class="ln">4507</span><span class="c">    <span class="s"> - </span>isWithoutTransform (<b>boolean</b>) flag, `<b>true</b>` <b>if</b> you want to have bounding box before transformations. Default is `<b>false</b>`.
+</span></code><code id="L4508"><span class="ln">4508</span><span class="c">    <span class="s"> = </span>(object) Bounding box object:
+</span></code><code id="L4509"><span class="ln">4509</span><span class="c">     o {
+</span></code><code id="L4510"><span class="ln">4510</span><span class="c">     o     x: (number) top left corner x
+</span></code><code id="L4511"><span class="ln">4511</span><span class="c">     o     y: (number) top left corner y
+</span></code><code id="L4512"><span class="ln">4512</span><span class="c">     o     width: (number) width
+</span></code><code id="L4513"><span class="ln">4513</span><span class="c">     o     height: (number) height
+</span></code><code id="L4514"><span class="ln">4514</span><span class="c">     o }
+</span></code><code id="L4515"><span class="ln">4515</span><span class="c">    \*/</span>
+</code><code id="L4516"><span class="ln">4516</span>    elproto.getBBox<span class="s"> = </span><b>function</b> (isWithoutTransform) {
+</code><code id="L4517"><span class="ln">4517</span>        <b>if</b> (<b>this</b>.removed) {
+</code><code id="L4518"><span class="ln">4518</span>            <b>return</b> {};
+</code><code id="L4519"><span class="ln">4519</span>        }
+</code><code id="L4520"><span class="ln">4520</span>        <b>var</b> _<span class="s"> = </span><b>this</b>._;
+</code><code id="L4521"><span class="ln">4521</span>        <b>if</b> (isWithoutTransform) {
+</code><code id="L4522"><span class="ln">4522</span>            <b>if</b> (_.dirty<span class="s"> || </span>!_.bboxwt) {
+</code><code id="L4523"><span class="ln">4523</span>                <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4524"><span class="ln">4524</span>                _.bboxwt<span class="s"> = </span>pathDimensions(<b>this</b>.realPath);
+</code><code id="L4525"><span class="ln">4525</span>                _.bboxwt.toString<span class="s"> = </span>x_y_w_h;
+</code><code id="L4526"><span class="ln">4526</span>                _.dirty<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4527"><span class="ln">4527</span>            }
+</code><code id="L4528"><span class="ln">4528</span>            <b>return</b> _.bboxwt;
+</code><code id="L4529"><span class="ln">4529</span>        }
+</code><code id="L4530"><span class="ln">4530</span>        <b>if</b> (_.dirty<span class="s"> || </span>_.dirtyT<span class="s"> || </span>!_.bbox) {
+</code><code id="L4531"><span class="ln">4531</span>            <b>if</b> (_.dirty<span class="s"> || </span>!<b>this</b>.realPath) {
+</code><code id="L4532"><span class="ln">4532</span>                _.bboxwt<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4533"><span class="ln">4533</span>                <b>this</b>.realPath<span class="s"> = </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4534"><span class="ln">4534</span>            }
+</code><code id="L4535"><span class="ln">4535</span>            _.bbox<span class="s"> = </span>pathDimensions(mapPath(<b>this</b>.realPath, <b>this</b>.matrix));
+</code><code id="L4536"><span class="ln">4536</span>            _.bbox.toString<span class="s"> = </span>x_y_w_h;
+</code><code id="L4537"><span class="ln">4537</span>            _.dirty<span class="s"> = </span>_.dirtyT<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4538"><span class="ln">4538</span>        }
+</code><code id="L4539"><span class="ln">4539</span>        <b>return</b> _.bbox;
+</code><code id="L4540"><span class="ln">4540</span>    };
+</code><code id="L4541"><span class="ln">4541</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4542"><span class="ln">4542</span><span class="c">    <span class="s"> * </span>Element.clone
+</span></code><code id="L4543"><span class="ln">4543</span><span class="c">     [ method ]
+</span></code><code id="L4544"><span class="ln">4544</span><span class="c">     **
+</span></code><code id="L4545"><span class="ln">4545</span><span class="c">    <span class="s"> = </span>(object) clone of a given element
+</span></code><code id="L4546"><span class="ln">4546</span><span class="c">     **
+</span></code><code id="L4547"><span class="ln">4547</span><span class="c">    \*/</span>
+</code><code id="L4548"><span class="ln">4548</span>    elproto.clone<span class="s"> = </span><b>function</b> () {
+</code><code id="L4549"><span class="ln">4549</span>        <b>if</b> (<b>this</b>.removed) {
+</code><code id="L4550"><span class="ln">4550</span>            <b>return</b> <b>null</b>;
+</code><code id="L4551"><span class="ln">4551</span>        }
+</code><code id="L4552"><span class="ln">4552</span>        <b>var</b> attr<span class="s"> = </span><b>this</b>.attr();
+</code><code id="L4553"><span class="ln">4553</span>        <b>delete</b> attr.scale;
+</code><code id="L4554"><span class="ln">4554</span>        <b>delete</b> attr.translation;
+</code><code id="L4555"><span class="ln">4555</span>        <b>return</b> <b>this</b>.paper[<b>this</b>.type]().attr(attr);
+</code><code id="L4556"><span class="ln">4556</span>    };
+</code><code id="L4557"><span class="ln">4557</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4558"><span class="ln">4558</span><span class="c">    <span class="s"> * </span>Element.glow
+</span></code><code id="L4559"><span class="ln">4559</span><span class="c">     [ method ]
+</span></code><code id="L4560"><span class="ln">4560</span><span class="c">     **
+</span></code><code id="L4561"><span class="ln">4561</span><span class="c">    <span class="s"> * </span>Return set of elements that create glow-like effect around given element. See @Paper.set.
+</span></code><code id="L4562"><span class="ln">4562</span><span class="c">     *
+</span></code><code id="L4563"><span class="ln">4563</span><span class="c">    <span class="s"> * </span>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
+</span></code><code id="L4564"><span class="ln">4564</span><span class="c">     **
+</span></code><code id="L4565"><span class="ln">4565</span><span class="c">    <span class="s"> = </span>(object) @Paper.set of elements that represents glow
+</span></code><code id="L4566"><span class="ln">4566</span><span class="c">    \*/</span>
+</code><code id="L4567"><span class="ln">4567</span>    elproto.glow<span class="s"> = </span><b>function</b> (glow) {
+</code><code id="L4568"><span class="ln">4568</span>        <b>if</b> (<b>this</b>.type<span class="s"> == </span><i>"text"</i>) {
+</code><code id="L4569"><span class="ln">4569</span>            <b>return</b> <b>null</b>;
+</code><code id="L4570"><span class="ln">4570</span>        }
+</code><code id="L4571"><span class="ln">4571</span>        glow<span class="s"> = </span>glow<span class="s"> || </span>{};
+</code><code id="L4572"><span class="ln">4572</span>        <b>var</b> s<span class="s"> = </span>{
+</code><code id="L4573"><span class="ln">4573</span>            width: glow.width<span class="s"> || </span><span class="d">10</span>,
+</code><code id="L4574"><span class="ln">4574</span>            fill: glow.fill<span class="s"> || </span><b>false</b>,
+</code><code id="L4575"><span class="ln">4575</span>            opacity: glow.opacity<span class="s"> || </span><span class="d">.5</span>,
+</code><code id="L4576"><span class="ln">4576</span>            offsetx: glow.offsetx<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4577"><span class="ln">4577</span>            offsety: glow.offsety<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L4578"><span class="ln">4578</span>            color: glow.color<span class="s"> || </span><i>"#<span class="d">000</span>"</i>
+</code><code id="L4579"><span class="ln">4579</span>        },
+</code><code id="L4580"><span class="ln">4580</span>            c<span class="s"> = </span>s.width<span class="s"> / </span><span class="d">2</span>,
+</code><code id="L4581"><span class="ln">4581</span>            r<span class="s"> = </span><b>this</b>.paper,
+</code><code id="L4582"><span class="ln">4582</span>            out<span class="s"> = </span>r.set(),
+</code><code id="L4583"><span class="ln">4583</span>            path<span class="s"> = </span><b>this</b>.realPath<span class="s"> || </span>getPath[<b>this</b>.type](<b>this</b>);
+</code><code id="L4584"><span class="ln">4584</span>        path<span class="s"> = </span><b>this</b>.matrix ? mapPath(path, <b>this</b>.matrix) : path;
+</code><code id="L4585"><span class="ln">4585</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">1</span>; i &lt; c<span class="s"> + </span><span class="d">1</span>; i++) {
+</code><code id="L4586"><span class="ln">4586</span>            out.push(r.path(path).attr({stroke: s.color, fill: s.fill ? s.color : <i>"none"</i>, <i>"stroke-linejoin"</i>: <i>"round"</i>, <i>"stroke-linecap"</i>: <i>"round"</i>, <i>"stroke-width"</i>: +(s.width<span class="s"> / </span>c<span class="s"> * </span>i).toFixed(<span class="d">3</span>), opacity: +(s.opacity<span class="s"> / </span>c).toFixed(<span class="d">3</span>)}));
+</code><code id="L4587"><span class="ln">4587</span>        }
+</code><code id="L4588"><span class="ln">4588</span>        <b>return</b> out.insertBefore(<b>this</b>).translate(s.offsetx, s.offsety);
+</code><code id="L4589"><span class="ln">4589</span>    };
+</code><code id="L4590"><span class="ln">4590</span>    <b>var</b> curveslengths<span class="s"> = </span>{},
+</code><code id="L4591"><span class="ln">4591</span>    getPointAtSegmentLength<span class="s"> = </span><b>function</b> (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {
+</code><code id="L4592"><span class="ln">4592</span>        <b>var</b> len<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L4593"><span class="ln">4593</span>            precision<span class="s"> = </span><span class="d">100</span>,
+</code><code id="L4594"><span class="ln">4594</span>            name<span class="s"> = </span>[p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y].join(),
+</code><code id="L4595"><span class="ln">4595</span>            cache<span class="s"> = </span>curveslengths[name],
+</code><code id="L4596"><span class="ln">4596</span>            old, dot;
+</code><code id="L4597"><span class="ln">4597</span>        !cache<span class="s"> &amp;&amp; </span>(curveslengths[name]<span class="s"> = </span>cache<span class="s"> = </span>{data: []});
+</code><code id="L4598"><span class="ln">4598</span>        cache.timer<span class="s"> &amp;&amp; </span>clearTimeout(cache.timer);
+</code><code id="L4599"><span class="ln">4599</span>        cache.timer<span class="s"> = </span>setTimeout(<b>function</b> () {<b>delete</b> curveslengths[name];}, <span class="d">2e3</span>);
+</code><code id="L4600"><span class="ln">4600</span>        <b>if</b> (length != <b>null</b><span class="s"> &amp;&amp; </span>!cache.precision) {
+</code><code id="L4601"><span class="ln">4601</span>            <b>var</b> total<span class="s"> = </span>getPointAtSegmentLength(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y);
+</code><code id="L4602"><span class="ln">4602</span>            cache.precision<span class="s"> = </span>~~total<span class="s"> * </span><span class="d">10</span>;
+</code><code id="L4603"><span class="ln">4603</span>            cache.data<span class="s"> = </span>[];
+</code><code id="L4604"><span class="ln">4604</span>        }
+</code><code id="L4605"><span class="ln">4605</span>        precision<span class="s"> = </span>cache.precision<span class="s"> || </span>precision;
+</code><code id="L4606"><span class="ln">4606</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; precision<span class="s"> + </span><span class="d">1</span>; i++) {
+</code><code id="L4607"><span class="ln">4607</span>            <b>if</b> (cache.data[i<span class="s"> * </span>precision]) {
+</code><code id="L4608"><span class="ln">4608</span>                dot<span class="s"> = </span>cache.data[i<span class="s"> * </span>precision];
+</code><code id="L4609"><span class="ln">4609</span>            } <b>else</b> {
+</code><code id="L4610"><span class="ln">4610</span>                dot<span class="s"> = </span>R.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, i<span class="s"> / </span>precision);
+</code><code id="L4611"><span class="ln">4611</span>                cache.data[i<span class="s"> * </span>precision]<span class="s"> = </span>dot;
+</code><code id="L4612"><span class="ln">4612</span>            }
+</code><code id="L4613"><span class="ln">4613</span>            i<span class="s"> &amp;&amp; </span>(len += pow(pow(old.x<span class="s"> - </span>dot.x, <span class="d">2</span>)<span class="s"> + </span>pow(old.y<span class="s"> - </span>dot.y, <span class="d">2</span>), <span class="d">.5</span>));
+</code><code id="L4614"><span class="ln">4614</span>            <b>if</b> (length != <b>null</b><span class="s"> &amp;&amp; </span>len >= length) {
+</code><code id="L4615"><span class="ln">4615</span>                <b>return</b> dot;
+</code><code id="L4616"><span class="ln">4616</span>            }
+</code><code id="L4617"><span class="ln">4617</span>            old<span class="s"> = </span>dot;
+</code><code id="L4618"><span class="ln">4618</span>        }
+</code><code id="L4619"><span class="ln">4619</span>        <b>if</b> (length<span class="s"> == </span><b>null</b>) {
+</code><code id="L4620"><span class="ln">4620</span>            <b>return</b> len;
+</code><code id="L4621"><span class="ln">4621</span>        }
+</code><code id="L4622"><span class="ln">4622</span>    },
+</code><code id="L4623"><span class="ln">4623</span>    getLengthFactory<span class="s"> = </span><b>function</b> (istotal, subpath) {
+</code><code id="L4624"><span class="ln">4624</span>        <b>return</b> <b>function</b> (path, length, onlystart) {
+</code><code id="L4625"><span class="ln">4625</span>            path<span class="s"> = </span>path2curve(path);
+</code><code id="L4626"><span class="ln">4626</span>            <b>var</b> x, y, p, l, sp<span class="s"> = </span><i>""</i>, subpaths<span class="s"> = </span>{}, point,
+</code><code id="L4627"><span class="ln">4627</span>                len<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4628"><span class="ln">4628</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>path.length; i &lt; ii; i++) {
+</code><code id="L4629"><span class="ln">4629</span>                p<span class="s"> = </span>path[i];
+</code><code id="L4630"><span class="ln">4630</span>                <b>if</b> (p[<span class="d">0</span>]<span class="s"> == </span><i>"M"</i>) {
+</code><code id="L4631"><span class="ln">4631</span>                    x<span class="s"> = </span>+p[<span class="d">1</span>];
+</code><code id="L4632"><span class="ln">4632</span>                    y<span class="s"> = </span>+p[<span class="d">2</span>];
+</code><code id="L4633"><span class="ln">4633</span>                } <b>else</b> {
+</code><code id="L4634"><span class="ln">4634</span>                    l<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>]);
+</code><code id="L4635"><span class="ln">4635</span>                    <b>if</b> (len<span class="s"> + </span>l > length) {
+</code><code id="L4636"><span class="ln">4636</span>                        <b>if</b> (subpath<span class="s"> &amp;&amp; </span>!subpaths.start) {
+</code><code id="L4637"><span class="ln">4637</span>                            point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
+</code><code id="L4638"><span class="ln">4638</span>                            sp += [<i>"C"</i><span class="s"> + </span>point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];
+</code><code id="L4639"><span class="ln">4639</span>                            <b>if</b> (onlystart) {<b>return</b> sp;}
+</code><code id="L4640"><span class="ln">4640</span>                            subpaths.start<span class="s"> = </span>sp;
+</code><code id="L4641"><span class="ln">4641</span>                            sp<span class="s"> = </span>[<i>"M"</i><span class="s"> + </span>point.x, point.y<span class="s"> + </span><i>"C"</i><span class="s"> + </span>point.n.x, point.n.y, point.end.x, point.end.y, p[<span class="d">5</span>], p[<span class="d">6</span>]].join();
+</code><code id="L4642"><span class="ln">4642</span>                            len += l;
+</code><code id="L4643"><span class="ln">4643</span>                            x<span class="s"> = </span>+p[<span class="d">5</span>];
+</code><code id="L4644"><span class="ln">4644</span>                            y<span class="s"> = </span>+p[<span class="d">6</span>];
+</code><code id="L4645"><span class="ln">4645</span>                            <b>continue</b>;
+</code><code id="L4646"><span class="ln">4646</span>                        }
+</code><code id="L4647"><span class="ln">4647</span>                        <b>if</b> (!istotal<span class="s"> &amp;&amp; </span>!subpath) {
+</code><code id="L4648"><span class="ln">4648</span>                            point<span class="s"> = </span>getPointAtSegmentLength(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], length<span class="s"> - </span>len);
+</code><code id="L4649"><span class="ln">4649</span>                            <b>return</b> {x: point.x, y: point.y, alpha: point.alpha};
+</code><code id="L4650"><span class="ln">4650</span>                        }
+</code><code id="L4651"><span class="ln">4651</span>                    }
+</code><code id="L4652"><span class="ln">4652</span>                    len += l;
+</code><code id="L4653"><span class="ln">4653</span>                    x<span class="s"> = </span>+p[<span class="d">5</span>];
+</code><code id="L4654"><span class="ln">4654</span>                    y<span class="s"> = </span>+p[<span class="d">6</span>];
+</code><code id="L4655"><span class="ln">4655</span>                }
+</code><code id="L4656"><span class="ln">4656</span>                sp += p.shift()<span class="s"> + </span>p;
+</code><code id="L4657"><span class="ln">4657</span>            }
+</code><code id="L4658"><span class="ln">4658</span>            subpaths.end<span class="s"> = </span>sp;
+</code><code id="L4659"><span class="ln">4659</span>            point<span class="s"> = </span>istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[<span class="d">1</span>], p[<span class="d">2</span>], p[<span class="d">3</span>], p[<span class="d">4</span>], p[<span class="d">5</span>], p[<span class="d">6</span>], <span class="d">1</span>);
+</code><code id="L4660"><span class="ln">4660</span>            point.alpha<span class="s"> &amp;&amp; </span>(point<span class="s"> = </span>{x: point.x, y: point.y, alpha: point.alpha});
+</code><code id="L4661"><span class="ln">4661</span>            <b>return</b> point;
+</code><code id="L4662"><span class="ln">4662</span>        };
+</code><code id="L4663"><span class="ln">4663</span>    };
+</code><code id="L4664"><span class="ln">4664</span>    <b>var</b> getTotalLength<span class="s"> = </span>getLengthFactory(<span class="d">1</span>),
+</code><code id="L4665"><span class="ln">4665</span>        getPointAtLength<span class="s"> = </span>getLengthFactory(),
+</code><code id="L4666"><span class="ln">4666</span>        getSubpathsAtLength<span class="s"> = </span>getLengthFactory(<span class="d">0</span>, <span class="d">1</span>);
+</code><code id="L4667"><span class="ln">4667</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4668"><span class="ln">4668</span><span class="c">    <span class="s"> * </span>Raphael.getTotalLength
+</span></code><code id="L4669"><span class="ln">4669</span><span class="c">     [ method ]
+</span></code><code id="L4670"><span class="ln">4670</span><span class="c">     **
+</span></code><code id="L4671"><span class="ln">4671</span><span class="c">    <span class="s"> * </span>Returns length of the given path <b>in</b> pixels.
+</span></code><code id="L4672"><span class="ln">4672</span><span class="c">     **
+</span></code><code id="L4673"><span class="ln">4673</span><span class="c">     > Parameters
+</span></code><code id="L4674"><span class="ln">4674</span><span class="c">     **
+</span></code><code id="L4675"><span class="ln">4675</span><span class="c">    <span class="s"> - </span>path (string) SVG path string.
+</span></code><code id="L4676"><span class="ln">4676</span><span class="c">     **
+</span></code><code id="L4677"><span class="ln">4677</span><span class="c">    <span class="s"> = </span>(number) length.
+</span></code><code id="L4678"><span class="ln">4678</span><span class="c">    \*/</span>
+</code><code id="L4679"><span class="ln">4679</span>    R.getTotalLength<span class="s"> = </span>getTotalLength;
+</code><code id="L4680"><span class="ln">4680</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4681"><span class="ln">4681</span><span class="c">    <span class="s"> * </span>Raphael.getPointAtLength
+</span></code><code id="L4682"><span class="ln">4682</span><span class="c">     [ method ]
+</span></code><code id="L4683"><span class="ln">4683</span><span class="c">     **
+</span></code><code id="L4684"><span class="ln">4684</span><span class="c">    <span class="s"> * </span>Return coordinates of the point located at the given length on the given path.
+</span></code><code id="L4685"><span class="ln">4685</span><span class="c">     **
+</span></code><code id="L4686"><span class="ln">4686</span><span class="c">     > Parameters
+</span></code><code id="L4687"><span class="ln">4687</span><span class="c">     **
+</span></code><code id="L4688"><span class="ln">4688</span><span class="c">    <span class="s"> - </span>path (string) SVG path string
+</span></code><code id="L4689"><span class="ln">4689</span><span class="c">    <span class="s"> - </span>length (number)
+</span></code><code id="L4690"><span class="ln">4690</span><span class="c">     **
+</span></code><code id="L4691"><span class="ln">4691</span><span class="c">    <span class="s"> = </span>(object) representation of the point:
+</span></code><code id="L4692"><span class="ln">4692</span><span class="c">     o {
+</span></code><code id="L4693"><span class="ln">4693</span><span class="c">     o     x: (number) x coordinate
+</span></code><code id="L4694"><span class="ln">4694</span><span class="c">     o     y: (number) y coordinate
+</span></code><code id="L4695"><span class="ln">4695</span><span class="c">     o     alpha: (number) angle of derivative
+</span></code><code id="L4696"><span class="ln">4696</span><span class="c">     o }
+</span></code><code id="L4697"><span class="ln">4697</span><span class="c">    \*/</span>
+</code><code id="L4698"><span class="ln">4698</span>    R.getPointAtLength<span class="s"> = </span>getPointAtLength;
+</code><code id="L4699"><span class="ln">4699</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4700"><span class="ln">4700</span><span class="c">    <span class="s"> * </span>Raphael.getSubpath
+</span></code><code id="L4701"><span class="ln">4701</span><span class="c">     [ method ]
+</span></code><code id="L4702"><span class="ln">4702</span><span class="c">     **
+</span></code><code id="L4703"><span class="ln">4703</span><span class="c">    <span class="s"> * </span>Return subpath of a given path from given length to given length.
+</span></code><code id="L4704"><span class="ln">4704</span><span class="c">     **
+</span></code><code id="L4705"><span class="ln">4705</span><span class="c">     > Parameters
+</span></code><code id="L4706"><span class="ln">4706</span><span class="c">     **
+</span></code><code id="L4707"><span class="ln">4707</span><span class="c">    <span class="s"> - </span>path (string) SVG path string
+</span></code><code id="L4708"><span class="ln">4708</span><span class="c">    <span class="s"> - </span>from (number) position of the start of the segment
+</span></code><code id="L4709"><span class="ln">4709</span><span class="c">    <span class="s"> - </span>to (number) position of the end of the segment
+</span></code><code id="L4710"><span class="ln">4710</span><span class="c">     **
+</span></code><code id="L4711"><span class="ln">4711</span><span class="c">    <span class="s"> = </span>(string) pathstring <b>for</b> the segment
+</span></code><code id="L4712"><span class="ln">4712</span><span class="c">    \*/</span>
+</code><code id="L4713"><span class="ln">4713</span>    R.getSubpath<span class="s"> = </span><b>function</b> (path, from, to) {
+</code><code id="L4714"><span class="ln">4714</span>        <b>if</b> (abs(<b>this</b>.getTotalLength(path)<span class="s"> - </span>to) &lt; <span class="d">1e-6</span>) {
+</code><code id="L4715"><span class="ln">4715</span>            <b>return</b> getSubpathsAtLength(path, from).end;
+</code><code id="L4716"><span class="ln">4716</span>        }
+</code><code id="L4717"><span class="ln">4717</span>        <b>var</b> a<span class="s"> = </span>getSubpathsAtLength(path, to, <span class="d">1</span>);
+</code><code id="L4718"><span class="ln">4718</span>        <b>return</b> from ? getSubpathsAtLength(a, from).end : a;
+</code><code id="L4719"><span class="ln">4719</span>    };
+</code><code id="L4720"><span class="ln">4720</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4721"><span class="ln">4721</span><span class="c">    <span class="s"> * </span>Element.getTotalLength
+</span></code><code id="L4722"><span class="ln">4722</span><span class="c">     [ method ]
+</span></code><code id="L4723"><span class="ln">4723</span><span class="c">     **
+</span></code><code id="L4724"><span class="ln">4724</span><span class="c">    <span class="s"> * </span>Returns length of the path <b>in</b> pixels. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4725"><span class="ln">4725</span><span class="c">    <span class="s"> = </span>(number) length.
+</span></code><code id="L4726"><span class="ln">4726</span><span class="c">    \*/</span>
+</code><code id="L4727"><span class="ln">4727</span>    elproto.getTotalLength<span class="s"> = </span><b>function</b> () {
+</code><code id="L4728"><span class="ln">4728</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4729"><span class="ln">4729</span>        <b>if</b> (<b>this</b>.node.getTotalLength) {
+</code><code id="L4730"><span class="ln">4730</span>            <b>return</b> <b>this</b>.node.getTotalLength();
+</code><code id="L4731"><span class="ln">4731</span>        }
+</code><code id="L4732"><span class="ln">4732</span>        <b>return</b> getTotalLength(<b>this</b>.attrs.path);
+</code><code id="L4733"><span class="ln">4733</span>    };
+</code><code id="L4734"><span class="ln">4734</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4735"><span class="ln">4735</span><span class="c">    <span class="s"> * </span>Element.getPointAtLength
+</span></code><code id="L4736"><span class="ln">4736</span><span class="c">     [ method ]
+</span></code><code id="L4737"><span class="ln">4737</span><span class="c">     **
+</span></code><code id="L4738"><span class="ln">4738</span><span class="c">    <span class="s"> * </span>Return coordinates of the point located at the given length on the given path. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4739"><span class="ln">4739</span><span class="c">     **
+</span></code><code id="L4740"><span class="ln">4740</span><span class="c">     > Parameters
+</span></code><code id="L4741"><span class="ln">4741</span><span class="c">     **
+</span></code><code id="L4742"><span class="ln">4742</span><span class="c">    <span class="s"> - </span>length (number)
 </span></code><code id="L4743"><span class="ln">4743</span><span class="c">     **
-</span></code><code id="L4744"><span class="ln">4744</span><span class="c">    <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given delay.
-</span></code><code id="L4745"><span class="ln">4745</span><span class="c">     **
-</span></code><code id="L4746"><span class="ln">4746</span><span class="c">     > Parameters
-</span></code><code id="L4747"><span class="ln">4747</span><span class="c">     **
-</span></code><code id="L4748"><span class="ln">4748</span><span class="c">    <span class="s"> - </span>delay (number) number of ms to pass between animation start and actual animation
-</span></code><code id="L4749"><span class="ln">4749</span><span class="c">     **
-</span></code><code id="L4750"><span class="ln">4750</span><span class="c">    <span class="s"> = </span>(object) <b>new</b> altered Animation object
-</span></code><code id="L4751"><span class="ln">4751</span><span class="c">    \*/</span>
-</code><code id="L4752"><span class="ln">4752</span>    Animation.prototype.delay<span class="s"> = </span><b>function</b> (delay) {
-</code><code id="L4753"><span class="ln">4753</span>        <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
-</code><code id="L4754"><span class="ln">4754</span>        a.times<span class="s"> = </span><b>this</b>.times;
-</code><code id="L4755"><span class="ln">4755</span>        a.del<span class="s"> = </span>+delay<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L4756"><span class="ln">4756</span>        <b>return</b> a;
-</code><code id="L4757"><span class="ln">4757</span>    };
-</code><code id="L4758"><span class="ln">4758</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4759"><span class="ln">4759</span><span class="c">    <span class="s"> * </span>Animation.repeat
-</span></code><code id="L4760"><span class="ln">4760</span><span class="c">     [ method ]
-</span></code><code id="L4761"><span class="ln">4761</span><span class="c">     **
-</span></code><code id="L4762"><span class="ln">4762</span><span class="c">    <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given repetition.
-</span></code><code id="L4763"><span class="ln">4763</span><span class="c">     **
-</span></code><code id="L4764"><span class="ln">4764</span><span class="c">     > Parameters
+</span></code><code id="L4744"><span class="ln">4744</span><span class="c">    <span class="s"> = </span>(object) representation of the point:
+</span></code><code id="L4745"><span class="ln">4745</span><span class="c">     o {
+</span></code><code id="L4746"><span class="ln">4746</span><span class="c">     o     x: (number) x coordinate
+</span></code><code id="L4747"><span class="ln">4747</span><span class="c">     o     y: (number) y coordinate
+</span></code><code id="L4748"><span class="ln">4748</span><span class="c">     o     alpha: (number) angle of derivative
+</span></code><code id="L4749"><span class="ln">4749</span><span class="c">     o }
+</span></code><code id="L4750"><span class="ln">4750</span><span class="c">    \*/</span>
+</code><code id="L4751"><span class="ln">4751</span>    elproto.getPointAtLength<span class="s"> = </span><b>function</b> (length) {
+</code><code id="L4752"><span class="ln">4752</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4753"><span class="ln">4753</span>        <b>return</b> getPointAtLength(<b>this</b>.attrs.path, length);
+</code><code id="L4754"><span class="ln">4754</span>    };
+</code><code id="L4755"><span class="ln">4755</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4756"><span class="ln">4756</span><span class="c">    <span class="s"> * </span>Element.getSubpath
+</span></code><code id="L4757"><span class="ln">4757</span><span class="c">     [ method ]
+</span></code><code id="L4758"><span class="ln">4758</span><span class="c">     **
+</span></code><code id="L4759"><span class="ln">4759</span><span class="c">    <span class="s"> * </span>Return subpath of a given element from given length to given length. Only works <b>for</b> element of “path” type.
+</span></code><code id="L4760"><span class="ln">4760</span><span class="c">     **
+</span></code><code id="L4761"><span class="ln">4761</span><span class="c">     > Parameters
+</span></code><code id="L4762"><span class="ln">4762</span><span class="c">     **
+</span></code><code id="L4763"><span class="ln">4763</span><span class="c">    <span class="s"> - </span>from (number) position of the start of the segment
+</span></code><code id="L4764"><span class="ln">4764</span><span class="c">    <span class="s"> - </span>to (number) position of the end of the segment
 </span></code><code id="L4765"><span class="ln">4765</span><span class="c">     **
-</span></code><code id="L4766"><span class="ln">4766</span><span class="c">    <span class="s"> - </span>repeat (number) number iterations of animation. For infinite animation pass `Infinity`
-</span></code><code id="L4767"><span class="ln">4767</span><span class="c">     **
-</span></code><code id="L4768"><span class="ln">4768</span><span class="c">    <span class="s"> = </span>(object) <b>new</b> altered Animation object
-</span></code><code id="L4769"><span class="ln">4769</span><span class="c">    \*/</span>
-</code><code id="L4770"><span class="ln">4770</span>    Animation.prototype.repeat<span class="s"> = </span><b>function</b> (times) { 
-</code><code id="L4771"><span class="ln">4771</span>        <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
-</code><code id="L4772"><span class="ln">4772</span>        a.del<span class="s"> = </span><b>this</b>.del;
-</code><code id="L4773"><span class="ln">4773</span>        a.times<span class="s"> = </span>math.floor(mmax(times, <span class="d">0</span>))<span class="s"> || </span><span class="d">1</span>;
-</code><code id="L4774"><span class="ln">4774</span>        <b>return</b> a;
-</code><code id="L4775"><span class="ln">4775</span>    };
-</code><code id="L4776"><span class="ln">4776</span>    <b>function</b> runAnimation(anim, element, percent, status, totalOrigin) {
-</code><code id="L4777"><span class="ln">4777</span>        percent<span class="s"> = </span>toFloat(percent);
-</code><code id="L4778"><span class="ln">4778</span>        <b>var</b> params,
-</code><code id="L4779"><span class="ln">4779</span>            isInAnim,
-</code><code id="L4780"><span class="ln">4780</span>            isInAnimSet,
-</code><code id="L4781"><span class="ln">4781</span>            percents<span class="s"> = </span>[],
-</code><code id="L4782"><span class="ln">4782</span>            next,
-</code><code id="L4783"><span class="ln">4783</span>            prev,
-</code><code id="L4784"><span class="ln">4784</span>            timestamp,
-</code><code id="L4785"><span class="ln">4785</span>            ms<span class="s"> = </span>anim.ms,
-</code><code id="L4786"><span class="ln">4786</span>            from<span class="s"> = </span>{},
-</code><code id="L4787"><span class="ln">4787</span>            to<span class="s"> = </span>{},
-</code><code id="L4788"><span class="ln">4788</span>            diff<span class="s"> = </span>{};
-</code><code id="L4789"><span class="ln">4789</span>        <b>if</b> (status) {
-</code><code id="L4790"><span class="ln">4790</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i &lt; ii; i++) {
-</code><code id="L4791"><span class="ln">4791</span>                <b>var</b> e<span class="s"> = </span>animationElements[i];
-</code><code id="L4792"><span class="ln">4792</span>                <b>if</b> (e.el.id<span class="s"> == </span>element.id &amp;&amp; e.anim<span class="s"> == </span>anim) {
-</code><code id="L4793"><span class="ln">4793</span>                    <b>if</b> (e.percent != percent) {
-</code><code id="L4794"><span class="ln">4794</span>                        animationElements.splice(i, <span class="d">1</span>);
-</code><code id="L4795"><span class="ln">4795</span>                        isInAnimSet<span class="s"> = </span><span class="d">1</span>;
-</code><code id="L4796"><span class="ln">4796</span>                    } <b>else</b> {
-</code><code id="L4797"><span class="ln">4797</span>                        isInAnim<span class="s"> = </span>e;
-</code><code id="L4798"><span class="ln">4798</span>                    }
-</code><code id="L4799"><span class="ln">4799</span>                    element.attr(e.totalOrigin);
-</code><code id="L4800"><span class="ln">4800</span>                    <b>break</b>;
-</code><code id="L4801"><span class="ln">4801</span>                }
-</code><code id="L4802"><span class="ln">4802</span>            }
-</code><code id="L4803"><span class="ln">4803</span>        } <b>else</b> {
-</code><code id="L4804"><span class="ln">4804</span>            status<span class="s"> = </span><span class="d">0</span><span class="s"> / </span><span class="d">0</span>;
-</code><code id="L4805"><span class="ln">4805</span>        }
-</code><code id="L4806"><span class="ln">4806</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>anim.percents.length; i &lt; ii; i++) {
-</code><code id="L4807"><span class="ln">4807</span>            <b>if</b> (anim.percents[i]<span class="s"> == </span>percent<span class="s"> || </span>anim.percents[i] > status<span class="s"> * </span>anim.top) {
-</code><code id="L4808"><span class="ln">4808</span>                percent<span class="s"> = </span>anim.percents[i];
-</code><code id="L4809"><span class="ln">4809</span>                prev<span class="s"> = </span>anim.percents[i<span class="s"> - </span><span class="d">1</span>]<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L4810"><span class="ln">4810</span>                ms<span class="s"> = </span>ms<span class="s"> / </span>anim.top<span class="s"> * </span>(percent<span class="s"> - </span>prev);
-</code><code id="L4811"><span class="ln">4811</span>                next<span class="s"> = </span>anim.percents[i<span class="s"> + </span><span class="d">1</span>];
-</code><code id="L4812"><span class="ln">4812</span>                params<span class="s"> = </span>anim.anim[percent];
-</code><code id="L4813"><span class="ln">4813</span>                <b>break</b>;
-</code><code id="L4814"><span class="ln">4814</span>            } <b>else</b> <b>if</b> (status) {
-</code><code id="L4815"><span class="ln">4815</span>                element.attr(anim.anim[anim.percents[i]]);
-</code><code id="L4816"><span class="ln">4816</span>            }
-</code><code id="L4817"><span class="ln">4817</span>        }
-</code><code id="L4818"><span class="ln">4818</span>        <b>if</b> (!params) {
-</code><code id="L4819"><span class="ln">4819</span>            <b>return</b>;
-</code><code id="L4820"><span class="ln">4820</span>        }
-</code><code id="L4821"><span class="ln">4821</span>        <b>if</b> (!isInAnim) {
-</code><code id="L4822"><span class="ln">4822</span>            <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr)) {
-</code><code id="L4823"><span class="ln">4823</span>                <b>if</b> (availableAnimAttrs[has](attr)<span class="s"> || </span>element.paper.customAttributes[has](attr)) {
-</code><code id="L4824"><span class="ln">4824</span>                    from[attr]<span class="s"> = </span>element.attr(attr);
-</code><code id="L4825"><span class="ln">4825</span>                    (from[attr]<span class="s"> == </span><b>null</b>) &amp;&amp; (from[attr]<span class="s"> = </span>availableAttrs[attr]);
-</code><code id="L4826"><span class="ln">4826</span>                    to[attr]<span class="s"> = </span>params[attr];
-</code><code id="L4827"><span class="ln">4827</span>                    <b>switch</b> (availableAnimAttrs[attr]) {
-</code><code id="L4828"><span class="ln">4828</span>                        <b>case</b> nu:
-</code><code id="L4829"><span class="ln">4829</span>                            diff[attr]<span class="s"> = </span>(to[attr]<span class="s"> - </span>from[attr])<span class="s"> / </span>ms;
-</code><code id="L4830"><span class="ln">4830</span>                            <b>break</b>;
-</code><code id="L4831"><span class="ln">4831</span>                        <b>case</b> <i>"colour"</i>:
-</code><code id="L4832"><span class="ln">4832</span>                            from[attr]<span class="s"> = </span>R.getRGB(from[attr]);
-</code><code id="L4833"><span class="ln">4833</span>                            <b>var</b> toColour<span class="s"> = </span>R.getRGB(to[attr]);
-</code><code id="L4834"><span class="ln">4834</span>                            diff[attr]<span class="s"> = </span>{
-</code><code id="L4835"><span class="ln">4835</span>                                r: (toColour.r<span class="s"> - </span>from[attr].r)<span class="s"> / </span>ms,
-</code><code id="L4836"><span class="ln">4836</span>                                g: (toColour.g<span class="s"> - </span>from[attr].g)<span class="s"> / </span>ms,
-</code><code id="L4837"><span class="ln">4837</span>                                b: (toColour.b<span class="s"> - </span>from[attr].b)<span class="s"> / </span>ms
-</code><code id="L4838"><span class="ln">4838</span>                            };
-</code><code id="L4839"><span class="ln">4839</span>                            <b>break</b>;
-</code><code id="L4840"><span class="ln">4840</span>                        <b>case</b> <i>"path"</i>:
-</code><code id="L4841"><span class="ln">4841</span>                            <b>var</b> pathes<span class="s"> = </span>path2curve(from[attr], to[attr]),
-</code><code id="L4842"><span class="ln">4842</span>                                toPath<span class="s"> = </span>pathes[<span class="d">1</span>];
-</code><code id="L4843"><span class="ln">4843</span>                            from[attr]<span class="s"> = </span>pathes[<span class="d">0</span>];
-</code><code id="L4844"><span class="ln">4844</span>                            diff[attr]<span class="s"> = </span>[];
-</code><code id="L4845"><span class="ln">4845</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
-</code><code id="L4846"><span class="ln">4846</span>                                diff[attr][i]<span class="s"> = </span>[<span class="d">0</span>];
-</code><code id="L4847"><span class="ln">4847</span>                                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
-</code><code id="L4848"><span class="ln">4848</span>                                    diff[attr][i][j]<span class="s"> = </span>(toPath[i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
-</code><code id="L4849"><span class="ln">4849</span>                                }
-</code><code id="L4850"><span class="ln">4850</span>                            }
-</code><code id="L4851"><span class="ln">4851</span>                            <b>break</b>;
-</code><code id="L4852"><span class="ln">4852</span>                        <b>case</b> <i>"transform"</i>:
-</code><code id="L4853"><span class="ln">4853</span>                            <b>var</b> _<span class="s"> = </span>element._,
-</code><code id="L4854"><span class="ln">4854</span>                                eq<span class="s"> = </span>equaliseTransform(_[attr], to[attr]);
-</code><code id="L4855"><span class="ln">4855</span>                            <b>if</b> (eq) {
-</code><code id="L4856"><span class="ln">4856</span>                                from[attr]<span class="s"> = </span>eq.from;
-</code><code id="L4857"><span class="ln">4857</span>                                to[attr]<span class="s"> = </span>eq.to;
-</code><code id="L4858"><span class="ln">4858</span>                                diff[attr]<span class="s"> = </span>[];
-</code><code id="L4859"><span class="ln">4859</span>                                diff[attr].real<span class="s"> = </span><b>true</b>;
-</code><code id="L4860"><span class="ln">4860</span>                                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
-</code><code id="L4861"><span class="ln">4861</span>                                    diff[attr][i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
-</code><code id="L4862"><span class="ln">4862</span>                                    <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
-</code><code id="L4863"><span class="ln">4863</span>                                        diff[attr][i][j]<span class="s"> = </span>(to[attr][i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
-</code><code id="L4864"><span class="ln">4864</span>                                    }
-</code><code id="L4865"><span class="ln">4865</span>                                }
-</code><code id="L4866"><span class="ln">4866</span>                            } <b>else</b> {
-</code><code id="L4867"><span class="ln">4867</span>                                <b>var</b> m<span class="s"> = </span>(element.matrix<span class="s"> || </span><b>new</b> Matrix).m,
-</code><code id="L4868"><span class="ln">4868</span>                                    to2<span class="s"> = </span>{_:{transform: _.transform}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};
-</code><code id="L4869"><span class="ln">4869</span>                                from[attr]<span class="s"> = </span>[
-</code><code id="L4870"><span class="ln">4870</span>                                    m[<span class="d">0</span>][<span class="d">0</span>],
-</code><code id="L4871"><span class="ln">4871</span>                                    m[<span class="d">1</span>][<span class="d">0</span>],
-</code><code id="L4872"><span class="ln">4872</span>                                    m[<span class="d">0</span>][<span class="d">1</span>],
-</code><code id="L4873"><span class="ln">4873</span>                                    m[<span class="d">1</span>][<span class="d">1</span>],
-</code><code id="L4874"><span class="ln">4874</span>                                    m[<span class="d">0</span>][<span class="d">2</span>],
-</code><code id="L4875"><span class="ln">4875</span>                                    m[<span class="d">1</span>][<span class="d">2</span>]
-</code><code id="L4876"><span class="ln">4876</span>                                ];
-</code><code id="L4877"><span class="ln">4877</span>                                extractTransform(to2, to[attr]);
-</code><code id="L4878"><span class="ln">4878</span>                                to[attr]<span class="s"> = </span>to2._.transform;
-</code><code id="L4879"><span class="ln">4879</span>                                diff[attr]<span class="s"> = </span>[
-</code><code id="L4880"><span class="ln">4880</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
-</code><code id="L4881"><span class="ln">4881</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
-</code><code id="L4882"><span class="ln">4882</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
-</code><code id="L4883"><span class="ln">4883</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
-</code><code id="L4884"><span class="ln">4884</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">2</span>])<span class="s"> / </span>ms,
-</code><code id="L4885"><span class="ln">4885</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">2</span>])<span class="s"> / </span>ms
-</code><code id="L4886"><span class="ln">4886</span>                                ];
-</code><code id="L4887"><span class="ln">4887</span>                                <span class="c">// from[attr]<span class="s"> = </span>[_.sx, _.sy, _.deg, _.dx, _.dy];</span>
-</code><code id="L4888"><span class="ln">4888</span>                                <span class="c">// <b>var</b> to2<span class="s"> = </span>{_:{}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};</span>
-</code><code id="L4889"><span class="ln">4889</span>                                <span class="c">// extractTransform(to2, to[attr]);</span>
-</code><code id="L4890"><span class="ln">4890</span>                                <span class="c">// diff[attr]<span class="s"> = </span>[</span>
-</code><code id="L4891"><span class="ln">4891</span>                                <span class="c">//     (to2._.sx<span class="s"> - </span>_.sx)<span class="s"> / </span>ms,</span>
-</code><code id="L4892"><span class="ln">4892</span>                                <span class="c">//     (to2._.sy<span class="s"> - </span>_.sy)<span class="s"> / </span>ms,</span>
-</code><code id="L4893"><span class="ln">4893</span>                                <span class="c">//     (to2._.deg<span class="s"> - </span>_.deg)<span class="s"> / </span>ms,</span>
-</code><code id="L4894"><span class="ln">4894</span>                                <span class="c">//     (to2._.dx<span class="s"> - </span>_.dx)<span class="s"> / </span>ms,</span>
-</code><code id="L4895"><span class="ln">4895</span>                                <span class="c">//     (to2._.dy<span class="s"> - </span>_.dy)<span class="s"> / </span>ms</span>
-</code><code id="L4896"><span class="ln">4896</span>                                <span class="c">// ];</span>
-</code><code id="L4897"><span class="ln">4897</span>                            }
-</code><code id="L4898"><span class="ln">4898</span>                            <b>break</b>;
-</code><code id="L4899"><span class="ln">4899</span>                        <b>case</b> <i>"csv"</i>:
-</code><code id="L4900"><span class="ln">4900</span>                            <b>var</b> values<span class="s"> = </span>Str(params[attr]).split(separator),
-</code><code id="L4901"><span class="ln">4901</span>                                from2<span class="s"> = </span>Str(from[attr]).split(separator);
-</code><code id="L4902"><span class="ln">4902</span>                            <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
-</code><code id="L4903"><span class="ln">4903</span>                                from[attr]<span class="s"> = </span>from2;
-</code><code id="L4904"><span class="ln">4904</span>                                diff[attr]<span class="s"> = </span>[];
-</code><code id="L4905"><span class="ln">4905</span>                                i<span class="s"> = </span>from2.length;
-</code><code id="L4906"><span class="ln">4906</span>                                <b>while</b> (i--) {
-</code><code id="L4907"><span class="ln">4907</span>                                    diff[attr][i]<span class="s"> = </span>(values[i]<span class="s"> - </span>from[attr][i])<span class="s"> / </span>ms;
-</code><code id="L4908"><span class="ln">4908</span>                                }
-</code><code id="L4909"><span class="ln">4909</span>                            }
-</code><code id="L4910"><span class="ln">4910</span>                            to[attr]<span class="s"> = </span>values;
-</code><code id="L4911"><span class="ln">4911</span>                            <b>break</b>;
-</code><code id="L4912"><span class="ln">4912</span>                        <b>default</b>:
-</code><code id="L4913"><span class="ln">4913</span>                            values<span class="s"> = </span>[].concat(params[attr]);
-</code><code id="L4914"><span class="ln">4914</span>                            from2<span class="s"> = </span>[].concat(from[attr]);
-</code><code id="L4915"><span class="ln">4915</span>                            diff[attr]<span class="s"> = </span>[];
-</code><code id="L4916"><span class="ln">4916</span>                            i<span class="s"> = </span>element.paper.customAttributes[attr].length;
-</code><code id="L4917"><span class="ln">4917</span>                            <b>while</b> (i--) {
-</code><code id="L4918"><span class="ln">4918</span>                                diff[attr][i]<span class="s"> = </span>((values[i]<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span>(from2[i]<span class="s"> || </span><span class="d">0</span>))<span class="s"> / </span>ms;
-</code><code id="L4919"><span class="ln">4919</span>                            }
-</code><code id="L4920"><span class="ln">4920</span>                            <b>break</b>;
-</code><code id="L4921"><span class="ln">4921</span>                    }
-</code><code id="L4922"><span class="ln">4922</span>                }
-</code><code id="L4923"><span class="ln">4923</span>            }
-</code><code id="L4924"><span class="ln">4924</span>            <b>var</b> easing<span class="s"> = </span>params.easing,
-</code><code id="L4925"><span class="ln">4925</span>                easyeasy<span class="s"> = </span>R.easing_formulas[easing];
-</code><code id="L4926"><span class="ln">4926</span>            <b>if</b> (!easyeasy) {
-</code><code id="L4927"><span class="ln">4927</span>                easyeasy<span class="s"> = </span>Str(easing).match(bezierrg);
-</code><code id="L4928"><span class="ln">4928</span>                <b>if</b> (easyeasy &amp;&amp; easyeasy.length<span class="s"> == </span><span class="d">5</span>) {
-</code><code id="L4929"><span class="ln">4929</span>                    <b>var</b> curve<span class="s"> = </span>easyeasy;
-</code><code id="L4930"><span class="ln">4930</span>                    easyeasy<span class="s"> = </span><b>function</b> (t) {
-</code><code id="L4931"><span class="ln">4931</span>                        <b>return</b> CubicBezierAtTime(t, +curve[<span class="d">1</span>], +curve[<span class="d">2</span>], +curve[<span class="d">3</span>], +curve[<span class="d">4</span>], ms);
-</code><code id="L4932"><span class="ln">4932</span>                    };
-</code><code id="L4933"><span class="ln">4933</span>                } <b>else</b> {
-</code><code id="L4934"><span class="ln">4934</span>                    easyeasy<span class="s"> = </span>pipe;
-</code><code id="L4935"><span class="ln">4935</span>                }
-</code><code id="L4936"><span class="ln">4936</span>            }
-</code><code id="L4937"><span class="ln">4937</span>            timestamp<span class="s"> = </span>params.start<span class="s"> || </span>anim.start<span class="s"> || </span>+<b>new</b> Date;
-</code><code id="L4938"><span class="ln">4938</span>            e<span class="s"> = </span>{
-</code><code id="L4939"><span class="ln">4939</span>                anim: anim,
-</code><code id="L4940"><span class="ln">4940</span>                percent: percent,
-</code><code id="L4941"><span class="ln">4941</span>                timestamp: timestamp,
-</code><code id="L4942"><span class="ln">4942</span>                start: timestamp<span class="s"> + </span>(anim.del<span class="s"> || </span><span class="d">0</span>),
-</code><code id="L4943"><span class="ln">4943</span>                status: <span class="d">0</span>,
-</code><code id="L4944"><span class="ln">4944</span>                initstatus: status<span class="s"> || </span><span class="d">0</span>,
-</code><code id="L4945"><span class="ln">4945</span>                stop: <b>false</b>,
-</code><code id="L4946"><span class="ln">4946</span>                ms: ms,
-</code><code id="L4947"><span class="ln">4947</span>                easing: easyeasy,
-</code><code id="L4948"><span class="ln">4948</span>                from: from,
-</code><code id="L4949"><span class="ln">4949</span>                diff: diff,
-</code><code id="L4950"><span class="ln">4950</span>                to: to,
-</code><code id="L4951"><span class="ln">4951</span>                el: element,
-</code><code id="L4952"><span class="ln">4952</span>                callback: params.callback,
-</code><code id="L4953"><span class="ln">4953</span>                prev: prev,
-</code><code id="L4954"><span class="ln">4954</span>                next: next,
-</code><code id="L4955"><span class="ln">4955</span>                repeat: anim.times,
-</code><code id="L4956"><span class="ln">4956</span>                origin: element.attr(),
-</code><code id="L4957"><span class="ln">4957</span>                totalOrigin: totalOrigin
-</code><code id="L4958"><span class="ln">4958</span>            };
-</code><code id="L4959"><span class="ln">4959</span>            animationElements.push(e);
-</code><code id="L4960"><span class="ln">4960</span>            <b>if</b> (status &amp;&amp; !isInAnim) {
-</code><code id="L4961"><span class="ln">4961</span>                e.stop<span class="s"> = </span><b>true</b>;
-</code><code id="L4962"><span class="ln">4962</span>                e.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>ms<span class="s"> * </span>status;
-</code><code id="L4963"><span class="ln">4963</span>                <b>if</b> (animationElements.length<span class="s"> == </span><span class="d">1</span>) {
-</code><code id="L4964"><span class="ln">4964</span>                    <b>return</b> animation();
-</code><code id="L4965"><span class="ln">4965</span>                }
-</code><code id="L4966"><span class="ln">4966</span>            }
-</code><code id="L4967"><span class="ln">4967</span>            animationElements.length<span class="s"> == </span><span class="d">1</span> &amp;&amp; requestAnimFrame(animation);
-</code><code id="L4968"><span class="ln">4968</span>        } <b>else</b> {
-</code><code id="L4969"><span class="ln">4969</span>            isInAnim.initstatus<span class="s"> = </span>status;
-</code><code id="L4970"><span class="ln">4970</span>            isInAnim.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>isInAnim.ms<span class="s"> * </span>status;
-</code><code id="L4971"><span class="ln">4971</span>        }
-</code><code id="L4972"><span class="ln">4972</span>        eve(<i>"anim.start."</i><span class="s"> + </span>element.id, element, anim);
-</code><code id="L4973"><span class="ln">4973</span>    }
-</code><code id="L4974"><span class="ln">4974</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L4975"><span class="ln">4975</span><span class="c">    <span class="s"> * </span>Raphael.animation
-</span></code><code id="L4976"><span class="ln">4976</span><span class="c">     [ method ]
-</span></code><code id="L4977"><span class="ln">4977</span><span class="c">     **
-</span></code><code id="L4978"><span class="ln">4978</span><span class="c">    <span class="s"> * </span>Creates animation object. That later could be used <b>for</b> @Element.animate or @Element.animateWith methods.
-</span></code><code id="L4979"><span class="ln">4979</span><span class="c">    <span class="s"> * </span>See also @Animation.delay and @Animation.repeat methods.
-</span></code><code id="L4980"><span class="ln">4980</span><span class="c">     **
-</span></code><code id="L4981"><span class="ln">4981</span><span class="c">     > Parameters
-</span></code><code id="L4982"><span class="ln">4982</span><span class="c">     **
-</span></code><code id="L4983"><span class="ln">4983</span><span class="c">    <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
-</span></code><code id="L4984"><span class="ln">4984</span><span class="c">    <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
-</span></code><code id="L4985"><span class="ln">4985</span><span class="c">    <span class="s"> - </span>easing (string) #optional easing type. Accept one of @Raphael.easing_formulas or CSS format: `cubic-bezier(XX, XX, XX, XX)`
-</span></code><code id="L4986"><span class="ln">4986</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L4766"><span class="ln">4766</span><span class="c">    <span class="s"> = </span>(string) pathstring <b>for</b> the segment
+</span></code><code id="L4767"><span class="ln">4767</span><span class="c">    \*/</span>
+</code><code id="L4768"><span class="ln">4768</span>    elproto.getSubpath<span class="s"> = </span><b>function</b> (from, to) {
+</code><code id="L4769"><span class="ln">4769</span>        <b>if</b> (<b>this</b>.type != <i>"path"</i>) {<b>return</b>;}
+</code><code id="L4770"><span class="ln">4770</span>        <b>return</b> R.getSubpath(<b>this</b>.attrs.path, from, to);
+</code><code id="L4771"><span class="ln">4771</span>    };
+</code><code id="L4772"><span class="ln">4772</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4773"><span class="ln">4773</span><span class="c">    <span class="s"> * </span>Raphael.easing_formulas
+</span></code><code id="L4774"><span class="ln">4774</span><span class="c">     [ property ]
+</span></code><code id="L4775"><span class="ln">4775</span><span class="c">     **
+</span></code><code id="L4776"><span class="ln">4776</span><span class="c">    <span class="s"> * </span>Object that contains easing formulas <b>for</b> animation. You could extend it <b>with</b> your owns. By <b>default</b> it has following list of easing:
+</span></code><code id="L4777"><span class="ln">4777</span><span class="c">     # &lt;ul>
+</span></code><code id="L4778"><span class="ln">4778</span><span class="c">     #     &lt;li>“linear”&lt;/li>
+</span></code><code id="L4779"><span class="ln">4779</span><span class="c">     #     &lt;li>“&lt;” or “easeIn” or “ease-<b>in</b>”&lt;/li>
+</span></code><code id="L4780"><span class="ln">4780</span><span class="c">     #     &lt;li>“>” or “easeOut” or “ease-out”&lt;/li>
+</span></code><code id="L4781"><span class="ln">4781</span><span class="c">     #     &lt;li>“&lt;>” or “easeInOut” or “ease-<b>in</b>-out”&lt;/li>
+</span></code><code id="L4782"><span class="ln">4782</span><span class="c">     #     &lt;li>“backIn” or “back-<b>in</b>”&lt;/li>
+</span></code><code id="L4783"><span class="ln">4783</span><span class="c">     #     &lt;li>“backOut” or “back-out”&lt;/li>
+</span></code><code id="L4784"><span class="ln">4784</span><span class="c">     #     &lt;li>“elastic”&lt;/li>
+</span></code><code id="L4785"><span class="ln">4785</span><span class="c">     #     &lt;li>“bounce”&lt;/li>
+</span></code><code id="L4786"><span class="ln">4786</span><span class="c">     # &lt;/ul>
+</span></code><code id="L4787"><span class="ln">4787</span><span class="c">     # &lt;p>See also &lt;a href=<i>"http:<span class="c">//raphaeljs.com/easing.html"</i>>Easing demo&lt;/a>.&lt;/p></span>
+</span></code><code id="L4788"><span class="ln">4788</span><span class="c">    \*/</span>
+</code><code id="L4789"><span class="ln">4789</span>    <b>var</b> ef<span class="s"> = </span>R.easing_formulas<span class="s"> = </span>{
+</code><code id="L4790"><span class="ln">4790</span>        linear: <b>function</b> (n) {
+</code><code id="L4791"><span class="ln">4791</span>            <b>return</b> n;
+</code><code id="L4792"><span class="ln">4792</span>        },
+</code><code id="L4793"><span class="ln">4793</span>        <i>"&lt;"</i>: <b>function</b> (n) {
+</code><code id="L4794"><span class="ln">4794</span>            <b>return</b> pow(n, <span class="d">1.7</span>);
+</code><code id="L4795"><span class="ln">4795</span>        },
+</code><code id="L4796"><span class="ln">4796</span>        <i>">"</i>: <b>function</b> (n) {
+</code><code id="L4797"><span class="ln">4797</span>            <b>return</b> pow(n, <span class="d">.48</span>);
+</code><code id="L4798"><span class="ln">4798</span>        },
+</code><code id="L4799"><span class="ln">4799</span>        <i>"&lt;>"</i>: <b>function</b> (n) {
+</code><code id="L4800"><span class="ln">4800</span>            <b>var</b> q<span class="s"> = </span><span class="d">.48</span><span class="s"> - </span>n<span class="s"> / </span><span class="d">1.04</span>,
+</code><code id="L4801"><span class="ln">4801</span>                Q<span class="s"> = </span>math.sqrt(<span class="d">.1734</span><span class="s"> + </span>q<span class="s"> * </span>q),
+</code><code id="L4802"><span class="ln">4802</span>                x<span class="s"> = </span>Q<span class="s"> - </span>q,
+</code><code id="L4803"><span class="ln">4803</span>                X<span class="s"> = </span>pow(abs(x), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(x &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
+</code><code id="L4804"><span class="ln">4804</span>                y<span class="s"> = </span>-Q<span class="s"> - </span>q,
+</code><code id="L4805"><span class="ln">4805</span>                Y<span class="s"> = </span>pow(abs(y), <span class="d">1</span><span class="s"> / </span><span class="d">3</span>)<span class="s"> * </span>(y &lt; <span class="d">0</span> ? -<span class="d">1</span> : <span class="d">1</span>),
+</code><code id="L4806"><span class="ln">4806</span>                t<span class="s"> = </span>X<span class="s"> + </span>Y<span class="s"> + </span><span class="d">.5</span>;
+</code><code id="L4807"><span class="ln">4807</span>            <b>return</b> (<span class="d">1</span><span class="s"> - </span>t)<span class="s"> * </span><span class="d">3</span><span class="s"> * </span>t<span class="s"> * </span>t<span class="s"> + </span>t<span class="s"> * </span>t<span class="s"> * </span>t;
+</code><code id="L4808"><span class="ln">4808</span>        },
+</code><code id="L4809"><span class="ln">4809</span>        backIn: <b>function</b> (n) {
+</code><code id="L4810"><span class="ln">4810</span>            <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
+</code><code id="L4811"><span class="ln">4811</span>            <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> - </span>s);
+</code><code id="L4812"><span class="ln">4812</span>        },
+</code><code id="L4813"><span class="ln">4813</span>        backOut: <b>function</b> (n) {
+</code><code id="L4814"><span class="ln">4814</span>            n<span class="s"> = </span>n<span class="s"> - </span><span class="d">1</span>;
+</code><code id="L4815"><span class="ln">4815</span>            <b>var</b> s<span class="s"> = </span><span class="d">1.70158</span>;
+</code><code id="L4816"><span class="ln">4816</span>            <b>return</b> n<span class="s"> * </span>n<span class="s"> * </span>((s<span class="s"> + </span><span class="d">1</span>)<span class="s"> * </span>n<span class="s"> + </span>s)<span class="s"> + </span><span class="d">1</span>;
+</code><code id="L4817"><span class="ln">4817</span>        },
+</code><code id="L4818"><span class="ln">4818</span>        elastic: <b>function</b> (n) {
+</code><code id="L4819"><span class="ln">4819</span>            <b>if</b> (n<span class="s"> == </span>!!n) {
+</code><code id="L4820"><span class="ln">4820</span>                <b>return</b> n;
+</code><code id="L4821"><span class="ln">4821</span>            }
+</code><code id="L4822"><span class="ln">4822</span>            <b>return</b> pow(<span class="d">2</span>, -<span class="d">10</span><span class="s"> * </span>n)<span class="s"> * </span>math.sin((n<span class="s"> - </span><span class="d">.075</span>)<span class="s"> * </span>(<span class="d">2</span><span class="s"> * </span>PI)<span class="s"> / </span><span class="d">.3</span>)<span class="s"> + </span><span class="d">1</span>;
+</code><code id="L4823"><span class="ln">4823</span>        },
+</code><code id="L4824"><span class="ln">4824</span>        bounce: <b>function</b> (n) {
+</code><code id="L4825"><span class="ln">4825</span>            <b>var</b> s<span class="s"> = </span><span class="d">7.5625</span>,
+</code><code id="L4826"><span class="ln">4826</span>                p<span class="s"> = </span><span class="d">2.75</span>,
+</code><code id="L4827"><span class="ln">4827</span>                l;
+</code><code id="L4828"><span class="ln">4828</span>            <b>if</b> (n &lt; (<span class="d">1</span><span class="s"> / </span>p)) {
+</code><code id="L4829"><span class="ln">4829</span>                l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n;
+</code><code id="L4830"><span class="ln">4830</span>            } <b>else</b> {
+</code><code id="L4831"><span class="ln">4831</span>                <b>if</b> (n &lt; (<span class="d">2</span><span class="s"> / </span>p)) {
+</code><code id="L4832"><span class="ln">4832</span>                    n -= (<span class="d">1.5</span><span class="s"> / </span>p);
+</code><code id="L4833"><span class="ln">4833</span>                    l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.75</span>;
+</code><code id="L4834"><span class="ln">4834</span>                } <b>else</b> {
+</code><code id="L4835"><span class="ln">4835</span>                    <b>if</b> (n &lt; (<span class="d">2.5</span><span class="s"> / </span>p)) {
+</code><code id="L4836"><span class="ln">4836</span>                        n -= (<span class="d">2.25</span><span class="s"> / </span>p);
+</code><code id="L4837"><span class="ln">4837</span>                        l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.9375</span>;
+</code><code id="L4838"><span class="ln">4838</span>                    } <b>else</b> {
+</code><code id="L4839"><span class="ln">4839</span>                        n -= (<span class="d">2.625</span><span class="s"> / </span>p);
+</code><code id="L4840"><span class="ln">4840</span>                        l<span class="s"> = </span>s<span class="s"> * </span>n<span class="s"> * </span>n<span class="s"> + </span><span class="d">.984375</span>;
+</code><code id="L4841"><span class="ln">4841</span>                    }
+</code><code id="L4842"><span class="ln">4842</span>                }
+</code><code id="L4843"><span class="ln">4843</span>            }
+</code><code id="L4844"><span class="ln">4844</span>            <b>return</b> l;
+</code><code id="L4845"><span class="ln">4845</span>        }
+</code><code id="L4846"><span class="ln">4846</span>    };
+</code><code id="L4847"><span class="ln">4847</span>    ef.easeIn<span class="s"> = </span>ef[<i>"ease-<b>in</b>"</i>]<span class="s"> = </span>ef[<i>"&lt;"</i>];
+</code><code id="L4848"><span class="ln">4848</span>    ef.easeOut<span class="s"> = </span>ef[<i>"ease-out"</i>]<span class="s"> = </span>ef[<i>">"</i>];
+</code><code id="L4849"><span class="ln">4849</span>    ef.easeInOut<span class="s"> = </span>ef[<i>"ease-<b>in</b>-out"</i>]<span class="s"> = </span>ef[<i>"&lt;>"</i>];
+</code><code id="L4850"><span class="ln">4850</span>    ef[<i>"back-<b>in</b>"</i>]<span class="s"> = </span>ef.backIn;
+</code><code id="L4851"><span class="ln">4851</span>    ef[<i>"back-out"</i>]<span class="s"> = </span>ef.backOut;
+</code><code id="L4852"><span class="ln">4852</span>
+</code><code id="L4853"><span class="ln">4853</span>    <b>var</b> animationElements<span class="s"> = </span>[],
+</code><code id="L4854"><span class="ln">4854</span>        requestAnimFrame<span class="s"> = </span>window.requestAnimationFrame       ||
+</code><code id="L4855"><span class="ln">4855</span>                           window.webkitRequestAnimationFrame ||
+</code><code id="L4856"><span class="ln">4856</span>                           window.mozRequestAnimationFrame    ||
+</code><code id="L4857"><span class="ln">4857</span>                           window.oRequestAnimationFrame      ||
+</code><code id="L4858"><span class="ln">4858</span>                           window.msRequestAnimationFrame     ||
+</code><code id="L4859"><span class="ln">4859</span>                           <b>function</b> (callback) {
+</code><code id="L4860"><span class="ln">4860</span>                               setTimeout(callback, <span class="d">16</span>);
+</code><code id="L4861"><span class="ln">4861</span>                           },
+</code><code id="L4862"><span class="ln">4862</span>        animation<span class="s"> = </span><b>function</b> () {
+</code><code id="L4863"><span class="ln">4863</span>            <b>var</b> Now<span class="s"> = </span>+<b>new</b> Date,
+</code><code id="L4864"><span class="ln">4864</span>                l<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L4865"><span class="ln">4865</span>            <b>for</b> (; l &lt; animationElements.length; l++) {
+</code><code id="L4866"><span class="ln">4866</span>                <b>var</b> e<span class="s"> = </span>animationElements[l];
+</code><code id="L4867"><span class="ln">4867</span>                <b>if</b> (e.el.removed<span class="s"> || </span>e.paused) {
+</code><code id="L4868"><span class="ln">4868</span>                    <b>continue</b>;
+</code><code id="L4869"><span class="ln">4869</span>                }
+</code><code id="L4870"><span class="ln">4870</span>                <b>var</b> time<span class="s"> = </span>Now<span class="s"> - </span>e.start,
+</code><code id="L4871"><span class="ln">4871</span>                    ms<span class="s"> = </span>e.ms,
+</code><code id="L4872"><span class="ln">4872</span>                    easing<span class="s"> = </span>e.easing,
+</code><code id="L4873"><span class="ln">4873</span>                    from<span class="s"> = </span>e.from,
+</code><code id="L4874"><span class="ln">4874</span>                    diff<span class="s"> = </span>e.diff,
+</code><code id="L4875"><span class="ln">4875</span>                    to<span class="s"> = </span>e.to,
+</code><code id="L4876"><span class="ln">4876</span>                    t<span class="s"> = </span>e.t,
+</code><code id="L4877"><span class="ln">4877</span>                    that<span class="s"> = </span>e.el,
+</code><code id="L4878"><span class="ln">4878</span>                    set<span class="s"> = </span>{},
+</code><code id="L4879"><span class="ln">4879</span>                    now;
+</code><code id="L4880"><span class="ln">4880</span>                <b>if</b> (e.initstatus) {
+</code><code id="L4881"><span class="ln">4881</span>                    time<span class="s"> = </span>(e.initstatus<span class="s"> * </span>e.anim.top<span class="s"> - </span>e.prev)<span class="s"> / </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>ms;
+</code><code id="L4882"><span class="ln">4882</span>                    e.status<span class="s"> = </span>e.initstatus;
+</code><code id="L4883"><span class="ln">4883</span>                    <b>delete</b> e.initstatus;
+</code><code id="L4884"><span class="ln">4884</span>                    e.stop<span class="s"> &amp;&amp; </span>animationElements.splice(l--, <span class="d">1</span>);
+</code><code id="L4885"><span class="ln">4885</span>                } <b>else</b> {
+</code><code id="L4886"><span class="ln">4886</span>                    e.status<span class="s"> = </span>(e.prev<span class="s"> + </span>(e.percent<span class="s"> - </span>e.prev)<span class="s"> * </span>(time<span class="s"> / </span>ms))<span class="s"> / </span>e.anim.top;
+</code><code id="L4887"><span class="ln">4887</span>                }
+</code><code id="L4888"><span class="ln">4888</span>                <b>if</b> (time &lt; <span class="d">0</span>) {
+</code><code id="L4889"><span class="ln">4889</span>                    <b>continue</b>;
+</code><code id="L4890"><span class="ln">4890</span>                }
+</code><code id="L4891"><span class="ln">4891</span>                <b>if</b> (time &lt; ms) {
+</code><code id="L4892"><span class="ln">4892</span>                    <b>var</b> pos<span class="s"> = </span>easing(time<span class="s"> / </span>ms);
+</code><code id="L4893"><span class="ln">4893</span>                    <b>for</b> (<b>var</b> attr <b>in</b> from) <b>if</b> (from[has](attr)) {
+</code><code id="L4894"><span class="ln">4894</span>                        <b>switch</b> (availableAnimAttrs[attr]) {
+</code><code id="L4895"><span class="ln">4895</span>                            <b>case</b> nu:
+</code><code id="L4896"><span class="ln">4896</span>                                now<span class="s"> = </span>+from[attr]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr];
+</code><code id="L4897"><span class="ln">4897</span>                                <b>break</b>;
+</code><code id="L4898"><span class="ln">4898</span>                            <b>case</b> <i>"colour"</i>:
+</code><code id="L4899"><span class="ln">4899</span>                                now<span class="s"> = </span><i>"rgb("</i><span class="s"> + </span>[
+</code><code id="L4900"><span class="ln">4900</span>                                    upto255(round(from[attr].r<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].r)),
+</code><code id="L4901"><span class="ln">4901</span>                                    upto255(round(from[attr].g<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].g)),
+</code><code id="L4902"><span class="ln">4902</span>                                    upto255(round(from[attr].b<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr].b))
+</code><code id="L4903"><span class="ln">4903</span>                                ].join(<i>","</i>)<span class="s"> + </span><i>")"</i>;
+</code><code id="L4904"><span class="ln">4904</span>                                <b>break</b>;
+</code><code id="L4905"><span class="ln">4905</span>                            <b>case</b> <i>"path"</i>:
+</code><code id="L4906"><span class="ln">4906</span>                                now<span class="s"> = </span>[];
+</code><code id="L4907"><span class="ln">4907</span>                                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
+</code><code id="L4908"><span class="ln">4908</span>                                    now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L4909"><span class="ln">4909</span>                                    <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
+</code><code id="L4910"><span class="ln">4910</span>                                        now[i][j]<span class="s"> = </span>+from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
+</code><code id="L4911"><span class="ln">4911</span>                                    }
+</code><code id="L4912"><span class="ln">4912</span>                                    now[i]<span class="s"> = </span>now[i].join(S);
+</code><code id="L4913"><span class="ln">4913</span>                                }
+</code><code id="L4914"><span class="ln">4914</span>                                now<span class="s"> = </span>now.join(S);
+</code><code id="L4915"><span class="ln">4915</span>                                <b>break</b>;
+</code><code id="L4916"><span class="ln">4916</span>                            <b>case</b> <i>"transform"</i>:
+</code><code id="L4917"><span class="ln">4917</span>                                <b>if</b> (diff[attr].real) {
+</code><code id="L4918"><span class="ln">4918</span>                                    now<span class="s"> = </span>[];
+</code><code id="L4919"><span class="ln">4919</span>                                    <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
+</code><code id="L4920"><span class="ln">4920</span>                                        now[i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L4921"><span class="ln">4921</span>                                        <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
+</code><code id="L4922"><span class="ln">4922</span>                                            now[i][j]<span class="s"> = </span>from[attr][i][j]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i][j];
+</code><code id="L4923"><span class="ln">4923</span>                                        }
+</code><code id="L4924"><span class="ln">4924</span>                                    }
+</code><code id="L4925"><span class="ln">4925</span>                                } <b>else</b> {
+</code><code id="L4926"><span class="ln">4926</span>                                    <b>var</b> get<span class="s"> = </span><b>function</b> (i) {
+</code><code id="L4927"><span class="ln">4927</span>                                        <b>return</b> +from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4928"><span class="ln">4928</span>                                    };
+</code><code id="L4929"><span class="ln">4929</span>                                    <span class="c">// now<span class="s"> = </span>[[<i>"r"</i>, get(<span class="d">2</span>), <span class="d">0</span>, <span class="d">0</span>], [<i>"t"</i>, get(<span class="d">3</span>), get(<span class="d">4</span>)], [<i>"s"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), <span class="d">0</span>, <span class="d">0</span>]];</span>
+</code><code id="L4930"><span class="ln">4930</span>                                    now<span class="s"> = </span>[[<i>"m"</i>, get(<span class="d">0</span>), get(<span class="d">1</span>), get(<span class="d">2</span>), get(<span class="d">3</span>), get(<span class="d">4</span>), get(<span class="d">5</span>)]];
+</code><code id="L4931"><span class="ln">4931</span>                                }
+</code><code id="L4932"><span class="ln">4932</span>                                <b>break</b>;
+</code><code id="L4933"><span class="ln">4933</span>                            <b>case</b> <i>"csv"</i>:
+</code><code id="L4934"><span class="ln">4934</span>                                <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
+</code><code id="L4935"><span class="ln">4935</span>                                    now<span class="s"> = </span>[];
+</code><code id="L4936"><span class="ln">4936</span>                                    i<span class="s"> = </span><span class="d">4</span>;
+</code><code id="L4937"><span class="ln">4937</span>                                    <b>while</b> (i--) {
+</code><code id="L4938"><span class="ln">4938</span>                                        now[i]<span class="s"> = </span>+from[attr][i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4939"><span class="ln">4939</span>                                    }
+</code><code id="L4940"><span class="ln">4940</span>                                }
+</code><code id="L4941"><span class="ln">4941</span>                                <b>break</b>;
+</code><code id="L4942"><span class="ln">4942</span>                            <b>default</b>:
+</code><code id="L4943"><span class="ln">4943</span>                                <b>var</b> from2<span class="s"> = </span>[].concat(from[attr]);
+</code><code id="L4944"><span class="ln">4944</span>                                now<span class="s"> = </span>[];
+</code><code id="L4945"><span class="ln">4945</span>                                i<span class="s"> = </span>that.paper.customAttributes[attr].length;
+</code><code id="L4946"><span class="ln">4946</span>                                <b>while</b> (i--) {
+</code><code id="L4947"><span class="ln">4947</span>                                    now[i]<span class="s"> = </span>+from2[i]<span class="s"> + </span>pos<span class="s"> * </span>ms<span class="s"> * </span>diff[attr][i];
+</code><code id="L4948"><span class="ln">4948</span>                                }
+</code><code id="L4949"><span class="ln">4949</span>                                <b>break</b>;
+</code><code id="L4950"><span class="ln">4950</span>                        }
+</code><code id="L4951"><span class="ln">4951</span>                        set[attr]<span class="s"> = </span>now;
+</code><code id="L4952"><span class="ln">4952</span>                    }
+</code><code id="L4953"><span class="ln">4953</span>                    that.attr(set);
+</code><code id="L4954"><span class="ln">4954</span>                    (<b>function</b> (id, that, anim) {
+</code><code id="L4955"><span class="ln">4955</span>                        setTimeout(<b>function</b> () {
+</code><code id="L4956"><span class="ln">4956</span>                            eve(<i>"anim.frame."</i><span class="s"> + </span>id, that, anim);
+</code><code id="L4957"><span class="ln">4957</span>                        });
+</code><code id="L4958"><span class="ln">4958</span>                    })(that.id, that, e.anim);
+</code><code id="L4959"><span class="ln">4959</span>                } <b>else</b> {
+</code><code id="L4960"><span class="ln">4960</span>                    (<b>function</b>(f, el, a) {
+</code><code id="L4961"><span class="ln">4961</span>                        setTimeout(<b>function</b>() {
+</code><code id="L4962"><span class="ln">4962</span>                            eve(<i>"anim.finish."</i><span class="s"> + </span>el.id, el, a);
+</code><code id="L4963"><span class="ln">4963</span>                            R.is(f, <i>"<b>function</b>"</i>)<span class="s"> &amp;&amp; </span>f.call(el);
+</code><code id="L4964"><span class="ln">4964</span>                        });
+</code><code id="L4965"><span class="ln">4965</span>                    })(e.callback, that, e.anim);
+</code><code id="L4966"><span class="ln">4966</span>                    <b>if</b> (--e.repeat) {
+</code><code id="L4967"><span class="ln">4967</span>                        that.attr(e.origin);
+</code><code id="L4968"><span class="ln">4968</span>                        e.start<span class="s"> = </span>Now;
+</code><code id="L4969"><span class="ln">4969</span>                    } <b>else</b> {
+</code><code id="L4970"><span class="ln">4970</span>                        that.attr(to);
+</code><code id="L4971"><span class="ln">4971</span>                        animationElements.splice(l--, <span class="d">1</span>);
+</code><code id="L4972"><span class="ln">4972</span>                    }
+</code><code id="L4973"><span class="ln">4973</span>                    <b>if</b> (e.next<span class="s"> &amp;&amp; </span>!e.stop) {
+</code><code id="L4974"><span class="ln">4974</span>                        runAnimation(e.anim, e.el, e.next, <b>null</b>, e.totalOrigin);
+</code><code id="L4975"><span class="ln">4975</span>                    }
+</code><code id="L4976"><span class="ln">4976</span>                }
+</code><code id="L4977"><span class="ln">4977</span>            }
+</code><code id="L4978"><span class="ln">4978</span>            R.svg<span class="s"> &amp;&amp; </span>that<span class="s"> &amp;&amp; </span>that.paper<span class="s"> &amp;&amp; </span>that.paper.safari();
+</code><code id="L4979"><span class="ln">4979</span>            animationElements.length<span class="s"> &amp;&amp; </span>requestAnimFrame(animation);
+</code><code id="L4980"><span class="ln">4980</span>        },
+</code><code id="L4981"><span class="ln">4981</span>        upto255<span class="s"> = </span><b>function</b> (color) {
+</code><code id="L4982"><span class="ln">4982</span>            <b>return</b> mmax(mmin(color, <span class="d">255</span>), <span class="d">0</span>);
+</code><code id="L4983"><span class="ln">4983</span>        };
+</code><code id="L4984"><span class="ln">4984</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L4985"><span class="ln">4985</span><span class="c">    <span class="s"> * </span>Element.animateWith
+</span></code><code id="L4986"><span class="ln">4986</span><span class="c">     [ method ]
 </span></code><code id="L4987"><span class="ln">4987</span><span class="c">     **
-</span></code><code id="L4988"><span class="ln">4988</span><span class="c">    <span class="s"> = </span>(object) @Animation
-</span></code><code id="L4989"><span class="ln">4989</span><span class="c">    \*/</span>
-</code><code id="L4990"><span class="ln">4990</span>    R.animation<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
-</code><code id="L4991"><span class="ln">4991</span>        <b>if</b> (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing) {
-</code><code id="L4992"><span class="ln">4992</span>            callback<span class="s"> = </span>callback<span class="s"> || </span>easing<span class="s"> || </span><b>null</b>;
-</code><code id="L4993"><span class="ln">4993</span>            easing<span class="s"> = </span><b>null</b>;
-</code><code id="L4994"><span class="ln">4994</span>        }
-</code><code id="L4995"><span class="ln">4995</span>        params<span class="s"> = </span>Object(params);
-</code><code id="L4996"><span class="ln">4996</span>        ms<span class="s"> = </span>+ms<span class="s"> || </span><span class="d">0</span>;
-</code><code id="L4997"><span class="ln">4997</span>        <b>var</b> p<span class="s"> = </span>{},
-</code><code id="L4998"><span class="ln">4998</span>            json,
-</code><code id="L4999"><span class="ln">4999</span>            attr;
-</code><code id="L5000"><span class="ln">5000</span>        <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr) &amp;&amp; toFloat(attr) != attr) {
-</code><code id="L5001"><span class="ln">5001</span>            json<span class="s"> = </span><b>true</b>;
-</code><code id="L5002"><span class="ln">5002</span>            p[attr]<span class="s"> = </span>params[attr];
-</code><code id="L5003"><span class="ln">5003</span>        }
-</code><code id="L5004"><span class="ln">5004</span>        <b>if</b> (!json) {
-</code><code id="L5005"><span class="ln">5005</span>            <b>return</b> <b>new</b> Animation(params, ms);
-</code><code id="L5006"><span class="ln">5006</span>        } <b>else</b> {
-</code><code id="L5007"><span class="ln">5007</span>            easing &amp;&amp; (p.easing<span class="s"> = </span>easing);
-</code><code id="L5008"><span class="ln">5008</span>            callback &amp;&amp; (p.callback<span class="s"> = </span>callback);
-</code><code id="L5009"><span class="ln">5009</span>            <b>return</b> <b>new</b> Animation({<span class="d">100</span>: p}, ms);
-</code><code id="L5010"><span class="ln">5010</span>        }
-</code><code id="L5011"><span class="ln">5011</span>    };
-</code><code id="L5012"><span class="ln">5012</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L5013"><span class="ln">5013</span><span class="c">    <span class="s"> * </span>Element.animate
-</span></code><code id="L5014"><span class="ln">5014</span><span class="c">     [ method ]
-</span></code><code id="L5015"><span class="ln">5015</span><span class="c">     **
-</span></code><code id="L5016"><span class="ln">5016</span><span class="c">    <span class="s"> * </span>Creates and starts animation <b>for</b> given element.
-</span></code><code id="L5017"><span class="ln">5017</span><span class="c">     **
-</span></code><code id="L5018"><span class="ln">5018</span><span class="c">     > Parameters
-</span></code><code id="L5019"><span class="ln">5019</span><span class="c">     **
-</span></code><code id="L5020"><span class="ln">5020</span><span class="c">    <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
-</span></code><code id="L5021"><span class="ln">5021</span><span class="c">    <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
-</span></code><code id="L5022"><span class="ln">5022</span><span class="c">    <span class="s"> - </span>easing (string) #optional easing type. Accept on of @Raphael.easing_formulas or CSS format: `cubic-bezier(XX, XX, XX, XX)`
-</span></code><code id="L5023"><span class="ln">5023</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
-</span></code><code id="L5024"><span class="ln">5024</span><span class="c">    <span class="s"> * </span>or
-</span></code><code id="L5025"><span class="ln">5025</span><span class="c">    <span class="s"> - </span>animation (object) animation object, see @Raphael.animation
-</span></code><code id="L5026"><span class="ln">5026</span><span class="c">     **
-</span></code><code id="L5027"><span class="ln">5027</span><span class="c">    <span class="s"> = </span>(object) original element
-</span></code><code id="L5028"><span class="ln">5028</span><span class="c">    \*/</span>
-</code><code id="L5029"><span class="ln">5029</span>    elproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
-</code><code id="L5030"><span class="ln">5030</span>        <b>var</b> element<span class="s"> = </span><b>this</b>;
-</code><code id="L5031"><span class="ln">5031</span>        <b>if</b> (element.removed) {
-</code><code id="L5032"><span class="ln">5032</span>            callback &amp;&amp; callback.call(element);
-</code><code id="L5033"><span class="ln">5033</span>            <b>return</b> element;
-</code><code id="L5034"><span class="ln">5034</span>        }
-</code><code id="L5035"><span class="ln">5035</span>        <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, callback);
-</code><code id="L5036"><span class="ln">5036</span>        runAnimation(anim, element, anim.percents[<span class="d">0</span>], <b>null</b>, element.attr());
-</code><code id="L5037"><span class="ln">5037</span>        <b>return</b> element;
-</code><code id="L5038"><span class="ln">5038</span>    };
-</code><code id="L5039"><span class="ln">5039</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L5040"><span class="ln">5040</span><span class="c">    <span class="s"> * </span>Element.setTime
-</span></code><code id="L5041"><span class="ln">5041</span><span class="c">     [ method ]
-</span></code><code id="L5042"><span class="ln">5042</span><span class="c">     **
-</span></code><code id="L5043"><span class="ln">5043</span><span class="c">    <span class="s"> * </span>Sets the status of animation of the element <b>in</b> milliseconds. Similar to @Element.status method.
-</span></code><code id="L5044"><span class="ln">5044</span><span class="c">     **
-</span></code><code id="L5045"><span class="ln">5045</span><span class="c">     > Parameters
-</span></code><code id="L5046"><span class="ln">5046</span><span class="c">     **
-</span></code><code id="L5047"><span class="ln">5047</span><span class="c">    <span class="s"> - </span>anim (object) animation object
-</span></code><code id="L5048"><span class="ln">5048</span><span class="c">    <span class="s"> - </span>value (number) number of milliseconds from the beginning of the animation
-</span></code><code id="L5049"><span class="ln">5049</span><span class="c">     **
-</span></code><code id="L5050"><span class="ln">5050</span><span class="c">    <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
-</span></code><code id="L5051"><span class="ln">5051</span><span class="c">    \*/</span>
-</code><code id="L5052"><span class="ln">5052</span>    elproto.setTime<span class="s"> = </span><b>function</b> (anim, value) {
-</code><code id="L5053"><span class="ln">5053</span>        <b>if</b> (anim &amp;&amp; value != <b>null</b>) {
-</code><code id="L5054"><span class="ln">5054</span>            <b>this</b>.status(anim, mmin(value, anim.ms)<span class="s"> / </span>anim.ms);
-</code><code id="L5055"><span class="ln">5055</span>        }
-</code><code id="L5056"><span class="ln">5056</span>        <b>return</b> <b>this</b>;
-</code><code id="L5057"><span class="ln">5057</span>    };
-</code><code id="L5058"><span class="ln">5058</span><span class="c">    <span class="c">/*\</span>
-</span></code><code id="L5059"><span class="ln">5059</span><span class="c">    <span class="s"> * </span>Element.status
-</span></code><code id="L5060"><span class="ln">5060</span><span class="c">     [ method ]
-</span></code><code id="L5061"><span class="ln">5061</span><span class="c">     **
-</span></code><code id="L5062"><span class="ln">5062</span><span class="c">    <span class="s"> * </span>Gets or sets the status of animation of the element.
-</span></code><code id="L5063"><span class="ln">5063</span><span class="c">     **
-</span></code><code id="L5064"><span class="ln">5064</span><span class="c">     > Parameters
-</span></code><code id="L5065"><span class="ln">5065</span><span class="c">     **
-</span></code><code id="L5066"><span class="ln">5066</span><span class="c">    <span class="s"> - </span>anim (object) #optional animation object
-</span></code><code id="L5067"><span class="ln">5067</span><span class="c">    <span class="s"> - </span>value (number) #optional <span class="d">0</span> – <span class="d">1</span>. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.
-</span></code><code id="L5068"><span class="ln">5068</span><span class="c">     **
-</span></code><code id="L5069"><span class="ln">5069</span><span class="c">    <span class="s"> = </span>(number) status
-</span></code><code id="L5070"><span class="ln">5070</span><span class="c">    <span class="s"> * </span>or
-</span></code><code id="L5071"><span class="ln">5071</span><span class="c">    <span class="s"> = </span>(array) status <b>if</b> `anim` is not specified <b>in</b> format:
-</span></code><code id="L5072"><span class="ln">5072</span><span class="c">     | [{
-</span></code><code id="L5073"><span class="ln">5073</span><span class="c">     |     anim: <span class="c">// animation object,</span>
-</span></code><code id="L5074"><span class="ln">5074</span><span class="c">     |     status: <span class="c">// status</span>
-</span></code><code id="L5075"><span class="ln">5075</span><span class="c">     | }, {
-</span></code><code id="L5076"><span class="ln">5076</span><span class="c">     |     anim: <span class="c">// animation object,</span>
-</span></code><code id="L5077"><span class="ln">5077</span><span class="c">     |     status: <span class="c">// status</span>
-</span></code><code id="L5078"><span class="ln">5078</span><span class="c">     | }, ...]
-</span></code><code id="L5079"><span class="ln">5079</span><span class="c">    <span class="s"> * </span>or
-</span></code><code id="L5080"><span class="ln">5080</span><span class="c">    <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
-</span></code><code id="L5081"><span class="ln">5081</span><span class="c">    \*/</span>
-</code><code id="L5082"><span class="ln">5082</span>    elproto.status<span class="s"> = </span><b>function</b> (anim, value) {
-</code><code id="L5083"><span class="ln">5083</span>        <b>var</b> out<span class="s"> = </span>[],
-</code><code id="L5084"><span class="ln">5084</span>            i<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L5085"><span class="ln">5085</span>            len,
-</code><code id="L5086"><span class="ln">5086</span>            e;
-</code><code id="L5087"><span class="ln">5087</span>        <b>if</b> (value != <b>null</b>) {
-</code><code id="L5088"><span class="ln">5088</span>            runAnimation(anim, <b>this</b>, -<span class="d">1</span>, mmin(value, <span class="d">1</span>));
-</code><code id="L5089"><span class="ln">5089</span>            <b>return</b> <b>this</b>;
-</code><code id="L5090"><span class="ln">5090</span>        } <b>else</b> {
-</code><code id="L5091"><span class="ln">5091</span>            len<span class="s"> = </span>animationElements.length;
-</code><code id="L5092"><span class="ln">5092</span>            <b>for</b> (; i &lt; len; i++) {
-</code><code id="L5093"><span class="ln">5093</span>                e<span class="s"> = </span>animationElements[i];
-</code><code id="L5094"><span class="ln">5094</span>                <b>if</b> (e.el.id<span class="s"> == </span><b>this</b>.id &amp;&amp; (!anim<span class="s"> || </span>e.anim<span class="s"> == </span>anim)) {
-</code><code id="L5095"><span class="ln">5095</span>                    <b>if</b> (anim) {
-</code><code id="L5096"><span class="ln">5096</span>                        <b>return</b> e.status;
-</code><code id="L5097"><span class="ln">5097</span>                    }
-</code><code id="L5098"><span class="ln">5098</span>                    out.push({anim: e.anim, status: e.status});
-</code><code id="L5099"><span class="ln">5099</span>                }
-</code><code id="L5100"><span class="ln">5100</span>            }
-</code><code id="L5101"><span class="ln">5101</span>            <b>if</b> (anim) {
-</code><code id="L5102"><span class="ln">5102</span>                <b>return</b> <span class="d">0</span>;
-</code><code id="L5103"><span class="ln">5103</span>            }
-</code><code id="L5104"><span class="ln">5104</span>            <b>return</b> out;
-</code><code id="L5105"><span class="ln">5105</span>        }
-</code><code id="L5106"><span class="ln">5106</span>    };
-</code><code id="L5107"><span class="ln">5107</span>    elproto.pause<span class="s"> = </span><b>function</b> (anim) {
-</code><code id="L5108"><span class="ln">5108</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id &amp;&amp; (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
-</code><code id="L5109"><span class="ln">5109</span>            <b>if</b> (eve(<i>"anim.pause."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
-</code><code id="L5110"><span class="ln">5110</span>                animationElements[i].paused<span class="s"> = </span><b>true</b>;
-</code><code id="L5111"><span class="ln">5111</span>            }
-</code><code id="L5112"><span class="ln">5112</span>        }
-</code><code id="L5113"><span class="ln">5113</span>        <b>return</b> <b>this</b>;
-</code><code id="L5114"><span class="ln">5114</span>    };
-</code><code id="L5115"><span class="ln">5115</span>    elproto.resume<span class="s"> = </span><b>function</b> (anim) {
-</code><code id="L5116"><span class="ln">5116</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id &amp;&amp; (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
-</code><code id="L5117"><span class="ln">5117</span>            <b>var</b> e<span class="s"> = </span>animationElements[i];
-</code><code id="L5118"><span class="ln">5118</span>            <b>if</b> (eve(<i>"anim.resume."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, e.anim) !== <b>false</b>) {
-</code><code id="L5119"><span class="ln">5119</span>                <b>delete</b> e.paused;
-</code><code id="L5120"><span class="ln">5120</span>                <b>this</b>.status(e.anim, e.status);
-</code><code id="L5121"><span class="ln">5121</span>            }
-</code><code id="L5122"><span class="ln">5122</span>        }
-</code><code id="L5123"><span class="ln">5123</span>        <b>return</b> <b>this</b>;
-</code><code id="L5124"><span class="ln">5124</span>    };
-</code><code id="L5125"><span class="ln">5125</span>    elproto.stop<span class="s"> = </span><b>function</b> (anim) {
-</code><code id="L5126"><span class="ln">5126</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id &amp;&amp; (!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
-</code><code id="L5127"><span class="ln">5127</span>            <b>if</b> (eve(<i>"anim.stop."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
-</code><code id="L5128"><span class="ln">5128</span>                animationElements.splice(i--, <span class="d">1</span>);
-</code><code id="L5129"><span class="ln">5129</span>            }
-</code><code id="L5130"><span class="ln">5130</span>        }
-</code><code id="L5131"><span class="ln">5131</span>        <b>return</b> <b>this</b>;
-</code><code id="L5132"><span class="ln">5132</span>    };
-</code><code id="L5133"><span class="ln">5133</span>    elproto.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L5134"><span class="ln">5134</span>        <b>return</b> <i>"Rapha\xebl\u2019s object"</i>;
-</code><code id="L5135"><span class="ln">5135</span>    };
-</code><code id="L5136"><span class="ln">5136</span>
-</code><code id="L5137"><span class="ln">5137</span>    <span class="c">// Set</span>
-</code><code id="L5138"><span class="ln">5138</span>    <b>var</b> Set<span class="s"> = </span><b>function</b> (items) {
-</code><code id="L5139"><span class="ln">5139</span>        <b>this</b>.items<span class="s"> = </span>[];
-</code><code id="L5140"><span class="ln">5140</span>        <b>this</b>.length<span class="s"> = </span><span class="d">0</span>;
-</code><code id="L5141"><span class="ln">5141</span>        <b>this</b>.type<span class="s"> = </span><i>"set"</i>;
-</code><code id="L5142"><span class="ln">5142</span>        <b>if</b> (items) {
-</code><code id="L5143"><span class="ln">5143</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>items.length; i &lt; ii; i++) {
-</code><code id="L5144"><span class="ln">5144</span>                <b>if</b> (items[i] &amp;&amp; (items[i].constructor<span class="s"> == </span>Element<span class="s"> || </span>items[i].constructor<span class="s"> == </span>Set)) {
-</code><code id="L5145"><span class="ln">5145</span>                    <b>this</b>[<b>this</b>.items.length]<span class="s"> = </span><b>this</b>.items[<b>this</b>.items.length]<span class="s"> = </span>items[i];
-</code><code id="L5146"><span class="ln">5146</span>                    <b>this</b>.length++;
-</code><code id="L5147"><span class="ln">5147</span>                }
-</code><code id="L5148"><span class="ln">5148</span>            }
-</code><code id="L5149"><span class="ln">5149</span>        }
-</code><code id="L5150"><span class="ln">5150</span>    },
-</code><code id="L5151"><span class="ln">5151</span>    setproto<span class="s"> = </span>Set.prototype;
-</code><code id="L5152"><span class="ln">5152</span>    setproto.push<span class="s"> = </span><b>function</b> () {
-</code><code id="L5153"><span class="ln">5153</span>        <b>var</b> item,
-</code><code id="L5154"><span class="ln">5154</span>            len;
-</code><code id="L5155"><span class="ln">5155</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>arguments.length; i &lt; ii; i++) {
-</code><code id="L5156"><span class="ln">5156</span>            item<span class="s"> = </span>arguments[i];
-</code><code id="L5157"><span class="ln">5157</span>            <b>if</b> (item &amp;&amp; (item.constructor<span class="s"> == </span>Element<span class="s"> || </span>item.constructor<span class="s"> == </span>Set)) {
-</code><code id="L5158"><span class="ln">5158</span>                len<span class="s"> = </span><b>this</b>.items.length;
-</code><code id="L5159"><span class="ln">5159</span>                <b>this</b>[len]<span class="s"> = </span><b>this</b>.items[len]<span class="s"> = </span>item;
-</code><code id="L5160"><span class="ln">5160</span>                <b>this</b>.length++;
-</code><code id="L5161"><span class="ln">5161</span>            }
-</code><code id="L5162"><span class="ln">5162</span>        }
-</code><code id="L5163"><span class="ln">5163</span>        <b>return</b> <b>this</b>;
-</code><code id="L5164"><span class="ln">5164</span>    };
-</code><code id="L5165"><span class="ln">5165</span>    setproto.pop<span class="s"> = </span><b>function</b> () {
-</code><code id="L5166"><span class="ln">5166</span>        <b>this</b>.length &amp;&amp; <b>delete</b> <b>this</b>[<b>this</b>.length--];
-</code><code id="L5167"><span class="ln">5167</span>        <b>return</b> <b>this</b>.items.pop();
-</code><code id="L5168"><span class="ln">5168</span>    };
-</code><code id="L5169"><span class="ln">5169</span>    <b>for</b> (<b>var</b> method <b>in</b> elproto) <b>if</b> (elproto[has](method)) {
-</code><code id="L5170"><span class="ln">5170</span>        setproto[method]<span class="s"> = </span>(<b>function</b> (methodname) {
-</code><code id="L5171"><span class="ln">5171</span>            <b>return</b> <b>function</b> () {
-</code><code id="L5172"><span class="ln">5172</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
-</code><code id="L5173"><span class="ln">5173</span>                    <b>this</b>.items[i][methodname][apply](<b>this</b>.items[i], arguments);
-</code><code id="L5174"><span class="ln">5174</span>                }
-</code><code id="L5175"><span class="ln">5175</span>                <b>return</b> <b>this</b>;
-</code><code id="L5176"><span class="ln">5176</span>            };
-</code><code id="L5177"><span class="ln">5177</span>        })(method);
-</code><code id="L5178"><span class="ln">5178</span>    }
-</code><code id="L5179"><span class="ln">5179</span>    setproto.attr<span class="s"> = </span><b>function</b> (name, value) {
-</code><code id="L5180"><span class="ln">5180</span>        <b>if</b> (name &amp;&amp; R.is(name, array) &amp;&amp; R.is(name[<span class="d">0</span>], <i>"object"</i>)) {
-</code><code id="L5181"><span class="ln">5181</span>            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j &lt; jj; j++) {
-</code><code id="L5182"><span class="ln">5182</span>                <b>this</b>.items[j].attr(name[j]);
-</code><code id="L5183"><span class="ln">5183</span>            }
-</code><code id="L5184"><span class="ln">5184</span>        } <b>else</b> {
-</code><code id="L5185"><span class="ln">5185</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
-</code><code id="L5186"><span class="ln">5186</span>                <b>this</b>.items[i].attr(name, value);
-</code><code id="L5187"><span class="ln">5187</span>            }
-</code><code id="L5188"><span class="ln">5188</span>        }
-</code><code id="L5189"><span class="ln">5189</span>        <b>return</b> <b>this</b>;
-</code><code id="L5190"><span class="ln">5190</span>    };
-</code><code id="L5191"><span class="ln">5191</span>    setproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
-</code><code id="L5192"><span class="ln">5192</span>        (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing) &amp;&amp; (callback<span class="s"> = </span>easing<span class="s"> || </span><b>null</b>);
-</code><code id="L5193"><span class="ln">5193</span>        <b>var</b> len<span class="s"> = </span><b>this</b>.items.length,
-</code><code id="L5194"><span class="ln">5194</span>            i<span class="s"> = </span>len,
-</code><code id="L5195"><span class="ln">5195</span>            item,
-</code><code id="L5196"><span class="ln">5196</span>            set<span class="s"> = </span><b>this</b>,
-</code><code id="L5197"><span class="ln">5197</span>            collector;
-</code><code id="L5198"><span class="ln">5198</span>        callback &amp;&amp; (collector<span class="s"> = </span><b>function</b> () {
-</code><code id="L5199"><span class="ln">5199</span>            !--len &amp;&amp; callback.call(set);
-</code><code id="L5200"><span class="ln">5200</span>        });
-</code><code id="L5201"><span class="ln">5201</span>        easing<span class="s"> = </span>R.is(easing, string) ? easing : collector;
-</code><code id="L5202"><span class="ln">5202</span>        <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, collector);
-</code><code id="L5203"><span class="ln">5203</span>        item<span class="s"> = </span><b>this</b>.items[--i].animate(anim);
-</code><code id="L5204"><span class="ln">5204</span>        <b>while</b> (i--) {
-</code><code id="L5205"><span class="ln">5205</span>            <b>this</b>.items[i] &amp;&amp; !<b>this</b>.items[i].removed &amp;&amp; <b>this</b>.items[i].animateWith(item, anim);
-</code><code id="L5206"><span class="ln">5206</span>        }
-</code><code id="L5207"><span class="ln">5207</span>        <b>return</b> <b>this</b>;
-</code><code id="L5208"><span class="ln">5208</span>    };
-</code><code id="L5209"><span class="ln">5209</span>    setproto.insertAfter<span class="s"> = </span><b>function</b> (el) {
-</code><code id="L5210"><span class="ln">5210</span>        <b>var</b> i<span class="s"> = </span><b>this</b>.items.length;
-</code><code id="L5211"><span class="ln">5211</span>        <b>while</b> (i--) {
-</code><code id="L5212"><span class="ln">5212</span>            <b>this</b>.items[i].insertAfter(el);
-</code><code id="L5213"><span class="ln">5213</span>        }
-</code><code id="L5214"><span class="ln">5214</span>        <b>return</b> <b>this</b>;
-</code><code id="L5215"><span class="ln">5215</span>    };
-</code><code id="L5216"><span class="ln">5216</span>    setproto.getBBox<span class="s"> = </span><b>function</b> () {
-</code><code id="L5217"><span class="ln">5217</span>        <b>var</b> x<span class="s"> = </span>[],
-</code><code id="L5218"><span class="ln">5218</span>            y<span class="s"> = </span>[],
-</code><code id="L5219"><span class="ln">5219</span>            w<span class="s"> = </span>[],
-</code><code id="L5220"><span class="ln">5220</span>            h<span class="s"> = </span>[];
-</code><code id="L5221"><span class="ln">5221</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><b>this</b>.items.length; i--;) <b>if</b> (!<b>this</b>.items[i].removed) {
-</code><code id="L5222"><span class="ln">5222</span>            <b>var</b> box<span class="s"> = </span><b>this</b>.items[i].getBBox();
-</code><code id="L5223"><span class="ln">5223</span>            x.push(box.x);
-</code><code id="L5224"><span class="ln">5224</span>            y.push(box.y);
-</code><code id="L5225"><span class="ln">5225</span>            w.push(box.x<span class="s"> + </span>box.width);
-</code><code id="L5226"><span class="ln">5226</span>            h.push(box.y<span class="s"> + </span>box.height);
-</code><code id="L5227"><span class="ln">5227</span>        }
-</code><code id="L5228"><span class="ln">5228</span>        x<span class="s"> = </span>mmin[apply](<span class="d">0</span>, x);
-</code><code id="L5229"><span class="ln">5229</span>        y<span class="s"> = </span>mmin[apply](<span class="d">0</span>, y);
-</code><code id="L5230"><span class="ln">5230</span>        <b>return</b> {
-</code><code id="L5231"><span class="ln">5231</span>            x: x,
-</code><code id="L5232"><span class="ln">5232</span>            y: y,
-</code><code id="L5233"><span class="ln">5233</span>            width: mmax[apply](<span class="d">0</span>, w)<span class="s"> - </span>x,
-</code><code id="L5234"><span class="ln">5234</span>            height: mmax[apply](<span class="d">0</span>, h)<span class="s"> - </span>y
-</code><code id="L5235"><span class="ln">5235</span>        };
-</code><code id="L5236"><span class="ln">5236</span>    };
-</code><code id="L5237"><span class="ln">5237</span>    setproto.clone<span class="s"> = </span><b>function</b> (s) {
-</code><code id="L5238"><span class="ln">5238</span>        s<span class="s"> = </span><b>new</b> Set;
-</code><code id="L5239"><span class="ln">5239</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
-</code><code id="L5240"><span class="ln">5240</span>            s.push(<b>this</b>.items[i].clone());
-</code><code id="L5241"><span class="ln">5241</span>        }
-</code><code id="L5242"><span class="ln">5242</span>        <b>return</b> s;
-</code><code id="L5243"><span class="ln">5243</span>    };
-</code><code id="L5244"><span class="ln">5244</span>    setproto.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L5245"><span class="ln">5245</span>        <b>return</b> <i>"Rapha\xebl\u2018s set"</i>;
-</code><code id="L5246"><span class="ln">5246</span>    };
-</code><code id="L5247"><span class="ln">5247</span>
-</code><code id="L5248"><span class="ln">5248</span>    R.registerFont<span class="s"> = </span><b>function</b> (font) {
-</code><code id="L5249"><span class="ln">5249</span>        <b>if</b> (!font.face) {
-</code><code id="L5250"><span class="ln">5250</span>            <b>return</b> font;
-</code><code id="L5251"><span class="ln">5251</span>        }
-</code><code id="L5252"><span class="ln">5252</span>        <b>this</b>.fonts<span class="s"> = </span><b>this</b>.fonts<span class="s"> || </span>{};
-</code><code id="L5253"><span class="ln">5253</span>        <b>var</b> fontcopy<span class="s"> = </span>{
-</code><code id="L5254"><span class="ln">5254</span>                w: font.w,
-</code><code id="L5255"><span class="ln">5255</span>                face: {},
-</code><code id="L5256"><span class="ln">5256</span>                glyphs: {}
-</code><code id="L5257"><span class="ln">5257</span>            },
-</code><code id="L5258"><span class="ln">5258</span>            family<span class="s"> = </span>font.face[<i>"font-family"</i>];
-</code><code id="L5259"><span class="ln">5259</span>        <b>for</b> (<b>var</b> prop <b>in</b> font.face) <b>if</b> (font.face[has](prop)) {
-</code><code id="L5260"><span class="ln">5260</span>            fontcopy.face[prop]<span class="s"> = </span>font.face[prop];
-</code><code id="L5261"><span class="ln">5261</span>        }
-</code><code id="L5262"><span class="ln">5262</span>        <b>if</b> (<b>this</b>.fonts[family]) {
-</code><code id="L5263"><span class="ln">5263</span>            <b>this</b>.fonts[family].push(fontcopy);
-</code><code id="L5264"><span class="ln">5264</span>        } <b>else</b> {
-</code><code id="L5265"><span class="ln">5265</span>            <b>this</b>.fonts[family]<span class="s"> = </span>[fontcopy];
-</code><code id="L5266"><span class="ln">5266</span>        }
-</code><code id="L5267"><span class="ln">5267</span>        <b>if</b> (!font.svg) {
-</code><code id="L5268"><span class="ln">5268</span>            fontcopy.face[<i>"units-per-em"</i>]<span class="s"> = </span>toInt(font.face[<i>"units-per-em"</i>], <span class="d">10</span>);
-</code><code id="L5269"><span class="ln">5269</span>            <b>for</b> (<b>var</b> glyph <b>in</b> font.glyphs) <b>if</b> (font.glyphs[has](glyph)) {
-</code><code id="L5270"><span class="ln">5270</span>                <b>var</b> path<span class="s"> = </span>font.glyphs[glyph];
-</code><code id="L5271"><span class="ln">5271</span>                fontcopy.glyphs[glyph]<span class="s"> = </span>{
-</code><code id="L5272"><span class="ln">5272</span>                    w: path.w,
-</code><code id="L5273"><span class="ln">5273</span>                    k: {},
-</code><code id="L5274"><span class="ln">5274</span>                    d: path.d &amp;&amp; <i>"M"</i><span class="s"> + </span>path.d.replace(/[mlcxtrv]/g, <b>function</b> (command) {
-</code><code id="L5275"><span class="ln">5275</span>                            <b>return</b> {l: <i>"L"</i>, c: <i>"C"</i>, x: <i>"z"</i>, t: <i>"m"</i>, r: <i>"l"</i>, v: <i>"c"</i>}[command]<span class="s"> || </span><i>"M"</i>;
-</code><code id="L5276"><span class="ln">5276</span>                        })<span class="s"> + </span><i>"z"</i>
-</code><code id="L5277"><span class="ln">5277</span>                };
-</code><code id="L5278"><span class="ln">5278</span>                <b>if</b> (path.k) {
-</code><code id="L5279"><span class="ln">5279</span>                    <b>for</b> (<b>var</b> k <b>in</b> path.k) <b>if</b> (path[has](k)) {
-</code><code id="L5280"><span class="ln">5280</span>                        fontcopy.glyphs[glyph].k[k]<span class="s"> = </span>path.k[k];
-</code><code id="L5281"><span class="ln">5281</span>                    }
-</code><code id="L5282"><span class="ln">5282</span>                }
-</code><code id="L5283"><span class="ln">5283</span>            }
-</code><code id="L5284"><span class="ln">5284</span>        }
-</code><code id="L5285"><span class="ln">5285</span>        <b>return</b> font;
-</code><code id="L5286"><span class="ln">5286</span>    };
-</code><code id="L5287"><span class="ln">5287</span>    paperproto.getFont<span class="s"> = </span><b>function</b> (family, weight, style, stretch) {
-</code><code id="L5288"><span class="ln">5288</span>        stretch<span class="s"> = </span>stretch<span class="s"> || </span><i>"normal"</i>;
-</code><code id="L5289"><span class="ln">5289</span>        style<span class="s"> = </span>style<span class="s"> || </span><i>"normal"</i>;
-</code><code id="L5290"><span class="ln">5290</span>        weight<span class="s"> = </span>+weight<span class="s"> || </span>{normal: <span class="d">400</span>, bold: <span class="d">700</span>, lighter: <span class="d">300</span>, bolder: <span class="d">800</span>}[weight]<span class="s"> || </span><span class="d">400</span>;
-</code><code id="L5291"><span class="ln">5291</span>        <b>if</b> (!R.fonts) {
-</code><code id="L5292"><span class="ln">5292</span>            <b>return</b>;
-</code><code id="L5293"><span class="ln">5293</span>        }
-</code><code id="L5294"><span class="ln">5294</span>        <b>var</b> font<span class="s"> = </span>R.fonts[family];
-</code><code id="L5295"><span class="ln">5295</span>        <b>if</b> (!font) {
-</code><code id="L5296"><span class="ln">5296</span>            <b>var</b> name<span class="s"> = </span><b>new</b> RegExp(<i>"(^|\\s)"</i><span class="s"> + </span>family.replace(/[^\w\d\s+!~.:_-]/g, E)<span class="s"> + </span><i>"(\\s|$)"</i>, <i>"i"</i>);
-</code><code id="L5297"><span class="ln">5297</span>            <b>for</b> (<b>var</b> fontName <b>in</b> R.fonts) <b>if</b> (R.fonts[has](fontName)) {
-</code><code id="L5298"><span class="ln">5298</span>                <b>if</b> (name.test(fontName)) {
-</code><code id="L5299"><span class="ln">5299</span>                    font<span class="s"> = </span>R.fonts[fontName];
-</code><code id="L5300"><span class="ln">5300</span>                    <b>break</b>;
-</code><code id="L5301"><span class="ln">5301</span>                }
-</code><code id="L5302"><span class="ln">5302</span>            }
-</code><code id="L5303"><span class="ln">5303</span>        }
-</code><code id="L5304"><span class="ln">5304</span>        <b>var</b> thefont;
-</code><code id="L5305"><span class="ln">5305</span>        <b>if</b> (font) {
-</code><code id="L5306"><span class="ln">5306</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>font.length; i &lt; ii; i++) {
-</code><code id="L5307"><span class="ln">5307</span>                thefont<span class="s"> = </span>font[i];
-</code><code id="L5308"><span class="ln">5308</span>                <b>if</b> (thefont.face[<i>"font-weight"</i>]<span class="s"> == </span>weight &amp;&amp; (thefont.face[<i>"font-style"</i>]<span class="s"> == </span>style<span class="s"> || </span>!thefont.face[<i>"font-style"</i>]) &amp;&amp; thefont.face[<i>"font-stretch"</i>]<span class="s"> == </span>stretch) {
-</code><code id="L5309"><span class="ln">5309</span>                    <b>break</b>;
-</code><code id="L5310"><span class="ln">5310</span>                }
-</code><code id="L5311"><span class="ln">5311</span>            }
-</code><code id="L5312"><span class="ln">5312</span>        }
-</code><code id="L5313"><span class="ln">5313</span>        <b>return</b> thefont;
-</code><code id="L5314"><span class="ln">5314</span>    };
-</code><code id="L5315"><span class="ln">5315</span>    paperproto.print<span class="s"> = </span><b>function</b> (x, y, string, font, size, origin, letter_spacing) {
-</code><code id="L5316"><span class="ln">5316</span>        origin<span class="s"> = </span>origin<span class="s"> || </span><i>"middle"</i>; <span class="c">// baseline|middle</span>
-</code><code id="L5317"><span class="ln">5317</span>        letter_spacing<span class="s"> = </span>mmax(mmin(letter_spacing<span class="s"> || </span><span class="d">0</span>, <span class="d">1</span>), -<span class="d">1</span>);
-</code><code id="L5318"><span class="ln">5318</span>        <b>var</b> out<span class="s"> = </span><b>this</b>.set(),
-</code><code id="L5319"><span class="ln">5319</span>            letters<span class="s"> = </span>Str(string).split(E),
-</code><code id="L5320"><span class="ln">5320</span>            shift<span class="s"> = </span><span class="d">0</span>,
-</code><code id="L5321"><span class="ln">5321</span>            path<span class="s"> = </span>E,
-</code><code id="L5322"><span class="ln">5322</span>            scale;
-</code><code id="L5323"><span class="ln">5323</span>        R.is(font, string) &amp;&amp; (font<span class="s"> = </span><b>this</b>.getFont(font));
-</code><code id="L5324"><span class="ln">5324</span>        <b>if</b> (font) {
-</code><code id="L5325"><span class="ln">5325</span>            scale<span class="s"> = </span>(size<span class="s"> || </span><span class="d">16</span>)<span class="s"> / </span>font.face[<i>"units-per-em"</i>];
-</code><code id="L5326"><span class="ln">5326</span>            <b>var</b> bb<span class="s"> = </span>font.face.bbox.split(separator),
-</code><code id="L5327"><span class="ln">5327</span>                top<span class="s"> = </span>+bb[<span class="d">0</span>],
-</code><code id="L5328"><span class="ln">5328</span>                height<span class="s"> = </span>+bb[<span class="d">1</span>]<span class="s"> + </span>(origin<span class="s"> == </span><i>"baseline"</i> ? bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>]<span class="s"> + </span>(+font.face.descent) : (bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>])<span class="s"> / </span><span class="d">2</span>);
-</code><code id="L5329"><span class="ln">5329</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>letters.length; i &lt; ii; i++) {
-</code><code id="L5330"><span class="ln">5330</span>                <b>var</b> prev<span class="s"> = </span>i &amp;&amp; font.glyphs[letters[i<span class="s"> - </span><span class="d">1</span>]]<span class="s"> || </span>{},
-</code><code id="L5331"><span class="ln">5331</span>                    curr<span class="s"> = </span>font.glyphs[letters[i]];
-</code><code id="L5332"><span class="ln">5332</span>                shift += i ? (prev.w<span class="s"> || </span>font.w)<span class="s"> + </span>(prev.k &amp;&amp; prev.k[letters[i]]<span class="s"> || </span><span class="d">0</span>)<span class="s"> + </span>(font.w<span class="s"> * </span>letter_spacing) : <span class="d">0</span>;
-</code><code id="L5333"><span class="ln">5333</span>                curr &amp;&amp; curr.d &amp;&amp; out.push(<b>this</b>.path(curr.d).attr({fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, transform: [[<i>"t"</i>, shift, <span class="d">0</span>]]}));
-</code><code id="L5334"><span class="ln">5334</span>            }
-</code><code id="L5335"><span class="ln">5335</span>            out.scale(scale, scale, top, height).translate(x<span class="s"> - </span>top, y<span class="s"> - </span>height);
-</code><code id="L5336"><span class="ln">5336</span>        }
-</code><code id="L5337"><span class="ln">5337</span>        <b>return</b> out;
-</code><code id="L5338"><span class="ln">5338</span>    };
-</code><code id="L5339"><span class="ln">5339</span>
-</code><code id="L5340"><span class="ln">5340</span>    R.format<span class="s"> = </span><b>function</b> (token, params) {
-</code><code id="L5341"><span class="ln">5341</span>        <b>var</b> args<span class="s"> = </span>R.is(params, array) ? [<span class="d">0</span>][concat](params) : arguments;
-</code><code id="L5342"><span class="ln">5342</span>        token &amp;&amp; R.is(token, string) &amp;&amp; args.length<span class="s"> - </span><span class="d">1</span> &amp;&amp; (token<span class="s"> = </span>token.replace(formatrg, <b>function</b> (str, i) {
-</code><code id="L5343"><span class="ln">5343</span>            <b>return</b> args[++i]<span class="s"> == </span><b>null</b> ? E : args[i];
-</code><code id="L5344"><span class="ln">5344</span>        }));
-</code><code id="L5345"><span class="ln">5345</span>        <b>return</b> token<span class="s"> || </span>E;
-</code><code id="L5346"><span class="ln">5346</span>    };
-</code><code id="L5347"><span class="ln">5347</span>    R.ninja<span class="s"> = </span><b>function</b> () {
-</code><code id="L5348"><span class="ln">5348</span>        oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>oldRaphael.is) : <b>delete</b> Raphael;
-</code><code id="L5349"><span class="ln">5349</span>        <b>return</b> R;
-</code><code id="L5350"><span class="ln">5350</span>    };
-</code><code id="L5351"><span class="ln">5351</span>    R.el<span class="s"> = </span>elproto;
-</code><code id="L5352"><span class="ln">5352</span>    R.st<span class="s"> = </span>setproto;
-</code><code id="L5353"><span class="ln">5353</span>    <span class="c">// Firefox &lt;<span class="d">3.6</span> fix: http://webreflection.blogspot.com/<span class="d">2009</span>/<span class="d">11</span>/<span class="d">195</span>-chars-to-help-lazy-loading.html</span>
-</code><code id="L5354"><span class="ln">5354</span>    (<b>function</b> (doc, loaded, f) {
-</code><code id="L5355"><span class="ln">5355</span>        <b>if</b> (doc.readyState<span class="s"> == </span><b>null</b> &amp;&amp; doc.addEventListener){
-</code><code id="L5356"><span class="ln">5356</span>            doc.addEventListener(loaded, f<span class="s"> = </span><b>function</b> () {
-</code><code id="L5357"><span class="ln">5357</span>                doc.removeEventListener(loaded, f, <b>false</b>);
-</code><code id="L5358"><span class="ln">5358</span>                doc.readyState<span class="s"> = </span><i>"complete"</i>;
-</code><code id="L5359"><span class="ln">5359</span>            }, <b>false</b>);
-</code><code id="L5360"><span class="ln">5360</span>            doc.readyState<span class="s"> = </span><i>"loading"</i>;
-</code><code id="L5361"><span class="ln">5361</span>        }
-</code><code id="L5362"><span class="ln">5362</span>        <b>function</b> isLoaded() {
-</code><code id="L5363"><span class="ln">5363</span>            (/<b>in</b>/).test(doc.readyState) ? setTimeout(isLoaded, <span class="d">9</span>) : eve(<i>"DOMload"</i>);
-</code><code id="L5364"><span class="ln">5364</span>        }
-</code><code id="L5365"><span class="ln">5365</span>        isLoaded();
-</code><code id="L5366"><span class="ln">5366</span>    })(document, <i>"DOMContentLoaded"</i>);
-</code><code id="L5367"><span class="ln">5367</span>
-</code><code id="L5368"><span class="ln">5368</span>    oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>R) : (Raphael<span class="s"> = </span>R);
-</code><code id="L5369"><span class="ln">5369</span>
-</code><code id="L5370"><span class="ln">5370</span><span class="c">    /*
-</span></code><code id="L5371"><span class="ln">5371</span><span class="c">    <span class="s"> * </span>Eve <span class="d">0.2</span><span class="d">.1</span><span class="s"> - </span>JavaScript Events Library
-</span></code><code id="L5372"><span class="ln">5372</span><span class="c">     *
-</span></code><code id="L5373"><span class="ln">5373</span><span class="c">    <span class="s"> * </span>Copyright (c) <span class="d">2010</span> Dmitry Baranovskiy (http:<span class="c">//dmitry.baranovskiy.com/)</span>
-</span></code><code id="L5374"><span class="ln">5374</span><span class="c">    <span class="s"> * </span>Licensed under the MIT (http:<span class="c">//www.opensource.org/licenses/mit-license.php) license.</span>
-</span></code><code id="L5375"><span class="ln">5375</span><span class="c">     */</span>
-</code><code id="L5376"><span class="ln">5376</span>
-</code><code id="L5377"><span class="ln">5377</span>    <b>var</b> eve<span class="s"> = </span>R.eve<span class="s"> = </span>(<b>function</b> () {
-</code><code id="L5378"><span class="ln">5378</span>        <b>var</b> version<span class="s"> = </span><i>"<span class="d">0.2</span><span class="d">.1</span>"</i>,
-</code><code id="L5379"><span class="ln">5379</span>            has<span class="s"> = </span><i>"hasOwnProperty"</i>,
-</code><code id="L5380"><span class="ln">5380</span>            separator<span class="s"> = </span>/[\.\/]/,
-</code><code id="L5381"><span class="ln">5381</span>            wildcard<span class="s"> = </span><i>"*"</i>,
-</code><code id="L5382"><span class="ln">5382</span>            events<span class="s"> = </span>{n: {}},
-</code><code id="L5383"><span class="ln">5383</span>            eve<span class="s"> = </span><b>function</b> (name, scope) {
-</code><code id="L5384"><span class="ln">5384</span>                <b>var</b> e<span class="s"> = </span>events,
-</code><code id="L5385"><span class="ln">5385</span>                    args<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">2</span>),
-</code><code id="L5386"><span class="ln">5386</span>                    listeners<span class="s"> = </span>eve.listeners(name),
-</code><code id="L5387"><span class="ln">5387</span>                    errors<span class="s"> = </span>[];
-</code><code id="L5388"><span class="ln">5388</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>listeners.length; i &lt; ii; i++) {
-</code><code id="L5389"><span class="ln">5389</span>                    <b>try</b> {
-</code><code id="L5390"><span class="ln">5390</span>                        listeners[i].apply(scope, args);
-</code><code id="L5391"><span class="ln">5391</span>                    } <b>catch</b> (ex) {
-</code><code id="L5392"><span class="ln">5392</span>                        errors.push({error: ex &amp;&amp; ex.message<span class="s"> || </span>ex, func: listeners[i]});
-</code><code id="L5393"><span class="ln">5393</span>                    }
-</code><code id="L5394"><span class="ln">5394</span>                }
-</code><code id="L5395"><span class="ln">5395</span>                <b>if</b> (errors.length) {
-</code><code id="L5396"><span class="ln">5396</span>                    <b>return</b> errors;
-</code><code id="L5397"><span class="ln">5397</span>                }
-</code><code id="L5398"><span class="ln">5398</span>            };
-</code><code id="L5399"><span class="ln">5399</span>        eve.listeners<span class="s"> = </span><b>function</b> (name) {
-</code><code id="L5400"><span class="ln">5400</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
-</code><code id="L5401"><span class="ln">5401</span>                e<span class="s"> = </span>events,
-</code><code id="L5402"><span class="ln">5402</span>                item,
-</code><code id="L5403"><span class="ln">5403</span>                items,
-</code><code id="L5404"><span class="ln">5404</span>                k,
-</code><code id="L5405"><span class="ln">5405</span>                i,
-</code><code id="L5406"><span class="ln">5406</span>                ii,
-</code><code id="L5407"><span class="ln">5407</span>                j,
-</code><code id="L5408"><span class="ln">5408</span>                jj,
-</code><code id="L5409"><span class="ln">5409</span>                nes,
-</code><code id="L5410"><span class="ln">5410</span>                es<span class="s"> = </span>[e],
-</code><code id="L5411"><span class="ln">5411</span>                out<span class="s"> = </span>[];
-</code><code id="L5412"><span class="ln">5412</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
-</code><code id="L5413"><span class="ln">5413</span>                nes<span class="s"> = </span>[];
-</code><code id="L5414"><span class="ln">5414</span>                <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>es.length; j &lt; jj; j++) {
-</code><code id="L5415"><span class="ln">5415</span>                    e<span class="s"> = </span>es[j].n;
-</code><code id="L5416"><span class="ln">5416</span>                    items<span class="s"> = </span>[e[names[i]], e[wildcard]];
-</code><code id="L5417"><span class="ln">5417</span>                    k<span class="s"> = </span><span class="d">2</span>;
-</code><code id="L5418"><span class="ln">5418</span>                    <b>while</b> (k--) {
-</code><code id="L5419"><span class="ln">5419</span>                        item<span class="s"> = </span>items[k];
-</code><code id="L5420"><span class="ln">5420</span>                        <b>if</b> (item) {
-</code><code id="L5421"><span class="ln">5421</span>                            nes.push(item);
-</code><code id="L5422"><span class="ln">5422</span>                            out<span class="s"> = </span>out.concat(item.f<span class="s"> || </span>[]);
-</code><code id="L5423"><span class="ln">5423</span>                        }
-</code><code id="L5424"><span class="ln">5424</span>                    }
-</code><code id="L5425"><span class="ln">5425</span>                }
-</code><code id="L5426"><span class="ln">5426</span>                es<span class="s"> = </span>nes;
-</code><code id="L5427"><span class="ln">5427</span>            }
-</code><code id="L5428"><span class="ln">5428</span>            <b>return</b> out;
-</code><code id="L5429"><span class="ln">5429</span>        };
-</code><code id="L5430"><span class="ln">5430</span>        eve.on<span class="s"> = </span><b>function</b> (name, f) {
-</code><code id="L5431"><span class="ln">5431</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
-</code><code id="L5432"><span class="ln">5432</span>                e<span class="s"> = </span>events;
-</code><code id="L5433"><span class="ln">5433</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
-</code><code id="L5434"><span class="ln">5434</span>                e<span class="s"> = </span>e.n;
-</code><code id="L5435"><span class="ln">5435</span>                !e[names[i]] &amp;&amp; (e[names[i]]<span class="s"> = </span>{n: {}});
-</code><code id="L5436"><span class="ln">5436</span>                e<span class="s"> = </span>e[names[i]];
-</code><code id="L5437"><span class="ln">5437</span>            }
-</code><code id="L5438"><span class="ln">5438</span>            e.f<span class="s"> = </span>e.f<span class="s"> || </span>[];
-</code><code id="L5439"><span class="ln">5439</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i &lt; ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
-</code><code id="L5440"><span class="ln">5440</span>                <b>return</b> <b>false</b>;
-</code><code id="L5441"><span class="ln">5441</span>            }
-</code><code id="L5442"><span class="ln">5442</span>            e.f.push(f);
-</code><code id="L5443"><span class="ln">5443</span>        };
-</code><code id="L5444"><span class="ln">5444</span>        eve.unbind<span class="s"> = </span><b>function</b> (name, f) {
-</code><code id="L5445"><span class="ln">5445</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
-</code><code id="L5446"><span class="ln">5446</span>                e,
-</code><code id="L5447"><span class="ln">5447</span>                key,
-</code><code id="L5448"><span class="ln">5448</span>                splice,
-</code><code id="L5449"><span class="ln">5449</span>                cur<span class="s"> = </span>[events];
-</code><code id="L5450"><span class="ln">5450</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
-</code><code id="L5451"><span class="ln">5451</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>; j &lt; cur.length; j += splice.length<span class="s"> - </span><span class="d">2</span>) {
-</code><code id="L5452"><span class="ln">5452</span>                    splice<span class="s"> = </span>[j, <span class="d">1</span>];
-</code><code id="L5453"><span class="ln">5453</span>                    e<span class="s"> = </span>cur[j].n;
-</code><code id="L5454"><span class="ln">5454</span>                    <b>if</b> (names[i] != wildcard) {
-</code><code id="L5455"><span class="ln">5455</span>                        <b>if</b> (e[names[i]]) {
-</code><code id="L5456"><span class="ln">5456</span>                            splice.push(e[names[i]]);
-</code><code id="L5457"><span class="ln">5457</span>                        }
-</code><code id="L5458"><span class="ln">5458</span>                    } <b>else</b> {
-</code><code id="L5459"><span class="ln">5459</span>                        <b>for</b> (key <b>in</b> e) <b>if</b> (e[has](key)) {
-</code><code id="L5460"><span class="ln">5460</span>                            splice.push(e[key]);
-</code><code id="L5461"><span class="ln">5461</span>                        }
-</code><code id="L5462"><span class="ln">5462</span>                    }
-</code><code id="L5463"><span class="ln">5463</span>                    cur.splice.apply(cur, splice);
-</code><code id="L5464"><span class="ln">5464</span>                }
-</code><code id="L5465"><span class="ln">5465</span>            }
-</code><code id="L5466"><span class="ln">5466</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>cur.length; i &lt; ii; i++) {
-</code><code id="L5467"><span class="ln">5467</span>                e<span class="s"> = </span>cur[i];
-</code><code id="L5468"><span class="ln">5468</span>                <b>while</b> (e.n) {
-</code><code id="L5469"><span class="ln">5469</span>                    <b>if</b> (f) {
-</code><code id="L5470"><span class="ln">5470</span>                        <b>if</b> (e.f) {
-</code><code id="L5471"><span class="ln">5471</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i &lt; ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
-</code><code id="L5472"><span class="ln">5472</span>                                e.f.splice(i, <span class="d">1</span>);
-</code><code id="L5473"><span class="ln">5473</span>                                <b>break</b>;
-</code><code id="L5474"><span class="ln">5474</span>                            }
-</code><code id="L5475"><span class="ln">5475</span>                            !e.f.length &amp;&amp; <b>delete</b> e.f;
-</code><code id="L5476"><span class="ln">5476</span>                        }
-</code><code id="L5477"><span class="ln">5477</span>                        <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key) &amp;&amp; e.n[key].f) {
-</code><code id="L5478"><span class="ln">5478</span>                            <b>var</b> funcs<span class="s"> = </span>e.n[key].f;
-</code><code id="L5479"><span class="ln">5479</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>funcs.length; i &lt; ii; i++) <b>if</b> (funcs[i]<span class="s"> == </span>f) {
-</code><code id="L5480"><span class="ln">5480</span>                                funcs.splice(i, <span class="d">1</span>);
-</code><code id="L5481"><span class="ln">5481</span>                                <b>break</b>;
-</code><code id="L5482"><span class="ln">5482</span>                            }
-</code><code id="L5483"><span class="ln">5483</span>                            !funcs.length &amp;&amp; <b>delete</b> e.n[key].f;
-</code><code id="L5484"><span class="ln">5484</span>                        }
-</code><code id="L5485"><span class="ln">5485</span>                    } <b>else</b> {
-</code><code id="L5486"><span class="ln">5486</span>                        <b>delete</b> e.f;
-</code><code id="L5487"><span class="ln">5487</span>                        <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key) &amp;&amp; e.n[key].f) {
-</code><code id="L5488"><span class="ln">5488</span>                            <b>delete</b> e.n[key].f;
-</code><code id="L5489"><span class="ln">5489</span>                        }
-</code><code id="L5490"><span class="ln">5490</span>                    }
-</code><code id="L5491"><span class="ln">5491</span>                    e<span class="s"> = </span>e.n;
-</code><code id="L5492"><span class="ln">5492</span>                }
-</code><code id="L5493"><span class="ln">5493</span>            }
-</code><code id="L5494"><span class="ln">5494</span>            <b>return</b> <b>true</b>;
-</code><code id="L5495"><span class="ln">5495</span>        };
-</code><code id="L5496"><span class="ln">5496</span>        eve.version<span class="s"> = </span>version;
-</code><code id="L5497"><span class="ln">5497</span>        eve.toString<span class="s"> = </span><b>function</b> () {
-</code><code id="L5498"><span class="ln">5498</span>            <b>return</b> <i>"You are running Eve "</i><span class="s"> + </span>version;
-</code><code id="L5499"><span class="ln">5499</span>        };
-</code><code id="L5500"><span class="ln">5500</span>        <b>return</b> eve;
-</code><code id="L5501"><span class="ln">5501</span>    })();
-</code><code id="L5502"><span class="ln">5502</span>})();
+</span></code><code id="L4988"><span class="ln">4988</span><span class="c">    <span class="s"> * </span>Acts similar to @Element.animate, but ensure that given animation runs <b>in</b> sync <b>with</b> another given element.
+</span></code><code id="L4989"><span class="ln">4989</span><span class="c">     **
+</span></code><code id="L4990"><span class="ln">4990</span><span class="c">     > Parameters
+</span></code><code id="L4991"><span class="ln">4991</span><span class="c">     **
+</span></code><code id="L4992"><span class="ln">4992</span><span class="c">    <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
+</span></code><code id="L4993"><span class="ln">4993</span><span class="c">    <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
+</span></code><code id="L4994"><span class="ln">4994</span><span class="c">    <span class="s"> - </span>easing (string) #optional easing type. Accept on of @Raphael.easing_formulas or CSS format: `cubic&#x2010;bezier(XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX)`
+</span></code><code id="L4995"><span class="ln">4995</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L4996"><span class="ln">4996</span><span class="c">    <span class="s"> * </span>or
+</span></code><code id="L4997"><span class="ln">4997</span><span class="c">    <span class="s"> - </span>animation (object) animation object, see @Raphael.animation
+</span></code><code id="L4998"><span class="ln">4998</span><span class="c">     **
+</span></code><code id="L4999"><span class="ln">4999</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5000"><span class="ln">5000</span><span class="c">    \*/</span>
+</code><code id="L5001"><span class="ln">5001</span>    elproto.animateWith<span class="s"> = </span><b>function</b> (element, params, ms, easing, callback) {
+</code><code id="L5002"><span class="ln">5002</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i &lt; ii; i++) {
+</code><code id="L5003"><span class="ln">5003</span>            <b>if</b> (animationElements[i].el.id<span class="s"> == </span>element.id) {
+</code><code id="L5004"><span class="ln">5004</span>                params.start<span class="s"> = </span>animationElements[i].timestamp;
+</code><code id="L5005"><span class="ln">5005</span>                <b>break</b>;
+</code><code id="L5006"><span class="ln">5006</span>            }
+</code><code id="L5007"><span class="ln">5007</span>        }
+</code><code id="L5008"><span class="ln">5008</span>        <b>return</b> <b>this</b>.animate(params, ms, easing, callback);
+</code><code id="L5009"><span class="ln">5009</span>    };
+</code><code id="L5010"><span class="ln">5010</span>    <b>function</b> CubicBezierAtTime(t, p1x, p1y, p2x, p2y, duration) {
+</code><code id="L5011"><span class="ln">5011</span>        <b>var</b> cx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1x,
+</code><code id="L5012"><span class="ln">5012</span>            bx<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2x<span class="s"> - </span>p1x)<span class="s"> - </span>cx,
+</code><code id="L5013"><span class="ln">5013</span>            ax<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cx<span class="s"> - </span>bx,
+</code><code id="L5014"><span class="ln">5014</span>            cy<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>p1y,
+</code><code id="L5015"><span class="ln">5015</span>            by<span class="s"> = </span><span class="d">3</span><span class="s"> * </span>(p2y<span class="s"> - </span>p1y)<span class="s"> - </span>cy,
+</code><code id="L5016"><span class="ln">5016</span>            ay<span class="s"> = </span><span class="d">1</span><span class="s"> - </span>cy<span class="s"> - </span>by;
+</code><code id="L5017"><span class="ln">5017</span>        <b>function</b> sampleCurveX(t) {
+</code><code id="L5018"><span class="ln">5018</span>            <b>return</b> ((ax<span class="s"> * </span>t<span class="s"> + </span>bx)<span class="s"> * </span>t<span class="s"> + </span>cx)<span class="s"> * </span>t;
+</code><code id="L5019"><span class="ln">5019</span>        }
+</code><code id="L5020"><span class="ln">5020</span>        <b>function</b> solve(x, epsilon) {
+</code><code id="L5021"><span class="ln">5021</span>            <b>var</b> t<span class="s"> = </span>solveCurveX(x, epsilon);
+</code><code id="L5022"><span class="ln">5022</span>            <b>return</b> ((ay<span class="s"> * </span>t<span class="s"> + </span>by)<span class="s"> * </span>t<span class="s"> + </span>cy)<span class="s"> * </span>t;
+</code><code id="L5023"><span class="ln">5023</span>        }
+</code><code id="L5024"><span class="ln">5024</span>        <b>function</b> solveCurveX(x, epsilon) {
+</code><code id="L5025"><span class="ln">5025</span>            <b>var</b> t0, t1, t2, x2, d2, i;
+</code><code id="L5026"><span class="ln">5026</span>            <b>for</b>(t2<span class="s"> = </span>x, i<span class="s"> = </span><span class="d">0</span>; i &lt; <span class="d">8</span>; i++) {
+</code><code id="L5027"><span class="ln">5027</span>                x2<span class="s"> = </span>sampleCurveX(t2)<span class="s"> - </span>x;
+</code><code id="L5028"><span class="ln">5028</span>                <b>if</b> (abs(x2) &lt; epsilon) {
+</code><code id="L5029"><span class="ln">5029</span>                    <b>return</b> t2;
+</code><code id="L5030"><span class="ln">5030</span>                }
+</code><code id="L5031"><span class="ln">5031</span>                d2<span class="s"> = </span>(<span class="d">3</span><span class="s"> * </span>ax<span class="s"> * </span>t2<span class="s"> + </span><span class="d">2</span><span class="s"> * </span>bx)<span class="s"> * </span>t2<span class="s"> + </span>cx;
+</code><code id="L5032"><span class="ln">5032</span>                <b>if</b> (abs(d2) &lt; <span class="d">1e-6</span>) {
+</code><code id="L5033"><span class="ln">5033</span>                    <b>break</b>;
+</code><code id="L5034"><span class="ln">5034</span>                }
+</code><code id="L5035"><span class="ln">5035</span>                t2<span class="s"> = </span>t2<span class="s"> - </span>x2<span class="s"> / </span>d2;
+</code><code id="L5036"><span class="ln">5036</span>            }
+</code><code id="L5037"><span class="ln">5037</span>            t0<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L5038"><span class="ln">5038</span>            t1<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L5039"><span class="ln">5039</span>            t2<span class="s"> = </span>x;
+</code><code id="L5040"><span class="ln">5040</span>            <b>if</b> (t2 &lt; t0) {
+</code><code id="L5041"><span class="ln">5041</span>                <b>return</b> t0;
+</code><code id="L5042"><span class="ln">5042</span>            }
+</code><code id="L5043"><span class="ln">5043</span>            <b>if</b> (t2 > t1) {
+</code><code id="L5044"><span class="ln">5044</span>                <b>return</b> t1;
+</code><code id="L5045"><span class="ln">5045</span>            }
+</code><code id="L5046"><span class="ln">5046</span>            <b>while</b> (t0 &lt; t1) {
+</code><code id="L5047"><span class="ln">5047</span>                x2<span class="s"> = </span>sampleCurveX(t2);
+</code><code id="L5048"><span class="ln">5048</span>                <b>if</b> (abs(x2<span class="s"> - </span>x) &lt; epsilon) {
+</code><code id="L5049"><span class="ln">5049</span>                    <b>return</b> t2;
+</code><code id="L5050"><span class="ln">5050</span>                }
+</code><code id="L5051"><span class="ln">5051</span>                <b>if</b> (x > x2) {
+</code><code id="L5052"><span class="ln">5052</span>                    t0<span class="s"> = </span>t2;
+</code><code id="L5053"><span class="ln">5053</span>                } <b>else</b> {
+</code><code id="L5054"><span class="ln">5054</span>                    t1<span class="s"> = </span>t2;
+</code><code id="L5055"><span class="ln">5055</span>                }
+</code><code id="L5056"><span class="ln">5056</span>                t2<span class="s"> = </span>(t1<span class="s"> - </span>t0)<span class="s"> / </span><span class="d">2</span><span class="s"> + </span>t0;
+</code><code id="L5057"><span class="ln">5057</span>            }
+</code><code id="L5058"><span class="ln">5058</span>            <b>return</b> t2;
+</code><code id="L5059"><span class="ln">5059</span>        }
+</code><code id="L5060"><span class="ln">5060</span>        <b>return</b> solve(t, <span class="d">1</span><span class="s"> / </span>(<span class="d">200</span><span class="s"> * </span>duration));
+</code><code id="L5061"><span class="ln">5061</span>    }
+</code><code id="L5062"><span class="ln">5062</span>    elproto.onAnimation<span class="s"> = </span><b>function</b> (f) {
+</code><code id="L5063"><span class="ln">5063</span>        f ? eve.on(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id, f) : eve.unbind(<i>"anim.frame."</i><span class="s"> + </span><b>this</b>.id);
+</code><code id="L5064"><span class="ln">5064</span>        <b>return</b> <b>this</b>;
+</code><code id="L5065"><span class="ln">5065</span>    };
+</code><code id="L5066"><span class="ln">5066</span>    <b>function</b> Animation(anim, ms) {
+</code><code id="L5067"><span class="ln">5067</span>        <b>var</b> percents<span class="s"> = </span>[];
+</code><code id="L5068"><span class="ln">5068</span>        <b>this</b>.anim<span class="s"> = </span>anim;
+</code><code id="L5069"><span class="ln">5069</span>        <b>this</b>.ms<span class="s"> = </span>ms;
+</code><code id="L5070"><span class="ln">5070</span>        <b>this</b>.times<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L5071"><span class="ln">5071</span>        <b>if</b> (<b>this</b>.anim) {
+</code><code id="L5072"><span class="ln">5072</span>            <b>for</b> (<b>var</b> attr <b>in</b> <b>this</b>.anim) <b>if</b> (<b>this</b>.anim[has](attr)) {
+</code><code id="L5073"><span class="ln">5073</span>                percents.push(+attr);
+</code><code id="L5074"><span class="ln">5074</span>            }
+</code><code id="L5075"><span class="ln">5075</span>            percents.sort(sortByNumber);
+</code><code id="L5076"><span class="ln">5076</span>        }
+</code><code id="L5077"><span class="ln">5077</span>        <b>this</b>.top<span class="s"> = </span>percents[percents.length<span class="s"> - </span><span class="d">1</span>];
+</code><code id="L5078"><span class="ln">5078</span>        <b>this</b>.percents<span class="s"> = </span>percents;
+</code><code id="L5079"><span class="ln">5079</span>    }
+</code><code id="L5080"><span class="ln">5080</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5081"><span class="ln">5081</span><span class="c">    <span class="s"> * </span>Animation.delay
+</span></code><code id="L5082"><span class="ln">5082</span><span class="c">     [ method ]
+</span></code><code id="L5083"><span class="ln">5083</span><span class="c">     **
+</span></code><code id="L5084"><span class="ln">5084</span><span class="c">    <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given delay.
+</span></code><code id="L5085"><span class="ln">5085</span><span class="c">     **
+</span></code><code id="L5086"><span class="ln">5086</span><span class="c">     > Parameters
+</span></code><code id="L5087"><span class="ln">5087</span><span class="c">     **
+</span></code><code id="L5088"><span class="ln">5088</span><span class="c">    <span class="s"> - </span>delay (number) number of ms to pass between animation start and actual animation
+</span></code><code id="L5089"><span class="ln">5089</span><span class="c">     **
+</span></code><code id="L5090"><span class="ln">5090</span><span class="c">    <span class="s"> = </span>(object) <b>new</b> altered Animation object
+</span></code><code id="L5091"><span class="ln">5091</span><span class="c">    \*/</span>
+</code><code id="L5092"><span class="ln">5092</span>    Animation.prototype.delay<span class="s"> = </span><b>function</b> (delay) {
+</code><code id="L5093"><span class="ln">5093</span>        <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
+</code><code id="L5094"><span class="ln">5094</span>        a.times<span class="s"> = </span><b>this</b>.times;
+</code><code id="L5095"><span class="ln">5095</span>        a.del<span class="s"> = </span>+delay<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L5096"><span class="ln">5096</span>        <b>return</b> a;
+</code><code id="L5097"><span class="ln">5097</span>    };
+</code><code id="L5098"><span class="ln">5098</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5099"><span class="ln">5099</span><span class="c">    <span class="s"> * </span>Animation.repeat
+</span></code><code id="L5100"><span class="ln">5100</span><span class="c">     [ method ]
+</span></code><code id="L5101"><span class="ln">5101</span><span class="c">     **
+</span></code><code id="L5102"><span class="ln">5102</span><span class="c">    <span class="s"> * </span>Creates copy of existing animation object <b>with</b> given repetition.
+</span></code><code id="L5103"><span class="ln">5103</span><span class="c">     **
+</span></code><code id="L5104"><span class="ln">5104</span><span class="c">     > Parameters
+</span></code><code id="L5105"><span class="ln">5105</span><span class="c">     **
+</span></code><code id="L5106"><span class="ln">5106</span><span class="c">    <span class="s"> - </span>repeat (number) number iterations of animation. For infinite animation pass `Infinity`
+</span></code><code id="L5107"><span class="ln">5107</span><span class="c">     **
+</span></code><code id="L5108"><span class="ln">5108</span><span class="c">    <span class="s"> = </span>(object) <b>new</b> altered Animation object
+</span></code><code id="L5109"><span class="ln">5109</span><span class="c">    \*/</span>
+</code><code id="L5110"><span class="ln">5110</span>    Animation.prototype.repeat<span class="s"> = </span><b>function</b> (times) { 
+</code><code id="L5111"><span class="ln">5111</span>        <b>var</b> a<span class="s"> = </span><b>new</b> Animation(<b>this</b>.anim, <b>this</b>.ms);
+</code><code id="L5112"><span class="ln">5112</span>        a.del<span class="s"> = </span><b>this</b>.del;
+</code><code id="L5113"><span class="ln">5113</span>        a.times<span class="s"> = </span>math.floor(mmax(times, <span class="d">0</span>))<span class="s"> || </span><span class="d">1</span>;
+</code><code id="L5114"><span class="ln">5114</span>        <b>return</b> a;
+</code><code id="L5115"><span class="ln">5115</span>    };
+</code><code id="L5116"><span class="ln">5116</span>    <b>function</b> runAnimation(anim, element, percent, status, totalOrigin) {
+</code><code id="L5117"><span class="ln">5117</span>        percent<span class="s"> = </span>toFloat(percent);
+</code><code id="L5118"><span class="ln">5118</span>        <b>var</b> params,
+</code><code id="L5119"><span class="ln">5119</span>            isInAnim,
+</code><code id="L5120"><span class="ln">5120</span>            isInAnimSet,
+</code><code id="L5121"><span class="ln">5121</span>            percents<span class="s"> = </span>[],
+</code><code id="L5122"><span class="ln">5122</span>            next,
+</code><code id="L5123"><span class="ln">5123</span>            prev,
+</code><code id="L5124"><span class="ln">5124</span>            timestamp,
+</code><code id="L5125"><span class="ln">5125</span>            ms<span class="s"> = </span>anim.ms,
+</code><code id="L5126"><span class="ln">5126</span>            from<span class="s"> = </span>{},
+</code><code id="L5127"><span class="ln">5127</span>            to<span class="s"> = </span>{},
+</code><code id="L5128"><span class="ln">5128</span>            diff<span class="s"> = </span>{};
+</code><code id="L5129"><span class="ln">5129</span>        <b>if</b> (status) {
+</code><code id="L5130"><span class="ln">5130</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>animationElements.length; i &lt; ii; i++) {
+</code><code id="L5131"><span class="ln">5131</span>                <b>var</b> e<span class="s"> = </span>animationElements[i];
+</code><code id="L5132"><span class="ln">5132</span>                <b>if</b> (e.el.id<span class="s"> == </span>element.id<span class="s"> &amp;&amp; </span>e.anim<span class="s"> == </span>anim) {
+</code><code id="L5133"><span class="ln">5133</span>                    <b>if</b> (e.percent != percent) {
+</code><code id="L5134"><span class="ln">5134</span>                        animationElements.splice(i, <span class="d">1</span>);
+</code><code id="L5135"><span class="ln">5135</span>                        isInAnimSet<span class="s"> = </span><span class="d">1</span>;
+</code><code id="L5136"><span class="ln">5136</span>                    } <b>else</b> {
+</code><code id="L5137"><span class="ln">5137</span>                        isInAnim<span class="s"> = </span>e;
+</code><code id="L5138"><span class="ln">5138</span>                    }
+</code><code id="L5139"><span class="ln">5139</span>                    element.attr(e.totalOrigin);
+</code><code id="L5140"><span class="ln">5140</span>                    <b>break</b>;
+</code><code id="L5141"><span class="ln">5141</span>                }
+</code><code id="L5142"><span class="ln">5142</span>            }
+</code><code id="L5143"><span class="ln">5143</span>        } <b>else</b> {
+</code><code id="L5144"><span class="ln">5144</span>            status<span class="s"> = </span><span class="d">0</span><span class="s"> / </span><span class="d">0</span>;
+</code><code id="L5145"><span class="ln">5145</span>        }
+</code><code id="L5146"><span class="ln">5146</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>anim.percents.length; i &lt; ii; i++) {
+</code><code id="L5147"><span class="ln">5147</span>            <b>if</b> (anim.percents[i]<span class="s"> == </span>percent<span class="s"> || </span>anim.percents[i] > status<span class="s"> * </span>anim.top) {
+</code><code id="L5148"><span class="ln">5148</span>                percent<span class="s"> = </span>anim.percents[i];
+</code><code id="L5149"><span class="ln">5149</span>                prev<span class="s"> = </span>anim.percents[i<span class="s"> - </span><span class="d">1</span>]<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L5150"><span class="ln">5150</span>                ms<span class="s"> = </span>ms<span class="s"> / </span>anim.top<span class="s"> * </span>(percent<span class="s"> - </span>prev);
+</code><code id="L5151"><span class="ln">5151</span>                next<span class="s"> = </span>anim.percents[i<span class="s"> + </span><span class="d">1</span>];
+</code><code id="L5152"><span class="ln">5152</span>                params<span class="s"> = </span>anim.anim[percent];
+</code><code id="L5153"><span class="ln">5153</span>                <b>break</b>;
+</code><code id="L5154"><span class="ln">5154</span>            } <b>else</b> <b>if</b> (status) {
+</code><code id="L5155"><span class="ln">5155</span>                element.attr(anim.anim[anim.percents[i]]);
+</code><code id="L5156"><span class="ln">5156</span>            }
+</code><code id="L5157"><span class="ln">5157</span>        }
+</code><code id="L5158"><span class="ln">5158</span>        <b>if</b> (!params) {
+</code><code id="L5159"><span class="ln">5159</span>            <b>return</b>;
+</code><code id="L5160"><span class="ln">5160</span>        }
+</code><code id="L5161"><span class="ln">5161</span>        <b>if</b> (!isInAnim) {
+</code><code id="L5162"><span class="ln">5162</span>            <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr)) {
+</code><code id="L5163"><span class="ln">5163</span>                <b>if</b> (availableAnimAttrs[has](attr)<span class="s"> || </span>element.paper.customAttributes[has](attr)) {
+</code><code id="L5164"><span class="ln">5164</span>                    from[attr]<span class="s"> = </span>element.attr(attr);
+</code><code id="L5165"><span class="ln">5165</span>                    (from[attr]<span class="s"> == </span><b>null</b>)<span class="s"> &amp;&amp; </span>(from[attr]<span class="s"> = </span>availableAttrs[attr]);
+</code><code id="L5166"><span class="ln">5166</span>                    to[attr]<span class="s"> = </span>params[attr];
+</code><code id="L5167"><span class="ln">5167</span>                    <b>switch</b> (availableAnimAttrs[attr]) {
+</code><code id="L5168"><span class="ln">5168</span>                        <b>case</b> nu:
+</code><code id="L5169"><span class="ln">5169</span>                            diff[attr]<span class="s"> = </span>(to[attr]<span class="s"> - </span>from[attr])<span class="s"> / </span>ms;
+</code><code id="L5170"><span class="ln">5170</span>                            <b>break</b>;
+</code><code id="L5171"><span class="ln">5171</span>                        <b>case</b> <i>"colour"</i>:
+</code><code id="L5172"><span class="ln">5172</span>                            from[attr]<span class="s"> = </span>R.getRGB(from[attr]);
+</code><code id="L5173"><span class="ln">5173</span>                            <b>var</b> toColour<span class="s"> = </span>R.getRGB(to[attr]);
+</code><code id="L5174"><span class="ln">5174</span>                            diff[attr]<span class="s"> = </span>{
+</code><code id="L5175"><span class="ln">5175</span>                                r: (toColour.r<span class="s"> - </span>from[attr].r)<span class="s"> / </span>ms,
+</code><code id="L5176"><span class="ln">5176</span>                                g: (toColour.g<span class="s"> - </span>from[attr].g)<span class="s"> / </span>ms,
+</code><code id="L5177"><span class="ln">5177</span>                                b: (toColour.b<span class="s"> - </span>from[attr].b)<span class="s"> / </span>ms
+</code><code id="L5178"><span class="ln">5178</span>                            };
+</code><code id="L5179"><span class="ln">5179</span>                            <b>break</b>;
+</code><code id="L5180"><span class="ln">5180</span>                        <b>case</b> <i>"path"</i>:
+</code><code id="L5181"><span class="ln">5181</span>                            <b>var</b> pathes<span class="s"> = </span>path2curve(from[attr], to[attr]),
+</code><code id="L5182"><span class="ln">5182</span>                                toPath<span class="s"> = </span>pathes[<span class="d">1</span>];
+</code><code id="L5183"><span class="ln">5183</span>                            from[attr]<span class="s"> = </span>pathes[<span class="d">0</span>];
+</code><code id="L5184"><span class="ln">5184</span>                            diff[attr]<span class="s"> = </span>[];
+</code><code id="L5185"><span class="ln">5185</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
+</code><code id="L5186"><span class="ln">5186</span>                                diff[attr][i]<span class="s"> = </span>[<span class="d">0</span>];
+</code><code id="L5187"><span class="ln">5187</span>                                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
+</code><code id="L5188"><span class="ln">5188</span>                                    diff[attr][i][j]<span class="s"> = </span>(toPath[i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
+</code><code id="L5189"><span class="ln">5189</span>                                }
+</code><code id="L5190"><span class="ln">5190</span>                            }
+</code><code id="L5191"><span class="ln">5191</span>                            <b>break</b>;
+</code><code id="L5192"><span class="ln">5192</span>                        <b>case</b> <i>"transform"</i>:
+</code><code id="L5193"><span class="ln">5193</span>                            <b>var</b> _<span class="s"> = </span>element._,
+</code><code id="L5194"><span class="ln">5194</span>                                eq<span class="s"> = </span>equaliseTransform(_[attr], to[attr]);
+</code><code id="L5195"><span class="ln">5195</span>                            <b>if</b> (eq) {
+</code><code id="L5196"><span class="ln">5196</span>                                from[attr]<span class="s"> = </span>eq.from;
+</code><code id="L5197"><span class="ln">5197</span>                                to[attr]<span class="s"> = </span>eq.to;
+</code><code id="L5198"><span class="ln">5198</span>                                diff[attr]<span class="s"> = </span>[];
+</code><code id="L5199"><span class="ln">5199</span>                                diff[attr].real<span class="s"> = </span><b>true</b>;
+</code><code id="L5200"><span class="ln">5200</span>                                <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>from[attr].length; i &lt; ii; i++) {
+</code><code id="L5201"><span class="ln">5201</span>                                    diff[attr][i]<span class="s"> = </span>[from[attr][i][<span class="d">0</span>]];
+</code><code id="L5202"><span class="ln">5202</span>                                    <b>for</b> (j<span class="s"> = </span><span class="d">1</span>, jj<span class="s"> = </span>from[attr][i].length; j &lt; jj; j++) {
+</code><code id="L5203"><span class="ln">5203</span>                                        diff[attr][i][j]<span class="s"> = </span>(to[attr][i][j]<span class="s"> - </span>from[attr][i][j])<span class="s"> / </span>ms;
+</code><code id="L5204"><span class="ln">5204</span>                                    }
+</code><code id="L5205"><span class="ln">5205</span>                                }
+</code><code id="L5206"><span class="ln">5206</span>                            } <b>else</b> {
+</code><code id="L5207"><span class="ln">5207</span>                                <b>var</b> m<span class="s"> = </span>(element.matrix<span class="s"> || </span><b>new</b> Matrix).m,
+</code><code id="L5208"><span class="ln">5208</span>                                    to2<span class="s"> = </span>{_:{transform: _.transform}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};
+</code><code id="L5209"><span class="ln">5209</span>                                from[attr]<span class="s"> = </span>[
+</code><code id="L5210"><span class="ln">5210</span>                                    m[<span class="d">0</span>][<span class="d">0</span>],
+</code><code id="L5211"><span class="ln">5211</span>                                    m[<span class="d">1</span>][<span class="d">0</span>],
+</code><code id="L5212"><span class="ln">5212</span>                                    m[<span class="d">0</span>][<span class="d">1</span>],
+</code><code id="L5213"><span class="ln">5213</span>                                    m[<span class="d">1</span>][<span class="d">1</span>],
+</code><code id="L5214"><span class="ln">5214</span>                                    m[<span class="d">0</span>][<span class="d">2</span>],
+</code><code id="L5215"><span class="ln">5215</span>                                    m[<span class="d">1</span>][<span class="d">2</span>]
+</code><code id="L5216"><span class="ln">5216</span>                                ];
+</code><code id="L5217"><span class="ln">5217</span>                                extractTransform(to2, to[attr]);
+</code><code id="L5218"><span class="ln">5218</span>                                to[attr]<span class="s"> = </span>to2._.transform;
+</code><code id="L5219"><span class="ln">5219</span>                                diff[attr]<span class="s"> = </span>[
+</code><code id="L5220"><span class="ln">5220</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
+</code><code id="L5221"><span class="ln">5221</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">0</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">0</span>])<span class="s"> / </span>ms,
+</code><code id="L5222"><span class="ln">5222</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
+</code><code id="L5223"><span class="ln">5223</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">1</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">1</span>])<span class="s"> / </span>ms,
+</code><code id="L5224"><span class="ln">5224</span>                                    (to2.matrix.m[<span class="d">0</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">0</span>][<span class="d">2</span>])<span class="s"> / </span>ms,
+</code><code id="L5225"><span class="ln">5225</span>                                    (to2.matrix.m[<span class="d">1</span>][<span class="d">2</span>]<span class="s"> - </span>m[<span class="d">1</span>][<span class="d">2</span>])<span class="s"> / </span>ms
+</code><code id="L5226"><span class="ln">5226</span>                                ];
+</code><code id="L5227"><span class="ln">5227</span>                                <span class="c">// from[attr]<span class="s"> = </span>[_.sx, _.sy, _.deg, _.dx, _.dy];</span>
+</code><code id="L5228"><span class="ln">5228</span>                                <span class="c">// <b>var</b> to2<span class="s"> = </span>{_:{}, getBBox: <b>function</b> () { <b>return</b> element.getBBox(); }};</span>
+</code><code id="L5229"><span class="ln">5229</span>                                <span class="c">// extractTransform(to2, to[attr]);</span>
+</code><code id="L5230"><span class="ln">5230</span>                                <span class="c">// diff[attr]<span class="s"> = </span>[</span>
+</code><code id="L5231"><span class="ln">5231</span>                                <span class="c">//     (to2._.sx<span class="s"> - </span>_.sx)<span class="s"> / </span>ms,</span>
+</code><code id="L5232"><span class="ln">5232</span>                                <span class="c">//     (to2._.sy<span class="s"> - </span>_.sy)<span class="s"> / </span>ms,</span>
+</code><code id="L5233"><span class="ln">5233</span>                                <span class="c">//     (to2._.deg<span class="s"> - </span>_.deg)<span class="s"> / </span>ms,</span>
+</code><code id="L5234"><span class="ln">5234</span>                                <span class="c">//     (to2._.dx<span class="s"> - </span>_.dx)<span class="s"> / </span>ms,</span>
+</code><code id="L5235"><span class="ln">5235</span>                                <span class="c">//     (to2._.dy<span class="s"> - </span>_.dy)<span class="s"> / </span>ms</span>
+</code><code id="L5236"><span class="ln">5236</span>                                <span class="c">// ];</span>
+</code><code id="L5237"><span class="ln">5237</span>                            }
+</code><code id="L5238"><span class="ln">5238</span>                            <b>break</b>;
+</code><code id="L5239"><span class="ln">5239</span>                        <b>case</b> <i>"csv"</i>:
+</code><code id="L5240"><span class="ln">5240</span>                            <b>var</b> values<span class="s"> = </span>Str(params[attr]).split(separator),
+</code><code id="L5241"><span class="ln">5241</span>                                from2<span class="s"> = </span>Str(from[attr]).split(separator);
+</code><code id="L5242"><span class="ln">5242</span>                            <b>if</b> (attr<span class="s"> == </span><i>"clip-rect"</i>) {
+</code><code id="L5243"><span class="ln">5243</span>                                from[attr]<span class="s"> = </span>from2;
+</code><code id="L5244"><span class="ln">5244</span>                                diff[attr]<span class="s"> = </span>[];
+</code><code id="L5245"><span class="ln">5245</span>                                i<span class="s"> = </span>from2.length;
+</code><code id="L5246"><span class="ln">5246</span>                                <b>while</b> (i--) {
+</code><code id="L5247"><span class="ln">5247</span>                                    diff[attr][i]<span class="s"> = </span>(values[i]<span class="s"> - </span>from[attr][i])<span class="s"> / </span>ms;
+</code><code id="L5248"><span class="ln">5248</span>                                }
+</code><code id="L5249"><span class="ln">5249</span>                            }
+</code><code id="L5250"><span class="ln">5250</span>                            to[attr]<span class="s"> = </span>values;
+</code><code id="L5251"><span class="ln">5251</span>                            <b>break</b>;
+</code><code id="L5252"><span class="ln">5252</span>                        <b>default</b>:
+</code><code id="L5253"><span class="ln">5253</span>                            values<span class="s"> = </span>[].concat(params[attr]);
+</code><code id="L5254"><span class="ln">5254</span>                            from2<span class="s"> = </span>[].concat(from[attr]);
+</code><code id="L5255"><span class="ln">5255</span>                            diff[attr]<span class="s"> = </span>[];
+</code><code id="L5256"><span class="ln">5256</span>                            i<span class="s"> = </span>element.paper.customAttributes[attr].length;
+</code><code id="L5257"><span class="ln">5257</span>                            <b>while</b> (i--) {
+</code><code id="L5258"><span class="ln">5258</span>                                diff[attr][i]<span class="s"> = </span>((values[i]<span class="s"> || </span><span class="d">0</span>)<span class="s"> - </span>(from2[i]<span class="s"> || </span><span class="d">0</span>))<span class="s"> / </span>ms;
+</code><code id="L5259"><span class="ln">5259</span>                            }
+</code><code id="L5260"><span class="ln">5260</span>                            <b>break</b>;
+</code><code id="L5261"><span class="ln">5261</span>                    }
+</code><code id="L5262"><span class="ln">5262</span>                }
+</code><code id="L5263"><span class="ln">5263</span>            }
+</code><code id="L5264"><span class="ln">5264</span>            <b>var</b> easing<span class="s"> = </span>params.easing,
+</code><code id="L5265"><span class="ln">5265</span>                easyeasy<span class="s"> = </span>R.easing_formulas[easing];
+</code><code id="L5266"><span class="ln">5266</span>            <b>if</b> (!easyeasy) {
+</code><code id="L5267"><span class="ln">5267</span>                easyeasy<span class="s"> = </span>Str(easing).match(bezierrg);
+</code><code id="L5268"><span class="ln">5268</span>                <b>if</b> (easyeasy<span class="s"> &amp;&amp; </span>easyeasy.length<span class="s"> == </span><span class="d">5</span>) {
+</code><code id="L5269"><span class="ln">5269</span>                    <b>var</b> curve<span class="s"> = </span>easyeasy;
+</code><code id="L5270"><span class="ln">5270</span>                    easyeasy<span class="s"> = </span><b>function</b> (t) {
+</code><code id="L5271"><span class="ln">5271</span>                        <b>return</b> CubicBezierAtTime(t, +curve[<span class="d">1</span>], +curve[<span class="d">2</span>], +curve[<span class="d">3</span>], +curve[<span class="d">4</span>], ms);
+</code><code id="L5272"><span class="ln">5272</span>                    };
+</code><code id="L5273"><span class="ln">5273</span>                } <b>else</b> {
+</code><code id="L5274"><span class="ln">5274</span>                    easyeasy<span class="s"> = </span>pipe;
+</code><code id="L5275"><span class="ln">5275</span>                }
+</code><code id="L5276"><span class="ln">5276</span>            }
+</code><code id="L5277"><span class="ln">5277</span>            timestamp<span class="s"> = </span>params.start<span class="s"> || </span>anim.start<span class="s"> || </span>+<b>new</b> Date;
+</code><code id="L5278"><span class="ln">5278</span>            e<span class="s"> = </span>{
+</code><code id="L5279"><span class="ln">5279</span>                anim: anim,
+</code><code id="L5280"><span class="ln">5280</span>                percent: percent,
+</code><code id="L5281"><span class="ln">5281</span>                timestamp: timestamp,
+</code><code id="L5282"><span class="ln">5282</span>                start: timestamp<span class="s"> + </span>(anim.del<span class="s"> || </span><span class="d">0</span>),
+</code><code id="L5283"><span class="ln">5283</span>                status: <span class="d">0</span>,
+</code><code id="L5284"><span class="ln">5284</span>                initstatus: status<span class="s"> || </span><span class="d">0</span>,
+</code><code id="L5285"><span class="ln">5285</span>                stop: <b>false</b>,
+</code><code id="L5286"><span class="ln">5286</span>                ms: ms,
+</code><code id="L5287"><span class="ln">5287</span>                easing: easyeasy,
+</code><code id="L5288"><span class="ln">5288</span>                from: from,
+</code><code id="L5289"><span class="ln">5289</span>                diff: diff,
+</code><code id="L5290"><span class="ln">5290</span>                to: to,
+</code><code id="L5291"><span class="ln">5291</span>                el: element,
+</code><code id="L5292"><span class="ln">5292</span>                callback: params.callback,
+</code><code id="L5293"><span class="ln">5293</span>                prev: prev,
+</code><code id="L5294"><span class="ln">5294</span>                next: next,
+</code><code id="L5295"><span class="ln">5295</span>                repeat: anim.times,
+</code><code id="L5296"><span class="ln">5296</span>                origin: element.attr(),
+</code><code id="L5297"><span class="ln">5297</span>                totalOrigin: totalOrigin
+</code><code id="L5298"><span class="ln">5298</span>            };
+</code><code id="L5299"><span class="ln">5299</span>            animationElements.push(e);
+</code><code id="L5300"><span class="ln">5300</span>            <b>if</b> (status<span class="s"> &amp;&amp; </span>!isInAnim) {
+</code><code id="L5301"><span class="ln">5301</span>                e.stop<span class="s"> = </span><b>true</b>;
+</code><code id="L5302"><span class="ln">5302</span>                e.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>ms<span class="s"> * </span>status;
+</code><code id="L5303"><span class="ln">5303</span>                <b>if</b> (animationElements.length<span class="s"> == </span><span class="d">1</span>) {
+</code><code id="L5304"><span class="ln">5304</span>                    <b>return</b> animation();
+</code><code id="L5305"><span class="ln">5305</span>                }
+</code><code id="L5306"><span class="ln">5306</span>            }
+</code><code id="L5307"><span class="ln">5307</span>            animationElements.length<span class="s"> == </span><span class="d">1</span><span class="s"> &amp;&amp; </span>requestAnimFrame(animation);
+</code><code id="L5308"><span class="ln">5308</span>        } <b>else</b> {
+</code><code id="L5309"><span class="ln">5309</span>            isInAnim.initstatus<span class="s"> = </span>status;
+</code><code id="L5310"><span class="ln">5310</span>            isInAnim.start<span class="s"> = </span><b>new</b> Date<span class="s"> - </span>isInAnim.ms<span class="s"> * </span>status;
+</code><code id="L5311"><span class="ln">5311</span>        }
+</code><code id="L5312"><span class="ln">5312</span>        eve(<i>"anim.start."</i><span class="s"> + </span>element.id, element, anim);
+</code><code id="L5313"><span class="ln">5313</span>    }
+</code><code id="L5314"><span class="ln">5314</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5315"><span class="ln">5315</span><span class="c">    <span class="s"> * </span>Raphael.animation
+</span></code><code id="L5316"><span class="ln">5316</span><span class="c">     [ method ]
+</span></code><code id="L5317"><span class="ln">5317</span><span class="c">     **
+</span></code><code id="L5318"><span class="ln">5318</span><span class="c">    <span class="s"> * </span>Creates animation object. That later could be used <b>for</b> @Element.animate or @Element.animateWith methods.
+</span></code><code id="L5319"><span class="ln">5319</span><span class="c">    <span class="s"> * </span>See also @Animation.delay and @Animation.repeat methods.
+</span></code><code id="L5320"><span class="ln">5320</span><span class="c">     **
+</span></code><code id="L5321"><span class="ln">5321</span><span class="c">     > Parameters
+</span></code><code id="L5322"><span class="ln">5322</span><span class="c">     **
+</span></code><code id="L5323"><span class="ln">5323</span><span class="c">    <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
+</span></code><code id="L5324"><span class="ln">5324</span><span class="c">    <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
+</span></code><code id="L5325"><span class="ln">5325</span><span class="c">    <span class="s"> - </span>easing (string) #optional easing type. Accept one of @Raphael.easing_formulas or CSS format: `cubic&#x2010;bezier(XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX)`
+</span></code><code id="L5326"><span class="ln">5326</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L5327"><span class="ln">5327</span><span class="c">     **
+</span></code><code id="L5328"><span class="ln">5328</span><span class="c">    <span class="s"> = </span>(object) @Animation
+</span></code><code id="L5329"><span class="ln">5329</span><span class="c">    \*/</span>
+</code><code id="L5330"><span class="ln">5330</span>    R.animation<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L5331"><span class="ln">5331</span>        <b>if</b> (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing) {
+</code><code id="L5332"><span class="ln">5332</span>            callback<span class="s"> = </span>callback<span class="s"> || </span>easing<span class="s"> || </span><b>null</b>;
+</code><code id="L5333"><span class="ln">5333</span>            easing<span class="s"> = </span><b>null</b>;
+</code><code id="L5334"><span class="ln">5334</span>        }
+</code><code id="L5335"><span class="ln">5335</span>        params<span class="s"> = </span>Object(params);
+</code><code id="L5336"><span class="ln">5336</span>        ms<span class="s"> = </span>+ms<span class="s"> || </span><span class="d">0</span>;
+</code><code id="L5337"><span class="ln">5337</span>        <b>var</b> p<span class="s"> = </span>{},
+</code><code id="L5338"><span class="ln">5338</span>            json,
+</code><code id="L5339"><span class="ln">5339</span>            attr;
+</code><code id="L5340"><span class="ln">5340</span>        <b>for</b> (attr <b>in</b> params) <b>if</b> (params[has](attr)<span class="s"> &amp;&amp; </span>toFloat(attr) != attr) {
+</code><code id="L5341"><span class="ln">5341</span>            json<span class="s"> = </span><b>true</b>;
+</code><code id="L5342"><span class="ln">5342</span>            p[attr]<span class="s"> = </span>params[attr];
+</code><code id="L5343"><span class="ln">5343</span>        }
+</code><code id="L5344"><span class="ln">5344</span>        <b>if</b> (!json) {
+</code><code id="L5345"><span class="ln">5345</span>            <b>return</b> <b>new</b> Animation(params, ms);
+</code><code id="L5346"><span class="ln">5346</span>        } <b>else</b> {
+</code><code id="L5347"><span class="ln">5347</span>            easing<span class="s"> &amp;&amp; </span>(p.easing<span class="s"> = </span>easing);
+</code><code id="L5348"><span class="ln">5348</span>            callback<span class="s"> &amp;&amp; </span>(p.callback<span class="s"> = </span>callback);
+</code><code id="L5349"><span class="ln">5349</span>            <b>return</b> <b>new</b> Animation({<span class="d">100</span>: p}, ms);
+</code><code id="L5350"><span class="ln">5350</span>        }
+</code><code id="L5351"><span class="ln">5351</span>    };
+</code><code id="L5352"><span class="ln">5352</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5353"><span class="ln">5353</span><span class="c">    <span class="s"> * </span>Element.animate
+</span></code><code id="L5354"><span class="ln">5354</span><span class="c">     [ method ]
+</span></code><code id="L5355"><span class="ln">5355</span><span class="c">     **
+</span></code><code id="L5356"><span class="ln">5356</span><span class="c">    <span class="s"> * </span>Creates and starts animation <b>for</b> given element.
+</span></code><code id="L5357"><span class="ln">5357</span><span class="c">     **
+</span></code><code id="L5358"><span class="ln">5358</span><span class="c">     > Parameters
+</span></code><code id="L5359"><span class="ln">5359</span><span class="c">     **
+</span></code><code id="L5360"><span class="ln">5360</span><span class="c">    <span class="s"> - </span>params (object) <b>final</b> attributes <b>for</b> the element, see also @Element.attr
+</span></code><code id="L5361"><span class="ln">5361</span><span class="c">    <span class="s"> - </span>ms (number) number of milliseconds <b>for</b> animation to run
+</span></code><code id="L5362"><span class="ln">5362</span><span class="c">    <span class="s"> - </span>easing (string) #optional easing type. Accept on of @Raphael.easing_formulas or CSS format: `cubic&#x2010;bezier(XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX,&#<span class="d">160</span>;XX)`
+</span></code><code id="L5363"><span class="ln">5363</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) #optional callback <b>function</b>. Will be called at the end of animation.
+</span></code><code id="L5364"><span class="ln">5364</span><span class="c">    <span class="s"> * </span>or
+</span></code><code id="L5365"><span class="ln">5365</span><span class="c">    <span class="s"> - </span>animation (object) animation object, see @Raphael.animation
+</span></code><code id="L5366"><span class="ln">5366</span><span class="c">     **
+</span></code><code id="L5367"><span class="ln">5367</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5368"><span class="ln">5368</span><span class="c">    \*/</span>
+</code><code id="L5369"><span class="ln">5369</span>    elproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L5370"><span class="ln">5370</span>        <b>var</b> element<span class="s"> = </span><b>this</b>;
+</code><code id="L5371"><span class="ln">5371</span>        <b>if</b> (element.removed) {
+</code><code id="L5372"><span class="ln">5372</span>            callback<span class="s"> &amp;&amp; </span>callback.call(element);
+</code><code id="L5373"><span class="ln">5373</span>            <b>return</b> element;
+</code><code id="L5374"><span class="ln">5374</span>        }
+</code><code id="L5375"><span class="ln">5375</span>        <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, callback);
+</code><code id="L5376"><span class="ln">5376</span>        runAnimation(anim, element, anim.percents[<span class="d">0</span>], <b>null</b>, element.attr());
+</code><code id="L5377"><span class="ln">5377</span>        <b>return</b> element;
+</code><code id="L5378"><span class="ln">5378</span>    };
+</code><code id="L5379"><span class="ln">5379</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5380"><span class="ln">5380</span><span class="c">    <span class="s"> * </span>Element.setTime
+</span></code><code id="L5381"><span class="ln">5381</span><span class="c">     [ method ]
+</span></code><code id="L5382"><span class="ln">5382</span><span class="c">     **
+</span></code><code id="L5383"><span class="ln">5383</span><span class="c">    <span class="s"> * </span>Sets the status of animation of the element <b>in</b> milliseconds. Similar to @Element.status method.
+</span></code><code id="L5384"><span class="ln">5384</span><span class="c">     **
+</span></code><code id="L5385"><span class="ln">5385</span><span class="c">     > Parameters
+</span></code><code id="L5386"><span class="ln">5386</span><span class="c">     **
+</span></code><code id="L5387"><span class="ln">5387</span><span class="c">    <span class="s"> - </span>anim (object) animation object
+</span></code><code id="L5388"><span class="ln">5388</span><span class="c">    <span class="s"> - </span>value (number) number of milliseconds from the beginning of the animation
+</span></code><code id="L5389"><span class="ln">5389</span><span class="c">     **
+</span></code><code id="L5390"><span class="ln">5390</span><span class="c">    <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
+</span></code><code id="L5391"><span class="ln">5391</span><span class="c">    <span class="s"> * </span>Note, that during animation following events are triggered:
+</span></code><code id="L5392"><span class="ln">5392</span><span class="c">     *
+</span></code><code id="L5393"><span class="ln">5393</span><span class="c">    <span class="s"> * </span>On each animation frame event `anim.frame.&lt;id>`, on start `anim.start.&lt;id>` and on end `anim.finish.&lt;id>`.
+</span></code><code id="L5394"><span class="ln">5394</span><span class="c">    \*/</span>
+</code><code id="L5395"><span class="ln">5395</span>    elproto.setTime<span class="s"> = </span><b>function</b> (anim, value) {
+</code><code id="L5396"><span class="ln">5396</span>        <b>if</b> (anim<span class="s"> &amp;&amp; </span>value != <b>null</b>) {
+</code><code id="L5397"><span class="ln">5397</span>            <b>this</b>.status(anim, mmin(value, anim.ms)<span class="s"> / </span>anim.ms);
+</code><code id="L5398"><span class="ln">5398</span>        }
+</code><code id="L5399"><span class="ln">5399</span>        <b>return</b> <b>this</b>;
+</code><code id="L5400"><span class="ln">5400</span>    };
+</code><code id="L5401"><span class="ln">5401</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5402"><span class="ln">5402</span><span class="c">    <span class="s"> * </span>Element.status
+</span></code><code id="L5403"><span class="ln">5403</span><span class="c">     [ method ]
+</span></code><code id="L5404"><span class="ln">5404</span><span class="c">     **
+</span></code><code id="L5405"><span class="ln">5405</span><span class="c">    <span class="s"> * </span>Gets or sets the status of animation of the element.
+</span></code><code id="L5406"><span class="ln">5406</span><span class="c">     **
+</span></code><code id="L5407"><span class="ln">5407</span><span class="c">     > Parameters
+</span></code><code id="L5408"><span class="ln">5408</span><span class="c">     **
+</span></code><code id="L5409"><span class="ln">5409</span><span class="c">    <span class="s"> - </span>anim (object) #optional animation object
+</span></code><code id="L5410"><span class="ln">5410</span><span class="c">    <span class="s"> - </span>value (number) #optional <span class="d">0</span> – <span class="d">1</span>. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.
+</span></code><code id="L5411"><span class="ln">5411</span><span class="c">     **
+</span></code><code id="L5412"><span class="ln">5412</span><span class="c">    <span class="s"> = </span>(number) status
+</span></code><code id="L5413"><span class="ln">5413</span><span class="c">    <span class="s"> * </span>or
+</span></code><code id="L5414"><span class="ln">5414</span><span class="c">    <span class="s"> = </span>(array) status <b>if</b> `anim` is not specified. Array of objects <b>in</b> format:
+</span></code><code id="L5415"><span class="ln">5415</span><span class="c">     o {
+</span></code><code id="L5416"><span class="ln">5416</span><span class="c">     o     anim: (object) animation object
+</span></code><code id="L5417"><span class="ln">5417</span><span class="c">     o     status: (number) status
+</span></code><code id="L5418"><span class="ln">5418</span><span class="c">     o }
+</span></code><code id="L5419"><span class="ln">5419</span><span class="c">    <span class="s"> * </span>or
+</span></code><code id="L5420"><span class="ln">5420</span><span class="c">    <span class="s"> = </span>(object) original element <b>if</b> `value` is specified
+</span></code><code id="L5421"><span class="ln">5421</span><span class="c">    \*/</span>
+</code><code id="L5422"><span class="ln">5422</span>    elproto.status<span class="s"> = </span><b>function</b> (anim, value) {
+</code><code id="L5423"><span class="ln">5423</span>        <b>var</b> out<span class="s"> = </span>[],
+</code><code id="L5424"><span class="ln">5424</span>            i<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L5425"><span class="ln">5425</span>            len,
+</code><code id="L5426"><span class="ln">5426</span>            e;
+</code><code id="L5427"><span class="ln">5427</span>        <b>if</b> (value != <b>null</b>) {
+</code><code id="L5428"><span class="ln">5428</span>            runAnimation(anim, <b>this</b>, -<span class="d">1</span>, mmin(value, <span class="d">1</span>));
+</code><code id="L5429"><span class="ln">5429</span>            <b>return</b> <b>this</b>;
+</code><code id="L5430"><span class="ln">5430</span>        } <b>else</b> {
+</code><code id="L5431"><span class="ln">5431</span>            len<span class="s"> = </span>animationElements.length;
+</code><code id="L5432"><span class="ln">5432</span>            <b>for</b> (; i &lt; len; i++) {
+</code><code id="L5433"><span class="ln">5433</span>                e<span class="s"> = </span>animationElements[i];
+</code><code id="L5434"><span class="ln">5434</span>                <b>if</b> (e.el.id<span class="s"> == </span><b>this</b>.id<span class="s"> &amp;&amp; </span>(!anim<span class="s"> || </span>e.anim<span class="s"> == </span>anim)) {
+</code><code id="L5435"><span class="ln">5435</span>                    <b>if</b> (anim) {
+</code><code id="L5436"><span class="ln">5436</span>                        <b>return</b> e.status;
+</code><code id="L5437"><span class="ln">5437</span>                    }
+</code><code id="L5438"><span class="ln">5438</span>                    out.push({anim: e.anim, status: e.status});
+</code><code id="L5439"><span class="ln">5439</span>                }
+</code><code id="L5440"><span class="ln">5440</span>            }
+</code><code id="L5441"><span class="ln">5441</span>            <b>if</b> (anim) {
+</code><code id="L5442"><span class="ln">5442</span>                <b>return</b> <span class="d">0</span>;
+</code><code id="L5443"><span class="ln">5443</span>            }
+</code><code id="L5444"><span class="ln">5444</span>            <b>return</b> out;
+</code><code id="L5445"><span class="ln">5445</span>        }
+</code><code id="L5446"><span class="ln">5446</span>    };
+</code><code id="L5447"><span class="ln">5447</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5448"><span class="ln">5448</span><span class="c">    <span class="s"> * </span>Element.pause
+</span></code><code id="L5449"><span class="ln">5449</span><span class="c">     [ method ]
+</span></code><code id="L5450"><span class="ln">5450</span><span class="c">     **
+</span></code><code id="L5451"><span class="ln">5451</span><span class="c">    <span class="s"> * </span>Stops animation of the element <b>with</b> ability to resume it later on.
+</span></code><code id="L5452"><span class="ln">5452</span><span class="c">     **
+</span></code><code id="L5453"><span class="ln">5453</span><span class="c">     > Parameters
+</span></code><code id="L5454"><span class="ln">5454</span><span class="c">     **
+</span></code><code id="L5455"><span class="ln">5455</span><span class="c">    <span class="s"> - </span>anim (object) #optional animation object
+</span></code><code id="L5456"><span class="ln">5456</span><span class="c">     **
+</span></code><code id="L5457"><span class="ln">5457</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5458"><span class="ln">5458</span><span class="c">    \*/</span>
+</code><code id="L5459"><span class="ln">5459</span>    elproto.pause<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5460"><span class="ln">5460</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id<span class="s"> &amp;&amp; </span>(!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5461"><span class="ln">5461</span>            <b>if</b> (eve(<i>"anim.pause."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
+</code><code id="L5462"><span class="ln">5462</span>                animationElements[i].paused<span class="s"> = </span><b>true</b>;
+</code><code id="L5463"><span class="ln">5463</span>            }
+</code><code id="L5464"><span class="ln">5464</span>        }
+</code><code id="L5465"><span class="ln">5465</span>        <b>return</b> <b>this</b>;
+</code><code id="L5466"><span class="ln">5466</span>    };
+</code><code id="L5467"><span class="ln">5467</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5468"><span class="ln">5468</span><span class="c">    <span class="s"> * </span>Element.resume
+</span></code><code id="L5469"><span class="ln">5469</span><span class="c">     [ method ]
+</span></code><code id="L5470"><span class="ln">5470</span><span class="c">     **
+</span></code><code id="L5471"><span class="ln">5471</span><span class="c">    <span class="s"> * </span>Resumes animation <b>if</b> it was paused <b>with</b> @Element.pause method.
+</span></code><code id="L5472"><span class="ln">5472</span><span class="c">     **
+</span></code><code id="L5473"><span class="ln">5473</span><span class="c">     > Parameters
+</span></code><code id="L5474"><span class="ln">5474</span><span class="c">     **
+</span></code><code id="L5475"><span class="ln">5475</span><span class="c">    <span class="s"> - </span>anim (object) #optional animation object
+</span></code><code id="L5476"><span class="ln">5476</span><span class="c">     **
+</span></code><code id="L5477"><span class="ln">5477</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5478"><span class="ln">5478</span><span class="c">    \*/</span>
+</code><code id="L5479"><span class="ln">5479</span>    elproto.resume<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5480"><span class="ln">5480</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id<span class="s"> &amp;&amp; </span>(!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5481"><span class="ln">5481</span>            <b>var</b> e<span class="s"> = </span>animationElements[i];
+</code><code id="L5482"><span class="ln">5482</span>            <b>if</b> (eve(<i>"anim.resume."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, e.anim) !== <b>false</b>) {
+</code><code id="L5483"><span class="ln">5483</span>                <b>delete</b> e.paused;
+</code><code id="L5484"><span class="ln">5484</span>                <b>this</b>.status(e.anim, e.status);
+</code><code id="L5485"><span class="ln">5485</span>            }
+</code><code id="L5486"><span class="ln">5486</span>        }
+</code><code id="L5487"><span class="ln">5487</span>        <b>return</b> <b>this</b>;
+</code><code id="L5488"><span class="ln">5488</span>    };
+</code><code id="L5489"><span class="ln">5489</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5490"><span class="ln">5490</span><span class="c">    <span class="s"> * </span>Element.stop
+</span></code><code id="L5491"><span class="ln">5491</span><span class="c">     [ method ]
+</span></code><code id="L5492"><span class="ln">5492</span><span class="c">     **
+</span></code><code id="L5493"><span class="ln">5493</span><span class="c">    <span class="s"> * </span>Stops animation of the element.
+</span></code><code id="L5494"><span class="ln">5494</span><span class="c">     **
+</span></code><code id="L5495"><span class="ln">5495</span><span class="c">     > Parameters
+</span></code><code id="L5496"><span class="ln">5496</span><span class="c">     **
+</span></code><code id="L5497"><span class="ln">5497</span><span class="c">    <span class="s"> - </span>anim (object) #optional animation object
+</span></code><code id="L5498"><span class="ln">5498</span><span class="c">     **
+</span></code><code id="L5499"><span class="ln">5499</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5500"><span class="ln">5500</span><span class="c">    \*/</span>
+</code><code id="L5501"><span class="ln">5501</span>    elproto.stop<span class="s"> = </span><b>function</b> (anim) {
+</code><code id="L5502"><span class="ln">5502</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>; i &lt; animationElements.length; i++) <b>if</b> (animationElements[i].el.id<span class="s"> == </span><b>this</b>.id<span class="s"> &amp;&amp; </span>(!anim<span class="s"> || </span>animationElements[i].anim<span class="s"> == </span>anim)) {
+</code><code id="L5503"><span class="ln">5503</span>            <b>if</b> (eve(<i>"anim.stop."</i><span class="s"> + </span><b>this</b>.id, <b>this</b>, animationElements[i].anim) !== <b>false</b>) {
+</code><code id="L5504"><span class="ln">5504</span>                animationElements.splice(i--, <span class="d">1</span>);
+</code><code id="L5505"><span class="ln">5505</span>            }
+</code><code id="L5506"><span class="ln">5506</span>        }
+</code><code id="L5507"><span class="ln">5507</span>        <b>return</b> <b>this</b>;
+</code><code id="L5508"><span class="ln">5508</span>    };
+</code><code id="L5509"><span class="ln">5509</span>    elproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5510"><span class="ln">5510</span>        <b>return</b> <i>"Rapha\xebl\u2019s object"</i>;
+</code><code id="L5511"><span class="ln">5511</span>    };
+</code><code id="L5512"><span class="ln">5512</span>
+</code><code id="L5513"><span class="ln">5513</span>    <span class="c">// Set</span>
+</code><code id="L5514"><span class="ln">5514</span>    <b>var</b> Set<span class="s"> = </span><b>function</b> (items) {
+</code><code id="L5515"><span class="ln">5515</span>        <b>this</b>.items<span class="s"> = </span>[];
+</code><code id="L5516"><span class="ln">5516</span>        <b>this</b>.length<span class="s"> = </span><span class="d">0</span>;
+</code><code id="L5517"><span class="ln">5517</span>        <b>this</b>.type<span class="s"> = </span><i>"set"</i>;
+</code><code id="L5518"><span class="ln">5518</span>        <b>if</b> (items) {
+</code><code id="L5519"><span class="ln">5519</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>items.length; i &lt; ii; i++) {
+</code><code id="L5520"><span class="ln">5520</span>                <b>if</b> (items[i]<span class="s"> &amp;&amp; </span>(items[i].constructor<span class="s"> == </span>Element<span class="s"> || </span>items[i].constructor<span class="s"> == </span>Set)) {
+</code><code id="L5521"><span class="ln">5521</span>                    <b>this</b>[<b>this</b>.items.length]<span class="s"> = </span><b>this</b>.items[<b>this</b>.items.length]<span class="s"> = </span>items[i];
+</code><code id="L5522"><span class="ln">5522</span>                    <b>this</b>.length++;
+</code><code id="L5523"><span class="ln">5523</span>                }
+</code><code id="L5524"><span class="ln">5524</span>            }
+</code><code id="L5525"><span class="ln">5525</span>        }
+</code><code id="L5526"><span class="ln">5526</span>    },
+</code><code id="L5527"><span class="ln">5527</span>    setproto<span class="s"> = </span>Set.prototype;
+</code><code id="L5528"><span class="ln">5528</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5529"><span class="ln">5529</span><span class="c">    <span class="s"> * </span>Set.push
+</span></code><code id="L5530"><span class="ln">5530</span><span class="c">     [ method ]
+</span></code><code id="L5531"><span class="ln">5531</span><span class="c">     **
+</span></code><code id="L5532"><span class="ln">5532</span><span class="c">    <span class="s"> * </span>Adds each argument to the current set.
+</span></code><code id="L5533"><span class="ln">5533</span><span class="c">    <span class="s"> = </span>(object) original element
+</span></code><code id="L5534"><span class="ln">5534</span><span class="c">    \*/</span>
+</code><code id="L5535"><span class="ln">5535</span>    setproto.push<span class="s"> = </span><b>function</b> () {
+</code><code id="L5536"><span class="ln">5536</span>        <b>var</b> item,
+</code><code id="L5537"><span class="ln">5537</span>            len;
+</code><code id="L5538"><span class="ln">5538</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>arguments.length; i &lt; ii; i++) {
+</code><code id="L5539"><span class="ln">5539</span>            item<span class="s"> = </span>arguments[i];
+</code><code id="L5540"><span class="ln">5540</span>            <b>if</b> (item<span class="s"> &amp;&amp; </span>(item.constructor<span class="s"> == </span>Element<span class="s"> || </span>item.constructor<span class="s"> == </span>Set)) {
+</code><code id="L5541"><span class="ln">5541</span>                len<span class="s"> = </span><b>this</b>.items.length;
+</code><code id="L5542"><span class="ln">5542</span>                <b>this</b>[len]<span class="s"> = </span><b>this</b>.items[len]<span class="s"> = </span>item;
+</code><code id="L5543"><span class="ln">5543</span>                <b>this</b>.length++;
+</code><code id="L5544"><span class="ln">5544</span>            }
+</code><code id="L5545"><span class="ln">5545</span>        }
+</code><code id="L5546"><span class="ln">5546</span>        <b>return</b> <b>this</b>;
+</code><code id="L5547"><span class="ln">5547</span>    };
+</code><code id="L5548"><span class="ln">5548</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5549"><span class="ln">5549</span><span class="c">    <span class="s"> * </span>Set.pop
+</span></code><code id="L5550"><span class="ln">5550</span><span class="c">     [ method ]
+</span></code><code id="L5551"><span class="ln">5551</span><span class="c">     **
+</span></code><code id="L5552"><span class="ln">5552</span><span class="c">    <span class="s"> * </span>Removes last element and returns it.
+</span></code><code id="L5553"><span class="ln">5553</span><span class="c">    <span class="s"> = </span>(object) element
+</span></code><code id="L5554"><span class="ln">5554</span><span class="c">    \*/</span>
+</code><code id="L5555"><span class="ln">5555</span>    setproto.pop<span class="s"> = </span><b>function</b> () {
+</code><code id="L5556"><span class="ln">5556</span>        <b>this</b>.length<span class="s"> &amp;&amp; </span><b>delete</b> <b>this</b>[<b>this</b>.length--];
+</code><code id="L5557"><span class="ln">5557</span>        <b>return</b> <b>this</b>.items.pop();
+</code><code id="L5558"><span class="ln">5558</span>    };
+</code><code id="L5559"><span class="ln">5559</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5560"><span class="ln">5560</span><span class="c">    <span class="s"> * </span>Set.forEach
+</span></code><code id="L5561"><span class="ln">5561</span><span class="c">     [ method ]
+</span></code><code id="L5562"><span class="ln">5562</span><span class="c">     **
+</span></code><code id="L5563"><span class="ln">5563</span><span class="c">    <span class="s"> * </span>Executes given <b>function</b> <b>for</b> each element <b>in</b> the set.
+</span></code><code id="L5564"><span class="ln">5564</span><span class="c">     *
+</span></code><code id="L5565"><span class="ln">5565</span><span class="c">    <span class="s"> * </span>If <b>function</b> returns `<b>false</b>` it will stop loop running.
+</span></code><code id="L5566"><span class="ln">5566</span><span class="c">     **
+</span></code><code id="L5567"><span class="ln">5567</span><span class="c">     > Parameters
+</span></code><code id="L5568"><span class="ln">5568</span><span class="c">     **
+</span></code><code id="L5569"><span class="ln">5569</span><span class="c">    <span class="s"> - </span>callback (<b>function</b>) <b>function</b> to run
+</span></code><code id="L5570"><span class="ln">5570</span><span class="c">    <span class="s"> - </span>thisArg (object) context object <b>for</b> the callback
+</span></code><code id="L5571"><span class="ln">5571</span><span class="c">    <span class="s"> = </span>(object) Set object
+</span></code><code id="L5572"><span class="ln">5572</span><span class="c">    \*/</span>
+</code><code id="L5573"><span class="ln">5573</span>    setproto.forEach<span class="s"> = </span><b>function</b> (callback, thisArg) {
+</code><code id="L5574"><span class="ln">5574</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
+</code><code id="L5575"><span class="ln">5575</span>            <b>if</b> (callback.call(thisArg, <b>this</b>.items[i])<span class="s"> === </span><b>false</b>) {
+</code><code id="L5576"><span class="ln">5576</span>                <b>return</b> <b>this</b>;
+</code><code id="L5577"><span class="ln">5577</span>            }
+</code><code id="L5578"><span class="ln">5578</span>        }
+</code><code id="L5579"><span class="ln">5579</span>        <b>return</b> <b>this</b>;
+</code><code id="L5580"><span class="ln">5580</span>    };
+</code><code id="L5581"><span class="ln">5581</span>    <b>for</b> (<b>var</b> method <b>in</b> elproto) <b>if</b> (elproto[has](method)) {
+</code><code id="L5582"><span class="ln">5582</span>        setproto[method]<span class="s"> = </span>(<b>function</b> (methodname) {
+</code><code id="L5583"><span class="ln">5583</span>            <b>return</b> <b>function</b> () {
+</code><code id="L5584"><span class="ln">5584</span>                <b>var</b> arg<span class="s"> = </span>arguments;
+</code><code id="L5585"><span class="ln">5585</span>                <b>return</b> <b>this</b>.forEach(<b>function</b> (el) {
+</code><code id="L5586"><span class="ln">5586</span>                    el[methodname][apply](el, arg);
+</code><code id="L5587"><span class="ln">5587</span>                });
+</code><code id="L5588"><span class="ln">5588</span>            };
+</code><code id="L5589"><span class="ln">5589</span>        })(method);
+</code><code id="L5590"><span class="ln">5590</span>    }
+</code><code id="L5591"><span class="ln">5591</span>    setproto.attr<span class="s"> = </span><b>function</b> (name, value) {
+</code><code id="L5592"><span class="ln">5592</span>        <b>if</b> (name<span class="s"> &amp;&amp; </span>R.is(name, array)<span class="s"> &amp;&amp; </span>R.is(name[<span class="d">0</span>], <i>"object"</i>)) {
+</code><code id="L5593"><span class="ln">5593</span>            <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>name.length; j &lt; jj; j++) {
+</code><code id="L5594"><span class="ln">5594</span>                <b>this</b>.items[j].attr(name[j]);
+</code><code id="L5595"><span class="ln">5595</span>            }
+</code><code id="L5596"><span class="ln">5596</span>        } <b>else</b> {
+</code><code id="L5597"><span class="ln">5597</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
+</code><code id="L5598"><span class="ln">5598</span>                <b>this</b>.items[i].attr(name, value);
+</code><code id="L5599"><span class="ln">5599</span>            }
+</code><code id="L5600"><span class="ln">5600</span>        }
+</code><code id="L5601"><span class="ln">5601</span>        <b>return</b> <b>this</b>;
+</code><code id="L5602"><span class="ln">5602</span>    };
+</code><code id="L5603"><span class="ln">5603</span>    setproto.animate<span class="s"> = </span><b>function</b> (params, ms, easing, callback) {
+</code><code id="L5604"><span class="ln">5604</span>        (R.is(easing, <i>"<b>function</b>"</i>)<span class="s"> || </span>!easing)<span class="s"> &amp;&amp; </span>(callback<span class="s"> = </span>easing<span class="s"> || </span><b>null</b>);
+</code><code id="L5605"><span class="ln">5605</span>        <b>var</b> len<span class="s"> = </span><b>this</b>.items.length,
+</code><code id="L5606"><span class="ln">5606</span>            i<span class="s"> = </span>len,
+</code><code id="L5607"><span class="ln">5607</span>            item,
+</code><code id="L5608"><span class="ln">5608</span>            set<span class="s"> = </span><b>this</b>,
+</code><code id="L5609"><span class="ln">5609</span>            collector;
+</code><code id="L5610"><span class="ln">5610</span>        callback<span class="s"> &amp;&amp; </span>(collector<span class="s"> = </span><b>function</b> () {
+</code><code id="L5611"><span class="ln">5611</span>            !--len<span class="s"> &amp;&amp; </span>callback.call(set);
+</code><code id="L5612"><span class="ln">5612</span>        });
+</code><code id="L5613"><span class="ln">5613</span>        easing<span class="s"> = </span>R.is(easing, string) ? easing : collector;
+</code><code id="L5614"><span class="ln">5614</span>        <b>var</b> anim<span class="s"> = </span>params <b>instanceof</b> Animation ? params : R.animation(params, ms, easing, collector);
+</code><code id="L5615"><span class="ln">5615</span>        item<span class="s"> = </span><b>this</b>.items[--i].animate(anim);
+</code><code id="L5616"><span class="ln">5616</span>        <b>while</b> (i--) {
+</code><code id="L5617"><span class="ln">5617</span>            <b>this</b>.items[i]<span class="s"> &amp;&amp; </span>!<b>this</b>.items[i].removed<span class="s"> &amp;&amp; </span><b>this</b>.items[i].animateWith(item, anim);
+</code><code id="L5618"><span class="ln">5618</span>        }
+</code><code id="L5619"><span class="ln">5619</span>        <b>return</b> <b>this</b>;
+</code><code id="L5620"><span class="ln">5620</span>    };
+</code><code id="L5621"><span class="ln">5621</span>    setproto.insertAfter<span class="s"> = </span><b>function</b> (el) {
+</code><code id="L5622"><span class="ln">5622</span>        <b>var</b> i<span class="s"> = </span><b>this</b>.items.length;
+</code><code id="L5623"><span class="ln">5623</span>        <b>while</b> (i--) {
+</code><code id="L5624"><span class="ln">5624</span>            <b>this</b>.items[i].insertAfter(el);
+</code><code id="L5625"><span class="ln">5625</span>        }
+</code><code id="L5626"><span class="ln">5626</span>        <b>return</b> <b>this</b>;
+</code><code id="L5627"><span class="ln">5627</span>    };
+</code><code id="L5628"><span class="ln">5628</span>    setproto.getBBox<span class="s"> = </span><b>function</b> () {
+</code><code id="L5629"><span class="ln">5629</span>        <b>var</b> x<span class="s"> = </span>[],
+</code><code id="L5630"><span class="ln">5630</span>            y<span class="s"> = </span>[],
+</code><code id="L5631"><span class="ln">5631</span>            w<span class="s"> = </span>[],
+</code><code id="L5632"><span class="ln">5632</span>            h<span class="s"> = </span>[];
+</code><code id="L5633"><span class="ln">5633</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><b>this</b>.items.length; i--;) <b>if</b> (!<b>this</b>.items[i].removed) {
+</code><code id="L5634"><span class="ln">5634</span>            <b>var</b> box<span class="s"> = </span><b>this</b>.items[i].getBBox();
+</code><code id="L5635"><span class="ln">5635</span>            x.push(box.x);
+</code><code id="L5636"><span class="ln">5636</span>            y.push(box.y);
+</code><code id="L5637"><span class="ln">5637</span>            w.push(box.x<span class="s"> + </span>box.width);
+</code><code id="L5638"><span class="ln">5638</span>            h.push(box.y<span class="s"> + </span>box.height);
+</code><code id="L5639"><span class="ln">5639</span>        }
+</code><code id="L5640"><span class="ln">5640</span>        x<span class="s"> = </span>mmin[apply](<span class="d">0</span>, x);
+</code><code id="L5641"><span class="ln">5641</span>        y<span class="s"> = </span>mmin[apply](<span class="d">0</span>, y);
+</code><code id="L5642"><span class="ln">5642</span>        <b>return</b> {
+</code><code id="L5643"><span class="ln">5643</span>            x: x,
+</code><code id="L5644"><span class="ln">5644</span>            y: y,
+</code><code id="L5645"><span class="ln">5645</span>            width: mmax[apply](<span class="d">0</span>, w)<span class="s"> - </span>x,
+</code><code id="L5646"><span class="ln">5646</span>            height: mmax[apply](<span class="d">0</span>, h)<span class="s"> - </span>y
+</code><code id="L5647"><span class="ln">5647</span>        };
+</code><code id="L5648"><span class="ln">5648</span>    };
+</code><code id="L5649"><span class="ln">5649</span>    setproto.clone<span class="s"> = </span><b>function</b> (s) {
+</code><code id="L5650"><span class="ln">5650</span>        s<span class="s"> = </span><b>new</b> Set;
+</code><code id="L5651"><span class="ln">5651</span>        <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span><b>this</b>.items.length; i &lt; ii; i++) {
+</code><code id="L5652"><span class="ln">5652</span>            s.push(<b>this</b>.items[i].clone());
+</code><code id="L5653"><span class="ln">5653</span>        }
+</code><code id="L5654"><span class="ln">5654</span>        <b>return</b> s;
+</code><code id="L5655"><span class="ln">5655</span>    };
+</code><code id="L5656"><span class="ln">5656</span>    setproto.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5657"><span class="ln">5657</span>        <b>return</b> <i>"Rapha\xebl\u2018s set"</i>;
+</code><code id="L5658"><span class="ln">5658</span>    };
+</code><code id="L5659"><span class="ln">5659</span>
+</code><code id="L5660"><span class="ln">5660</span>    R.registerFont<span class="s"> = </span><b>function</b> (font) {
+</code><code id="L5661"><span class="ln">5661</span>        <b>if</b> (!font.face) {
+</code><code id="L5662"><span class="ln">5662</span>            <b>return</b> font;
+</code><code id="L5663"><span class="ln">5663</span>        }
+</code><code id="L5664"><span class="ln">5664</span>        <b>this</b>.fonts<span class="s"> = </span><b>this</b>.fonts<span class="s"> || </span>{};
+</code><code id="L5665"><span class="ln">5665</span>        <b>var</b> fontcopy<span class="s"> = </span>{
+</code><code id="L5666"><span class="ln">5666</span>                w: font.w,
+</code><code id="L5667"><span class="ln">5667</span>                face: {},
+</code><code id="L5668"><span class="ln">5668</span>                glyphs: {}
+</code><code id="L5669"><span class="ln">5669</span>            },
+</code><code id="L5670"><span class="ln">5670</span>            family<span class="s"> = </span>font.face[<i>"font-family"</i>];
+</code><code id="L5671"><span class="ln">5671</span>        <b>for</b> (<b>var</b> prop <b>in</b> font.face) <b>if</b> (font.face[has](prop)) {
+</code><code id="L5672"><span class="ln">5672</span>            fontcopy.face[prop]<span class="s"> = </span>font.face[prop];
+</code><code id="L5673"><span class="ln">5673</span>        }
+</code><code id="L5674"><span class="ln">5674</span>        <b>if</b> (<b>this</b>.fonts[family]) {
+</code><code id="L5675"><span class="ln">5675</span>            <b>this</b>.fonts[family].push(fontcopy);
+</code><code id="L5676"><span class="ln">5676</span>        } <b>else</b> {
+</code><code id="L5677"><span class="ln">5677</span>            <b>this</b>.fonts[family]<span class="s"> = </span>[fontcopy];
+</code><code id="L5678"><span class="ln">5678</span>        }
+</code><code id="L5679"><span class="ln">5679</span>        <b>if</b> (!font.svg) {
+</code><code id="L5680"><span class="ln">5680</span>            fontcopy.face[<i>"units-per-em"</i>]<span class="s"> = </span>toInt(font.face[<i>"units-per-em"</i>], <span class="d">10</span>);
+</code><code id="L5681"><span class="ln">5681</span>            <b>for</b> (<b>var</b> glyph <b>in</b> font.glyphs) <b>if</b> (font.glyphs[has](glyph)) {
+</code><code id="L5682"><span class="ln">5682</span>                <b>var</b> path<span class="s"> = </span>font.glyphs[glyph];
+</code><code id="L5683"><span class="ln">5683</span>                fontcopy.glyphs[glyph]<span class="s"> = </span>{
+</code><code id="L5684"><span class="ln">5684</span>                    w: path.w,
+</code><code id="L5685"><span class="ln">5685</span>                    k: {},
+</code><code id="L5686"><span class="ln">5686</span>                    d: path.d<span class="s"> &amp;&amp; </span><i>"M"</i><span class="s"> + </span>path.d.replace(/[mlcxtrv]/g, <b>function</b> (command) {
+</code><code id="L5687"><span class="ln">5687</span>                            <b>return</b> {l: <i>"L"</i>, c: <i>"C"</i>, x: <i>"z"</i>, t: <i>"m"</i>, r: <i>"l"</i>, v: <i>"c"</i>}[command]<span class="s"> || </span><i>"M"</i>;
+</code><code id="L5688"><span class="ln">5688</span>                        })<span class="s"> + </span><i>"z"</i>
+</code><code id="L5689"><span class="ln">5689</span>                };
+</code><code id="L5690"><span class="ln">5690</span>                <b>if</b> (path.k) {
+</code><code id="L5691"><span class="ln">5691</span>                    <b>for</b> (<b>var</b> k <b>in</b> path.k) <b>if</b> (path[has](k)) {
+</code><code id="L5692"><span class="ln">5692</span>                        fontcopy.glyphs[glyph].k[k]<span class="s"> = </span>path.k[k];
+</code><code id="L5693"><span class="ln">5693</span>                    }
+</code><code id="L5694"><span class="ln">5694</span>                }
+</code><code id="L5695"><span class="ln">5695</span>            }
+</code><code id="L5696"><span class="ln">5696</span>        }
+</code><code id="L5697"><span class="ln">5697</span>        <b>return</b> font;
+</code><code id="L5698"><span class="ln">5698</span>    };
+</code><code id="L5699"><span class="ln">5699</span>    paperproto.getFont<span class="s"> = </span><b>function</b> (family, weight, style, stretch) {
+</code><code id="L5700"><span class="ln">5700</span>        stretch<span class="s"> = </span>stretch<span class="s"> || </span><i>"normal"</i>;
+</code><code id="L5701"><span class="ln">5701</span>        style<span class="s"> = </span>style<span class="s"> || </span><i>"normal"</i>;
+</code><code id="L5702"><span class="ln">5702</span>        weight<span class="s"> = </span>+weight<span class="s"> || </span>{normal: <span class="d">400</span>, bold: <span class="d">700</span>, lighter: <span class="d">300</span>, bolder: <span class="d">800</span>}[weight]<span class="s"> || </span><span class="d">400</span>;
+</code><code id="L5703"><span class="ln">5703</span>        <b>if</b> (!R.fonts) {
+</code><code id="L5704"><span class="ln">5704</span>            <b>return</b>;
+</code><code id="L5705"><span class="ln">5705</span>        }
+</code><code id="L5706"><span class="ln">5706</span>        <b>var</b> font<span class="s"> = </span>R.fonts[family];
+</code><code id="L5707"><span class="ln">5707</span>        <b>if</b> (!font) {
+</code><code id="L5708"><span class="ln">5708</span>            <b>var</b> name<span class="s"> = </span><b>new</b> RegExp(<i>"(^|\\s)"</i><span class="s"> + </span>family.replace(/[^\w\d\s+!~.:_-]/g, E)<span class="s"> + </span><i>"(\\s|$)"</i>, <i>"i"</i>);
+</code><code id="L5709"><span class="ln">5709</span>            <b>for</b> (<b>var</b> fontName <b>in</b> R.fonts) <b>if</b> (R.fonts[has](fontName)) {
+</code><code id="L5710"><span class="ln">5710</span>                <b>if</b> (name.test(fontName)) {
+</code><code id="L5711"><span class="ln">5711</span>                    font<span class="s"> = </span>R.fonts[fontName];
+</code><code id="L5712"><span class="ln">5712</span>                    <b>break</b>;
+</code><code id="L5713"><span class="ln">5713</span>                }
+</code><code id="L5714"><span class="ln">5714</span>            }
+</code><code id="L5715"><span class="ln">5715</span>        }
+</code><code id="L5716"><span class="ln">5716</span>        <b>var</b> thefont;
+</code><code id="L5717"><span class="ln">5717</span>        <b>if</b> (font) {
+</code><code id="L5718"><span class="ln">5718</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>font.length; i &lt; ii; i++) {
+</code><code id="L5719"><span class="ln">5719</span>                thefont<span class="s"> = </span>font[i];
+</code><code id="L5720"><span class="ln">5720</span>                <b>if</b> (thefont.face[<i>"font-weight"</i>]<span class="s"> == </span>weight<span class="s"> &amp;&amp; </span>(thefont.face[<i>"font-style"</i>]<span class="s"> == </span>style<span class="s"> || </span>!thefont.face[<i>"font-style"</i>])<span class="s"> &amp;&amp; </span>thefont.face[<i>"font-stretch"</i>]<span class="s"> == </span>stretch) {
+</code><code id="L5721"><span class="ln">5721</span>                    <b>break</b>;
+</code><code id="L5722"><span class="ln">5722</span>                }
+</code><code id="L5723"><span class="ln">5723</span>            }
+</code><code id="L5724"><span class="ln">5724</span>        }
+</code><code id="L5725"><span class="ln">5725</span>        <b>return</b> thefont;
+</code><code id="L5726"><span class="ln">5726</span>    };
+</code><code id="L5727"><span class="ln">5727</span>    paperproto.print<span class="s"> = </span><b>function</b> (x, y, string, font, size, origin, letter_spacing) {
+</code><code id="L5728"><span class="ln">5728</span>        origin<span class="s"> = </span>origin<span class="s"> || </span><i>"middle"</i>; <span class="c">// baseline|middle</span>
+</code><code id="L5729"><span class="ln">5729</span>        letter_spacing<span class="s"> = </span>mmax(mmin(letter_spacing<span class="s"> || </span><span class="d">0</span>, <span class="d">1</span>), -<span class="d">1</span>);
+</code><code id="L5730"><span class="ln">5730</span>        <b>var</b> out<span class="s"> = </span><b>this</b>.set(),
+</code><code id="L5731"><span class="ln">5731</span>            letters<span class="s"> = </span>Str(string).split(E),
+</code><code id="L5732"><span class="ln">5732</span>            shift<span class="s"> = </span><span class="d">0</span>,
+</code><code id="L5733"><span class="ln">5733</span>            path<span class="s"> = </span>E,
+</code><code id="L5734"><span class="ln">5734</span>            scale;
+</code><code id="L5735"><span class="ln">5735</span>        R.is(font, string)<span class="s"> &amp;&amp; </span>(font<span class="s"> = </span><b>this</b>.getFont(font));
+</code><code id="L5736"><span class="ln">5736</span>        <b>if</b> (font) {
+</code><code id="L5737"><span class="ln">5737</span>            scale<span class="s"> = </span>(size<span class="s"> || </span><span class="d">16</span>)<span class="s"> / </span>font.face[<i>"units-per-em"</i>];
+</code><code id="L5738"><span class="ln">5738</span>            <b>var</b> bb<span class="s"> = </span>font.face.bbox.split(separator),
+</code><code id="L5739"><span class="ln">5739</span>                top<span class="s"> = </span>+bb[<span class="d">0</span>],
+</code><code id="L5740"><span class="ln">5740</span>                height<span class="s"> = </span>+bb[<span class="d">1</span>]<span class="s"> + </span>(origin<span class="s"> == </span><i>"baseline"</i> ? bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>]<span class="s"> + </span>(+font.face.descent) : (bb[<span class="d">3</span>]<span class="s"> - </span>bb[<span class="d">1</span>])<span class="s"> / </span><span class="d">2</span>);
+</code><code id="L5741"><span class="ln">5741</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>letters.length; i &lt; ii; i++) {
+</code><code id="L5742"><span class="ln">5742</span>                <b>var</b> prev<span class="s"> = </span>i<span class="s"> &amp;&amp; </span>font.glyphs[letters[i<span class="s"> - </span><span class="d">1</span>]]<span class="s"> || </span>{},
+</code><code id="L5743"><span class="ln">5743</span>                    curr<span class="s"> = </span>font.glyphs[letters[i]];
+</code><code id="L5744"><span class="ln">5744</span>                shift += i ? (prev.w<span class="s"> || </span>font.w)<span class="s"> + </span>(prev.k<span class="s"> &amp;&amp; </span>prev.k[letters[i]]<span class="s"> || </span><span class="d">0</span>)<span class="s"> + </span>(font.w<span class="s"> * </span>letter_spacing) : <span class="d">0</span>;
+</code><code id="L5745"><span class="ln">5745</span>                curr<span class="s"> &amp;&amp; </span>curr.d<span class="s"> &amp;&amp; </span>out.push(<b>this</b>.path(curr.d).attr({fill: <i>"#<span class="d">000</span>"</i>, stroke: <i>"none"</i>, transform: [[<i>"t"</i>, shift, <span class="d">0</span>]]}));
+</code><code id="L5746"><span class="ln">5746</span>            }
+</code><code id="L5747"><span class="ln">5747</span>            out.scale(scale, scale, top, height).translate(x<span class="s"> - </span>top, y<span class="s"> - </span>height);
+</code><code id="L5748"><span class="ln">5748</span>        }
+</code><code id="L5749"><span class="ln">5749</span>        <b>return</b> out;
+</code><code id="L5750"><span class="ln">5750</span>    };
+</code><code id="L5751"><span class="ln">5751</span>
+</code><code id="L5752"><span class="ln">5752</span>    R.format<span class="s"> = </span><b>function</b> (token, params) {
+</code><code id="L5753"><span class="ln">5753</span>        <b>var</b> args<span class="s"> = </span>R.is(params, array) ? [<span class="d">0</span>][concat](params) : arguments;
+</code><code id="L5754"><span class="ln">5754</span>        token<span class="s"> &amp;&amp; </span>R.is(token, string)<span class="s"> &amp;&amp; </span>args.length<span class="s"> - </span><span class="d">1</span><span class="s"> &amp;&amp; </span>(token<span class="s"> = </span>token.replace(formatrg, <b>function</b> (str, i) {
+</code><code id="L5755"><span class="ln">5755</span>            <b>return</b> args[++i]<span class="s"> == </span><b>null</b> ? E : args[i];
+</code><code id="L5756"><span class="ln">5756</span>        }));
+</code><code id="L5757"><span class="ln">5757</span>        <b>return</b> token<span class="s"> || </span>E;
+</code><code id="L5758"><span class="ln">5758</span>    };
+</code><code id="L5759"><span class="ln">5759</span>    R.ninja<span class="s"> = </span><b>function</b> () {
+</code><code id="L5760"><span class="ln">5760</span>        oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>oldRaphael.is) : <b>delete</b> Raphael;
+</code><code id="L5761"><span class="ln">5761</span>        <b>return</b> R;
+</code><code id="L5762"><span class="ln">5762</span>    };
+</code><code id="L5763"><span class="ln">5763</span><span class="c">    <span class="c">/*\</span>
+</span></code><code id="L5764"><span class="ln">5764</span><span class="c">    <span class="s"> * </span>Raphael.el
+</span></code><code id="L5765"><span class="ln">5765</span><span class="c">     [ property (object) ]
+</span></code><code id="L5766"><span class="ln">5766</span><span class="c">     **
+</span></code><code id="L5767"><span class="ln">5767</span><span class="c">    <span class="s"> * </span>You can add your own method to elements. This is usefull when you want to hack <b>default</b> functionality or
+</span></code><code id="L5768"><span class="ln">5768</span><span class="c">    <span class="s"> * </span>want to wrap some common transformation or attributes <b>in</b> one method. In difference to canvas methods,
+</span></code><code id="L5769"><span class="ln">5769</span><span class="c">    <span class="s"> * </span>you can redefine element method at any time. Expending element methods wouldn’t affect set
+</span></code><code id="L5770"><span class="ln">5770</span><span class="c">     > Usage
+</span></code><code id="L5771"><span class="ln">5771</span><span class="c">    <span class="s"> | </span>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+</span></code><code id="L5772"><span class="ln">5772</span><span class="c">    <span class="s"> | </span>    <b>this</b>.attr({fill: <i>"#f00"</i>});
+</span></code><code id="L5773"><span class="ln">5773</span><span class="c">    <span class="s"> | </span>};
+</span></code><code id="L5774"><span class="ln">5774</span><span class="c">    <span class="s"> | </span><span class="c">// then use it</span>
+</span></code><code id="L5775"><span class="ln">5775</span><span class="c">    <span class="s"> | </span>paper.circle(<span class="d">100</span>, <span class="d">100</span>, <span class="d">20</span>).red();
+</span></code><code id="L5776"><span class="ln">5776</span><span class="c">    \*/</span>
+</code><code id="L5777"><span class="ln">5777</span>    R.el<span class="s"> = </span>elproto;
+</code><code id="L5778"><span class="ln">5778</span>    R.st<span class="s"> = </span>setproto;
+</code><code id="L5779"><span class="ln">5779</span>    <span class="c">// Firefox &lt;<span class="d">3.6</span> fix: http://webreflection.blogspot.com/<span class="d">2009</span>/<span class="d">11</span>/<span class="d">195</span>-chars-to-help-lazy-loading.html</span>
+</code><code id="L5780"><span class="ln">5780</span>    (<b>function</b> (doc, loaded, f) {
+</code><code id="L5781"><span class="ln">5781</span>        <b>if</b> (doc.readyState<span class="s"> == </span><b>null</b><span class="s"> &amp;&amp; </span>doc.addEventListener){
+</code><code id="L5782"><span class="ln">5782</span>            doc.addEventListener(loaded, f<span class="s"> = </span><b>function</b> () {
+</code><code id="L5783"><span class="ln">5783</span>                doc.removeEventListener(loaded, f, <b>false</b>);
+</code><code id="L5784"><span class="ln">5784</span>                doc.readyState<span class="s"> = </span><i>"complete"</i>;
+</code><code id="L5785"><span class="ln">5785</span>            }, <b>false</b>);
+</code><code id="L5786"><span class="ln">5786</span>            doc.readyState<span class="s"> = </span><i>"loading"</i>;
+</code><code id="L5787"><span class="ln">5787</span>        }
+</code><code id="L5788"><span class="ln">5788</span>        <b>function</b> isLoaded() {
+</code><code id="L5789"><span class="ln">5789</span>            (/<b>in</b>/).test(doc.readyState) ? setTimeout(isLoaded, <span class="d">9</span>) : eve(<i>"DOMload"</i>);
+</code><code id="L5790"><span class="ln">5790</span>        }
+</code><code id="L5791"><span class="ln">5791</span>        isLoaded();
+</code><code id="L5792"><span class="ln">5792</span>    })(document, <i>"DOMContentLoaded"</i>);
+</code><code id="L5793"><span class="ln">5793</span>
+</code><code id="L5794"><span class="ln">5794</span>    oldRaphael.was ? (g.win.Raphael<span class="s"> = </span>R) : (Raphael<span class="s"> = </span>R);
+</code><code id="L5795"><span class="ln">5795</span>
+</code><code id="L5796"><span class="ln">5796</span><span class="c">    /*
+</span></code><code id="L5797"><span class="ln">5797</span><span class="c">    <span class="s"> * </span>Eve <span class="d">0.2</span><span class="d">.1</span><span class="s"> - </span>JavaScript Events Library
+</span></code><code id="L5798"><span class="ln">5798</span><span class="c">     *
+</span></code><code id="L5799"><span class="ln">5799</span><span class="c">    <span class="s"> * </span>Copyright (c) <span class="d">2010</span> Dmitry Baranovskiy (http:<span class="c">//dmitry.baranovskiy.com/)</span>
+</span></code><code id="L5800"><span class="ln">5800</span><span class="c">    <span class="s"> * </span>Licensed under the MIT (http:<span class="c">//www.opensource.org/licenses/mit-license.php) license.</span>
+</span></code><code id="L5801"><span class="ln">5801</span><span class="c">     */</span>
+</code><code id="L5802"><span class="ln">5802</span>
+</code><code id="L5803"><span class="ln">5803</span>    <b>var</b> eve<span class="s"> = </span>R.eve<span class="s"> = </span>(<b>function</b> () {
+</code><code id="L5804"><span class="ln">5804</span>        <b>var</b> version<span class="s"> = </span><i>"<span class="d">0.2</span><span class="d">.1</span>"</i>,
+</code><code id="L5805"><span class="ln">5805</span>            has<span class="s"> = </span><i>"hasOwnProperty"</i>,
+</code><code id="L5806"><span class="ln">5806</span>            separator<span class="s"> = </span>/[\.\/]/,
+</code><code id="L5807"><span class="ln">5807</span>            wildcard<span class="s"> = </span><i>"*"</i>,
+</code><code id="L5808"><span class="ln">5808</span>            events<span class="s"> = </span>{n: {}},
+</code><code id="L5809"><span class="ln">5809</span>            eve<span class="s"> = </span><b>function</b> (name, scope) {
+</code><code id="L5810"><span class="ln">5810</span>                <b>var</b> e<span class="s"> = </span>events,
+</code><code id="L5811"><span class="ln">5811</span>                    args<span class="s"> = </span>Array.prototype.slice.call(arguments, <span class="d">2</span>),
+</code><code id="L5812"><span class="ln">5812</span>                    listeners<span class="s"> = </span>eve.listeners(name),
+</code><code id="L5813"><span class="ln">5813</span>                    errors<span class="s"> = </span>[];
+</code><code id="L5814"><span class="ln">5814</span>                <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>listeners.length; i &lt; ii; i++) {
+</code><code id="L5815"><span class="ln">5815</span>                    <b>try</b> {
+</code><code id="L5816"><span class="ln">5816</span>                        listeners[i].apply(scope, args);
+</code><code id="L5817"><span class="ln">5817</span>                    } <b>catch</b> (ex) {
+</code><code id="L5818"><span class="ln">5818</span>                        errors.push({error: ex<span class="s"> &amp;&amp; </span>ex.message<span class="s"> || </span>ex, func: listeners[i]});
+</code><code id="L5819"><span class="ln">5819</span>                    }
+</code><code id="L5820"><span class="ln">5820</span>                }
+</code><code id="L5821"><span class="ln">5821</span>                <b>if</b> (errors.length) {
+</code><code id="L5822"><span class="ln">5822</span>                    <b>return</b> errors;
+</code><code id="L5823"><span class="ln">5823</span>                }
+</code><code id="L5824"><span class="ln">5824</span>            };
+</code><code id="L5825"><span class="ln">5825</span>        eve.listeners<span class="s"> = </span><b>function</b> (name) {
+</code><code id="L5826"><span class="ln">5826</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5827"><span class="ln">5827</span>                e<span class="s"> = </span>events,
+</code><code id="L5828"><span class="ln">5828</span>                item,
+</code><code id="L5829"><span class="ln">5829</span>                items,
+</code><code id="L5830"><span class="ln">5830</span>                k,
+</code><code id="L5831"><span class="ln">5831</span>                i,
+</code><code id="L5832"><span class="ln">5832</span>                ii,
+</code><code id="L5833"><span class="ln">5833</span>                j,
+</code><code id="L5834"><span class="ln">5834</span>                jj,
+</code><code id="L5835"><span class="ln">5835</span>                nes,
+</code><code id="L5836"><span class="ln">5836</span>                es<span class="s"> = </span>[e],
+</code><code id="L5837"><span class="ln">5837</span>                out<span class="s"> = </span>[];
+</code><code id="L5838"><span class="ln">5838</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
+</code><code id="L5839"><span class="ln">5839</span>                nes<span class="s"> = </span>[];
+</code><code id="L5840"><span class="ln">5840</span>                <b>for</b> (j<span class="s"> = </span><span class="d">0</span>, jj<span class="s"> = </span>es.length; j &lt; jj; j++) {
+</code><code id="L5841"><span class="ln">5841</span>                    e<span class="s"> = </span>es[j].n;
+</code><code id="L5842"><span class="ln">5842</span>                    items<span class="s"> = </span>[e[names[i]], e[wildcard]];
+</code><code id="L5843"><span class="ln">5843</span>                    k<span class="s"> = </span><span class="d">2</span>;
+</code><code id="L5844"><span class="ln">5844</span>                    <b>while</b> (k--) {
+</code><code id="L5845"><span class="ln">5845</span>                        item<span class="s"> = </span>items[k];
+</code><code id="L5846"><span class="ln">5846</span>                        <b>if</b> (item) {
+</code><code id="L5847"><span class="ln">5847</span>                            nes.push(item);
+</code><code id="L5848"><span class="ln">5848</span>                            out<span class="s"> = </span>out.concat(item.f<span class="s"> || </span>[]);
+</code><code id="L5849"><span class="ln">5849</span>                        }
+</code><code id="L5850"><span class="ln">5850</span>                    }
+</code><code id="L5851"><span class="ln">5851</span>                }
+</code><code id="L5852"><span class="ln">5852</span>                es<span class="s"> = </span>nes;
+</code><code id="L5853"><span class="ln">5853</span>            }
+</code><code id="L5854"><span class="ln">5854</span>            <b>return</b> out;
+</code><code id="L5855"><span class="ln">5855</span>        };
+</code><code id="L5856"><span class="ln">5856</span>        eve.on<span class="s"> = </span><b>function</b> (name, f) {
+</code><code id="L5857"><span class="ln">5857</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5858"><span class="ln">5858</span>                e<span class="s"> = </span>events;
+</code><code id="L5859"><span class="ln">5859</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
+</code><code id="L5860"><span class="ln">5860</span>                e<span class="s"> = </span>e.n;
+</code><code id="L5861"><span class="ln">5861</span>                !e[names[i]]<span class="s"> &amp;&amp; </span>(e[names[i]]<span class="s"> = </span>{n: {}});
+</code><code id="L5862"><span class="ln">5862</span>                e<span class="s"> = </span>e[names[i]];
+</code><code id="L5863"><span class="ln">5863</span>            }
+</code><code id="L5864"><span class="ln">5864</span>            e.f<span class="s"> = </span>e.f<span class="s"> || </span>[];
+</code><code id="L5865"><span class="ln">5865</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i &lt; ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
+</code><code id="L5866"><span class="ln">5866</span>                <b>return</b> <b>false</b>;
+</code><code id="L5867"><span class="ln">5867</span>            }
+</code><code id="L5868"><span class="ln">5868</span>            e.f.push(f);
+</code><code id="L5869"><span class="ln">5869</span>        };
+</code><code id="L5870"><span class="ln">5870</span>        eve.unbind<span class="s"> = </span><b>function</b> (name, f) {
+</code><code id="L5871"><span class="ln">5871</span>            <b>var</b> names<span class="s"> = </span>name.split(separator),
+</code><code id="L5872"><span class="ln">5872</span>                e,
+</code><code id="L5873"><span class="ln">5873</span>                key,
+</code><code id="L5874"><span class="ln">5874</span>                splice,
+</code><code id="L5875"><span class="ln">5875</span>                cur<span class="s"> = </span>[events];
+</code><code id="L5876"><span class="ln">5876</span>            <b>for</b> (<b>var</b> i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>names.length; i &lt; ii; i++) {
+</code><code id="L5877"><span class="ln">5877</span>                <b>for</b> (<b>var</b> j<span class="s"> = </span><span class="d">0</span>; j &lt; cur.length; j += splice.length<span class="s"> - </span><span class="d">2</span>) {
+</code><code id="L5878"><span class="ln">5878</span>                    splice<span class="s"> = </span>[j, <span class="d">1</span>];
+</code><code id="L5879"><span class="ln">5879</span>                    e<span class="s"> = </span>cur[j].n;
+</code><code id="L5880"><span class="ln">5880</span>                    <b>if</b> (names[i] != wildcard) {
+</code><code id="L5881"><span class="ln">5881</span>                        <b>if</b> (e[names[i]]) {
+</code><code id="L5882"><span class="ln">5882</span>                            splice.push(e[names[i]]);
+</code><code id="L5883"><span class="ln">5883</span>                        }
+</code><code id="L5884"><span class="ln">5884</span>                    } <b>else</b> {
+</code><code id="L5885"><span class="ln">5885</span>                        <b>for</b> (key <b>in</b> e) <b>if</b> (e[has](key)) {
+</code><code id="L5886"><span class="ln">5886</span>                            splice.push(e[key]);
+</code><code id="L5887"><span class="ln">5887</span>                        }
+</code><code id="L5888"><span class="ln">5888</span>                    }
+</code><code id="L5889"><span class="ln">5889</span>                    cur.splice.apply(cur, splice);
+</code><code id="L5890"><span class="ln">5890</span>                }
+</code><code id="L5891"><span class="ln">5891</span>            }
+</code><code id="L5892"><span class="ln">5892</span>            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>cur.length; i &lt; ii; i++) {
+</code><code id="L5893"><span class="ln">5893</span>                e<span class="s"> = </span>cur[i];
+</code><code id="L5894"><span class="ln">5894</span>                <b>while</b> (e.n) {
+</code><code id="L5895"><span class="ln">5895</span>                    <b>if</b> (f) {
+</code><code id="L5896"><span class="ln">5896</span>                        <b>if</b> (e.f) {
+</code><code id="L5897"><span class="ln">5897</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>e.f.length; i &lt; ii; i++) <b>if</b> (e.f[i]<span class="s"> == </span>f) {
+</code><code id="L5898"><span class="ln">5898</span>                                e.f.splice(i, <span class="d">1</span>);
+</code><code id="L5899"><span class="ln">5899</span>                                <b>break</b>;
+</code><code id="L5900"><span class="ln">5900</span>                            }
+</code><code id="L5901"><span class="ln">5901</span>                            !e.f.length<span class="s"> &amp;&amp; </span><b>delete</b> e.f;
+</code><code id="L5902"><span class="ln">5902</span>                        }
+</code><code id="L5903"><span class="ln">5903</span>                        <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key)<span class="s"> &amp;&amp; </span>e.n[key].f) {
+</code><code id="L5904"><span class="ln">5904</span>                            <b>var</b> funcs<span class="s"> = </span>e.n[key].f;
+</code><code id="L5905"><span class="ln">5905</span>                            <b>for</b> (i<span class="s"> = </span><span class="d">0</span>, ii<span class="s"> = </span>funcs.length; i &lt; ii; i++) <b>if</b> (funcs[i]<span class="s"> == </span>f) {
+</code><code id="L5906"><span class="ln">5906</span>                                funcs.splice(i, <span class="d">1</span>);
+</code><code id="L5907"><span class="ln">5907</span>                                <b>break</b>;
+</code><code id="L5908"><span class="ln">5908</span>                            }
+</code><code id="L5909"><span class="ln">5909</span>                            !funcs.length<span class="s"> &amp;&amp; </span><b>delete</b> e.n[key].f;
+</code><code id="L5910"><span class="ln">5910</span>                        }
+</code><code id="L5911"><span class="ln">5911</span>                    } <b>else</b> {
+</code><code id="L5912"><span class="ln">5912</span>                        <b>delete</b> e.f;
+</code><code id="L5913"><span class="ln">5913</span>                        <b>for</b> (key <b>in</b> e.n) <b>if</b> (e.n[has](key)<span class="s"> &amp;&amp; </span>e.n[key].f) {
+</code><code id="L5914"><span class="ln">5914</span>                            <b>delete</b> e.n[key].f;
+</code><code id="L5915"><span class="ln">5915</span>                        }
+</code><code id="L5916"><span class="ln">5916</span>                    }
+</code><code id="L5917"><span class="ln">5917</span>                    e<span class="s"> = </span>e.n;
+</code><code id="L5918"><span class="ln">5918</span>                }
+</code><code id="L5919"><span class="ln">5919</span>            }
+</code><code id="L5920"><span class="ln">5920</span>            <b>return</b> <b>true</b>;
+</code><code id="L5921"><span class="ln">5921</span>        };
+</code><code id="L5922"><span class="ln">5922</span>        eve.version<span class="s"> = </span>version;
+</code><code id="L5923"><span class="ln">5923</span>        eve.toString<span class="s"> = </span><b>function</b> () {
+</code><code id="L5924"><span class="ln">5924</span>            <b>return</b> <i>"You are running Eve "</i><span class="s"> + </span>version;
+</code><code id="L5925"><span class="ln">5925</span>        };
+</code><code id="L5926"><span class="ln">5926</span>        <b>return</b> eve;
+</code><code id="L5927"><span class="ln">5927</span>    })();
+</code><code id="L5928"><span class="ln">5928</span>})();
 </code></body></html>
\ No newline at end of file
diff --git a/reference.html b/reference.html
index 73a87db..b998b3c 100644 (file)
--- a/reference.html
+++ b/reference.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
 <!-- Generated with Dr.js -->
-<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div class="dr-doc"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li></ol><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
-<h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4752">&#x27ad;</a></h3>
-<div class="dr-method"><p>Creates copy of existing animation object with given delay.</p>
+<html lang="en"><head><meta charset="utf-8"><title>Raphaël Reference</title><link rel="stylesheet" href="dr.css"></head><body id="dr-js"><div id="dr"><ol class="dr-toc"><li class="dr-lvl0"><a href="#Animation" class="undefined"><span>Animation</span></a></li><li class="dr-lvl1"><a href="#Animation.delay" class="dr-method"><span>Animation.delay()</span></a></li><li class="dr-lvl1"><a href="#Animation.repeat" class="dr-method"><span>Animation.repeat()</span></a></li><li class="dr-lvl0"><a href="#Element" class="undefined"><span>Element</span></a></li><li class="dr-lvl1"><a href="#Element.animate" class="dr-method"><span>Element.animate()</span></a></li><li class="dr-lvl1"><a href="#Element.animateWith" class="dr-method"><span>Element.animateWith()</span></a></li><li class="dr-lvl1"><a href="#Element.attr" class="dr-method"><span>Element.attr()</span></a></li><li class="dr-lvl1"><a href="#Element.clone" class="dr-method"><span>Element.clone()</span></a></li><li class="dr-lvl1"><a href="#Element.drag" class="dr-method"><span>Element.drag()</span></a></li><li class="dr-lvl1"><a href="#Element.getBBox" class="dr-method"><span>Element.getBBox()</span></a></li><li class="dr-lvl1"><a href="#Element.getPointAtLength" class="dr-method"><span>Element.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Element.getSubpath" class="dr-method"><span>Element.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Element.getTotalLength" class="dr-method"><span>Element.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Element.glow" class="dr-method"><span>Element.glow()</span></a></li><li class="dr-lvl1"><a href="#Element.hide" class="dr-method"><span>Element.hide()</span></a></li><li class="dr-lvl1"><a href="#Element.hover" class="dr-method"><span>Element.hover()</span></a></li><li class="dr-lvl1"><a href="#Element.id" class="dr-property"><span>Element.id</span></a></li><li class="dr-lvl1"><a href="#Element.insertAfter" class="dr-method"><span>Element.insertAfter()</span></a></li><li class="dr-lvl1"><a href="#Element.insertBefore" class="dr-method"><span>Element.insertBefore()</span></a></li><li class="dr-lvl1"><a href="#Element.next" class="dr-property"><span>Element.next</span></a></li><li class="dr-lvl1"><a href="#Element.node" class="dr-property"><span>Element.node</span></a></li><li class="dr-lvl1"><a href="#Element.onDragOver" class="dr-method"><span>Element.onDragOver()</span></a></li><li class="dr-lvl1"><a href="#Element.paper" class="dr-property"><span>Element.paper</span></a></li><li class="dr-lvl1"><a href="#Element.pause" class="dr-method"><span>Element.pause()</span></a></li><li class="dr-lvl1"><a href="#Element.prev" class="dr-property"><span>Element.prev</span></a></li><li class="dr-lvl1"><a href="#Element.raphael" class="dr-property"><span>Element.raphael</span></a></li><li class="dr-lvl1"><a href="#Element.remove" class="dr-method"><span>Element.remove()</span></a></li><li class="dr-lvl1"><a href="#Element.resume" class="dr-method"><span>Element.resume()</span></a></li><li class="dr-lvl1"><a href="#Element.rotate" class="dr-method"><span>Element.rotate()</span></a></li><li class="dr-lvl1"><a href="#Element.scale" class="dr-method"><span>Element.scale()</span></a></li><li class="dr-lvl1"><a href="#Element.setTime" class="dr-method"><span>Element.setTime()</span></a></li><li class="dr-lvl1"><a href="#Element.show" class="dr-method"><span>Element.show()</span></a></li><li class="dr-lvl1"><a href="#Element.status" class="dr-method"><span>Element.status()</span></a></li><li class="dr-lvl1"><a href="#Element.stop" class="dr-method"><span>Element.stop()</span></a></li><li class="dr-lvl1"><a href="#Element.toBack" class="dr-method"><span>Element.toBack()</span></a></li><li class="dr-lvl1"><a href="#Element.toFront" class="dr-method"><span>Element.toFront()</span></a></li><li class="dr-lvl1"><a href="#Element.transform" class="dr-method"><span>Element.transform()</span></a></li><li class="dr-lvl1"><a href="#Element.translate" class="dr-method"><span>Element.translate()</span></a></li><li class="dr-lvl1"><a href="#Element.undrag" class="dr-method"><span>Element.undrag()</span></a></li><li class="dr-lvl1"><a href="#Element.unhover" class="dr-method"><span>Element.unhover()</span></a></li><li class="dr-lvl0"><a href="#Paper" class="undefined"><span>Paper</span></a></li><li class="dr-lvl1"><a href="#Paper.bottom" class="dr-property"><span>Paper.bottom</span></a></li><li class="dr-lvl1"><a href="#Paper.circle" class="dr-method"><span>Paper.circle()</span></a></li><li class="dr-lvl1"><a href="#Paper.clear" class="dr-method"><span>Paper.clear()</span></a></li><li class="dr-lvl1"><a href="#Paper.customAttributes" class="dr-property"><span>Paper.customAttributes</span></a></li><li class="dr-lvl1"><a href="#Paper.ellipse" class="dr-method"><span>Paper.ellipse()</span></a></li><li class="dr-lvl1"><a href="#Paper.forEach" class="dr-method"><span>Paper.forEach()</span></a></li><li class="dr-lvl1"><a href="#Paper.getById" class="dr-method"><span>Paper.getById()</span></a></li><li class="dr-lvl1"><a href="#Paper.getElementByPoint" class="dr-method"><span>Paper.getElementByPoint()</span></a></li><li class="dr-lvl1"><a href="#Paper.image" class="dr-method"><span>Paper.image()</span></a></li><li class="dr-lvl1"><a href="#Paper.path" class="dr-method"><span>Paper.path()</span></a></li><li class="dr-lvl1"><a href="#Paper.raphael" class="dr-property"><span>Paper.raphael</span></a></li><li class="dr-lvl1"><a href="#Paper.rect" class="dr-method"><span>Paper.rect()</span></a></li><li class="dr-lvl1"><a href="#Paper.remove" class="dr-method"><span>Paper.remove()</span></a></li><li class="dr-lvl1"><a href="#Paper.safari" class="dr-method"><span>Paper.safari()</span></a></li><li class="dr-lvl1"><a href="#Paper.set" class="dr-method"><span>Paper.set()</span></a></li><li class="dr-lvl1"><a href="#Paper.setSize" class="dr-method"><span>Paper.setSize()</span></a></li><li class="dr-lvl1"><a href="#Paper.setViewBox" class="dr-method"><span>Paper.setViewBox()</span></a></li><li class="dr-lvl1"><a href="#Paper.text" class="dr-method"><span>Paper.text()</span></a></li><li class="dr-lvl1"><a href="#Paper.top" class="dr-property"><span>Paper.top</span></a></li><li class="dr-lvl0"><a href="#Raphael" class="dr-method"><span>Raphael()</span></a></li><li class="dr-lvl1"><a href="#Raphael.angle" class="dr-method"><span>Raphael.angle()</span></a></li><li class="dr-lvl1"><a href="#Raphael.animation" class="dr-method"><span>Raphael.animation()</span></a></li><li class="dr-lvl1"><a href="#Raphael.deg" class="dr-method"><span>Raphael.deg()</span></a></li><li class="dr-lvl1"><a href="#Raphael.easing_formulas" class="dr-property"><span>Raphael.easing_formulas</span></a></li><li class="dr-lvl1"><a href="#Raphael.el" class="dr-property"><span>Raphael.el</span></a></li><li class="dr-lvl1"><a href="#Raphael.findDotsAtSegment" class="dr-method"><span>Raphael.findDotsAtSegment()</span></a></li><li class="dr-lvl1"><a href="#Raphael.fn" class="dr-property"><span>Raphael.fn</span></a></li><li class="dr-lvl1"><a href="#Raphael.getColor" class="dr-method"><span>Raphael.getColor()</span></a></li><li class="dr-lvl2"><a href="#Raphael.getColor.reset" class="dr-method"><span>Raphael.getColor.reset()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getPointAtLength" class="dr-method"><span>Raphael.getPointAtLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getRGB" class="dr-method"><span>Raphael.getRGB()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getSubpath" class="dr-method"><span>Raphael.getSubpath()</span></a></li><li class="dr-lvl1"><a href="#Raphael.getTotalLength" class="dr-method"><span>Raphael.getTotalLength()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb" class="dr-method"><span>Raphael.hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsb2rgb" class="dr-method"><span>Raphael.hsb2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl" class="dr-method"><span>Raphael.hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.hsl2rgb" class="dr-method"><span>Raphael.hsl2rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.is" class="dr-method"><span>Raphael.is()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parsePathString" class="dr-method"><span>Raphael.parsePathString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.parseTransformString" class="dr-method"><span>Raphael.parseTransformString()</span></a></li><li class="dr-lvl1"><a href="#Raphael.path2curve" class="dr-method"><span>Raphael.path2curve()</span></a></li><li class="dr-lvl1"><a href="#Raphael.pathToRelative" class="dr-method"><span>Raphael.pathToRelative()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rad" class="dr-method"><span>Raphael.rad()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb" class="dr-method"><span>Raphael.rgb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsb" class="dr-method"><span>Raphael.rgb2hsb()</span></a></li><li class="dr-lvl1"><a href="#Raphael.rgb2hsl" class="dr-method"><span>Raphael.rgb2hsl()</span></a></li><li class="dr-lvl1"><a href="#Raphael.setWindow" class="dr-method"><span>Raphael.setWindow()</span></a></li><li class="dr-lvl1"><a href="#Raphael.snapTo" class="dr-method"><span>Raphael.snapTo()</span></a></li><li class="dr-lvl1"><a href="#Raphael.svg" class="dr-property"><span>Raphael.svg</span></a></li><li class="dr-lvl1"><a href="#Raphael.type" class="dr-property"><span>Raphael.type</span></a></li><li class="dr-lvl1"><a href="#Raphael.vml" class="dr-property"><span>Raphael.vml</span></a></li><li class="dr-lvl0"><a href="#Set" class="undefined"><span>Set</span></a></li><li class="dr-lvl1"><a href="#Set.forEach" class="dr-method"><span>Set.forEach()</span></a></li><li class="dr-lvl1"><a href="#Set.pop" class="dr-method"><span>Set.pop()</span></a></li><li class="dr-lvl1"><a href="#Set.push" class="dr-method"><span>Set.push()</span></a></li></ol><div class="dr-doc"><h1>Raphaël Reference</h1><p class="dr-source">Check out the source: <a href="raphael-src.html">raphael.js</a></p><h2 id="Animation" class="undefined">Animation<a href="#Animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
+<h3 id="Animation.delay" class="dr-method">Animation.delay(delay)<a href="#Animation.delay" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5092">&#x27ad;</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given delay.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">delay</dt>
@@ -10,8 +11,9 @@
 <dd class="dr-description">number of ms to pass between animation start and actual animation</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
-</div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4770">&#x27ad;</a></h3>
-<div class="dr-method"><p>Creates copy of existing animation object with given repetition.</p>
+</div><h3 id="Animation.repeat" class="dr-method">Animation.repeat(repeat)<a href="#Animation.repeat" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5110">&#x27ad;</a></h3>
+<div class="dr-method"><p>Creates copy of existing animation object with given repetition.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">repeat</dt>
@@ -20,8 +22,36 @@
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">new altered Animation object</span></p>
 </div><h2 id="Element" class="undefined">Element<a href="#Element" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
-<h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5029">&#x27ad;</a></h3>
-<div class="dr-method"><p>Creates and starts animation for given element.</p>
+<h3 id="Element.animate" class="dr-method">Element.animate(…)<a href="#Element.animate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5369">&#x27ad;</a></h3>
+<div class="dr-method"><p>Creates and starts animation for given element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">final attributes for the element, see also <a href="#Element.attr" class="dr-link">Element.attr</a></dd>
+<dt class="dr-param">ms</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">number of milliseconds for animation to run</dd>
+<dt class="dr-param optional">easing</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic&#x2010;bezier(XX,&#160;XX,&#160;XX,&#160;XX)</code></dd>
+<dt class="dr-param optional">callback</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">callback function. Will be called at the end of animation.</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">animation</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div><h3 id="Element.animateWith" class="dr-method">Element.animateWith(…)<a href="#Element.animateWith" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5001">&#x27ad;</a></h3>
+<div class="dr-method"><p>Acts similar to <a href="#Element.animate" class="dr-link">Element.animate</a>, but ensure that given animation runs in sync with another given element.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">params</dt>
@@ -33,22 +63,175 @@
 <dt class="dr-param optional">easing</dt>
 <dd class="dr-optional">optional</dd>
 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
-<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dd class="dr-description">easing type. Accept on of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic&#x2010;bezier(XX,&#160;XX,&#160;XX,&#160;XX)</code></dd>
 <dt class="dr-param optional">callback</dt>
 <dd class="dr-optional">optional</dd>
 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
 </dl>
-<p>or</p>
+<p>or
+</p>
 <dl class="dr-parameters"><dt class="dr-param">animation</dt>
 <dd class="dr-type"><em class="dr-type-object">object</em></dd>
 <dd class="dr-description">animation object, see <a href="#Raphael.animation" class="dr-link">Raphael.animation</a></dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
-</div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4225">&#x27ad;</a></h3>
+</div><h3 id="Element.attr" class="dr-method">Element.attr(…)<a href="#Element.attr" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2713">&#x27ad;</a></h3>
+<div class="dr-method"><p>Sets the attributes of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">attribute’s name</dd>
+<dt class="dr-param">value</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">value</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">params</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">object of name/value pairs</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrName</dt>
+<dd class="dr-type"><em class="dr-type-string">string</em></dd>
+<dd class="dr-description">attribute’s name</dd>
+</dl>
+<p>or
+</p>
+<dl class="dr-parameters"><dt class="dr-param">attrNames</dt>
+<dd class="dr-type"><em class="dr-type-array">array</em></dd>
+<dd class="dr-description">in this case method returns array of current values for given attribute names</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a> if attrsName <em class="amp">&amp;</em> value or params are passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-...">...</em> <span class="dr-description">value of the attribute if only attrsName is passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of values of the attribute if attrsNames is passed in.</span></p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">object of attributes if nothing is passed in.</span></p>
+<p class="header">Possible parameters
+</p>
+<p>Please refer to the <a href="http://www.w3.org/TR/SVG/" title="The W3C Recommendation for the SVG language describes these properties in detail.">SVG specification</a> for an explanation of these parameters.</p>
+<ol class="dr-json"><li><span class="dr-json-key">arrow-end</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">arrowhead on the end of the path. The format for string is <code>&lt;type>[-&lt;width>[-&lt;length>]]</code>. Possible types: <code>classic</code>, <code>block</code>, <code>open</code>, <code>oval</code>, <code>diamond</code>, <code>none</code>, width: <code>wide</code>, <code>narrow</code>, <code>midium</code>, length: <code>long</code>, <code>short</code>, <code>midium</code>.</span>
+<li><span class="dr-json-key">clip-rect</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">comma or space separated values: x, y, width and height</span>
+<li><span class="dr-json-key">cursor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">CSS type of the cursor</span>
+<li><span class="dr-json-key">cx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">cy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">fill</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">colour, gradient or image</span>
+<li><span class="dr-json-key">fill-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">font</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">font-family</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">font-size</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">font size in pixels</span>
+<li><span class="dr-json-key">font-weight</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">height</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">href</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">URL, if specified element behaves as hyperlink</span>
+<li><span class="dr-json-key">opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">path</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">SVG path string format</span>
+<li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">rx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">ry</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">src</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">image URL, only works for <a href="#Element.image" class="dr-link">Element.image</a> element</span>
+<li><span class="dr-json-key">stroke</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">stroke colour</span>
+<li><span class="dr-json-key">stroke-dasharray</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“”, “<code>-</code>”, “<code>.</code>”, “<code>-.</code>”, “<code>-..</code>”, “<code>. </code>”, “<code>- </code>”, “<code>--</code>”, “<code>- .</code>”, “<code>--.</code>”, “<code>--..</code>”]</span>
+<li><span class="dr-json-key">stroke-linecap</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>butt</code>”, “<code>square</code>”, “<code>round</code>”]</span>
+<li><span class="dr-json-key">stroke-linejoin</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>bevel</code>”, “<code>round</code>”, “<code>miter</code>”]</span>
+<li><span class="dr-json-key">stroke-miterlimit</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">stroke-opacity</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">stroke-width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">stroke width in pixels, default is '1'</span>
+<li><span class="dr-json-key">target</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">used with href</span>
+<li><span class="dr-json-key">text</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">contents of the text element. Use <code>\n</code> for multiline text</span>
+<li><span class="dr-json-key">text-anchor</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">[“<code>start</code>”, “<code>middle</code>”, “<code>end</code>”], default is “<code>middle</code>”</span>
+<li><span class="dr-json-key">title</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">will create tooltip with a given text</span>
+<li><span class="dr-json-key">transform</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">see <a href="#Element.transform" class="dr-link">Element.transform</a></span>
+<li><span class="dr-json-key">width</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">&#160;</span>
+</ol>
+<p class="header">Gradients
+<p>Linear gradient format: “<code>‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>90-#fff-#000</code>” – 90°
+gradient from white to black or “<code>0-#fff-#f00:20-#000</code>” – 0° gradient from white via red (at 20%) to black.
+</p>
+<p>radial gradient: “<code>r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›</code>”, example: “<code>r#fff-#000</code>” –
+gradient from white to black or “<code>r(0.25, 0.75)#fff-#000</code>” – gradient from white to black with focus point
+at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.
+</p>
+<p class="header">Path String
+</p>
+<p>Please refer to <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 documentation regarding path string</a>. Raphaël fully supports it.</p>
+<p class="header">Colour Parsing
+</p>
+<ul>
+    <li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>
+    <li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>
+    <li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>
+    <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200,&nbsp;100,&nbsp;0)</code>”)</li>
+    <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%,&nbsp;175%,&nbsp;0%)</code>”)</li>
+    <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<code>rgba(200,&nbsp;100,&nbsp;0, .5)</code>”)</li>
+    <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<code>rgba(100%,&nbsp;175%,&nbsp;0%, 50%)</code>”)</li>
+    <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5,&nbsp;0.25,&nbsp;1)</code>”)</li>
+    <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
+    <li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>
+    <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href="http://en.wikipedia.org/wiki/HSL_and_HSV" title="HSL and HSV - Wikipedia, the free encyclopedia">Wikipedia page</a></li>
+    <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>
+    <li>hsla(•••, •••, •••) — same as above, but with opacity</li>
+    <li>Optionally for hsb and hsl you could specify hue as a degree: “<code>hsl(240deg,&nbsp;1,&nbsp;.5)</code>” or, if you want to go fancy, “<code>hsl(240°,&nbsp;1,&nbsp;.5)</code>”</li>
+</ul>
+</div><h3 id="Element.clone" class="dr-method">Element.clone()<a href="#Element.clone" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4548">&#x27ad;</a></h3>
 <div class="dr-method"><p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">clone of a given element</span></p>
-</div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4193">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return bounding box for a given element</p>
+</div><h3 id="Element.drag" class="dr-method">Element.drag(onmove, onstart, onend, [mcontext], [scontext], [econtext])<a href="#Element.drag" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4151">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds event handlers for drag of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">onmove</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for moving</dd>
+<dt class="dr-param">onstart</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for drag start</dd>
+<dt class="dr-param">onend</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for drag end</dd>
+<dt class="dr-param optional">mcontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for moving handler</dd>
+<dt class="dr-param optional">scontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for drag start handler</dd>
+<dt class="dr-param optional">econtext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for drag end handler</dd>
+</dl>
+<p>Additionaly following <code>drag</code> events will be triggered: <code>drag.start.&lt;id></code> on start, 
+<code>drag.end.&lt;id></code> on end and <code>drag.move.&lt;id></code> on every move. When element will be dragged over another element 
+<code>drag.over.&lt;id></code> will be fired as well.
+</p>
+<p>Start event and start handler will be called in specified context or in context of the element with following parameters:
+</p>
+<ol class="dr-json"><li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
+<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
+<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
+</ol>
+<p>Move event and move handler will be called in specified context or in context of the element with following parameters:
+</p>
+<ol class="dr-json"><li><span class="dr-json-key">dx</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by x from the start point</span>
+<li><span class="dr-json-key">dy</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">shift by y from the start point</span>
+<li><span class="dr-json-key">x</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x position of the mouse</span>
+<li><span class="dr-json-key">y</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y position of the mouse</span>
+<li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
+</ol>
+<p>End event and end handler will be called in specified context or in context of the element with following parameters:
+</p>
+<ol class="dr-json"><li><span class="dr-json-key">event</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">DOM event object</span>
+</ol>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.getBBox" class="dr-method">Element.getBBox(isWithoutTransform)<a href="#Element.getBBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4516">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return bounding box for a given element
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">isWithoutTransform</dt>
@@ -56,15 +239,14 @@
 <dd class="dr-description">flag, <code>true</code> if you want to have bounding box before transformations. Default is <code>false</code>.</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Bounding box object:</span></p>
-<pre class="javascript code"><code>{
-    x: <span class="c">//top left corner x,</span>
-    y: <span class="c">//top left corner y,</span>
-    width: <span class="c">//width,</span>
-    height: <span class="c">//height</span>
-}
-</code></pre>
-</div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4428">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">top left corner x</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">top left corner y</span>
+<li><span class="dr-json-key">width:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">width</span>
+<li><span class="dr-json-key">height:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">height</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Element.getPointAtLength" class="dr-method">Element.getPointAtLength(length)<a href="#Element.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4751">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">length</dt>
@@ -72,14 +254,13 @@
 <dd class="dr-description">&#160;</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
-<pre class="javascript code"><code>{
-    x: <span class="c">//x coordinate,</span>
-    y: <span class="c">//y coordinate,</span>
-    alpha: <span class="c">//angle of derivative</span>
-}
-</code></pre>
-</div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4445">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate</span>
+<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Element.getSubpath" class="dr-method">Element.getSubpath(from, to)<a href="#Element.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4768">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return subpath of a given element from given length to given length. Only works for element of “path” type.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">from</dt>
@@ -90,15 +271,130 @@
 <dd class="dr-description">position of the end of the segment</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
-</div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4404">&#x27ad;</a></h3>
-<div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.</p>
+</div><h3 id="Element.getTotalLength" class="dr-method">Element.getTotalLength()<a href="#Element.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4727">&#x27ad;</a></h3>
+<div class="dr-method"><p>Returns length of the path in pixels. Only works for element of “path” type.
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
-</div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4244">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set." class="dr-link">Paper.set.</a></p>
-<p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.</p>
-<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">set of elements that represents glow</span></p>
-</div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2369">&#x27ad;</a></h3>
-<div class="dr-method"><p>Adds rotation by given angle around given point to the list oftransformations of the element.</p>
+</div><h3 id="Element.glow" class="dr-method">Element.glow()<a href="#Element.glow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4567">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return set of elements that create glow-like effect around given element. See <a href="#Paper.set" class="dr-link">Paper.set</a>.
+</p>
+<p>Note: Glow is not connected to the elment. If you change element attributes it won’t adjust itself.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Paper.set" class="dr-link">Paper.set</a> of elements that represents glow</span></p>
+</div><h3 id="Element.hide" class="dr-method">Element.hide()<a href="#Element.hide" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2583">&#x27ad;</a></h3>
+<div class="dr-method"><p>Makes element invisible. See <a href="#Element.show" class="dr-link">Element.show</a>.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.hover" class="dr-method">Element.hover(f_in, f_out, [icontext], [ocontext])<a href="#Element.hover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4105">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+<dt class="dr-param optional">icontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover in handler</dd>
+<dt class="dr-param optional">ocontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover out handler</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.id" class="dr-property">Element.id<a href="#Element.id" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2386">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-number">number</em><p>Unique id of the element. Especially usesful when you want to listen to events of the element, 
+because all events are fired in format <code>&lt;module>.&lt;action>.&lt;id></code>. Also useful for <a href="#Paper.getById" class="dr-link">Paper.getById</a> method.
+</p>
+</div><h3 id="Element.insertAfter" class="dr-method">Element.insertAfter()<a href="#Element.insertAfter" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2805">&#x27ad;</a></h3>
+<div class="dr-method"><p>Inserts current object after the given one.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.insertBefore" class="dr-method">Element.insertBefore()<a href="#Element.insertBefore" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2825">&#x27ad;</a></h3>
+<div class="dr-method"><p>Inserts current object before the given one.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.next" class="dr-property">Element.next<a href="#Element.next" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2429">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the next element in the hierarchy.
+</p>
+</div><h3 id="Element.node" class="dr-property">Element.node<a href="#Element.node" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2365">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><span class="c">// draw a circle at coordinate <span class="d">10</span>,<span class="d">10</span> <b>with</b> radius of <span class="d">10</span></span>
+<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>);
+c.node.onclick<span class="s"> = </span><b>function</b> () {
+    c.attr(<i>"fill"</i>, <i>"red"</i>);
+};
+</code></pre>
+</div><h3 id="Element.onDragOver" class="dr-method">Element.onDragOver(f)<a href="#Element.onDragOver" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4178">&#x27ad;</a></h3>
+<div class="dr-method"><p>Shortcut for assigning event handler for <code>drag.over.&lt;id></code> event, where id is id of the element (see <a href="#Element.id" class="dr-link">Element.id</a>).
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for event</dd>
+</dl>
+</div><h3 id="Element.paper" class="dr-property">Element.paper<a href="#Element.paper" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.cross<span class="s"> = </span><b>function</b> () {
+    <b>this</b>.attr({fill: <i>"red"</i>});
+    <b>this</b>.paper.path(<i>"M10,10L50,50M50,10L10,<span class="d">50</span>"</i>)
+        .attr({stroke: <i>"red"</i>});
+}
+</code></pre>
+</div><h3 id="Element.pause" class="dr-method">Element.pause([anim])<a href="#Element.pause" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5459">&#x27ad;</a></h3>
+<div class="dr-method"><p>Stops animation of the element with ability to resume it later on.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div><h3 id="Element.prev" class="dr-property">Element.prev<a href="#Element.prev" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2420">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Reference to the previous element in the hierarchy.
+</p>
+</div><h3 id="Element.raphael" class="dr-property">Element.raphael<a href="#Element.raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2378">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>Internal reference to <a href="#Raphael" class="dr-link">Raphael</a> object. In case it is not available.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+    <b>var</b> hsb<span class="s"> = </span><b>this</b>.paper.raphael.rgb2hsb(<b>this</b>.attr(<i>"fill"</i>));
+    hsb.h<span class="s"> = </span><span class="d">1</span>;
+    <b>this</b>.attr({fill: <b>this</b>.paper.raphael.hsb2rgb(hsb).hex});
+}
+</code></pre>
+</div><h3 id="Element.remove" class="dr-method">Element.remove()<a href="#Element.remove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2604">&#x27ad;</a></h3>
+<div class="dr-method"><p>Removes element form the paper.
+</p>
+</div><h3 id="Element.resume" class="dr-method">Element.resume([anim])<a href="#Element.resume" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5479">&#x27ad;</a></h3>
+<div class="dr-method"><p>Resumes animation if it was paused with <a href="#Element.pause" class="dr-link">Element.pause</a> method.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div><h3 id="Element.rotate" class="dr-method">Element.rotate(deg, [cx], [cy])<a href="#Element.rotate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2445">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds rotation by given angle around given point to the list of
+transformations of the element.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
@@ -113,10 +409,13 @@
 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 <dd class="dr-description">y coordinate of the centre of rotation</dd>
 </dl>
-<p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used as a point of rotation.</p>
+<p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used as a point of rotation.
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2402">&#x27ad;</a></h3>
-<div class="dr-method"><p>Adds scale by given amount relative to given point to the list oftransformations of the element.</p>
+</div><h3 id="Element.scale" class="dr-method">Element.scale(sx, sy, [cx], [cy])<a href="#Element.scale" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2478">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds scale by given amount relative to given point to the list of
+transformations of the element.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">sx</dt>
@@ -134,10 +433,12 @@
 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 <dd class="dr-description">y coordinate of the centre of scale</dd>
 </dl>
-<p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used instead.</p>
+<p>If cx <em class="amp">&amp;</em> cy aren’t specified centre of the shape is used instead.
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5052">&#x27ad;</a></h3>
-<div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.</p>
+</div><h3 id="Element.setTime" class="dr-method">Element.setTime(anim, value)<a href="#Element.setTime" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5395">&#x27ad;</a></h3>
+<div class="dr-method"><p>Sets the status of animation of the element in milliseconds. Similar to <a href="#Element.status" class="dr-link">Element.status</a> method.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">anim</dt>
@@ -148,8 +449,17 @@
 <dd class="dr-description">number of milliseconds from the beginning of the animation</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
-</div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5082">&#x27ad;</a></h3>
-<div class="dr-method"><p>Gets or sets the status of animation of the element.</p>
+<p>Note, that during animation following events are triggered:
+</p>
+<p>On each animation frame event <code>anim.frame.&lt;id></code>, on start <code>anim.start.&lt;id></code> and on end <code>anim.finish.&lt;id></code>.
+</p>
+</div><h3 id="Element.show" class="dr-method">Element.show()<a href="#Element.show" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2594">&#x27ad;</a></h3>
+<div class="dr-method"><p>Makes element visible. See <a href="#Element.hide" class="dr-link">Element.hide</a>.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.status" class="dr-method">Element.status([anim], [value])<a href="#Element.status" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5422">&#x27ad;</a></h3>
+<div class="dr-method"><p>Gets or sets the status of animation of the element.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
@@ -162,24 +472,64 @@
 <dd class="dr-description">0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">status</span></p>
-<p>or</p>
-<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified in format:</span></p>
-<pre class="javascript code"><code>[{
-    anim: <span class="c">// animation object,</span>
-    status: <span class="c">// status</span>
-}, {
-    anim: <span class="c">// animation object,</span>
-    status: <span class="c">// status</span>
-}, ...]
-</code></pre>
-<p>or</p>
+<p>or
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">status if <code>anim</code> is not specified. Array of objects in format:</span></p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">anim:</span><span class="dr-type"><em class="dr-type-object">object</em></span><span class="dr-json-description">animation object</span>
+<li><span class="dr-json-key">status:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">status</span>
+</ol></li><li>}</li></ol>
+<p>or
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element if <code>value</code> is specified</span></p>
-</div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2468">&#x27ad;</a></h3>
-<div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The formatof transformation string is similar to the path string syntax:</p>
+</div><h3 id="Element.stop" class="dr-method">Element.stop([anim])<a href="#Element.stop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5501">&#x27ad;</a></h3>
+<div class="dr-method"><p>Stops animation of the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param optional">anim</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">animation object</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div><h3 id="Element.toBack" class="dr-method">Element.toBack()<a href="#Element.toBack" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2787">&#x27ad;</a></h3>
+<div class="dr-method"><p>Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.toFront" class="dr-method">Element.toFront()<a href="#Element.toFront" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2771">&#x27ad;</a></h3>
+<div class="dr-method"><p>Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.transform" class="dr-method">Element.transform([tstr])<a href="#Element.transform" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2557">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds transformation to the element which is separate to other attributes,
+i.e. translation doesn’t change <code>x</code> or <code>y</code> of the rectange. The format
+of transformation string is similar to the path string syntax:
+</p>
 <pre class="javascript code"><code><i>"t100,100r30,<span class="d">100</span>,100s2,<span class="d">2</span>,<span class="d">100</span>,100r45s1<span class="d">.5</span>"</i>
 </code></pre>
-<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is forscale and <code>m</code> is for matrix.</p>
-<p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origincoordinates as a optional parameters.Matrix accepts six parameters.</p>
+<p>Each letter is a command. There are four commands: <code>t</code> is for translate, <code>r</code> is for rotate, <code>s</code> is for
+scale and <code>m</code> is for matrix.
+</p>
+<p>So, example line could be read like “translate by 100, 100, rotate 30° around 100, 100, scale twice around 100, 100
+rotate 45° around centre and scale 1.5 times relative to centre”. As you see rotate and scale commands has origin
+coordinates as a optional parameters.
+Matrix accepts six parameters.
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code><b>var</b> el<span class="s"> = </span>paper.rect(<span class="d">10</span>, <span class="d">20</span>, <span class="d">300</span>, <span class="d">200</span>);
+<span class="c">// translate <span class="d">100</span>, <span class="d">100</span>, rotate <span class="d">45</span>°, translate -<span class="d">100</span>, <span class="d">0</span></span>
+el.transform(<i>"t100,100r45t-<span class="d">100</span>,<span class="d">0</span>"</i>);
+<span class="c">// <b>if</b> you want you can append or prepend transformations</span>
+el.transform(<i>"...t50,<span class="d">50</span>"</i>);
+el.transform(<i>"s2..."</i>);
+<span class="c">// or even wrap</span>
+el.transform(<i>"t50,<span class="d">50</span>...t-<span class="d">50</span>-<span class="d">50</span>"</i>);
+<span class="c">// to reset transformation call method <b>with</b> empty string</span>
+el.transform(<i>""</i>);
+<span class="c">// to get current value call it without parameters</span>
+console.log(el.transform());
+</code></pre>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param optional">tstr</dt>
@@ -187,12 +537,15 @@
 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
 <dd class="dr-description">transformation string</dd>
 </dl>
-<p>If tstr isn’t specified</p>
+<p>If tstr isn’t specified
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">current transformation string</span></p>
-<p>else</p>
+<p>else
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
-</div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2433">&#x27ad;</a></h3>
-<div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.</p>
+</div><h3 id="Element.translate" class="dr-method">Element.translate(dx, dy)<a href="#Element.translate" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2509">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds translation by given amount to the list of transformations of the element.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">dx</dt>
@@ -203,11 +556,29 @@
 <dd class="dr-description">vertical shift</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Element.undrag" class="dr-method">Element.undrag()<a href="#Element.undrag" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4187">&#x27ad;</a></h3>
+<div class="dr-method"><p>Removes all drag event handlers from given element.
+</p>
+</div><h3 id="Element.unhover" class="dr-method">Element.unhover(f_in, f_out)<a href="#Element.unhover" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4118">&#x27ad;</a></h3>
+<div class="dr-method"><p>Removes event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
 </div><h2 id="Paper" class="undefined">Paper<a href="#Paper" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
-<h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4065">&#x27ad;</a></h3>
-<div class="dr-property"><p>Points to the bottom element on the paper</p>
-</div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3905">&#x27ad;</a></h3>
-<div class="dr-method"><p>Draws a circle.</p>
+<h3 id="Paper.bottom" class="dr-property">Paper.bottom<a href="#Paper.bottom" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4388">&#x27ad;</a></h3>
+<div class="dr-property"><p>Points to the bottom element on the paper
+</p>
+</div><h3 id="Paper.circle" class="dr-method">Paper.circle(x, y, r)<a href="#Paper.circle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4212">&#x27ad;</a></h3>
+<div class="dr-method"><p>Draws a circle.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">x</dt>
@@ -225,8 +596,37 @@
 </p>
 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>);
 </code></pre>
-</div><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3949">&#x27ad;</a></h3>
-<div class="dr-method"><p>Draws an ellipse.</p>
+</div><h3 id="Paper.clear" class="dr-method">Paper.clear()<a href="#Paper.clear" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L2991">&#x27ad;</a></h3>
+<div class="dr-method"><p>Clears the paper, i.e. removes all the elements.
+</p>
+</div><h3 id="Paper.customAttributes" class="dr-property">Paper.customAttributes<a href="#Paper.customAttributes" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L260">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>If you have a set of attributes that you would like to represent
+as a function of some number you can do it easily with custom attributes:
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>paper.customAttributes.hue<span class="s"> = </span><b>function</b> (num) {
+    num<span class="s"> = </span>num<span class="s"> % </span><span class="d">1</span>;
+    <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>num<span class="s"> + </span><i>", <span class="d">.75</span>, <span class="d">1</span>)"</i>};
+};
+<span class="c">// Custom attribute “hue” will change fill</span>
+<span class="c">// to be given hue <b>with</b> fixed saturation and brightness.</span>
+<span class="c">// Now you can use it like <b>this</b>:</span>
+<b>var</b> c<span class="s"> = </span>paper.circle(<span class="d">10</span>, <span class="d">10</span>, <span class="d">10</span>).attr({hue: <span class="d">.45</span>});
+<span class="c">// or even like <b>this</b>:</span>
+c.animate({hue: <span class="d">1</span>}, <span class="d">1e3</span>);
+
+<span class="c">// You could also create custom attribute</span>
+<span class="c">// <b>with</b> multiple parameters:</span>
+paper.customAttributes.hsb<span class="s"> = </span><b>function</b> (h, s, b) {
+    <b>return</b> {fill: <i>"hsb("</i><span class="s"> + </span>[h, s, b].join(<i>","</i>)<span class="s"> + </span><i>")"</i>};
+};
+c.attr({hsb: <i>"<span class="d">.5</span> <span class="d">.8</span> <span class="d">1</span>"</i>});
+c.animate({hsb: <i>"<span class="d">1</span> <span class="d">0</span> <span class="d">.5</span>"</i>}, <span class="d">1e3</span>);
+</code></pre>
+</div><h3 id="Paper.ellipse" class="dr-method">Paper.ellipse(x, y, rx, ry)<a href="#Paper.ellipse" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4256">&#x27ad;</a></h3>
+<div class="dr-method"><p>Draws an ellipse.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">x</dt>
@@ -247,9 +647,11 @@
 </p>
 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.ellipse(<span class="d">50</span>, <span class="d">50</span>, <span class="d">40</span>, <span class="d">20</span>);
 </code></pre>
-</div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4160">&#x27ad;</a></h3>
-<div class="dr-method"><p>Executes given function for each element on the paper</p>
-<p>If function returns <code>false</code> it will stop loop running.</p>
+</div><h3 id="Paper.forEach" class="dr-method">Paper.forEach(callback, thisArg)<a href="#Paper.forEach" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4483">&#x27ad;</a></h3>
+<div class="dr-method"><p>Executes given function for each element on the paper
+</p>
+<p>If function returns <code>false</code> it will stop loop running.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">callback</dt>
@@ -260,8 +662,9 @@
 <dd class="dr-description">context object for the callback</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Paper object</span></p>
-</div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4136">&#x27ad;</a></h3>
-<div class="dr-method"><p>Returns you element by it’s internal ID.</p>
+</div><h3 id="Paper.getById" class="dr-method">Paper.getById(id)<a href="#Paper.getById" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4459">&#x27ad;</a></h3>
+<div class="dr-method"><p>Returns you element by it’s internal ID.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">id</dt>
@@ -269,8 +672,9 @@
 <dd class="dr-description">id</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
-</div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4100">&#x27ad;</a></h3>
-<div class="dr-method"><p>Returns you topmost element under given point.</p>
+</div><h3 id="Paper.getElementByPoint" class="dr-method">Paper.getElementByPoint(x, y)<a href="#Paper.getElementByPoint" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4423">&#x27ad;</a></h3>
+<div class="dr-method"><p>Returns you topmost element under given point.
+</p>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Raphaël element object</span></p>
 <p class="header">Parameters
 </p>
@@ -285,8 +689,9 @@
 </p>
 <pre class="javascript code"><code>paper.getElementByPoint(mouseX, mouseY).attr({stroke: <i>"#f00"</i>});
 </code></pre>
-</div><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3991">&#x27ad;</a></h3>
-<div class="dr-method"><p>Embeds an image into the surface.</p>
+</div><h3 id="Paper.image" class="dr-method">Paper.image(src, x, y, width, height)<a href="#Paper.image" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4298">&#x27ad;</a></h3>
+<div class="dr-method"><p>Embeds an image into the surface.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">src</dt>
@@ -310,8 +715,9 @@
 </p>
 <pre class="javascript code"><code><b>var</b> c<span class="s"> = </span>paper.image(<i>"apple.png"</i>, <span class="d">10</span>, <span class="d">10</span>, <span class="d">80</span>, <span class="d">80</span>);
 </code></pre>
-</div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3969">&#x27ad;</a></h3>
-<div class="dr-method"><p>Creates a path element by given path data string.</p>
+</div><h3 id="Paper.path" class="dr-method">Paper.path(pathString)<a href="#Paper.path" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4276">&#x27ad;</a></h3>
+<div class="dr-method"><p>Creates a path element by given path data string.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
@@ -326,11 +732,13 @@ Details of a path's data attribute's format are described in the <a href="http:/
 <span class="c">// draw a diagonal line:</span>
 <span class="c">// move to <span class="d">10</span>,<span class="d">10</span>, line to <span class="d">90</span>,<span class="d">90</span></span>
 </code></pre>
-</div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4072">&#x27ad;</a></h3>
-<div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function</p>
-</div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3929">&#x27ad;</a></h3>
+</div><h3 id="Paper.raphael" class="dr-property">Paper.raphael<a href="#Paper.raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4395">&#x27ad;</a></h3>
+<div class="dr-property"><p>Points to the <a href="#Raphael" class="dr-link">Raphael</a> object/function
+</p>
+</div><h3 id="Paper.rect" class="dr-method">Paper.rect(x, y, width, height, r)<a href="#Paper.rect" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4236">&#x27ad;</a></h3>
 <div class="dr-method"><p></p>
-<p>Draws a rectangle.</p>
+<p>Draws a rectangle.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">x</dt>
@@ -357,8 +765,34 @@ Details of a path's data attribute's format are described in the <a href="http:/
 <span class="c">// rectangle <b>with</b> rounded corners</span>
 <b>var</b> c<span class="s"> = </span>paper.rect(<span class="d">40</span>, <span class="d">40</span>, <span class="d">50</span>, <span class="d">50</span>, <span class="d">10</span>);
 </code></pre>
-</div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4029">&#x27ad;</a></h3>
-<div class="dr-method"><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>
+</div><h3 id="Paper.remove" class="dr-method">Paper.remove()<a href="#Paper.remove" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3008">&#x27ad;</a></h3>
+<div class="dr-method"><p>Removes the paper from the DOM.
+</p>
+</div><h3 id="Paper.safari" class="dr-method">Paper.safari(f_in, f_out, [icontext], [ocontext])<a href="#Paper.safari" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L3956">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds event handlers for hover for the element.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">f_in</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover in</dd>
+<dt class="dr-param">f_out</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">handler for hover out</dd>
+<dt class="dr-param optional">icontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover in handler</dd>
+<dt class="dr-param optional">ocontext</dt>
+<dd class="dr-optional">optional</dd>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context for hover out handler</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Element" class="dr-link">Element</a></span></p>
+</div><h3 id="Paper.set" class="dr-method">Paper.set()<a href="#Paper.set" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4336">&#x27ad;</a></h3>
+<div class="dr-method"><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>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">array-like object that represents set of elements</span></p>
 <p class="header">Usage
 </p>
@@ -369,8 +803,9 @@ st.push(
 );
 st.attr({fill: <i>"red"</i>});
 </code></pre>
-</div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4051">&#x27ad;</a></h3>
-<div class="dr-method"><p>If you need to change dimensions of the canvas call this method</p>
+</div><h3 id="Paper.setSize" class="dr-method">Paper.setSize(width, height)<a href="#Paper.setSize" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4358">&#x27ad;</a></h3>
+<div class="dr-method"><p>If you need to change dimensions of the canvas call this method
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">width</dt>
@@ -389,8 +824,31 @@ st.push(
 );
 st.attr({fill: <i>"red"</i>});
 </code></pre>
-</div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4010">&#x27ad;</a></h3>
-<div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.</p>
+</div><h3 id="Paper.setViewBox" class="dr-method">Paper.setViewBox(x, y, w, h, fit)<a href="#Paper.setViewBox" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">&#x27ad;</a></h3>
+<div class="dr-method"><p>Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by 
+specifying new boundaries.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">x</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new x position, default is <code>0</code></dd>
+<dt class="dr-param">y</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new y position, default is <code>0</code></dd>
+<dt class="dr-param">w</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new width of the canvas</dd>
+<dt class="dr-param">h</dt>
+<dd class="dr-type"><em class="dr-type-number">number</em></dd>
+<dd class="dr-description">new height of the canvas</dd>
+<dt class="dr-param">fit</dt>
+<dd class="dr-type"><em class="dr-type-boolean">boolean</em></dd>
+<dd class="dr-description"><code>true</code> if you want graphics to fit into new boundary box</dd>
+</dl>
+</div><h3 id="Paper.text" class="dr-method">Paper.text(x, y, text)<a href="#Paper.text" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4317">&#x27ad;</a></h3>
+<div class="dr-method"><p>Draws a text string. If you need line breaks, put “\n” in the string.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">x</dt>
@@ -408,10 +866,14 @@ st.attr({fill: <i>"red"</i>});
 </p>
 <pre class="javascript code"><code><b>var</b> t<span class="s"> = </span>paper.text(<span class="d">50</span>, <span class="d">50</span>, <i>"Raphaël\nkicks\nbutt!"</i>);
 </code></pre>
-</div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4059">&#x27ad;</a></h3>
-<div class="dr-property"><p>Points to the topmost element on the paper</p>
+</div><h3 id="Paper.top" class="dr-property">Paper.top<a href="#Paper.top" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4382">&#x27ad;</a></h3>
+<div class="dr-property"><p>Points to the topmost element on the paper
+</p>
 </div><h2 id="Raphael" class="dr-method">Raphael(…)<a href="#Raphael" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L55">&#x27ad;</a></h2>
-<div class="dr-method"><p>Creates a canvas object on which to draw.You must do this first, as all future calls to drawing methodsfrom this instance will be bound to this canvas.</p>
+<div class="dr-method"><p>Creates a canvas object on which to draw.
+You must do this first, as all future calls to drawing methods
+from this instance will be bound to this canvas.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">container</dt>
@@ -424,7 +886,8 @@ st.attr({fill: <i>"red"</i>});
 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 <dd class="dr-description">&#160;</dd>
 </dl>
-<p>or</p>
+<p>or
+</p>
 <dl class="dr-parameters"><dt class="dr-param">x</dt>
 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 <dd class="dr-description">&#160;</dd>
@@ -438,12 +901,14 @@ st.attr({fill: <i>"red"</i>});
 <dd class="dr-type"><em class="dr-type-number">number</em></dd>
 <dd class="dr-description">&#160;</dd>
 </dl>
-<p>or</p>
+<p>or
+</p>
 <dl class="dr-parameters"><dt class="dr-param">all</dt>
 <dd class="dr-type"><em class="dr-type-array">array</em></dd>
 <dd class="dr-description">(first 3 or 4 elements in the array are equal to [containerID, width, height] or [x, y, width, height]. The rest are element descriptions in format {type: type, &lt;attributes>})</dd>
 </dl>
-<p>or</p>
+<p>or
+</p>
 <dl class="dr-parameters"><dt class="dr-param">onReadyCallback</dt>
 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 <dd class="dr-description">function that is going to be called on DOM ready event. You can also subscribe to this event via Eve’s “DOMLoad” event. In this case method returns <code>undefined</code>.</dd>
@@ -474,8 +939,9 @@ st.attr({fill: <i>"red"</i>});
     text: <i>"Dump"</i>
 }]);
 </code></pre>
-</div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L298">&#x27ad;</a></h3>
-<div class="dr-method"><p>Returns angle between two or three points</p>
+</div><h3 id="Raphael.angle" class="dr-method">Raphael.angle(x1, y1, x2, y2, [x3], [y3])<a href="#Raphael.angle" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L324">&#x27ad;</a></h3>
+<div class="dr-method"><p>Returns angle between two or three points
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">x1</dt>
@@ -500,8 +966,10 @@ st.attr({fill: <i>"red"</i>});
 <dd class="dr-description">y coord of third point</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
-</div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4990">&#x27ad;</a></h3>
-<div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.</p>
+</div><h3 id="Raphael.animation" class="dr-method">Raphael.animation(params, ms, [easing], [callback])<a href="#Raphael.animation" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5330">&#x27ad;</a></h3>
+<div class="dr-method"><p>Creates animation object. That later could be used for <a href="#Element.animate" class="dr-link">Element.animate</a> or <a href="#Element.animateWith" class="dr-link">Element.animateWith</a> methods.
+See also <a href="#Animation.delay" class="dr-link">Animation.delay</a> and <a href="#Animation.repeat" class="dr-link">Animation.repeat</a> methods.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">params</dt>
@@ -513,15 +981,16 @@ st.attr({fill: <i>"red"</i>});
 <dt class="dr-param optional">easing</dt>
 <dd class="dr-optional">optional</dd>
 <dd class="dr-type"><em class="dr-type-string">string</em></dd>
-<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic-bezier(XX, XX, XX, XX)</code></dd>
+<dd class="dr-description">easing type. Accept one of <a href="#Raphael.easing_formulas" class="dr-link">Raphael.easing_formulas</a> or CSS format: <code>cubic&#x2010;bezier(XX,&#160;XX,&#160;XX,&#160;XX)</code></dd>
 <dt class="dr-param optional">callback</dt>
 <dd class="dr-optional">optional</dd>
 <dd class="dr-type"><em class="dr-type-function">function</em></dd>
 <dd class="dr-description">callback function. Will be called at the end of animation.</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description"><a href="#Animation" class="dr-link">Animation</a></span></p>
-</div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L331">&#x27ad;</a></h3>
-<div class="dr-method"><p>Transform angle to degrees</p>
+</div><h3 id="Raphael.deg" class="dr-method">Raphael.deg(deg)<a href="#Raphael.deg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L357">&#x27ad;</a></h3>
+<div class="dr-method"><p>Transform angle to degrees
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
@@ -529,8 +998,9 @@ st.attr({fill: <i>"red"</i>});
 <dd class="dr-description">angle in radians</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in degrees.</span></p>
-</div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4466">&#x27ad;</a></h3>
-<div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:</p>
+</div><h3 id="Raphael.easing_formulas" class="dr-property">Raphael.easing_formulas<a href="#Raphael.easing_formulas" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4789">&#x27ad;</a></h3>
+<div class="dr-property"><p>Object that contains easing formulas for animation. You could extend it with your owns. By default it has following list of easing:
+</p>
 <ul>
     <li>“linear”</li>
     <li>“&lt;” or “easeIn” or “ease-in”</li>
@@ -542,8 +1012,23 @@ st.attr({fill: <i>"red"</i>});
     <li>“bounce”</li>
 </ul>
 <p>See also <a href="http://raphaeljs.com/easing.html">Easing demo</a>.</p>
-</div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L940">&#x27ad;</a></h3>
-<div class="dr-method"><p>Utility methodFind dot coordinates on the given cubic bezier curve at the given t.</p>
+</div><h3 id="Raphael.el" class="dr-property">Raphael.el<a href="#Raphael.el" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5777">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to elements. This is usefull when you want to hack default functionality or
+want to wrap some common transformation or attributes in one method. In difference to canvas methods,
+you can redefine element method at any time. Expending element methods wouldn’t affect set
+</p>
+<p class="header">Usage
+</p>
+<pre class="javascript code"><code>Raphael.el.red<span class="s"> = </span><b>function</b> () {
+    <b>this</b>.attr({fill: <i>"#f00"</i>});
+};
+<span class="c">// then use it</span>
+paper.circle(<span class="d">100</span>, <span class="d">100</span>, <span class="d">20</span>).red();
+</code></pre>
+</div><h3 id="Raphael.findDotsAtSegment" class="dr-method">Raphael.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t)<a href="#Raphael.findDotsAtSegment" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L966">&#x27ad;</a></h3>
+<div class="dr-method"><p>Utility method
+Find dot coordinates on the given cubic bezier curve at the given t.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">p1x</dt>
@@ -575,30 +1060,25 @@ st.attr({fill: <i>"red"</i>});
 <dd class="dr-description">position on the curve (0..1)</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">point information in format:</span></p>
-<pre class="javascript code"><code>{
-    x: <span class="c">// x coordinate of the point,</span>
-    y: <span class="c">// y coordinate of the point,</span>
-    m: {
-        x: <span class="c">// x coordinate of the left anchor,</span>
-        y: <span class="c">// y coordinate of the left anchor</span>
-    },
-    n: {
-        x: <span class="c">// x coordinate of the right anchor,</span>
-        y: <span class="c">// y coordinate of the right anchor</span>
-    },
-    start: {
-        x: <span class="c">// x coordinate of the start of the curve,</span>
-        y: <span class="c">// y coordinate of the start of the curve</span>
-    },
-    end: {
-        x: <span class="c">// x coordinate of the end of the curve,</span>
-        y: <span class="c">// y coordinate of the end of the curve</span>
-    },
-    alpha: <span class="c">// angle of the curve derivative at the point.</span>
-}
-</code></pre>
-</div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L262">&#x27ad;</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,you can create your own pie chart function and ship it as a Raphaël plugin. To do thisyou need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespacesinside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>object before Raphaël instance was created, otherwise it will take no effect.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the point</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the point</span>
+<li>    m: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the left anchor</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the left anchor</span>
+</ol></li><li>    }</li><li>    n: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the right anchor</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the right anchor</span>
+</ol></li><li>    }</li><li>    start: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the start of the curve</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the start of the curve</span>
+</ol></li><li>    }</li><li>    end: {<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate of the end of the curve</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate of the end of the curve</span>
+</ol></li><li>    }</li><li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of the curve derivative at the point</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.fn" class="dr-property">Raphael.fn<a href="#Raphael.fn" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L288">&#x27ad;</a></h3>
+<div class="dr-property"><em class="dr-type dr-type-object">object</em><p>You can add your own method to the canvas. For example if you want to draw pie chart,
+you can create your own pie chart function and ship it as a Raphaël plugin. To do this
+you need to extend <code>Raphael.fn</code> object. Please note that you can create your own namespaces
+inside <code>fn</code> object. Methods will be run in context of canvas anyway. You should alter <code>fn</code>
+object before Raphaël instance was created, otherwise it will take no effect.
+</p>
 <p class="header">Usage
 </p>
 <pre class="javascript code"><code>Raphael.fn.arrow<span class="s"> = </span><b>function</b> (x1, y1, x2, y2, size) {
@@ -616,8 +1096,9 @@ paper.arrow(<span class="d">10</span>, <span class="d">10</span>, <span class="d
 paper.mystuff.arrow();
 paper.mystuff.star();
 </code></pre>
-</div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">&#x27ad;</a></h3>
-<div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a></p>
+</div><h3 id="Raphael.getColor" class="dr-method">Raphael.getColor([value])<a href="#Raphael.getColor" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L829">&#x27ad;</a></h3>
+<div class="dr-method"><p>On each call returns next colour in the spectrum. To reset it back to red call <a href="#Raphael.getColor.reset" class="dr-link">Raphael.getColor.reset</a>
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param optional">value</dt>
@@ -626,10 +1107,12 @@ paper.mystuff.star();
 <dd class="dr-description">brightness, default is <code>0.75</code></dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
-</div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L820">&#x27ad;</a></h4>
-<div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.</p>
-</div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4375">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.</p>
+</div><h4 id="Raphael.getColor.reset" class="dr-method">Raphael.getColor.reset()<a href="#Raphael.getColor.reset" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L846">&#x27ad;</a></h4>
+<div class="dr-method"><p>Resets spectrum position for <a href="#Raphael.getColor" class="dr-link">Raphael.getColor</a> back to red.
+</p>
+</div><h3 id="Raphael.getPointAtLength" class="dr-method">Raphael.getPointAtLength(path, length)<a href="#Raphael.getPointAtLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4698">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return coordinates of the point located at the given length on the given path.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">path</dt>
@@ -640,14 +1123,13 @@ paper.mystuff.star();
 <dd class="dr-description">&#160;</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">representation of the point:</span></p>
-<pre class="javascript code"><code>{
-    x: <span class="c">//x coordinate,</span>
-    y: <span class="c">//y coordinate,</span>
-    alpha: <span class="c">//angle of derivative</span>
-}
-</code></pre>
-</div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L681">&#x27ad;</a></h3>
-<div class="dr-method"><p>Parses colour string as RGB object</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">x:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">x coordinate</span>
+<li><span class="dr-json-key">y:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">y coordinate</span>
+<li><span class="dr-json-key">alpha:</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">angle of derivative</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.getRGB" class="dr-method">Raphael.getRGB(colour)<a href="#Raphael.getRGB" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L707">&#x27ad;</a></h3>
+<div class="dr-method"><p>Parses colour string as RGB object
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">colour</dt>
@@ -655,16 +1137,15 @@ paper.mystuff.star();
 <dd class="dr-description">colour string in one of formats:</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
-<pre class="javascript code"><code>{
-    r: <span class="c">// red,</span>
-    g: <span class="c">// green,</span>
-    b: <span class="c">// blue</span>
-    hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••,</span>
-    error: <span class="c">// <b>true</b> <b>if</b> string can’t be parsed</span>
-}
-</code></pre>
-</div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4390">&#x27ad;</a></h3>
-<div class="dr-method"><p>Return subpath of a given path from given length to given length.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
+<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
+<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue</span>
+<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••,</span>
+<li><span class="dr-json-key">error</span><span class="dr-type"><em class="dr-type-boolean">boolean</em></span><span class="dr-json-description">true if string can’t be parsed</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.getSubpath" class="dr-method">Raphael.getSubpath(path, from, to)<a href="#Raphael.getSubpath" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4713">&#x27ad;</a></h3>
+<div class="dr-method"><p>Return subpath of a given path from given length to given length.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">path</dt>
@@ -678,8 +1159,9 @@ paper.mystuff.star();
 <dd class="dr-description">position of the end of the segment</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">pathstring for the segment</span></p>
-</div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4356">&#x27ad;</a></h3>
-<div class="dr-method"><p>Returns length of the given path in pixels.</p>
+</div><h3 id="Raphael.getTotalLength" class="dr-method">Raphael.getTotalLength(path)<a href="#Raphael.getTotalLength" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L4679">&#x27ad;</a></h3>
+<div class="dr-method"><p>Returns length of the given path in pixels.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">path</dt>
@@ -687,8 +1169,9 @@ paper.mystuff.star();
 <dd class="dr-description">SVG path string.</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">length.</span></p>
-</div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L763">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts HSB values to hex representation of the colour.</p>
+</div><h3 id="Raphael.hsb" class="dr-method">Raphael.hsb(h, s, b)<a href="#Raphael.hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L789">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts HSB values to hex representation of the colour.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">h</dt>
@@ -702,8 +1185,9 @@ paper.mystuff.star();
 <dd class="dr-description">value or brightness</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
-</div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L488">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts HSB values to RGB object.</p>
+</div><h3 id="Raphael.hsb2rgb" class="dr-method">Raphael.hsb2rgb(h, s, v)<a href="#Raphael.hsb2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L514">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts HSB values to RGB object.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">h</dt>
@@ -717,15 +1201,14 @@ paper.mystuff.star();
 <dd class="dr-description">value or brightness</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
-<pre class="javascript code"><code>{
-    r: <span class="c">// red,</span>
-    g: <span class="c">// green,</span>
-    b: <span class="c">// blue</span>
-    hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-}
-</code></pre>
-</div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L777">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts HSL values to hex representation of the colour.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
+<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
+<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
+<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.hsl" class="dr-method">Raphael.hsl(h, s, l)<a href="#Raphael.hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L803">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts HSL values to hex representation of the colour.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">h</dt>
@@ -739,8 +1222,9 @@ paper.mystuff.star();
 <dd class="dr-description">luminosity</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
-</div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L525">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts HSL values to RGB object.</p>
+</div><h3 id="Raphael.hsl2rgb" class="dr-method">Raphael.hsl2rgb(h, s, l)<a href="#Raphael.hsl2rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L551">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts HSL values to RGB object.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">h</dt>
@@ -754,15 +1238,14 @@ paper.mystuff.star();
 <dd class="dr-description">luminosity</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">RGB object in format:</span></p>
-<pre class="javascript code"><code>{
-    r: <span class="c">// red,</span>
-    g: <span class="c">// green,</span>
-    b: <span class="c">// blue</span>
-    hex: <span class="c">// color <b>in</b> HTML/CSS format: #••••••</span>
-}
-</code></pre>
-</div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L273">&#x27ad;</a></h3>
-<div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">r</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">red,</span>
+<li><span class="dr-json-key">g</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">green,</span>
+<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">blue,</span>
+<li><span class="dr-json-key">hex</span><span class="dr-type"><em class="dr-type-string">string</em></span><span class="dr-json-description">color in HTML/CSS format: #••••••</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.is" class="dr-method">Raphael.is(o, type)<a href="#Raphael.is" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L299">&#x27ad;</a></h3>
+<div class="dr-method"><p>Handfull replacement for <code>typeof</code> operator.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">o</dt>
@@ -773,8 +1256,10 @@ paper.mystuff.star();
 <dd class="dr-description">name of the type, i.e. “string”, “function”, “number”, etc.</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-boolean">boolean</em> <span class="dr-description">is given value is of given type</span></p>
-</div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L835">&#x27ad;</a></h3>
-<div class="dr-method"><p>Utility methodParses given path string into an array of arrays of path segments.</p>
+</div><h3 id="Raphael.parsePathString" class="dr-method">Raphael.parsePathString(pathString)<a href="#Raphael.parsePathString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L861">&#x27ad;</a></h3>
+<div class="dr-method"><p>Utility method
+Parses given path string into an array of arrays of path segments.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
@@ -782,8 +1267,10 @@ paper.mystuff.star();
 <dd class="dr-description">path string or array of segments (in the last case it will be returned stright away)</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
-</div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L878">&#x27ad;</a></h3>
-<div class="dr-method"><p>Utility methodParses given path string into an array of transformations.</p>
+</div><h3 id="Raphael.parseTransformString" class="dr-method">Raphael.parseTransformString(TString)<a href="#Raphael.parseTransformString" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L904">&#x27ad;</a></h3>
+<div class="dr-method"><p>Utility method
+Parses given path string into an array of transformations.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">TString</dt>
@@ -791,8 +1278,10 @@ paper.mystuff.star();
 <dd class="dr-description">transform string or array of transformations (in the last case it will be returned stright away)</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of transformations.</span></p>
-</div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1659">&#x27ad;</a></h3>
-<div class="dr-method"><p>Utility methodConverts path to path where all segments are cubic bezier curves.</p>
+</div><h3 id="Raphael.path2curve" class="dr-method">Raphael.path2curve(pathString)<a href="#Raphael.path2curve" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1683">&#x27ad;</a></h3>
+<div class="dr-method"><p>Utility method
+Converts path to path where all segments are cubic bezier curves.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
@@ -800,8 +1289,10 @@ paper.mystuff.star();
 <dd class="dr-description">path string or array of segments</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
-</div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1647">&#x27ad;</a></h3>
-<div class="dr-method"><p>Utility methodConverts path to relative form</p>
+</div><h3 id="Raphael.pathToRelative" class="dr-method">Raphael.pathToRelative(pathString)<a href="#Raphael.pathToRelative" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L1671">&#x27ad;</a></h3>
+<div class="dr-method"><p>Utility method
+Converts path to relative form
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">pathString</dt>
@@ -809,8 +1300,9 @@ paper.mystuff.star();
 <dd class="dr-description">path string or array of segments</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-array">array</em> <span class="dr-description">array of segments.</span></p>
-</div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L319">&#x27ad;</a></h3>
-<div class="dr-method"><p>Transform angle to radians</p>
+</div><h3 id="Raphael.rad" class="dr-method">Raphael.rad(deg)<a href="#Raphael.rad" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">&#x27ad;</a></h3>
+<div class="dr-method"><p>Transform angle to radians
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">deg</dt>
@@ -818,8 +1310,9 @@ paper.mystuff.star();
 <dd class="dr-description">angle in degrees</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">angle in radians.</span></p>
-</div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L791">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts RGB values to hex representation of the colour.</p>
+</div><h3 id="Raphael.rgb" class="dr-method">Raphael.rgb(r, g, b)<a href="#Raphael.rgb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L817">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts RGB values to hex representation of the colour.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">r</dt>
@@ -833,8 +1326,9 @@ paper.mystuff.star();
 <dd class="dr-description">blue</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-string">string</em> <span class="dr-description">hex representation of the colour.</span></p>
-</div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L565">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts RGB values to HSB object.</p>
+</div><h3 id="Raphael.rgb2hsb" class="dr-method">Raphael.rgb2hsb(r, g, b)<a href="#Raphael.rgb2hsb" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L591">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSB object.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">r</dt>
@@ -848,14 +1342,13 @@ paper.mystuff.star();
 <dd class="dr-description">blue</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSB object in format:</span></p>
-<pre class="javascript code"><code>{
-    h: <span class="c">// hue,</span>
-    s: <span class="c">// saturation,</span>
-    b: <span class="c">// brightness</span>
-}
-</code></pre>
-</div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L598">&#x27ad;</a></h3>
-<div class="dr-method"><p>Converts RGB values to HSL object.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue</span>
+<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation</span>
+<li><span class="dr-json-key">b</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">brightness</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.rgb2hsl" class="dr-method">Raphael.rgb2hsl(r, g, b)<a href="#Raphael.rgb2hsl" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L624">&#x27ad;</a></h3>
+<div class="dr-method"><p>Converts RGB values to HSL object.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">r</dt>
@@ -869,22 +1362,22 @@ paper.mystuff.star();
 <dd class="dr-description">blue</dd>
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">HSL object in format:</span></p>
-<pre class="javascript code"><code>{
-    h: <span class="c">// hue,</span>
-    s: <span class="c">// saturation,</span>
-    l: <span class="c">// luminosity</span>
-}
-</code></pre>
-</div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L383">&#x27ad;</a></h3>
-<div class="dr-method"><p>Used when you need to draw in <code>&lt;iframe></code>. Switched window to the iframe one.</p>
+<ol class="dr-json"><li>{<ol class="dr-json"><li><span class="dr-json-key">h</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">hue</span>
+<li><span class="dr-json-key">s</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">saturation</span>
+<li><span class="dr-json-key">l</span><span class="dr-type"><em class="dr-type-number">number</em></span><span class="dr-json-description">luminosity</span>
+</ol></li><li>}</li></ol>
+</div><h3 id="Raphael.setWindow" class="dr-method">Raphael.setWindow(newwin)<a href="#Raphael.setWindow" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L409">&#x27ad;</a></h3>
+<div class="dr-method"><p>Used when you need to draw in <code>&lt;iframe></code>. Switched window to the iframe one.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">newwin</dt>
 <dd class="dr-type"><em class="dr-type-window">window</em></dd>
 <dd class="dr-description">new window object</dd>
 </dl>
-</div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L345">&#x27ad;</a></h3>
-<div class="dr-method"><p>Snaps given value to given grid.</p>
+</div><h3 id="Raphael.snapTo" class="dr-method">Raphael.snapTo(values, value, [tolerance])<a href="#Raphael.snapTo" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L371">&#x27ad;</a></h3>
+<div class="dr-method"><p>Snaps given value to given grid.
+</p>
 <p class="header">Parameters
 </p>
 <dl class="dr-parameters"><dt class="dr-param">values</dt>
@@ -900,9 +1393,36 @@ paper.mystuff.star();
 </dl>
 <p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-number">number</em> <span class="dr-description">adjusted value.</span></p>
 </div><h3 id="Raphael.svg" class="dr-property">Raphael.svg<a href="#Raphael.svg" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L226">&#x27ad;</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.</p>
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports SVG.
+</p>
 </div><h3 id="Raphael.type" class="dr-property">Raphael.type<a href="#Raphael.type" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L208">&#x27ad;</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.</p>
+<div class="dr-property"><em class="dr-type dr-type-string">string</em><p>Can be “SVG”, “VML” or empty, depending on browser support.
+</p>
 </div><h3 id="Raphael.vml" class="dr-property">Raphael.vml<a href="#Raphael.vml" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L232">&#x27ad;</a></h3>
-<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.</p>
-</div></div></body></html>
\ No newline at end of file
+<div class="dr-property"><em class="dr-type dr-type-boolean">boolean</em><p><code>true</code> if browser supports VML.
+</p>
+</div><h2 id="Set" class="undefined">Set<a href="#Set" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#Lundefined">&#x27ad;</a></h2>
+<h3 id="Set.forEach" class="dr-method">Set.forEach(callback, thisArg)<a href="#Set.forEach" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5573">&#x27ad;</a></h3>
+<div class="dr-method"><p>Executes given function for each element in the set.
+</p>
+<p>If function returns <code>false</code> it will stop loop running.
+</p>
+<p class="header">Parameters
+</p>
+<dl class="dr-parameters"><dt class="dr-param">callback</dt>
+<dd class="dr-type"><em class="dr-type-function">function</em></dd>
+<dd class="dr-description">function to run</dd>
+<dt class="dr-param">thisArg</dt>
+<dd class="dr-type"><em class="dr-type-object">object</em></dd>
+<dd class="dr-description">context object for the callback</dd>
+</dl>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">Set object</span></p>
+</div><h3 id="Set.pop" class="dr-method">Set.pop()<a href="#Set.pop" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5555">&#x27ad;</a></h3>
+<div class="dr-method"><p>Removes last element and returns it.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">element</span></p>
+</div><h3 id="Set.push" class="dr-method">Set.push()<a href="#Set.push" title="Link to this section" class="dr-hash">&#x2693;</a><a class="dr-sourceline" title="Go to source" href="raphael-src.html#L5535">&#x27ad;</a></h3>
+<div class="dr-method"><p>Adds each argument to the current set.
+</p>
+<p class="dr-returns"><strong class="dr-title">Returns:</strong> <em class="dr-type-object">object</em> <span class="dr-description">original element</span></p>
+</div></div></div></body></html>
\ No newline at end of file
Rapheal SVG IE compatible library