projects / raphael / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
1.0
[raphael] / raphael.js
1 /*
2  * Raphael 1.0 - JavaScript Vector Library
3  *
4  * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
6  */
7
8
9 window.Raphael = (function () {
10     var separator = /[, ]+/,
11         doc = document,
12         win = window,
13         oldRaphael = {
14             was: "Raphael" in window,
15             is: window.Raphael
16         },
17         R = function () {
18             if (R.is(arguments[0], "array")) {
19                 var a = arguments[0],
20                     cnv = create[ap](R, a.splice(0, 3 + R.is(a[0], "number"))),
21                     res = cnv.set();
22                 for (var i = 0, ii = a[ln]; i < ii; i++) {
23                     var j = a[i] || {};
24                     j.type in {circle:1, rect:1, path:1, ellipse:1, text:1, image:1} && res.push(cnv[j.type]().attr(j));
25                 }
26                 return res;
27             }
28             return create[ap](R, arguments);
29         },
30         paper = {},
31         availableAttrs = {"clip-rect": "0 0 10e9 10e9", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
32         availableAnimAttrs = {"clip-rect": "csv", cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
33         events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"],
34         proto = "prototype",
35         ap = "apply",
36         ln = "length",
37         pf = "parseFloat",
38         pi = "parseInt";
39     R.version = "1.0";
40     R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
41     R.svg = !(R.vml = R.type == "VML");
42     R.idGenerator = 0;
43     R.fn = {};
44     R.is = function (o, type) {
45         type = (type + "").toLowerCase();
46         if ((type == "object" || type == "undefined") && typeof o == type) {
47             return true;
48         }
49         if (o == null && type == "null") {
50             return true;
51         }
52         return Object[proto].toString.call(o).replace(/^\[object\s+|\]$/gi, "").toLowerCase() == type;
53     };
54     R.setWindow = function (newwin) {
55         win = newwin;
56         doc = win.document;
57     };
58     // colour utilities
59     R.hsb2rgb = cacher(function (hue, saturation, brightness) {
60         if (R.is(hue, "object") && "h" in hue && "s" in hue && "b" in hue) {
61             brightness = hue.b;
62             saturation = hue.s;
63             hue = hue.h;
64         }
65         var red,
66             green,
67             blue;
68         if (brightness == 0) {
69             return {r: 0, g: 0, b: 0, hex: "#000"};
70         }
71         if (hue > 1 || saturation > 1 || brightness > 1) {
72             hue /= 255;
73             saturation /= 255;
74             brightness /= 255;
75         }
76         var i = Math.floor(hue * 6),
77             f = (hue * 6) - i,
78             p = brightness * (1 - saturation),
79             q = brightness * (1 - (saturation * f)),
80             t = brightness * (1 - (saturation * (1 - f)));
81         red = [brightness, q, p, p, t, brightness, brightness][i];
82         green = [t, brightness, brightness, q, p, p, t][i];
83         blue = [p, p, t, brightness, brightness, q, p][i];
84         red *= 255;
85         green *= 255;
86         blue *= 255;
87         var rgb = {r: red, g: green, b: blue},
88             r = (~~red).toString(16),
89             g = (~~green).toString(16),
90             b = (~~blue).toString(16);
91         if (r[ln] == 1) {
92             r = "0" + r;
93         }
94         if (g[ln] == 1) {
95             g = "0" + g;
96         }
97         if (b[ln] == 1) {
98             b = "0" + b;
99         }
100         rgb.hex = "#" + r + g + b;
101         return rgb;
102     }, R);
103     R.rgb2hsb = cacher(function (red, green, blue) {
104         if (R.is(red, "object") && "r" in red && "g" in red && "b" in red) {
105             blue = red.b;
106             green = red.g;
107             red = red.r;
108         }
109         if (R.is(red, "string")) {
110             var clr = R.getRGB(red);
111             red = clr.r;
112             green = clr.g;
113             blue = clr.b;
114         }
115         if (red > 1 || green > 1 || blue > 1) {
116             red /= 255;
117             green /= 255;
118             blue /= 255;
119         }
120         var max = Math.max(red, green, blue),
121             min = Math.min(red, green, blue),
122             hue,
123             saturation,
124             brightness = max;
125         if (min == max) {
126             return {h: 0, s: 0, b: max};
127         } else {
128             var delta = (max - min);
129             saturation = delta / max;
130             if (red == max) {
131                 hue = (green - blue) / delta;
132             } else if (green == max) {
133                 hue = 2 + ((blue - red) / delta);
134             } else {
135                 hue = 4 + ((red - green) / delta);
136             }
137             hue /= 6;
138             if (hue < 0) {
139                 hue += 1;
140             }
141             if (hue > 1) {
142                 hue -= 1;
143             }
144         }
145         return {h: hue, s: saturation, b: brightness};
146     }, R);
147     R._path2string = function () {
148         var res = "",
149             item;
150         for (var i = 0, ii = this[ln]; i < ii; i++) {
151             for (var j = 0, jj = this[i][ln]; j < jj; j++) {
152                 res += this[i][j];
153                 j && j != jj - 1 && (res += ",");
154             }
155             i != ii - 1 && (res += "\n");
156         }
157         return res.replace(/,(?=-)/g, "");
158     };
159     function cacher(f, scope, postprocessor) {
160         function newf() {
161             var arg = Array[proto].splice.call(arguments, 0, arguments[ln]),
162                 args = arg.join("\u25ba");
163             newf.cache = newf.cache || {};
164             newf.count = newf.count || [];
165             if (args in newf.cache) {
166                 return postprocessor ? postprocessor(newf.cache[args]) : newf.cache[args];
167             }
168             if (newf.count[ln] > 1000) {
169                 delete newf.cache[newf.count.unshift()];
170             }
171             newf.count.push(args);
172             newf.cache[args] = f[ap](scope, arg);
173             return postprocessor ? postprocessor(newf.cache[args]) : newf.cache[args];
174         }
175         return newf;
176     }
177
178     R.getRGB = cacher(function (colour) {
179         var htmlcolors = {none: "none", aliceblue: "#f0f8ff", amethyst: "#96c", antiquewhite: "#faebd7", aqua: "#0ff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000", blanchedalmond: "#ffebcd", blue: "#00f", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#0ff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#f0f", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", gold: "#ffd700", goldenrod: "#daa520", gray: "#808080", green: "#008000", greenyellow: "#adff2f", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", lavender: "#e6e6fa", lavenderblush: "#fff0f5", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrodyellow: "#fafad2", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#789", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#0f0", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#f0f", maroon: "#800000", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370db", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#db7093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", red: "#f00", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#fff", whitesmoke: "#f5f5f5", yellow: "#ff0", yellowgreen: "#9acd32"},
180             res;
181         colour = htmlcolors[(colour + "").toLowerCase()] || colour;
182         if (!colour) {
183             return {r: -1, g: -1, b: -1, hex: "none", error: 1};
184         }
185         if (colour == "none") {
186             return {r: -1, g: -1, b: -1, hex: "none"};
187         }
188         var red,
189             green,
190             blue,
191             rgb = (colour + "").match(/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgb\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|rgb\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\)|hs[bl]\(\s*([\d\.]+\s*,\s*[\d\.]+\s*,\s*[\d\.]+)\s*\)|hs[bl]\(\s*([\d\.]+%\s*,\s*[\d\.]+%\s*,\s*[\d\.]+%)\s*\))\s*$/i);
192         if (rgb) {
193             if (rgb[2]) {
194                 blue = win[pi](rgb[2].substring(5), 16);
195                 green = win[pi](rgb[2].substring(3, 5), 16);
196                 red = win[pi](rgb[2].substring(1, 3), 16);
197             }
198             if (rgb[3]) {
199                 blue = win[pi](rgb[3].substring(3) + rgb[3].substring(3), 16);
200                 green = win[pi](rgb[3].substring(2, 3) + rgb[3].substring(2, 3), 16);
201                 red = win[pi](rgb[3].substring(1, 2) + rgb[3].substring(1, 2), 16);
202             }
203             if (rgb[4]) {
204                 rgb = rgb[4].split(/\s*,\s*/);
205                 red = win[pf](rgb[0]);
206                 green = win[pf](rgb[1]);
207                 blue = win[pf](rgb[2]);
208             }
209             if (rgb[5]) {
210                 rgb = rgb[5].split(/\s*,\s*/);
211                 red = win[pf](rgb[0]) * 2.55;
212                 green = win[pf](rgb[1]) * 2.55;
213                 blue = win[pf](rgb[2]) * 2.55;
214             }
215             if (rgb[6]) {
216                 rgb = rgb[6].split(/\s*,\s*/);
217                 red = win[pf](rgb[0]);
218                 green = win[pf](rgb[1]);
219                 blue = win[pf](rgb[2]);
220                 return R.hsb2rgb(red, green, blue);
221             }
222             if (rgb[7]) {
223                 rgb = rgb[7].split(/\s*,\s*/);
224                 red = win[pf](rgb[0]) * 2.55;
225                 green = win[pf](rgb[1]) * 2.55;
226                 blue = win[pf](rgb[2]) * 2.55;
227                 return R.hsb2rgb(red, green, blue);
228             }
229             rgb = {r: red, g: green, b: blue};
230             var r = (~~red).toString(16),
231                 g = (~~green).toString(16),
232                 b = (~~blue).toString(16),
233                 rg = /^(?=\d$)/,
234                 rp = "replace";
235             r = r[rp](rg, "0");
236             g = g[rp](rg, "0");
237             b = b[rp](rg, "0");
238             rgb.hex = "#" + r + g + b;
239             res = rgb;
240         } else {
241             res = {r: -1, g: -1, b: -1, hex: "none", error: 1};
242         }
243         return res;
244     }, R);
245     R.getColor = function (value) {
246         var start = this.getColor.start = this.getColor.start || {h: 0, s: 1, b: value || .75},
247             rgb = this.hsb2rgb(start.h, start.s, start.b);
248         start.h += .075;
249         if (start.h > 1) {
250             start.h = 0;
251             start.s -= .2;
252             if (start.s <= 0) {
253                 this.getColor.start = {h: 0, s: 1, b: start.b};
254             }
255         }
256         return rgb.hex;
257     };
258     R.getColor.reset = function () {
259         delete this.start;
260     };
261     // path utilities
262     R.parsePathString = cacher(function (pathString) {
263         if (!pathString) {
264             return null;
265         }
266         var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
267             data = [];
268         if (R.is(pathString, "array") && R.is(pathString[0], "array")) { // rough assumption
269             data = pathClone(pathString);
270         }
271         if (!data[ln]) {
272             (pathString + "").replace(/([achlmqstvz])[\s,]*((-?\d*\.?\d*(?:e[-+]?\d+)?\s*,?\s*)+)/ig, function (a, b, c) {
273                 var params = [],
274                     name = b.toLowerCase();
275                 c.replace(/(-?\d*\.?\d*(?:e[-+]?\d+)?)\s*,?\s*/ig, function (a, b) {
276                     b && params.push(+b);
277                 });
278                 while (params[ln] >= paramCounts[name]) {
279                     data.push([b].concat(params.splice(0, paramCounts[name])));
280                     if (!paramCounts[name]) {
281                         break;
282                     };
283                 }
284             });
285         }
286         data.toString = R._path2string;
287         return data;
288     });
289     var pathDimensions = cacher(function (path) {
290         if (!path) {
291             return {x: 0, y: 0, width: 0, height: 0};
292         }
293         path = path2curve(path);
294         var x = 0, 
295             y = 0,
296             X = [],
297             Y = [];
298         for (var i = 0, ii = path[ln]; i < ii; i++) {
299             if (path[i][0] == "M") {
300                 x = path[i][1];
301                 y = path[i][2];
302                 X.push(x);
303                 Y.push(y);
304             } else {
305                 var dim = curveDim(x, y, path[i][1], path[i][2], path[i][3], path[i][4], path[i][5], path[i][6]);
306                 X = X.concat(dim.min.x, dim.max.x);
307                 Y = Y.concat(dim.min.y, dim.max.y);
308             }
309         }
310         var xmin = Math.min[ap](0, X),
311             ymin = Math.min[ap](0, Y);
312         return {
313             x: xmin,
314             y: ymin,
315             width: Math.max[ap](0, X) - xmin,
316             height: Math.max[ap](0, Y) - ymin
317         };
318     }),
319         pathClone = function (pathArray) {
320             var res = [];
321             if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
322                 pathArray = R.parsePathString(pathArray);
323             }
324             for (var i = 0, ii = pathArray[ln]; i < ii; i++) {
325                 res[i] = [];
326                 for (var j = 0, jj = pathArray[i][ln]; j < jj; j++) {
327                     res[i][j] = pathArray[i][j];
328                 }
329             }
330             res.toString = R._path2string;
331             return res;
332         },
333         pathToRelative = cacher(function (pathArray) {
334             if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
335                 pathArray = R.parsePathString(pathArray);
336             }
337             var res = [],
338                 x = 0,
339                 y = 0,
340                 mx = 0,
341                 my = 0,
342                 start = 0;
343             if (pathArray[0][0] == "M") {
344                 x = pathArray[0][1];
345                 y = pathArray[0][2];
346                 mx = x;
347                 my = y;
348                 start++;
349                 res.push(["M", x, y]);
350             }
351             for (var i = start, ii = pathArray[ln]; i < ii; i++) {
352                 var r = res[i] = [],
353                     pa = pathArray[i];
354                 if (pa[0] != pa[0].toLowerCase()) {
355                     r[0] = pa[0].toLowerCase();
356                     switch (r[0]) {
357                         case "a":
358                             r[1] = pa[1];
359                             r[2] = pa[2];
360                             r[3] = pa[3];
361                             r[4] = pa[4];
362                             r[5] = pa[5];
363                             r[6] = +(pa[6] - x).toFixed(3);
364                             r[7] = +(pa[7] - y).toFixed(3);
365                             break;
366                         case "v":
367                             r[1] = +(pa[1] - y).toFixed(3);
368                             break;
369                         case "m":
370                             mx = pa[1];
371                             my = pa[2];
372                         default:
373                             for (var j = 1, jj = pa[ln]; j < jj; j++) {
374                                 r[j] = +(pa[j] - ((j % 2) ? x : y)).toFixed(3);
375                             }
376                     }
377                 } else {
378                     r = res[i] = [];
379                     if (pa[0] == "m") {
380                         mx = pa[1] + x;
381                         my = pa[2] + y;
382                     }
383                     for (var k = 0, kk = pa[ln]; k < kk; k++) {
384                         res[i][k] = pa[k];
385                     }
386                 }
387                 var len = res[i][ln];
388                 switch (res[i][0]) {
389                     case "z":
390                         x = mx;
391                         y = my;
392                         break;
393                     case "h":
394                         x += +res[i][len - 1];
395                         break;
396                     case "v":
397                         y += +res[i][len - 1];
398                         break;
399                     default:
400                         x += +res[i][len - 2];
401                         y += +res[i][len - 1];
402                 }
403             }
404             res.toString = R._path2string;
405             return res;
406         }, 0, pathClone),
407         pathToAbsolute = cacher(function (pathArray) {
408             if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
409                 pathArray = R.parsePathString(pathArray);
410             }
411             var res = [],
412                 x = 0,
413                 y = 0,
414                 mx = 0,
415                 my = 0,
416                 start = 0;
417             if (pathArray[0][0] == "M") {
418                 x = +pathArray[0][1];
419                 y = +pathArray[0][2];
420                 mx = x;
421                 my = y;
422                 start++;
423                 res[0] = ["M", x, y];
424             }
425             for (var i = start, ii = pathArray[ln]; i < ii; i++) {
426                 var r = res[i] = [],
427                     pa = pathArray[i];
428                 if (pa[0] != (pa[0] + "").toUpperCase()) {
429                     r[0] = (pa[0] + "").toUpperCase();
430                     switch (r[0]) {
431                         case "A":
432                             r[1] = pa[1];
433                             r[2] = pa[2];
434                             r[3] = pa[3];
435                             r[4] = pa[4];
436                             r[5] = pa[5];
437                             r[6] = +(pa[6] + x);
438                             r[7] = +(pa[7] + y);
439                             break;
440                         case "V":
441                             r[1] = +pa[1] + y;
442                             break;
443                         case "H":
444                             r[1] = +pa[1] + x;
445                             break;
446                         case "M":
447                             mx = +pa[1] + x;
448                             my = +pa[2] + y;
449                         default:
450                             for (var j = 1, jj = pa[ln]; j < jj; j++) {
451                                 r[j] = +pa[j] + ((j % 2) ? x : y);
452                             }
453                     }
454                 } else {
455                     for (var k = 0, kk = pa[ln]; k < kk; k++) {
456                         res[i][k] = pa[k];
457                     }
458                 }
459                 switch (r[0]) {
460                     case "Z":
461                         x = mx;
462                         y = my;
463                         break;
464                     case "H":
465                         x = r[1];
466                         break;
467                     case "V":
468                         y = r[1];
469                         break;
470                     default:
471                         x = res[i][res[i][ln] - 2];
472                         y = res[i][res[i][ln] - 1];
473                 }
474             }
475             res.toString = R._path2string;
476             return res;
477         }, null, pathClone),
478         l2c = function (x1, y1, x2, y2) {
479             return [x1, y1, x2, y2, x2, y2];
480         },
481         q2c = function (x1, y1, ax, ay, x2, y2) {
482             var _13 = 1 / 3,
483                 _23 = 2 / 3;
484             return [
485                     _13 * x1 + _23 * ax,
486                     _13 * y1 + _23 * ay,
487                     _13 * x2 + _23 * ax,
488                     _13 * y2 + _23 * ay,
489                     x2,
490                     y2
491                 ];
492         },
493         a2c = function (x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
494             // for more information of where this math came from visit:
495             // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
496             var PI = Math.PI,
497                 _120 = PI * 120 / 180,
498                 rad = PI / 180 * (+angle || 0),
499                 res = [],
500                 xy,
501                 rotate = cacher(function (x, y, rad) {
502                     var X = x * Math.cos(rad) - y * Math.sin(rad),
503                         Y = x * Math.sin(rad) + y * Math.cos(rad);
504                     return {x: X, y: Y};
505                 });
506             if (!recursive) {
507                 xy = rotate(x1, y1, -rad);
508                 x1 = xy.x;
509                 y1 = xy.y;
510                 xy = rotate(x2, y2, -rad);
511                 x2 = xy.x;
512                 y2 = xy.y;
513                 var cos = Math.cos(PI / 180 * angle),
514                     sin = Math.sin(PI / 180 * angle),
515                     x = (x1 - x2) / 2,
516                     y = (y1 - y2) / 2;
517                 rx = Math.max(rx, Math.abs(x));
518                 ry = Math.max(ry, Math.abs(y));
519                 var rx2 = rx * rx,
520                     ry2 = ry * ry,
521                     k = (large_arc_flag == sweep_flag ? -1 : 1) *
522                         Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x))),
523                     cx = k * rx * y / ry + (x1 + x2) / 2,
524                     cy = k * -ry * x / rx + (y1 + y2) / 2,
525                     f1 = Math.asin((y1 - cy) / ry),
526                     f2 = Math.asin((y2 - cy) / ry);
527
528                 f1 = x1 < cx ? PI - f1 : f1;
529                 f2 = x2 < cx ? PI - f2 : f2;
530                 f1 < 0 && (f1 = PI * 2 + f1);
531                 f2 < 0 && (f2 = PI * 2 + f2);
532                 if (sweep_flag && f1 > f2) {
533                     f1 = f1 - PI * 2;
534                 }
535                 if (!sweep_flag && f2 > f1) {
536                     f2 = f2 - PI * 2;
537                 }
538             } else {
539                 f1 = recursive[0];
540                 f2 = recursive[1];
541                 cx = recursive[2];
542                 cy = recursive[3];
543             }
544             var df = f2 - f1;
545             if (Math.abs(df) > _120) {
546                 var f2old = f2,
547                     x2old = x2,
548                     y2old = y2;
549                 f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
550                 x2 = cx + rx * Math.cos(f2);
551                 y2 = cy + ry * Math.sin(f2);
552                 res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
553             }
554             df = f2 - f1;
555             var c1 = Math.cos(f1),
556                 s1 = Math.sin(f1),
557                 c2 = Math.cos(f2),
558                 s2 = Math.sin(f2),
559                 t = Math.tan(df / 4),
560                 hx = 4 / 3 * rx * t,
561                 hy = 4 / 3 * ry * t,
562                 m1 = [x1, y1],
563                 m2 = [x1 + hx * s1, y1 - hy * c1],
564                 m3 = [x2 + hx * s2, y2 - hy * c2],
565                 m4 = [x2, y2];
566             m2[0] = 2 * m1[0] - m2[0];
567             m2[1] = 2 * m1[1] - m2[1];
568             if (recursive) {
569                 return [m2, m3, m4].concat(res);
570             } else {
571                 res = [m2, m3, m4].concat(res).join(",").split(",");
572                 var newres = [];
573                 for (var i = 0, ii = res[ln]; i < ii; i++) {
574                     newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
575                 }
576                 return newres;
577             }
578         },
579         findDotAtSegment = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
580             var x = Math.pow(1 - t, 3) * p1x + Math.pow(1 - t, 2) * 3 * t * c1x + (1 - t) * 3 * t * t * c2x + Math.pow(t, 3) * p2x,
581                 y = Math.pow(1 - t, 3) * p1y + Math.pow(1 - t, 2) * 3 * t * c1y + (1 - t) * 3 * t * t * c2y + Math.pow(t, 3) * p2y,
582                 mx = p1x + 2 * t * (c1x - p1x) + t * t * (c2x - 2 * c1x + p1x),
583                 my = p1y + 2 * t * (c1y - p1y) + t * t * (c2y - 2 * c1y + p1y),
584                 nx = c1x + 2 * t * (c2x - c1x) + t * t * (p2x - 2 * c2x + c1x),
585                 ny = c1y + 2 * t * (c2y - c1y) + t * t * (p2y - 2 * c2y + c1y),
586                 ax = (1 - t) * p1x + t * c1x,
587                 ay = (1 - t) * p1y + t * c1y,
588                 cx = (1 - t) * c2x + t * p2x,
589                 cy = (1 - t) * c2y + t * p2y;
590             return {x: x, y: y, m: {x: mx, y: my}, n: {x: nx, y: ny}, start: {x: ax, y: ay}, end: {x: cx, y: cy}};
591         }),
592         curveDim = cacher(function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
593             var a = (c2x - 2 * c1x + p1x) - (p2x - 2 * c2x + c1x),
594                 b = 2 * (c1x - p1x) - 2 * (c2x - c1x),
595                 c = p1x - c1x,
596                 t1 = (-b + Math.sqrt(b * b - 4 * a * c)) / 2 / a,
597                 t2 = (-b - Math.sqrt(b * b - 4 * a * c)) / 2 / a,
598                 y = [p1y, p2y],
599                 x = [p1x, p2x],
600                 dot1 = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1 > 0 && t1 < 1 ? t1 : 0),
601                 dot2 = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2 > 0 && t2 < 1 ? t2 : 0);
602             x = x.concat(dot1.x, dot2.x);
603             y = y.concat(dot1.y, dot2.y);
604             a = (c2y - 2 * c1y + p1y) - (p2y - 2 * c2y + c1y);
605             b = 2 * (c1y - p1y) - 2 * (c2y - c1y);
606             c = p1y - c1y;
607             t1 = (-b + Math.sqrt(b * b - 4 * a * c)) / 2 / a;
608             t2 = (-b - Math.sqrt(b * b - 4 * a * c)) / 2 / a;
609             dot1 = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t1 > 0 && t1 < 1 ? t1 : 0);
610             dot2 = findDotAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t2 > 0 && t2 < 1 ? t2 : 0);
611             x = x.concat(dot1.x, dot2.x);
612             y = y.concat(dot1.y, dot2.y);
613             return {
614                 min: {x: Math.min[ap](Math, x), y: Math.min[ap](Math, y)},
615                 max: {x: Math.max[ap](Math, x), y: Math.max[ap](Math, y)}
616             };
617         }),
618         path2curve = cacher(function (path, path2) {
619             var p = pathToAbsolute(path),
620                 p2 = path2 && pathToAbsolute(path2),
621                 attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
622                 attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
623                 processPath = function (path, d) {
624                     var nx, ny;
625                     if (!path) {
626                         return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
627                     }
628                     !(path[0] in {T:1, Q:1}) && (d.qx = d.qy = null);
629                     switch (path[0]) {
630                         case "M":
631                             d.X = path[1];
632                             d.Y = path[2];
633                             break;
634                         case "A":
635                             path = ["C"].concat(a2c[ap](0, [d.x, d.y].concat(path.slice(1))));
636                             break;
637                         case "S":
638                             nx = d.x + (d.x - (d.bx || d.x));
639                             ny = d.y + (d.y - (d.by || d.y));
640                             path = ["C", nx, ny].concat(path.slice(1));
641                             break;
642                         case "T":
643                             d.qx = d.x + (d.x - (d.qx || d.x));
644                             d.qy = d.y + (d.y - (d.qy || d.y));
645                             path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
646                             break;
647                         case "Q":
648                             d.qx = path[1];
649                             d.qy = path[2];
650                             path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
651                             break;
652                         case "L":
653                             path = ["C"].concat(l2c(d.x, d.y, path[1], path[2]));
654                             break;
655                         case "H":
656                             path = ["C"].concat(l2c(d.x, d.y, path[1], d.y));
657                             break;
658                         case "V":
659                             path = ["C"].concat(l2c(d.x, d.y, d.x, path[1]));
660                             break;
661                         case "Z":
662                             path = ["C"].concat(l2c(d.x, d.y, d.X, d.Y));
663                             break;
664                     }
665                     return path;
666                 },
667                 fixArc = function (pp, i) {
668                     if (pp[i][ln] > 7) {
669                         pp[i].shift();
670                         var pi = pp[i];
671                         while (pi[ln]) {
672                             pp.splice(i++, 0, ["C"].concat(pi.splice(0, 6)));
673                         }
674                         pp.splice(i, 1);
675                         ii = Math.max(p[ln], p2 && p2[ln] || 0);
676                     }
677                 },
678                 fixM = function (path1, path2, a1, a2, i) {
679                     if (path1 && path2 && path1[i][0] == "M" && path2[i][0] != "M") {
680                         path2.splice(i, 0, ["M", a2.x, a2.y]);
681                         a1.bx = 0;
682                         a1.by = 0;
683                         a1.x = path1[i][1];
684                         a1.y = path1[i][2];
685                         ii = Math.max(p[ln], p2 && p2[ln] || 0);
686                     }
687                 };
688             for (var i = 0, ii = Math.max(p[ln], p2 && p2[ln] || 0); i < ii; i++) {
689                 p[i] = processPath(p[i], attrs);
690                 fixArc(p, i);
691                 p2 && (p2[i] = processPath(p2[i], attrs2));
692                 p2 && fixArc(p2, i);
693                 fixM(p, p2, attrs, attrs2, i);
694                 fixM(p2, p, attrs2, attrs, i);
695                 var seg = p[i],
696                     seg2 = p2 && p2[i],
697                     seglen = seg[ln],
698                     seg2len = p2 && seg2[ln];
699                 attrs.x = seg[seglen - 2];
700                 attrs.y = seg[seglen - 1];
701                 attrs.bx = win[pf](seg[seglen - 4]) || attrs.x;
702                 attrs.by = win[pf](seg[seglen - 3]) || attrs.y;
703                 attrs2.bx = p2 && (win[pf](seg2[seg2len - 4]) || attrs2.x);
704                 attrs2.by = p2 && (win[pf](seg2[seg2len - 3]) || attrs2.y);
705                 attrs2.x = p2 && seg2[seg2len - 2];
706                 attrs2.y = p2 && seg2[seg2len - 1];
707             }
708             return p2 ? [p, p2] : p;
709         }, null, pathClone),
710         parseDots = cacher(function (gradient) {
711             var dots = [];
712             for (var i = 0, ii = gradient[ln]; i < ii; i++) {
713                 var dot = {},
714                     par = gradient[i].match(/^([^:]*):?([\d\.]*)/);
715                 dot.color = R.getRGB(par[1]);
716                 if (dot.color.error) {
717                     return null;
718                 }
719                 dot.color = dot.color.hex;
720                 par[2] && (dot.offset = par[2] + "%");
721                 dots.push(dot);
722             }
723             for (var i = 1, ii = dots[ln] - 1; i < ii; i++) {
724                 if (!dots[i].offset) {
725                     var start = win[pf](dots[i - 1].offset || 0),
726                         end = 0;
727                     for (var j = i + 1; j < ii; j++) {
728                         if (dots[j].offset) {
729                             end = dots[j].offset;
730                             break;
731                         }
732                     }
733                     if (!end) {
734                         end = 100;
735                         j = ii;
736                     }
737                     end = win[pf](end);
738                     var d = (end - start) / (j - i + 1);
739                     for (; i < j; i++) {
740                         start += d;
741                         dots[i].offset = start + "%";
742                     }
743                 }
744             }
745             return dots;
746         }),
747         getContainer = function () {
748             var container,
749                 x,
750                 y,
751                 width,
752                 height;
753             if (R.is(arguments[0], "string") || R.is(arguments[0], "object")) {
754                 if (R.is(arguments[0], "string")) {
755                     container = doc.getElementById(arguments[0]);
756                 } else {
757                     container = arguments[0];
758                 }
759                 if (container.tagName) {
760                     if (arguments[1] == null) {
761                         return {
762                             container: container,
763                             width: container.style.pixelWidth || container.offsetWidth,
764                             height: container.style.pixelHeight || container.offsetHeight
765                         };
766                     } else {
767                         return {container: container, width: arguments[1], height: arguments[2]};
768                     }
769                 }
770             } else if (R.is(arguments[0], "number") && arguments[ln] > 3) {
771                 return {container: 1, x: arguments[0], y: arguments[1], width: arguments[2], height: arguments[3]};
772             }
773         },
774         plugins = function (con, add) {
775             var that = this;
776             for (var prop in add) if (add.hasOwnProperty(prop) && !(prop in con)) {
777                 switch (typeof add[prop]) {
778                     case "function":
779                         (function (f) {
780                             con[prop] = con === that ? f : function () { return f[ap](that, arguments); };
781                         })(add[prop]);
782                     break;
783                     case "object":
784                         con[prop] = con[prop] || {};
785                         plugins.call(this, con[prop], add[prop]);
786                     break;
787                     default:
788                         con[prop] = add[prop];
789                     break;
790                 }
791             }
792         };
793
794     // SVG
795     if (R.svg) {
796         paper.svgns = "http://www.w3.org/2000/svg";
797         paper.xlink = "http://www.w3.org/1999/xlink";
798         var round = function (num) {
799             return +num + (Math.floor(num) == num) * .5;
800         };
801         var roundPath = function (path) {
802             for (var i = 0, ii = path[ln]; i < ii; i++) {
803                 if (path[i][0].toLowerCase() != "a") {
804                     for (var j = 1, jj = path[i][ln]; j < jj; j++) {
805                         path[i][j] = round(path[i][j]);
806                     }
807                 } else {
808                     path[i][6] = round(path[i][6]);
809                     path[i][7] = round(path[i][7]);
810                 }
811             }
812             return path;
813         };
814         var $ = function (el, attr) {
815             if (attr) {
816                 for (var key in attr) if (attr.hasOwnProperty(key)) {
817                     el.setAttribute(key, attr[key]);
818                 }
819             } else {
820                 return doc.createElementNS(paper.svgns, el);
821             }
822         };
823         R.toString = function () {
824             return  "Your browser supports SVG.\nYou are running Rapha\u00ebl " + this.version;
825         };
826         var thePath = function (pathString, SVG) {
827             var el = $("path");
828             SVG.canvas && SVG.canvas.appendChild(el);
829             var p = new Element(el, SVG);
830             p.type = "path";
831             setFillAndStroke(p, {fill: "none", stroke: "#000", path: pathString});
832             return p;
833         };
834         var addGradientFill = function (o, gradient, SVG) {
835             var type = "linear",
836                 fx = .5, fy = .5,
837                 s = o.style;
838             gradient = (gradient + "").replace(/^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/, function (all, _fx, _fy) {
839                 type = "radial";
840                 if (_fx && _fy) {
841                     fx = win[pf](_fx);
842                     fy = win[pf](_fy);
843                     if (Math.pow(fx - .5, 2) + Math.pow(fy - .5, 2) > .25) {
844                         fy = Math.sqrt(.25 - Math.pow(fx - .5, 2)) + .5;
845                     }
846                 }
847                 return "";
848             });
849             gradient = gradient.split(/\s*\-\s*/);
850             if (type == "linear") {
851                 var angle = gradient.shift();
852                 angle = -win[pf](angle);
853                 if (isNaN(angle)) {
854                     return null;
855                 }
856                 var vector = [0, 0, Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180)],
857                     max = 1 / (Math.max(Math.abs(vector[2]), Math.abs(vector[3])) || 1);
858                 vector[2] *= max;
859                 vector[3] *= max;
860                 if (vector[2] < 0) {
861                     vector[0] = -vector[2];
862                     vector[2] = 0;
863                 }
864                 if (vector[3] < 0) {
865                     vector[1] = -vector[3];
866                     vector[3] = 0;
867                 }
868             }
869             var dots = parseDots(gradient);
870             if (!dots) {
871                 return null;
872             }
873             var el = $(type + "Gradient");
874             el.id = "r" + (R.idGenerator++).toString(36);
875             type == "radial" ? $(el, {fx: fx, fy: fy}) : $(el, {x1: vector[0], y1: vector[1], x2: vector[2], y2: vector[3]});
876             SVG.defs.appendChild(el);
877             for (var i = 0, ii = dots[ln]; i < ii; i++) {
878                 var stop = $("stop");
879                 $(stop, {
880                     offset: dots[i].offset ? dots[i].offset : !i ? "0%" : "100%",
881                     "stop-color": dots[i].color || "#fff"
882                 });
883                 el.appendChild(stop);
884             };
885             $(o, {
886                 fill: "url(#" + el.id + ")",
887                 opacity: 1,
888                 "fill-opacity": 1
889             });
890             s.fill = "";
891             s.opacity = 1;
892             s.fillOpacity = 1;
893             return 1;
894         };
895         var updatePosition = function (o) {
896             var bbox = o.getBBox();
897             $(o.pattern, {patternTransform: R.format("translate({0},{1})", bbox.x, bbox.y)});
898         };
899         var setFillAndStroke = function (o, params) {
900             var dasharray = {
901                     "": [0],
902                     "none": [0],
903                     "-": [3, 1],
904                     ".": [1, 1],
905                     "-.": [3, 1, 1, 1],
906                     "-..": [3, 1, 1, 1, 1, 1],
907                     ". ": [1, 3],
908                     "- ": [4, 3],
909                     "--": [8, 3],
910                     "- .": [4, 3, 1, 3],
911                     "--.": [8, 3, 1, 3],
912                     "--..": [8, 3, 1, 3, 1, 3]
913                 },
914                 node = o.node,
915                 attrs = o.attrs,
916                 rot = o.attr("rotation"),
917                 addDashes = function (o, value) {
918                     value = dasharray[(value + "").toLowerCase()];
919                     if (value) {
920                         var width = o.attrs["stroke-width"] || "1",
921                             butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
922                             dashes = [];
923                         var i = value[ln];
924                         while (i--) {
925                             dashes[i] = value[i] * width + ((i % 2) ? 1 : -1) * butt;
926                         }
927                         $(node, {"stroke-dasharray": dashes.join(",")});
928                     }
929                 };
930             win[pf](rot) && o.rotate(0, true);
931             for (var att in params) if (params.hasOwnProperty(att)) {
932                 if (!(att in availableAttrs)) {
933                     continue;
934                 }
935                 var value = params[att];
936                 attrs[att] = value;
937                 switch (att) {
938                     // Hyperlink
939                     case "href":
940                     case "title":
941                     case "target":
942                         var pn = node.parentNode;
943                         if (pn.tagName.toLowerCase() != "a") {
944                             var hl = $("a");
945                             pn.insertBefore(hl, node);
946                             hl.appendChild(node);
947                             pn = hl;
948                         }
949                         pn.setAttributeNS(o.paper.xlink, att, value);
950                       break;
951                     case "clip-rect":
952                         var rect = (value + "").split(separator);
953                         if (rect[ln] == 4) {
954                             o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
955                             var el = $("clipPath"),
956                                 rc = $("rect");
957                             el.id = "r" + (R.idGenerator++).toString(36);
958                             $(rc, {
959                                 x: rect[0],
960                                 y: rect[1],
961                                 width: rect[2],
962                                 height: rect[3]
963                             });
964                             el.appendChild(rc);
965                             o.paper.defs.appendChild(el);
966                             $(node, {"clip-path": "url(#" + el.id + ")"});
967                             o.clip = rc;
968                         }
969                         if (!value) {
970                             var clip = doc.getElementById(node.getAttribute("clip-path").replace(/(^url\(#|\)$)/g, ""));
971                             clip && clip.parentNode.removeChild(clip);
972                             $(node, {"clip-path": ""});
973                             delete o.clip;
974                         }
975                     break;
976                     case "path":
977                         if (value && o.type == "path") {
978                             attrs.path = roundPath(pathToAbsolute(value));
979                             $(node, {d: attrs.path});
980                         }
981                         break;
982                     case "width":
983                         node.setAttribute(att, value);
984                         if (attrs.fx) {
985                             att = "x";
986                             value = attrs.x;
987                         } else {
988                             break;
989                         }
990                     case "x":
991                         if (attrs.fx) {
992                             value = -attrs.x - (attrs.width || 0);
993                         }
994                     case "rx":
995                         if (att == "rx" && o.type == "rect") {
996                             break;
997                         }
998                     case "cx":
999                         node.setAttribute(att, value);
1000                         o.pattern && updatePosition(o);
1001                         break;
1002                     case "height":
1003                         node.setAttribute(att, value);
1004                         if (attrs.fy) {
1005                             att = "y";
1006                             value = attrs.y;
1007                         } else {
1008                             break;
1009                         }
1010                     case "y":
1011                         if (attrs.fy) {
1012                             value = -attrs.y - (attrs.height || 0);
1013                         }
1014                     case "ry":
1015                         if (att == "ry" && o.type == "rect") {
1016                             break;
1017                         }
1018                     case "cy":
1019                         node.setAttribute(att, value);
1020                         o.pattern && updatePosition(o);
1021                         break;
1022                     case "r":
1023                         if (o.type == "rect") {
1024                             $(node, {rx: value, ry: value});
1025                         } else {
1026                             node.setAttribute(att, value);
1027                         }
1028                         break;
1029                     case "src":
1030                         if (o.type == "image") {
1031                             node.setAttributeNS(o.paper.xlink, "href", value);
1032                         }
1033                         break;
1034                     case "stroke-width":
1035                         node.style.strokeWidth = value;
1036                         // Need following line for Firefox
1037                         node.setAttribute(att, value);
1038                         if (attrs["stroke-dasharray"]) {
1039                             addDashes(o, attrs["stroke-dasharray"]);
1040                         }
1041                         break;
1042                     case "stroke-dasharray":
1043                         addDashes(o, value);
1044                         break;
1045                     case "rotation":
1046                         rot = value;
1047                         o.rotate(value, true);
1048                         break;
1049                     case "translation":
1050                         var xy = (value + "").split(separator);
1051                         o.translate((+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
1052                         break;
1053                     case "scale":
1054                         var xy = (value + "").split(separator);
1055                         o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, +xy[2] || null, +xy[3] || null);
1056                         break;
1057                     case "fill":
1058                         var isURL = (value + "").match(/^url\(['"]?([^\)]+)['"]?\)$/i);
1059                         if (isURL) {
1060                             var el = $("pattern"),
1061                                 ig = $("image");
1062                             el.id = "r" + (R.idGenerator++).toString(36);
1063                             $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse"});
1064                             $(ig, {x: 0, y:0});
1065                             ig.setAttributeNS(o.paper.xlink, "href", isURL[1]);
1066                             el.appendChild(ig);
1067
1068                             var img = doc.createElement("img");
1069                             img.style.cssText = "position:absolute;left:-9999em;top-9999em";
1070                             img.onload = function () {
1071                                 $(el, {width: this.offsetWidth, height: this.offsetHeight});
1072                                 $(ig, {width: this.offsetWidth, height: this.offsetHeight});
1073                                 doc.body.removeChild(this);
1074                                 paper.safari();
1075                             };
1076                             doc.body.appendChild(img);
1077                             img.src = isURL[1];
1078                             o.paper.defs.appendChild(el);
1079                             node.style.fill = "url(#" + el.id + ")";
1080                             $(node, {fill: "url(#" + el.id + ")"});
1081                             o.pattern = el;
1082                             o.pattern && updatePosition(o);
1083                             break;
1084                         }
1085                         if (!R.getRGB(value).error) {
1086                             delete params.gradient;
1087                             delete attrs.gradient;
1088                             if (!R.is(attrs.opacity, "undefined") && R.is(params.opacity, "undefined") ) {
1089                                 node.style.opacity = attrs.opacity;
1090                                 // Need following line for Firefox
1091                                 $(node, {opacity: attrs.opacity});
1092                             }
1093                             if (!R.is(attrs["fill-opacity"], "undefined") && R.is(params["fill-opacity"], "undefined") ) {
1094                                 node.style.fillOpacity = attrs["fill-opacity"];
1095                                 // Need following line for Firefox
1096                                 $(node, {"fill-opacity": attrs["fill-opacity"]});
1097                             }
1098                         } else if ((o.type in {circle: 1, ellipse: 1} || (value + "").charAt(0) != "r") && addGradientFill(node, value, o.paper)) {
1099                             attrs.gradient = value;
1100                             attrs.fill = "none";
1101                             break;
1102                         }
1103                     case "stroke":
1104                         node.style[att] = R.getRGB(value).hex;
1105                         // Need following line for Firefox
1106                         node.setAttribute(att, R.getRGB(value).hex);
1107                         break;
1108                     case "gradient":
1109                         (o.type in {circle: 1, ellipse: 1} || (value + "").charAt(0) != "r") && addGradientFill(node, value, o.paper);
1110                         break;
1111                     case "opacity":
1112                     case "fill-opacity":
1113                         if (attrs.gradient) {
1114                             var gradient = doc.getElementById(node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
1115                             if (gradient) {
1116                                 var stops = gradient.getElementsByTagName("stop");
1117                                 stops[stops[ln] - 1].setAttribute("stop-opacity", value);
1118                             }
1119                             break;
1120                         }
1121                     default:
1122                         att == "font-size" && (value = win[pi](value, 10) + "px");
1123                         var cssrule = att.replace(/(\-.)/g, function (w) {
1124                             return w.substring(1).toUpperCase();
1125                         });
1126                         node.style[cssrule] = value;
1127                         // Need following line for Firefox
1128                         node.setAttribute(att, value);
1129                         break;
1130                 }
1131             }
1132             
1133             tuneText(o, params);
1134             win[pi](rot, 10) && o.rotate(rot, true);
1135         };
1136         var leading = 1.2;
1137         var tuneText = function (el, params) {
1138             if (el.type != "text" || !("text" in params || "font" in params || "font-size" in params || "x" in params || "y" in params)) {
1139                 return;
1140             }
1141             var a = el.attrs,
1142                 node = el.node,
1143                 fontSize = node.firstChild ? win[pi](doc.defaultView.getComputedStyle(node.firstChild, "").getPropertyValue("font-size"), 10) : 10;
1144
1145             if ("text" in params) {
1146                 while (node.firstChild) {
1147                     node.removeChild(node.firstChild);
1148                 }
1149                 var texts = (params.text + "").split("\n");
1150                 for (var i = 0, ii = texts[ln]; i < ii; i++) {
1151                     var tspan = $("tspan");
1152                     i && $(tspan, {dy: fontSize * leading, x: a.x});
1153                     tspan.appendChild(doc.createTextNode(texts[i]));
1154                     node.appendChild(tspan);
1155                 }
1156             } else {
1157                 var texts = node.getElementsByTagName("tspan");
1158                 for (var i = 0, ii = texts[ln]; i < ii; i++) {
1159                     i && $(texts[i], {dy: fontSize * leading, x: a.x});
1160                 }
1161             }
1162             $(node, {y: a.y});
1163             var bb = el.getBBox(),
1164                 dif = a.y - (bb.y + bb.height / 2);
1165             dif && $(node, {y: a.y + dif});
1166         };
1167         var Element = function (node, svg) {
1168             var X = 0,
1169                 Y = 0;
1170             this[0] = node;
1171             this.node = node;
1172             node.raphael = this;
1173             this.paper = svg;
1174             this.attrs = this.attrs || {};
1175             this.transformations = []; // rotate, translate, scale
1176             this._ = {
1177                 tx: 0,
1178                 ty: 0,
1179                 rt: {deg: 0, cx: 0, cy: 0},
1180                 sx: 1,
1181                 sy: 1
1182             };
1183         };
1184         Element[proto].rotate = function (deg, cx, cy) {
1185             if (deg == null) {
1186                 if (this._.rt.cx) {
1187                     return [this._.rt.deg, this._.rt.cx, this._.rt.cy].join(" ");
1188                 }
1189                 return this._.rt.deg;
1190             }
1191             var bbox = this.getBBox();
1192             deg = (deg + "").split(separator);
1193             if (deg[ln] - 1) {
1194                 cx = win[pf](deg[1]);
1195                 cy = win[pf](deg[2]);
1196             }
1197             deg = win[pf](deg[0]);
1198             if (cx != null) {
1199                 this._.rt.deg = deg;
1200             } else {
1201                 this._.rt.deg += deg;
1202             }
1203             (cy == null) && (cx = null);
1204             this._.rt.cx = cx;
1205             this._.rt.cy = cy;
1206             cx = cx == null ? bbox.x + bbox.width / 2 : cx;
1207             cy = cy == null ? bbox.y + bbox.height / 2 : cy;
1208             if (this._.rt.deg) {
1209                 this.transformations[0] = R.format("rotate({0} {1} {2})", this._.rt.deg, cx, cy);
1210                 this.clip && $(this.clip, {transform: R.format("rotate({0} {1} {2})", -this._.rt.deg, cx, cy)});
1211             } else {
1212                 this.transformations[0] = "";
1213                 this.clip && $(this.clip, {transform: ""});
1214             }
1215             $(this.node, {transform: this.transformations.join(" ")});
1216             return this;
1217         };
1218         Element[proto].hide = function () {
1219             this.node.style.display = "none";
1220             return this;
1221         };
1222         Element[proto].show = function () {
1223             this.node.style.display = "block";
1224             return this;
1225         };
1226         Element[proto].remove = function () {
1227             this.node.parentNode.removeChild(this.node);
1228         };
1229         Element[proto].getBBox = function () {
1230             if (this.type == "path") {
1231                 return pathDimensions(this.attrs.path);
1232             }
1233             if (this.node.style.display == "none") {
1234                 this.show();
1235                 var hide = true;
1236             }
1237             var bbox = {};
1238             try {
1239                 bbox = this.node.getBBox();
1240             } catch(e) {
1241                 // Firefox 3.0.x plays badly here
1242             } finally {
1243                 bbox = bbox || {};
1244             }
1245             if (this.type == "text") {
1246                 bbox = {x: bbox.x, y: Infinity, width: bbox.width, height: 0};
1247                 for (var i = 0, ii = this.node.getNumberOfChars(); i < ii; i++) {
1248                     var bb = this.node.getExtentOfChar(i);
1249                     (bb.y < bbox.y) && (bbox.y = bb.y);
1250                     (bb.y + bb.height - bbox.y > bbox.height) && (bbox.height = bb.y + bb.height - bbox.y);
1251                 }
1252             }
1253             hide && this.hide();
1254             return bbox;
1255         };
1256         Element[proto].attr = function () {
1257             if (arguments[ln] == 1 && R.is(arguments[0], "string")) {
1258                 if (arguments[0] == "translation") {
1259                     return this.translate();
1260                 }
1261                 if (arguments[0] == "rotation") {
1262                     return this.rotate();
1263                 }
1264                 if (arguments[0] == "scale") {
1265                     return this.scale();
1266                 }
1267                 return this.attrs[arguments[0]];
1268             }
1269             if (arguments[ln] == 1 && R.is(arguments[0], "array")) {
1270                 var values = {};
1271                 for (var j in arguments[0]) if (arguments[0].hasOwnProperty(j)) {
1272                     values[arguments[0][j]] = this.attrs[arguments[0][j]];
1273                 }
1274                 return values;
1275             }
1276             if (arguments[ln] == 2) {
1277                 var params = {};
1278                 params[arguments[0]] = arguments[1];
1279                 setFillAndStroke(this, params);
1280             } else if (arguments[ln] == 1 && R.is(arguments[0], "object")) {
1281                 setFillAndStroke(this, arguments[0]);
1282             }
1283             return this;
1284         };
1285         Element[proto].toFront = function () {
1286             this.node.parentNode.appendChild(this.node);
1287             return this;
1288         };
1289         Element[proto].toBack = function () {
1290             if (this.node.parentNode.firstChild != this.node) {
1291                 this.node.parentNode.insertBefore(this.node, this.node.parentNode.firstChild);
1292             }
1293             return this;
1294         };
1295         Element[proto].insertAfter = function (element) {
1296             if (element.node.nextSibling) {
1297                 element.node.parentNode.insertBefore(this.node, element.node.nextSibling);
1298             } else {
1299                 element.node.parentNode.appendChild(this.node);
1300             }
1301             return this;
1302         };
1303         Element[proto].insertBefore = function (element) {
1304             var node = element.node;
1305             node.parentNode.insertBefore(this.node, node);
1306             return this;
1307         };
1308         
1309         var theCircle = function (svg, x, y, r) {
1310             x = round(x);
1311             y = round(y);
1312             var el = $("circle");
1313             svg.canvas && svg.canvas.appendChild(el);
1314             var res = new Element(el, svg);
1315             res.attrs = {cx: x, cy: y, r: r, fill: "none", stroke: "#000"};
1316             res.type = "circle";
1317             $(el, res.attrs);
1318             return res;
1319         };
1320         var theRect = function (svg, x, y, w, h, r) {
1321             x = round(x);
1322             y = round(y);
1323             var el = $("rect");
1324             svg.canvas && svg.canvas.appendChild(el);
1325             var res = new Element(el, svg);
1326             res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000"};
1327             res.type = "rect";
1328             $(el, res.attrs);
1329             return res;
1330         };
1331         var theEllipse = function (svg, x, y, rx, ry) {
1332             x = round(x);
1333             y = round(y);
1334             var el = $("ellipse");
1335             svg.canvas && svg.canvas.appendChild(el);
1336             var res = new Element(el, svg);
1337             res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: "none", stroke: "#000"};
1338             res.type = "ellipse";
1339             $(el, res.attrs);
1340             return res;
1341         };
1342         var theImage = function (svg, src, x, y, w, h) {
1343             var el = $("image");
1344             $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: "none"});
1345             el.setAttributeNS(svg.xlink, "href", src);
1346             svg.canvas && svg.canvas.appendChild(el);
1347             var res = new Element(el, svg);
1348             res.attrs = {x: x, y: y, width: w, height: h, src: src};
1349             res.type = "image";
1350             return res;
1351         };
1352         var theText = function (svg, x, y, text) {
1353             var el = $("text");
1354             $(el, {x: x, y: y, "text-anchor": "middle"});
1355             svg.canvas && svg.canvas.appendChild(el);
1356             var res = new Element(el, svg);
1357             res.attrs = {x: x, y: y, "text-anchor": "middle", text: text, font: availableAttrs.font, stroke: "none", fill: "#000"};
1358             res.type = "text";
1359             setFillAndStroke(res, res.attrs);
1360             return res;
1361         };
1362         var setSize = function (width, height) {
1363             this.width = width || this.width;
1364             this.height = height || this.height;
1365             this.canvas.setAttribute("width", this.width);
1366             this.canvas.setAttribute("height", this.height);
1367             return this;
1368         };
1369         var create = function () {
1370             var con = getContainer[ap](null, arguments),
1371                 container = con && con.container,
1372                 x = con.x,
1373                 y = con.y,
1374                 width = con.width,
1375                 height = con.height;
1376             if (!container) {
1377                 throw new Error("SVG container not found.");
1378             }
1379             paper.canvas = $("svg");
1380             var cnvs = paper.canvas,
1381                 stl = cnvs.style;
1382             cnvs.setAttribute("width", width || 512);
1383             paper.width = width || 512;
1384             cnvs.setAttribute("height", height || 342);
1385             paper.height = height || 342;
1386             if (container == 1) {
1387                 doc.body.appendChild(cnvs);
1388                 stl.position = "absolute";
1389                 stl.left = x + "px";
1390                 stl.top = y + "px";
1391             } else {
1392                 if (container.firstChild) {
1393                     container.insertBefore(cnvs, container.firstChild);
1394                 } else {
1395                     container.appendChild(cnvs);
1396                 }
1397             }
1398             container = {
1399                 canvas: cnvs,
1400                 clear: function () {
1401                     while (this.canvas.firstChild) {
1402                         this.canvas.removeChild(this.canvas.firstChild);
1403                     }
1404                     this.desc = $("desc");
1405                     this.defs = $("defs");
1406                     this.desc.appendChild(doc.createTextNode("Created with Rapha\u00ebl"));
1407                     this.canvas.appendChild(this.desc);
1408                     this.canvas.appendChild(this.defs);
1409                 }
1410             };
1411             for (var prop in paper) if (paper.hasOwnProperty(prop)) {
1412                 if (prop != "create") {
1413                     container[prop] = paper[prop];
1414                 }
1415             }
1416             plugins.call(container, container, R.fn);
1417             container.clear();
1418             container.raphael = R;
1419             return container;
1420         };
1421         paper.remove = function () {
1422             this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
1423         };
1424     }
1425
1426     // VML
1427     if (R.vml) {
1428         var path2vml = function (path) {
1429             var pa = path2curve(path);
1430             for (var i = 0, ii = pa[ln]; i < ii; i++) {
1431                 pa[i][0] = (pa[i][0] + "").toLowerCase();
1432                 pa[i][0] == "z" && (pa[i][0] = "x");
1433                 for (var j = 1, jj = pa[i][ln]; j < jj; j++) {
1434                     pa[i][j] = ~~(pa[i][j] + .5);
1435                 }
1436             }
1437             return (pa + "");
1438         };
1439         R.toString = function () {
1440             return  "Your browser doesn\u2019t support SVG. Assuming it is Internet Explorer and falling down to VML.\nYou are running Rapha\u00ebl " + this.version;
1441         };
1442         var thePath = function (pathString, VML) {
1443             var g = createNode("group"), gl = g.style;
1444             gl.position = "absolute";
1445             gl.left = 0;
1446             gl.top = 0;
1447             gl.width = VML.width + "px";
1448             gl.height = VML.height + "px";
1449             g.coordsize = VML.coordsize;
1450             g.coordorigin = VML.coordorigin;
1451             var el = createNode("shape"), ol = el.style;
1452             ol.width = VML.width + "px";
1453             ol.height = VML.height + "px";
1454             el.path = "";
1455             el.coordsize = this.coordsize;
1456             el.coordorigin = this.coordorigin;
1457             g.appendChild(el);
1458             var p = new Element(el, g, VML);
1459             p.isAbsolute = true;
1460             p.type = "path";
1461             p.path = [];
1462             p.Path = "";
1463             if (pathString) {
1464                 p.attrs.path = R.parsePathString(pathString);
1465                 p.node.path = path2vml(p.attrs.path);
1466             }
1467             setFillAndStroke(p, {fill: "none", stroke: "#000"});
1468             p.setBox();
1469             VML.canvas.appendChild(g);
1470             return p;
1471         };
1472         var setFillAndStroke = function (o, params) {
1473             o.attrs = o.attrs || {};
1474             var node = o.node,
1475                 a = o.attrs,
1476                 s = node.style,
1477                 xy,
1478                 res = o;
1479             for (var par in params) if (params.hasOwnProperty(par)) {
1480                 a[par] = params[par];
1481             }
1482             params.href && (node.href = params.href);
1483             params.title && (node.title = params.title);
1484             params.target && (node.target = params.target);
1485             if (params.path && o.type == "path") {
1486                 a.path = R.parsePathString(params.path);
1487                 node.path = path2vml(a.path);
1488             }
1489             if (params.rotation != null) {
1490                 o.rotate(params.rotation, true);
1491             }
1492             if (params.translation) {
1493                 xy = (params.translation + "").split(separator);
1494                 o.translate(xy[0], xy[1]);
1495             }
1496             if (params.scale) {
1497                 xy = (params.scale + "").split(separator);
1498                 o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1, +xy[2] || null, +xy[3] || null);
1499             }
1500             if ("clip-rect" in params) {
1501                 var rect = (params["clip-rect"] + "").split(separator);
1502                 if (rect[ln] == 4) {
1503                     rect[2] = +rect[2] + (+rect[0]);
1504                     rect[3] = +rect[3] + (+rect[1]);
1505                     var div = node.clipRect || doc.createElement("div"),
1506                         dstyle = div.style,
1507                         group = node.parentNode;
1508                     dstyle.clip = R.format("rect({1}px {2}px {3}px {0}px)", rect);
1509                     if (!node.clipRect) {
1510                         dstyle.position = "absolute";
1511                         dstyle.top = 0;
1512                         dstyle.left = 0;
1513                         dstyle.width = o.paper.width + "px";
1514                         dstyle.height = o.paper.height + "px";
1515                         group.parentNode.insertBefore(div, group);
1516                         div.appendChild(group);
1517                         node.clipRect = div;
1518                     }
1519                 }
1520                 if (!params["clip-rect"]) {
1521                     node.clipRect && (node.clipRect.style.clip = "");
1522                 }
1523             }
1524             if (o.type == "image" && params.src) {
1525                 node.src = params.src;
1526             }
1527             if (o.type == "image" && params.opacity) {
1528                 node.filterOpacity = " progid:DXImageTransform.Microsoft.Alpha(opacity=" + (params.opacity * 100) + ")";
1529                 s.filter = (node.filterMatrix || "") + (node.filterOpacity || "");
1530             }
1531             params.font && (s.font = params.font);
1532             params["font-family"] && (s.fontFamily = '"' + params["font-family"].split(",")[0].replace(/^['"]+|['"]+$/g, "") + '"');
1533             params["font-size"] && (s.fontSize = params["font-size"]);
1534             params["font-weight"] && (s.fontWeight = params["font-weight"]);
1535             params["font-style"] && (s.fontStyle = params["font-style"]);
1536             if (params.opacity != null || 
1537                 params["stroke-width"] != null ||
1538                 params.fill != null ||
1539                 params.stroke != null ||
1540                 params["stroke-width"] != null ||
1541                 params["stroke-opacity"] != null ||
1542                 params["fill-opacity"] != null ||
1543                 params["stroke-dasharray"] != null ||
1544                 params["stroke-miterlimit"] != null ||
1545                 params["stroke-linejoin"] != null ||
1546                 params["stroke-linecap"] != null) {
1547                 node = o.shape || node;
1548                 var fill = (node.getElementsByTagName("fill") && node.getElementsByTagName("fill")[0]),
1549                     newfill = false;
1550                 !fill && (newfill = fill = createNode("fill"));
1551                 if ("fill-opacity" in params || "opacity" in params) {
1552                     var opacity = ((+a["fill-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1);
1553                     opacity < 0 && (opacity = 0);
1554                     opacity > 1 && (opacity = 1);
1555                     fill.opacity = opacity;
1556                 }
1557                 params.fill && (fill.on = true);
1558                 if (fill.on == null || params.fill == "none") {
1559                     fill.on = false;
1560                 }
1561                 if (fill.on && params.fill) {
1562                     var isURL = params.fill.match(/^url\(([^\)]+)\)$/i);
1563                     if (isURL) {
1564                         fill.src = isURL[1];
1565                         fill.type = "tile";
1566                     } else {
1567                         fill.color = R.getRGB(params.fill).hex;
1568                         fill.src = "";
1569                         fill.type = "solid";
1570                         if (R.getRGB(params.fill).error && (res.type in {circle: 1, ellipse: 1} || (params.fill + "").charAt(0) != "r") && addGradientFill(res, params.fill)) {
1571                             a.fill = "none";
1572                             a.gradient = params.fill;
1573                         }
1574                     }
1575                 }
1576                 newfill && node.appendChild(fill);
1577                 var stroke = (node.getElementsByTagName("stroke") && node.getElementsByTagName("stroke")[0]),
1578                 newstroke = false;
1579                 !stroke && (newstroke = stroke = createNode("stroke"));
1580                 if ((params.stroke && params.stroke != "none") ||
1581                     params["stroke-width"] ||
1582                     params["stroke-opacity"] != null ||
1583                     params["stroke-dasharray"] ||
1584                     params["stroke-miterlimit"] ||
1585                     params["stroke-linejoin"] ||
1586                     params["stroke-linecap"]) {
1587                     stroke.on = true;
1588                 }
1589                 (params.stroke == "none" || stroke.on == null || params.stroke == 0 || params["stroke-width"] == 0) && (stroke.on = false);
1590                 stroke.on && params.stroke && (stroke.color = R.getRGB(params.stroke).hex);
1591                 var opacity = ((+a["stroke-opacity"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1);
1592                 opacity < 0 && (opacity = 0);
1593                 opacity > 1 && (opacity = 1);
1594                 stroke.opacity = opacity;
1595                 params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
1596                 stroke.miterlimit = params["stroke-miterlimit"] || 8;
1597                 params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
1598                 params["stroke-width"] && (stroke.weight = (win[pf](params["stroke-width"]) || 1) * 12 / 16);
1599                 if (params["stroke-dasharray"]) {
1600                     var dasharray = {
1601                         "-": "shortdash",
1602                         ".": "shortdot",
1603                         "-.": "shortdashdot",
1604                         "-..": "shortdashdotdot",
1605                         ". ": "dot",
1606                         "- ": "dash",
1607                         "--": "longdash",
1608                         "- .": "dashdot",
1609                         "--.": "longdashdot",
1610                         "--..": "longdashdotdot"
1611                     };
1612                     stroke.dashstyle = dasharray[params["stroke-dasharray"]] || "";
1613                 }
1614                 newstroke && node.appendChild(stroke);
1615             }
1616             if (res.type == "text") {
1617                 var s = res.paper.span.style;
1618                 a.font && (s.font = a.font);
1619                 a["font-family"] && (s.fontFamily = a["font-family"]);
1620                 a["font-size"] && (s.fontSize = a["font-size"]);
1621                 a["font-weight"] && (s.fontWeight = a["font-weight"]);
1622                 a["font-style"] && (s.fontStyle = a["font-style"]);
1623                 res.node.string && (res.paper.span.innerHTML = res.node.string.replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>"));
1624                 res.W = a.w = res.paper.span.offsetWidth;
1625                 res.H = a.h = res.paper.span.offsetHeight;
1626                 res.X = a.x;
1627                 res.Y = a.y + ~~(res.H / 2 + .5);
1628
1629                 // text-anchor emulation
1630                 switch (a["text-anchor"]) {
1631                     case "start":
1632                         res.node.style["v-text-align"] = "left";
1633                         res.bbx = ~~(res.W / 2 + .5);
1634                     break;
1635                     case "end":
1636                         res.node.style["v-text-align"] = "right";
1637                         res.bbx = -~~(res.W / 2 + .5);
1638                     break;
1639                     default:
1640                         res.node.style["v-text-align"] = "center";
1641                     break;
1642                 }
1643             }
1644         };
1645         var addGradientFill = function (o, gradient) {
1646             o.attrs = o.attrs || {};
1647             var attrs = o.attrs,
1648                 fill = o.node.getElementsByTagName("fill"),
1649                 type = "linear",
1650                 fxfy = ".5 .5";
1651             o.attrs.gradient = gradient;
1652             gradient = (gradient + "").replace(/^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/, function (all, fx, fy) {
1653                 type = "radial";
1654                 if (fx && fy) {
1655                     fx = win[pf](fx);
1656                     fy = win[pf](fy);
1657                     if (Math.pow(fx - .5, 2) + Math.pow(fy - .5, 2) > .25) {
1658                         fy = Math.sqrt(.25 - Math.pow(fx - .5, 2)) + .5;
1659                     }
1660                     fxfy = fx + " " + fy;
1661                 }
1662                 return "";
1663             });
1664             gradient = gradient.split(/\s*\-\s*/);
1665             if (type == "linear") {
1666                 var angle = gradient.shift();
1667                 angle = -win[pf](angle);
1668                 if (isNaN(angle)) {
1669                     return null;
1670                 }
1671             }
1672             var dots = parseDots(gradient);
1673             if (!dots) {
1674                 return null;
1675             }
1676             o = o.shape || o.node;
1677             fill = fill[0] || createNode("fill");
1678             if (dots[ln]) {
1679                 fill.on = true;
1680                 fill.method = "none";
1681                 fill.type = (type == "radial") ? "gradientradial" : "gradient";
1682                 fill.color = dots[0].color;
1683                 fill.color2 = dots[dots[ln] - 1].color;
1684                 var clrs = [];
1685                 for (var i = 0, ii = dots[ln]; i < ii; i++) {
1686                     dots[i].offset && clrs.push(dots[i].offset + " " + dots[i].color);
1687                 }
1688                 if (clrs[ln] && fill.colors) {
1689                     fill.colors.value = clrs.join(",");
1690                 } else {
1691                     fill.colors.value = "0% " + fill.color;
1692                 }
1693                 if (type == "radial") {
1694                     fill.focus = "100%";
1695                     fill.focussize = fxfy;
1696                     fill.focusposition = fxfy;
1697                 } else {
1698                     fill.angle = (270 - angle) % 360;
1699                 }
1700             }
1701             return 1;
1702         };
1703         var Element = function (node, group, vml) {
1704             var Rotation = 0,
1705                 RotX = 0,
1706                 RotY = 0,
1707                 Scale = 1;
1708             this[0] = node;
1709             this.node = node;
1710             node.raphael = this;
1711             this.X = 0;
1712             this.Y = 0;
1713             this.attrs = {};
1714             this.Group = group;
1715             this.paper = vml;
1716             this._ = {
1717                 tx: 0,
1718                 ty: 0,
1719                 rt: {deg:0},
1720                 sx: 1,
1721                 sy: 1
1722             };
1723         };
1724         Element[proto].rotate = function (deg, cx, cy) {
1725             if (deg == null) {
1726                 if (this._.rt.cx) {
1727                     return [this._.rt.deg, this._.rt.cx, this._.rt.cy].join(" ");
1728                 }
1729                 return this._.rt.deg;
1730             }
1731             deg = (deg + "").split(separator);
1732             if (deg[ln] - 1) {
1733                 cx = win[pf](deg[1]);
1734                 cy = win[pf](deg[2]);
1735             }
1736             deg = win[pf](deg[0]);
1737             if (cx != null) {
1738                 this._.rt.deg = deg;
1739             } else {
1740                 this._.rt.deg += deg;
1741             }
1742             cy == null && (cx = null);
1743             this._.rt.cx = cx;
1744             this._.rt.cy = cy;
1745             this.setBox(this.attrs, cx, cy);
1746             this.Group.style.rotation = this._.rt.deg;
1747             // gradient fix for rotation. TODO
1748             // var fill = (this.shape || this.node).getElementsByTagName("fill");
1749             // fill = fill[0] || {};
1750             // var b = ((360 - this._.rt.deg) - 270) % 360;
1751             // !R.is(fill.angle, "undefined") && (fill.angle = b);
1752             return this;
1753         };
1754         Element[proto].setBox = function (params, cx, cy) {
1755             var gs = this.Group.style,
1756                 os = (this.shape && this.shape.style) || this.node.style;
1757             params = params || {};
1758             for (var i in params) if (params.hasOwnProperty(i)) {
1759                 this.attrs[i] = params[i];
1760             }
1761             cx = cx || this._.rt.cx;
1762             cy = cy || this._.rt.cy;
1763             var attr = this.attrs,
1764                 x,
1765                 y,
1766                 w,
1767                 h;
1768             switch (this.type) {
1769                 case "circle":
1770                     x = attr.cx - attr.r;
1771                     y = attr.cy - attr.r;
1772                     w = h = attr.r * 2;
1773                     break;
1774                 case "ellipse":
1775                     x = attr.cx - attr.rx;
1776                     y = attr.cy - attr.ry;
1777                     w = attr.rx * 2;
1778                     h = attr.ry * 2;
1779                     break;
1780                 case "rect":
1781                 case "image":
1782                     x = attr.x;
1783                     y = attr.y;
1784                     w = attr.width || 0;
1785                     h = attr.height || 0;
1786                     break;
1787                 case "text":
1788                     this.textpath.v = ["m", ~~(attr.x + .5), ", ", ~~(attr.y - 2 + .5), "l", ~~(attr.x + .5) + 1, ", ", ~~(attr.y - 2 + .5)].join("");
1789                     x = attr.x - ~~(this.W / 2 + .5);
1790                     y = attr.y - this.H / 2;
1791                     w = this.W;
1792                     h = this.H;
1793                     break;
1794                 case "path":
1795                     if (!this.attrs.path) {
1796                         x = 0;
1797                         y = 0;
1798                         w = this.paper.width;
1799                         h = this.paper.height;
1800                     } else {
1801                         var dim = pathDimensions(this.attrs.path);
1802                         x = dim.x;
1803                         y = dim.y;
1804                         w = dim.width;
1805                         h = dim.height;
1806                     }
1807                     break;
1808                 default:
1809                     x = 0;
1810                     y = 0;
1811                     w = this.paper.width;
1812                     h = this.paper.height;
1813                     break;
1814             }
1815             cx = (cx == null) ? x + w / 2 : cx;
1816             cy = (cy == null) ? y + h / 2 : cy;
1817             var left = cx - this.paper.width / 2,
1818                 top = cy - this.paper.height / 2;
1819             if (this.type == "path" || this.type == "text") {
1820                 (gs.left != left + "px") && (gs.left = left + "px");
1821                 (gs.top != top + "px") && (gs.top = top + "px");
1822                 this.X = this.type == "text" ? x : -left;
1823                 this.Y = this.type == "text" ? y : -top;
1824                 this.W = w;
1825                 this.H = h;
1826                 (os.left != -left + "px") && (os.left = -left + "px");
1827                 (os.top != -top + "px") && (os.top = -top + "px");
1828             } else {
1829                 (gs.left != left + "px") && (gs.left = left + "px");
1830                 (gs.top != top + "px") && (gs.top = top + "px");
1831                 this.X = x;
1832                 this.Y = y;
1833                 this.W = w;
1834                 this.H = h;
1835                 (gs.width != this.paper.width + "px") && (gs.width = this.paper.width + "px");
1836                 (gs.height != this.paper.height + "px") && (gs.height = this.paper.height + "px");
1837                 (os.left != x - left + "px") && (os.left = x - left + "px");
1838                 (os.top != y - top + "px") && (os.top = y - top + "px");
1839                 (os.width != w + "px") && (os.width = w + "px");
1840                 (os.height != h + "px") && (os.height = h + "px");
1841                 var arcsize = (+params.r || 0) / (Math.min(w, h));
1842                 if (this.type == "rect" && this.arcsize != arcsize && (arcsize || this.arcsize)) {
1843                     // We should replace element with the new one
1844                     var o = createNode(arcsize ? "roundrect" : "rect");
1845                     o.arcsize = arcsize;
1846                     this.Group.appendChild(o);
1847                     this.node.parentNode.removeChild(this.node);
1848                     this.node = o;
1849                     this.arcsize = arcsize;
1850                     setFillAndStroke(this, this.attrs);
1851                     this.setBox(this.attrs);
1852                 }
1853             }
1854         };
1855         Element[proto].hide = function () {
1856             this.Group.style.display = "none";
1857             return this;
1858         };
1859         Element[proto].show = function () {
1860             this.Group.style.display = "block";
1861             return this;
1862         };
1863         Element[proto].getBBox = function () {
1864             if (this.type == "path") {
1865                 return pathDimensions(this.attrs.path);
1866             }
1867             return {
1868                 x: this.X + (this.bbx || 0),
1869                 y: this.Y,
1870                 width: this.W,
1871                 height: this.H
1872             };
1873         };
1874         Element[proto].remove = function () {
1875             this[0].parentNode.removeChild(this[0]);
1876             this.Group.parentNode.removeChild(this.Group);
1877             this.shape && this.shape.parentNode.removeChild(this.shape);
1878         };
1879         Element[proto].attr = function () {
1880             if (arguments[ln] == 1 && R.is(arguments[0], "string")) {
1881                 if (arguments[0] == "translation") {
1882                     return this.translate();
1883                 }
1884                 if (arguments[0] == "rotation") {
1885                     return this.rotate();
1886                 }
1887                 if (arguments[0] == "scale") {
1888                     return this.scale();
1889                 }
1890                 return this.attrs[arguments[0]];
1891             }
1892             if (this.attrs && arguments[ln] == 1 && R.is(arguments[0], "array")) {
1893                 var values = {};
1894                 for (var i = 0, ii = arguments[0][ln]; i < ii; i++) {
1895                     values[arguments[0][i]] = this.attrs[arguments[0][i]];
1896                 };
1897                 return values;
1898             }
1899             var params;
1900             if (arguments[ln] == 2) {
1901                 params = {};
1902                 params[arguments[0]] = arguments[1];
1903             }
1904             if (arguments[ln] == 1 && R.is(arguments[0], "object")) {
1905                 params = arguments[0];
1906             }
1907             if (params) {
1908                 if (params.gradient && (this.type in {circle: 1, ellipse: 1} || (params.gradient + "").charAt(0) != "r")) {
1909                     addGradientFill(this, params.gradient);
1910                 }
1911                 if (params.text && this.type == "text") {
1912                     this.node.string = params.text;
1913                 }
1914                 setFillAndStroke(this, params);
1915                 this.setBox(this.attrs);
1916             }
1917             return this;
1918         };
1919         Element[proto].toFront = function () {
1920             this.Group.parentNode.appendChild(this.Group);
1921             return this;
1922         };
1923         Element[proto].toBack = function () {
1924             if (this.Group.parentNode.firstChild != this.Group) {
1925                 this.Group.parentNode.insertBefore(this.Group, this.Group.parentNode.firstChild);
1926             }
1927             return this;
1928         };
1929         Element[proto].insertAfter = function (element) {
1930             if (element.Group.nextSibling) {
1931                 element.Group.parentNode.insertBefore(this.Group, element.Group.nextSibling);
1932             } else {
1933                 element.Group.parentNode.appendChild(this.Group);
1934             }
1935             return this;
1936         };
1937         Element[proto].insertBefore = function (element) {
1938             element.Group.parentNode.insertBefore(this.Group, element.Group);
1939             return this;
1940         };
1941
1942         var theCircle = function (vml, x, y, r) {
1943             var g = createNode("group"),
1944                 o = createNode("oval"),
1945                 ol = o.style;
1946             g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
1947             g.coordsize = vml.coordsize;
1948             g.coordorigin = vml.coordorigin;
1949             g.appendChild(o);
1950             var res = new Element(o, g, vml);
1951             res.type = "circle";
1952             setFillAndStroke(res, {stroke: "#000", fill: "none"});
1953             res.attrs.cx = x;
1954             res.attrs.cy = y;
1955             res.attrs.r = r;
1956             res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2});
1957             vml.canvas.appendChild(g);
1958             return res;
1959         };
1960         var theRect = function (vml, x, y, w, h, r) {
1961             var g = createNode("group"),
1962                 o = createNode(r ? "roundrect" : "rect"),
1963                 arcsize = (+r || 0) / (Math.min(w, h));
1964             o.arcsize = arcsize;
1965             g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
1966             g.coordsize = vml.coordsize;
1967             g.coordorigin = vml.coordorigin;
1968             g.appendChild(o);
1969             var res = new Element(o, g, vml);
1970             res.type = "rect";
1971             setFillAndStroke(res, {stroke: "#000"});
1972             res.arcsize = arcsize;
1973             res.setBox({x: x, y: y, width: w, height: h, r: +r});
1974             vml.canvas.appendChild(g);
1975             return res;
1976         };
1977         var theEllipse = function (vml, x, y, rx, ry) {
1978             var g = createNode("group"),
1979                 o = createNode("oval"),
1980                 ol = o.style;
1981             g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
1982             g.coordsize = vml.coordsize;
1983             g.coordorigin = vml.coordorigin;
1984             g.appendChild(o);
1985             var res = new Element(o, g, vml);
1986             res.type = "ellipse";
1987             setFillAndStroke(res, {stroke: "#000"});
1988             res.attrs.cx = x;
1989             res.attrs.cy = y;
1990             res.attrs.rx = rx;
1991             res.attrs.ry = ry;
1992             res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2});
1993             vml.canvas.appendChild(g);
1994             return res;
1995         };
1996         var theImage = function (vml, src, x, y, w, h) {
1997             var g = createNode("group"),
1998                 o = createNode("image"),
1999                 ol = o.style;
2000             g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
2001             g.coordsize = vml.coordsize;
2002             g.coordorigin = vml.coordorigin;
2003             o.src = src;
2004             g.appendChild(o);
2005             var res = new Element(o, g, vml);
2006             res.type = "image";
2007             res.attrs.src = src;
2008             res.attrs.x = x;
2009             res.attrs.y = y;
2010             res.attrs.w = w;
2011             res.attrs.h = h;
2012             res.setBox({x: x, y: y, width: w, height: h});
2013             vml.canvas.appendChild(g);
2014             return res;
2015         };
2016         var theText = function (vml, x, y, text) {
2017             var g = createNode("group"),
2018                 el = createNode("shape"),
2019                 ol = el.style,
2020                 path = createNode("path"),
2021                 ps = path.style,
2022                 o = createNode("textpath");
2023             g.style.cssText = "position:absolute;left:0;top:0;width:" + vml.width + "px;height:" + vml.height + "px";
2024             g.coordsize = vml.coordsize;
2025             g.coordorigin = vml.coordorigin;
2026             path.v = R.format("m{0},{1}l{2},{1}", ~~(x + .5), ~~(y + .5), ~~(x + .5) + 1);
2027             path.textpathok = true;
2028             ol.width = vml.width;
2029             ol.height = vml.height;
2030             o.string = text;
2031             o.on = true;
2032             el.appendChild(o);
2033             el.appendChild(path);
2034             g.appendChild(el);
2035             var res = new Element(o, g, vml);
2036             res.shape = el;
2037             res.textpath = path;
2038             res.type = "text";
2039             res.attrs.text = text;
2040             res.attrs.x = x;
2041             res.attrs.y = y;
2042             res.attrs.w = 1;
2043             res.attrs.h = 1;
2044             setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000"});
2045             res.setBox();
2046             vml.canvas.appendChild(g);
2047             return res;
2048         };
2049         var setSize = function (width, height) {
2050             var cs = this.canvas.style;
2051             this.width = win[pf](width || this.width);
2052             this.height = win[pf](height || this.height);
2053             cs.width = this.width + "px";
2054             cs.height = this.height + "px";
2055             cs.clip = "rect(0 " + this.width + "px " + this.height + "px 0)";
2056             this.coordsize = this.width + " " + this.height;
2057             return this;
2058         };
2059         doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
2060         try {
2061             !doc.namespaces.rvml && doc.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
2062             var createNode = function (tagName) {
2063                 return doc.createElement('<rvml:' + tagName + ' class="rvml">');
2064             };
2065         } catch (e) {
2066             var createNode = function (tagName) {
2067                 return doc.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
2068             };
2069         }
2070         var create = function () {
2071             var con = getContainer[ap](null, arguments),
2072                 container = con.container,
2073                 height = con.height,
2074                 s,
2075                 width = con.width,
2076                 x = con.x,
2077                 y = con.y;
2078             if (!container) {
2079                 throw new Error("VML container not found.");
2080             }
2081             var res = {},
2082                 c = res.canvas = doc.createElement("div"),
2083                 cs = c.style;
2084             width = win[pf](width) || 512;
2085             height = win[pf](height) || 342;
2086             res.width = width;
2087             res.height = height;
2088             res.coordsize = width + " " + height;
2089             res.coordorigin = "0 0";
2090             res.span = doc.createElement("span");
2091             res.span.style.cssText = "position:absolute;left:-9999px;top:-9999px;padding:0;margin:0;line-height:1;display:inline;";
2092             c.appendChild(res.span);
2093             cs.cssText = R.format("width:{0}px;height:{1}px;position:absolute;clip:rect(0 {0}px {1}px 0)", width, height);
2094             if (container == 1) {
2095                 doc.body.appendChild(c);
2096                 cs.left = x + "px";
2097                 cs.top = y + "px";
2098                 container = {
2099                     style: {
2100                         width: width,
2101                         height: height
2102                     }
2103                 };
2104             } else {
2105                 container.style.width = width;
2106                 container.style.height = height;
2107                 if (container.firstChild) {
2108                     container.insertBefore(c, container.firstChild);
2109                 } else {
2110                     container.appendChild(c);
2111                 }
2112             }
2113             for (var prop in paper) if (paper.hasOwnProperty(prop)) {
2114                 res[prop] = paper[prop];
2115             }
2116             plugins.call(res, res, R.fn);
2117             res.clear = function () {
2118                 while (c.firstChild) {
2119                     c.removeChild(c.firstChild);
2120                 }
2121             };
2122             res.raphael = R;
2123             return res;
2124         };
2125         paper.remove = function () {
2126             this.canvas.parentNode.removeChild(this.canvas);
2127         };
2128     }
2129
2130     // rest
2131     // Safari or Chrome (WebKit) rendering bug workaround method
2132     if ({"Apple Computer, Inc.": 1, "Google Inc.": 1}[navigator.vendor]) {
2133         paper.safari = function () {
2134             var rect = this.rect(-99, -99, this.width + 99, this.height + 99);
2135             setTimeout(function () {rect.remove();});
2136         };
2137     } else {
2138         paper.safari = function () {};
2139     }
2140
2141     // Events
2142     var addEvent = (function () {
2143         if (doc.addEventListener) {
2144             return function (obj, type, fn, element) {
2145                 var f = function (e) {
2146                     return fn.call(element, e);
2147                 };
2148                 obj.addEventListener(type, f, false);
2149                 return function () {
2150                     obj.removeEventListener(type, f, false);
2151                     return true;
2152                 };
2153             };
2154         } else if (doc.attachEvent) {
2155             return function (obj, type, fn, element) {
2156                 var f = function (e) {
2157                     return fn.call(element, e || win.event);
2158                 };
2159                 obj.attachEvent("on" + type, f);
2160                 var detacher = function () {
2161                     obj.detachEvent("on" + type, f);
2162                     return true;
2163                 };
2164                 if (type == "mouseover") {
2165                     obj.attachEvent("onmouseenter", f);
2166                     return function () {
2167                         obj.detachEvent("onmouseenter", f);
2168                         return detacher();
2169                     };
2170                 } else if (type == "mouseout") {
2171                     obj.attachEvent("onmouseleave", f);
2172                     return function () {
2173                         obj.detachEvent("onmouseleave", f);
2174                         return detacher();
2175                     };
2176                 }
2177                 return detacher;
2178             };
2179         }
2180     })();
2181     for (var i = events[ln]; i--;) {
2182         (function (eventName) {
2183             Element[proto][eventName] = function (fn) {
2184                 if (R.is(fn, "function")) {
2185                     this.events = this.events || {};
2186                     this.events[eventName] = this.events[eventName] || {};
2187                     this.events[eventName][fn] = this.events[eventName][fn] || [];
2188                     this.events[eventName][fn].push(addEvent(this.shape || this.node, eventName, fn, this));
2189                 }
2190                 return this;
2191             };
2192             Element[proto]["un" + eventName] = function (fn) {
2193                 this.events &&
2194                 this.events[eventName] &&
2195                 this.events[eventName][fn] &&
2196                 this.events[eventName][fn][ln] &&
2197                 this.events[eventName][fn].shift()() &&
2198                 !this.events[eventName][fn][ln] &&
2199                 delete this.events[eventName][fn];
2200             };
2201
2202         })(events[i]);
2203     }
2204     paper.circle = function (x, y, r) {
2205         return theCircle(this, x || 0, y || 0, r || 0);
2206     };
2207     paper.rect = function (x, y, w, h, r) {
2208         return theRect(this, x || 0, y || 0, w || 0, h || 0, r || 0);
2209     };
2210     paper.ellipse = function (x, y, rx, ry) {
2211         return theEllipse(this, x || 0, y || 0, rx || 0, ry || 0);
2212     };
2213     paper.path = function (pathString) {
2214         pathString && !R.is(pathString, "string") && !R.is(pathString[0], "array") && (pathString += "");
2215         return thePath(R.format[ap](R, arguments), this);
2216     };
2217     paper.image = function (src, x, y, w, h) {
2218         return theImage(this, src || "about:blank", x || 0, y || 0, w || 0, h || 0);
2219     };
2220     paper.text = function (x, y, text) {
2221         return theText(this, x || 0, y || 0, text || "");
2222     };
2223     paper.set = function (itemsArray) {
2224         arguments[ln] > 1 && (itemsArray = Array[proto].splice.call(arguments, 0, arguments[ln]));
2225         return new Set(itemsArray);
2226     };
2227     paper.setSize = setSize;
2228     Element[proto].stop = function () {
2229         clearTimeout(this.animation_in_progress);
2230         return this;
2231     };
2232     Element[proto].scale = function (x, y, cx, cy) {
2233         if (x == null && y == null) {
2234             return {x: this._.sx, y: this._.sy, toString: function () { return this.x + " " + this.y; }};
2235         }
2236         y = y || x;
2237         !+y && (y = x);
2238         var dx,
2239             dy,
2240             dcx,
2241             dcy,
2242             a = this.attrs;
2243         if (x != 0) {
2244             var bb = this.getBBox(),
2245                 rcx = bb.x + bb.width / 2,
2246                 rcy = bb.y + bb.height / 2,
2247                 kx = x / this._.sx,
2248                 ky = y / this._.sy;
2249             cx = (+cx || cx == 0) ? cx : rcx;
2250             cy = (+cy || cy == 0) ? cy : rcy;
2251             var dirx = ~~(x / Math.abs(x)),
2252                 diry = ~~(y / Math.abs(y)),
2253                 s = this.node.style,
2254                 ncx = cx + (rcx - cx) * dirx * kx,
2255                 ncy = cy + (rcy - cy) * diry * ky;
2256             switch (this.type) {
2257                 case "rect":
2258                 case "image":
2259                     var neww = a.width * dirx * kx,
2260                         newh = a.height * diry * ky,
2261                         newr = a.r * Math.min(kx, ky),
2262                         newx = ncx - neww / 2,
2263                         newy = ncy - newh / 2;
2264                     this.attr({
2265                         width: neww,
2266                         height: newh,
2267                         x: newx,
2268                         y: newy,
2269                         r: newr
2270                     });
2271                     break;
2272                 case "circle":
2273                 case "ellipse":
2274                     this.attr({
2275                         rx: a.rx * kx,
2276                         ry: a.ry * ky,
2277                         r: a.r * Math.min(kx, ky),
2278                         cx: ncx,
2279                         cy: ncy
2280                     });
2281                     break;
2282                 case "path":
2283                     var path = pathToRelative(a.path),
2284                         skip = true;
2285                     for (var i = 0, ii = path[ln]; i < ii; i++) {
2286                         var p = path[i];
2287                         if (p[0].toUpperCase() == "M" && skip) {
2288                             continue;
2289                         } else {
2290                             skip = false;
2291                         }
2292                         if (R.svg && p[0].toUpperCase() == "A") {
2293                             p[path[i][ln] - 2] *= kx;
2294                             p[path[i][ln] - 1] *= ky;
2295                             p[1] *= kx;
2296                             p[2] *= ky;
2297                             p[5] = +(dirx + diry ? !!+p[5] : !+p[5]);
2298                         } else {
2299                             for (var j = 1, jj = p[ln]; j < jj; j++) {
2300                                 p[j] *= (j % 2) ? kx : ky;
2301                             }
2302                         }
2303                     }
2304                     var dim2 = pathDimensions(path),
2305                         dx = ncx - dim2.x - dim2.width / 2,
2306                         dy = ncy - dim2.y - dim2.height / 2;
2307                     path[0][1] += dx;
2308                     path[0][2] += dy;
2309
2310                     this.attr({path: path});
2311                 break;
2312             }
2313             if (this.type in {text: 1, image:1} && (dirx != 1 || diry != 1)) {
2314                 if (this.transformations) {
2315                     this.transformations[2] = "scale(".concat(dirx, ",", diry, ")");
2316                     this.node.setAttribute("transform", this.transformations.join(" "));
2317                     dx = (dirx == -1) ? -a.x - (neww || 0) : a.x;
2318                     dy = (diry == -1) ? -a.y - (newh || 0) : a.y;
2319                     this.attr({x: dx, y: dy});
2320                     a.fx = dirx - 1;
2321                     a.fy = diry - 1;
2322                 } else {
2323                     this.node.filterMatrix = " progid:DXImageTransform.Microsoft.Matrix(M11=".concat(dirx,
2324                         ", M12=0, M21=0, M22=", diry,
2325                         ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')");
2326                     s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
2327                 }
2328             } else {
2329                 if (this.transformations) {
2330                     this.transformations[2] = "";
2331                     this.node.setAttribute("transform", this.transformations.join(" "));
2332                     a.fx = 0;
2333                     a.fy = 0;
2334                 } else {
2335                     this.node.filterMatrix = "";
2336                     s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
2337                 }
2338             }
2339             a.scale = [x, y, cx, cy].join(" ");
2340             this._.sx = x;
2341             this._.sy = y;
2342         }
2343         return this;
2344     };
2345
2346     // animation easing formulas
2347     R.easing_formulas = {
2348         linear: function (n) {
2349             return n;
2350         },
2351         "<": function (n) {
2352             return Math.pow(n, 3);
2353         },
2354         ">": function (n) {
2355             return Math.pow(n - 1, 3) + 1;
2356         },
2357         "<>": function (n) {
2358             n = n * 2;
2359             if (n < 1) {
2360                 return Math.pow(n, 3) / 2;
2361             }
2362             n -= 2;
2363             return (Math.pow(n, 3) + 2) / 2;
2364         },
2365         backIn: function (n) {
2366             var s = 1.70158;
2367             return n * n * ((s + 1) * n - s);
2368         },
2369         backOut: function (n) {
2370             n = n - 1;
2371             var s = 1.70158;
2372             return n * n * ((s + 1) * n + s) + 1;
2373         },
2374         elastic: function (n) {
2375             if (n == 0 || n == 1) {
2376                 return n;
2377             }
2378             var p = .3,
2379                 s = p / 4;
2380             return Math.pow(2, -10 * n) * Math.sin((n - s) * (2 * Math.PI) / p) + 1;
2381         },
2382         bounce: function (n) {
2383             var s = 7.5625,
2384                 p = 2.75,
2385                 l;
2386             if (n < (1 / p)) {
2387                 l = s * n * n;
2388             } else {
2389                 if (n < (2 / p)) {
2390                     n -= (1.5 / p);
2391                     l = s * n * n + .75;
2392                 } else {
2393                     if (n < (2.5 / p)) {
2394                         n -= (2.25 / p);
2395                         l = s * n * n + .9375;
2396                     } else {
2397                         n -= (2.625 / p);
2398                         l = s * n * n + .984375;
2399                     }
2400                 }
2401             }
2402             return l;
2403         }
2404     };
2405
2406     Element[proto].animate = function (params, ms, easing, callback) {
2407         clearTimeout(this.animation_in_progress);
2408         if (R.is(easing, "function") || !easing) {
2409             callback = easing || null;
2410         }
2411         var from = {},
2412             to = {},
2413             diff = {},
2414             t = {x: 0, y: 0};
2415         for (var attr in params) if (params.hasOwnProperty(attr)) {
2416             if (attr in availableAnimAttrs) {
2417                 from[attr] = this.attr(attr);
2418                 (from[attr] == null) && (from[attr] = availableAttrs[attr]);
2419                 to[attr] = params[attr];
2420                 switch (availableAnimAttrs[attr]) {
2421                     case "number":
2422                         diff[attr] = (to[attr] - from[attr]) / ms;
2423                         break;
2424                     case "colour":
2425                         from[attr] = R.getRGB(from[attr]);
2426                         var toColour = R.getRGB(to[attr]);
2427                         diff[attr] = {
2428                             r: (toColour.r - from[attr].r) / ms,
2429                             g: (toColour.g - from[attr].g) / ms,
2430                             b: (toColour.b - from[attr].b) / ms
2431                         };
2432                         break;
2433                     case "path":
2434                         var pathes = path2curve(from[attr], to[attr]);
2435                         from[attr] = pathes[0];
2436                         to[attr] = pathes[1];
2437                         diff[attr] = [];
2438                         for (var i = 0, ii = from[attr][ln]; i < ii; i++) {
2439                             diff[attr][i] = [0];
2440                             for (var j = 1, jj = from[attr][i][ln]; j < jj; j++) {
2441                                 diff[attr][i][j] = (to[attr][i][j] - from[attr][i][j]) / ms;
2442                             }
2443                         }
2444                         break;
2445                     case "csv":
2446                         var values = (params[attr] + "").split(separator),
2447                             from2 = (from[attr] + "").split(separator);
2448                         switch (attr) {
2449                             case "translation":
2450                                 from[attr] = [0, 0];
2451                                 diff[attr] = [values[0] / ms, values[1] / ms];
2452                             break;
2453                             case "rotation":
2454                                 from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
2455                                 diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
2456                             break;
2457                             case "scale":
2458                                 params[attr] = values;
2459                                 from[attr] = (from[attr] + "").split(separator);
2460                                 diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][1]) / ms, 0, 0];
2461                             break;
2462                             case "clip-rect":
2463                                 from[attr] = (from[attr] + "").split(separator);
2464                                 diff[attr] = [];
2465                                 var i = 4;
2466                                 while (i--) {
2467                                     diff[attr][i] = (values[i] - from[attr][i]) / ms;
2468                                 }
2469                             break;
2470                         }
2471                         to[attr] = values;
2472                 }
2473             }
2474         }
2475         var start = +new Date,
2476             prev = 0,
2477             upto255 = function (color) {
2478                 return color > 255 ? 255 : color;
2479             },
2480             that = this;
2481         (function tick() {
2482             var time = new Date - start,
2483                 set = {},
2484                 now;
2485             if (time < ms) {
2486                 var pos = R.easing_formulas[easing] ? R.easing_formulas[easing](time / ms) : time / ms;
2487                 for (var attr in from) if (from.hasOwnProperty(attr)) {
2488                     switch (availableAnimAttrs[attr]) {
2489                         case "number":
2490                             now = +from[attr] + pos * ms * diff[attr];
2491                             break;
2492                         case "colour":
2493                             now = "rgb(" + [
2494                                 upto255(~~(from[attr].r + pos * ms * diff[attr].r + .5)),
2495                                 upto255(~~(from[attr].g + pos * ms * diff[attr].g + .5)),
2496                                 upto255(~~(from[attr].b + pos * ms * diff[attr].b + .5))
2497                             ].join(",") + ")";
2498                             break;
2499                         case "path":
2500                             now = [];
2501                             for (var i = 0, ii = from[attr][ln]; i < ii; i++) {
2502                                 now[i] = [from[attr][i][0]];
2503                                 for (var j = 1, jj = from[attr][i][ln]; j < jj; j++) {
2504                                     now[i][j] = +from[attr][i][j] + pos * ms * diff[attr][i][j];
2505                                 }
2506                                 now[i] = now[i].join(" ");
2507                             }
2508                             now = now.join(" ");
2509                             break;
2510                         case "csv":
2511                             switch (attr) {
2512                                 case "translation":
2513                                     var x = diff[attr][0] * (time - prev),
2514                                         y = diff[attr][1] * (time - prev);
2515                                     t.x += x;
2516                                     t.y += y;
2517                                     now = [x, y].join(" ");
2518                                 break;
2519                                 case "rotation":
2520                                     now = +from[attr][0] + pos * ms * diff[attr][0];
2521                                     from[attr][1] && (now += "," + from[attr][1] + "," + from[attr][2]);
2522                                 break;
2523                                 case "scale":
2524                                     now = [+from[attr][0] + pos * ms * diff[attr][0], +from[attr][1] + pos * ms * diff[attr][1], (2 in params[attr] ? params[attr][2] : ""), (3 in params[attr] ? params[attr][3] : "")].join(" ");
2525                                 break;
2526                                 case "clip-rect":
2527                                     now = [];
2528                                     var i = 4;
2529                                     while (i--) {
2530                                         now[i] = +from[attr][i] + pos * ms * diff[attr][i];
2531                                     }
2532                                 break;
2533                             }
2534                             break;
2535                     }
2536                     set[attr] = now;
2537                 }
2538                 that.attr(set);
2539                 that.animation_in_progress = setTimeout(tick);
2540                 R.svg && paper.safari();
2541             } else {
2542                 (t.x || t.y) && that.translate(-t.x, -t.y);
2543                 that.attr(params);
2544                 clearTimeout(that.animation_in_progress);
2545                 R.svg && paper.safari();
2546                 (R.is(callback, "function")) && callback.call(that);
2547             }
2548             prev = time;
2549         })();
2550         return this;
2551     };
2552     Element[proto].translate = function (x, y) {
2553         if (x == null) {
2554             return {x: this._.tx, y: this._.ty};
2555         }
2556         this._.tx += +x;
2557         this._.ty += +y;
2558         switch (this.type) {
2559             case "circle":
2560             case "ellipse":
2561                 this.attr({cx: +x + this.attrs.cx, cy: +y + this.attrs.cy});
2562                 break;
2563             case "rect":
2564             case "image":
2565             case "text":
2566                 this.attr({x: +x + this.attrs.x, y: +y + this.attrs.y});
2567                 break;
2568             case "path":
2569                 var path = pathToRelative(this.attrs.path);
2570                 path[0][1] += +x;
2571                 path[0][2] += +y;
2572                 this.attr({path: path});
2573             break;
2574         }
2575         return this;
2576     };
2577     Element[proto].toString = function () {
2578         return "Rapha\u00ebl\u2019s object";
2579     };
2580     
2581
2582     // Set
2583     var Set = function (items) {
2584         this.items = [];
2585         this[ln] = 0;
2586         if (items) {
2587             for (var i = 0, ii = items[ln]; i < ii; i++) {
2588                 if (items[i] && (items[i].constructor == Element || items[i].constructor == Set)) {
2589                     this[this.items[ln]] = this.items[this.items[ln]] = items[i];
2590                     this[ln]++;
2591                 }
2592             }
2593         }
2594     };
2595     Set[proto].push = function () {
2596         var item,
2597             len;
2598         for (var i = 0, ii = arguments[ln]; i < ii; i++) {
2599             item = arguments[i];
2600             if (item && (item.constructor == Element || item.constructor == Set)) {
2601                 len = this.items[ln];
2602                 this[len] = this.items[len] = item;
2603                 this[ln]++;
2604             }
2605         }
2606         return this;
2607     };
2608     Set[proto].pop = function () {
2609         delete this[this[ln]--];
2610         return this.items.pop();
2611     };
2612     for (var method in Element[proto]) if (Element[proto].hasOwnProperty(method)) {
2613         Set[proto][method] = (function (methodname) {
2614             return function () {
2615                 for (var i = 0, ii = this.items[ln]; i < ii; i++) {
2616                     this.items[i][methodname][ap](this.items[i], arguments);
2617                 }
2618                 return this;
2619             };
2620         })(method);
2621     }
2622     Set[proto].attr = function (name, value) {
2623         if (name && R.is(name, "array") && R.is(name[0], "object")) {
2624             for (var j = 0, jj = name[ln]; j < jj; j++) {
2625                 this.items[j].attr(name[j]);
2626             }
2627         } else {
2628             for (var i = 0, ii = this.items[ln]; i < ii; i++) {
2629                 this.items[i].attr[ap](this.items[i], arguments);
2630             }
2631         }
2632         return this;
2633     };
2634     Set[proto].animate = function (params, ms, easing, callback) {
2635         if (R.is(easing, "function") || !easing) {
2636             callback = easing || null;
2637         }
2638         var len = this.items[ln],
2639             i = len,
2640             set = this;
2641         if (callback) {
2642             var collector = function () {
2643                 !--len && callback.call(set);
2644             };
2645             while (i--) {
2646                 this.items[i].animate(params, ms, easing || collector, collector);
2647             }
2648         } else {
2649             while (i--) {
2650                 this.items[i].animate(params, ms, easing);
2651             }
2652         }
2653         return this;
2654     };
2655     
2656     Set[proto].getBBox = function () {
2657         var x = [],
2658             y = [],
2659             w = [],
2660             h = [];
2661         for (var i = this.items[ln]; i--;) {
2662             var box = this.items[i].getBBox();
2663             x.push(box.x);
2664             y.push(box.y);
2665             w.push(box.x + box.width);
2666             h.push(box.y + box.height);
2667         }
2668         x = Math.min[ap](Math, x);
2669         y = Math.min[ap](Math, y);
2670         return {
2671             x: x,
2672             y: y,
2673             width: Math.max[ap](Math, w) - x,
2674             height: Math.max[ap](Math, h) - y
2675         };
2676     };
2677
2678     R.registerFont = function (font) {
2679         if (!font.face) {
2680             return font;
2681         }
2682         this.fonts = this.fonts || {};
2683         var fontcopy = {
2684                 w: font.w,
2685                 face: {},
2686                 glyphs: {}
2687             },
2688             family = font.face["font-family"];
2689         for (var prop in font.face) if (font.face.hasOwnProperty(prop)) {
2690             fontcopy.face[prop] = font.face[prop];
2691         }
2692         if (this.fonts[family]) {
2693             this.fonts[family].push(fontcopy);
2694         } else {
2695             this.fonts[family] = [fontcopy];
2696         }
2697         if (!font.svg) {
2698             fontcopy.face["units-per-em"] = win[pi](font.face["units-per-em"], 10);
2699             for (var glyph in font.glyphs) if (font.glyphs.hasOwnProperty(glyph)) {
2700                 var path = font.glyphs[glyph];
2701                 fontcopy.glyphs[glyph] = {
2702                     w: path.w,
2703                     k: {},
2704                     d: path.d && "M" + path.d.replace(/[mlcxtrv]/g, function (command) {
2705                             return {l: "L", c: "C", x: "z", t: "m", r: "l", v: "c"}[command] || "M";
2706                         }) + "z"
2707                 };
2708                 if (path.k) {
2709                     for (var k in path.k) if (path.hasOwnProperty(k)) {
2710                         fontcopy.glyphs[glyph].k[k] = path.k[k];
2711                     }
2712                 }
2713             }
2714         }
2715         return font;
2716     };
2717     paper.getFont = function (family, weight, style, stretch) {
2718         stretch = stretch || "normal";
2719         style = style || "normal";
2720         weight = +weight || {normal: 400, bold: 700, lighter: 300, bolder: 800}[weight] || 400;
2721         var font = R.fonts[family];
2722         if (!font) {
2723             var name = new RegExp("(^|\\s)" + family.replace(/[^\w\d\s+!~.:_-]/g, "") + "(\\s|$)", "i");
2724             for (var fontName in R.fonts) if (R.fonts.hasOwnProperty(fontName)) {
2725                 if (name.test(fontName)) {
2726                     font = R.fonts[fontName];
2727                     break;
2728                 }
2729             }
2730         }
2731         var thefont;
2732         if (font) {
2733             for (var i = 0, ii = font[ln]; i < ii; i++) {
2734                 thefont = font[i];
2735                 if (thefont.face["font-weight"] == weight && (thefont.face["font-style"] == style || !thefont.face["font-style"]) && thefont.face["font-stretch"] == stretch) {
2736                     break;
2737                 }
2738             }
2739         }
2740         return thefont;
2741     };
2742     paper.print = function (x, y, string, font, size) {
2743         var out = this.set(),
2744             letters = (string + "").split(""),
2745             shift = 0,
2746             path = "",
2747             scale;
2748         R.is(font, "string") && (font = this.getFont(font));
2749         if (font) {
2750             scale = (size || 16) / font.face["units-per-em"];
2751             for (var i = 0, ii = letters[ln]; i < ii; i++) {
2752                 var prev = i && font.glyphs[letters[i - 1]] || {},
2753                     curr = font.glyphs[letters[i]];
2754                 shift += i ? (prev.w || font.w) + (prev.k && prev.k[letters[i]] || 0) : 0;
2755                 curr && curr.d && out.push(this.path(curr.d).attr({fill: "#000", stroke: "none", translation: [shift, 0]}));
2756             }
2757             out.scale(scale, scale, 0, y).translate(x, (size || 16) / 2);
2758         }
2759         return out;
2760     };
2761
2762     R.format = function (token) {
2763         var args = R.is(arguments[1], "array") ? [0].concat(arguments[1]) : arguments;
2764         token && R.is(token, "string") && args[ln] - 1 && (token = token.replace(/\{(\d+)\}/g, function (str, i) {
2765             return args[++i] == null ? "" : args[i];
2766         }));
2767         return token || "";
2768     };
2769     R.ninja = function () {
2770         var r = window.Raphael, u;
2771         if (oldRaphael.was) {
2772             window.Raphael = oldRaphael.is;
2773         } else {
2774             try {
2775                 delete window.Raphael;
2776             } catch (e) {
2777                 window.Raphael = u;
2778             }
2779         }
2780         return r;
2781     };
2782     R.el = Element[proto];
2783     return R;
2784 })();
Rapheal SVG IE compatible library