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

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