git.roojs.org Git - raphael/blob - raphael.js

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