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