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