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