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

   1 /*
   2  * Raphael 0.6.1 - JavaScript Vector Library
   3  *
   4  * Copyright (c) 2008 Dmitry Baranovskiy (http://raphaeljs.com)
   5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   6  */
   7 var Raphael = (function (type) {
   8         var r = function () {
   9             return r._create.apply(r, arguments);
  10         };
  11         r.version = "0.6.1";
  12         r.type = type;
  13         var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '16px "Arial"', "font-family": '"Arial"', "font-size": "16", gradient: 0, height: 0, opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, translation: "0 0", width: 0, x: 0, y: 0},
  14             availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "number", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
  15             C = {};
  16
  17         if (type == "VML") {
  18             var thePath = function (params, pathString, VML) {
  19                 var g = document.createElement("rvml:group"), gl = g.style;
  20                 gl.position = "absolute";
  21                 gl.left = 0;
  22                 gl.top = 0;
  23                 gl.width = VML.width + "px";
  24                 gl.height = VML.height + "px";
  25                 var el = document.createElement("rvml:shape"), ol = el.style;
  26                 ol.width = VML.width + "px";
  27                 ol.height = VML.height + "px";
  28                 el.path = "";
  29                 if (params["class"]) {
  30                     el.className = params["class"];
  31                 }
  32                 el.coordsize = this.coordsize;
  33                 el.coordorigin = this.coordorigin;
  34                 g.appendChild(el);
  35                 VML.canvas.appendChild(g);
  36                 var p = new Element(el, g, VML);
  37                 p.isAbsolute = true;
  38                 p.type = "path";
  39                 p.path = [];
  40                 p.last = {x: 0, y: 0, bx: 0, by: 0, isAbsolute: true};
  41                 p.Path = "";
  42                 p.absolutely = function () {
  43                     this.isAbsolute = true;
  44                     return this;
  45                 };
  46                 p.relatively = function () {
  47                     this.isAbsolute = false;
  48                     return this;
  49                 };
  50                 p.moveTo = function (x, y) {
  51                     var d = this.isAbsolute?"m":"t";
  52                     d += Math.round(parseFloat(x, 10)) + " " + Math.round(parseFloat(y, 10));
  53                     this.node.path = this.Path += d;
  54                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
  55                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
  56                     this.last.isAbsolute = this.isAbsolute;
  57                     this.attrs.path += (this.isAbsolute ? "M" : "m") + [x, y];
  58                     return this;
  59                 };
  60                 p.lineTo = function (x, y) {
  61                     var d = this.isAbsolute?"l":"r";
  62                     d += Math.round(parseFloat(x, 10)) + " " + Math.round(parseFloat(y, 10));
  63                     this[0].path = this.Path += d;
  64                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
  65                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
  66                     this.last.isAbsolute = this.isAbsolute;
  67                     this.attrs.path += (this.isAbsolute ? "L" : "l") + [x, y];
  68                     return this;
  69                 };
  70                 p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x2, y2) {
  71                     // for more information of where this math came from visit:
  72                     // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
  73                     x2 = (this.isAbsolute ? 0 : this.last.x) + x2;
  74                     y2 = (this.isAbsolute ? 0 : this.last.y) + y2;
  75                     var x1 = this.last.x,
  76                         y1 = this.last.y,
  77                         x = (x1 - x2) / 2,
  78                         y = (y1 - y2) / 2,
  79                         k = (large_arc_flag == sweep_flag ? -1 : 1) *
  80                             Math.sqrt(Math.abs(rx * rx * ry * ry - rx * rx * y * y - ry * ry * x * x) / (rx * rx * y * y + ry * ry * x * x)),
  81                         cx = k * rx * y / ry + (x1 + x2) / 2,
  82                         cy = k * -ry * x / rx + (y1 + y2) / 2,
  83                         d = sweep_flag ? (this.isAbsolute ? "wa" : "wr") : (this.isAbsolute ? "at" : "ar"),
  84                         left = Math.round(cx - rx),
  85                         top = Math.round(cy - ry);
  86                     d += [left, top, Math.round(left + rx * 2), Math.round(top + ry * 2), Math.round(x1), Math.round(y1), Math.round(parseFloat(x2, 10)), Math.round(parseFloat(y2, 10))].join(", ");
  87                     this.node.path = this.Path += d;
  88                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x2, 10);
  89                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y2, 10);
  90                     this.last.isAbsolute = this.isAbsolute;
  91                     this.attrs.path += (this.isAbsolute ? "A" : "a") + [rx, ry, 0, large_arc_flag, sweep_flag, x2, y2];
  92                     return this;
  93                 };
  94                 p.cplineTo = function (x1, y1, w1) {
  95                     if (!w1) {
  96                         return this.lineTo(x1, y1);
  97                     } else {
  98                         var x = Math.round(Math.round(parseFloat(x1, 10) * 100) / 100),
  99                             y = Math.round(Math.round(parseFloat(y1, 10) * 100) / 100),
 100                             w = Math.round(Math.round(parseFloat(w1, 10) * 100) / 100),
 101                             d = this.isAbsolute ? "c" : "v",
 102                             attr = [Math.round(this.last.x) + w, Math.round(this.last.y), x - w, y, x, y],
 103                             svgattr = [this.last.x + w1, this.last.y, x1 - w1, y1, x1, y1];
 104                         d += attr.join(" ") + " ";
 105                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 106                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 107                         this.last.bx = attr[2];
 108                         this.last.by = attr[3];
 109                         this.node.path = this.Path += d;
 110                         this.attrs.path += (this.isAbsolute ? "C" : "c") + svgattr;
 111                         return this;
 112                     }
 113                 };
 114                 p.curveTo = function () {
 115                     var d = this.isAbsolute ? "c" : "v";
 116                     if (arguments.length == 6) {
 117                         this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 118                         this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 119                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[4], 10);
 120                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[5], 10);
 121                         d += [Math.round(parseFloat(arguments[0], 10)),
 122                              Math.round(parseFloat(arguments[1], 10)),
 123                              Math.round(parseFloat(arguments[2], 10)),
 124                              Math.round(parseFloat(arguments[3], 10)),
 125                              Math.round(parseFloat(arguments[4], 10)),
 126                              Math.round(parseFloat(arguments[5], 10))].join(" ") + " ";
 127                         this.last.isAbsolute = this.isAbsolute;
 128                         this.attrs.path += (this.isAbsolute ? "C" : "c") + Array.prototype.splice.call(arguments, 0, arguments.length);
 129                     }
 130                     if (arguments.length == 4) {
 131                         var bx = this.last.x * 2 - this.last.bx;
 132                         var by = this.last.y * 2 - this.last.by;
 133                         this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0], 10);
 134                         this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1], 10);
 135                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 136                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 137                         d += [Math.round(bx), Math.round(by),
 138                              Math.round(parseFloat(arguments[0], 10)),
 139                              Math.round(parseFloat(arguments[1], 10)),
 140                              Math.round(parseFloat(arguments[2], 10)),
 141                              Math.round(parseFloat(arguments[3], 10))].join(" ") + " ";
 142                          this.attrs.path += (this.isAbsolute ? "S" : "s") + Array.prototype.splice.call(arguments, 0, arguments.length);
 143                     }
 144                     this.node.path = this.Path += d;
 145                     return this;
 146                 };
 147                 p.qcurveTo = function () {
 148                     var d = "qb";
 149                     if (arguments.length == 4) {
 150                         this.last.qx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0], 10);
 151                         this.last.qy = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1], 10);
 152                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 153                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 154                         d += [Math.round(this.last.qx),
 155                              Math.round(this.last.qy),
 156                              Math.round(this.last.x),
 157                              Math.round(this.last.y)].join(" ") + " ";
 158                         this.last.isAbsolute = this.isAbsolute;
 159                         this.attrs.path += (this.isAbsolute ? "Q" : "q") + Array.prototype.splice.call(arguments, 0, arguments.length);
 160                     }
 161                     if (arguments.length == 2) {
 162                         this.last.qx = this.last.x * 2 - this.last.qx;
 163                         this.last.qy = this.last.y * 2 - this.last.qy;
 164                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 165                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 166                         d += [Math.round(this.last.qx),
 167                              Math.round(this.last.qy),
 168                              Math.round(this.last.x),
 169                              Math.round(this.last.y)].join(" ") + " ";
 170                          this.attrs.path += (this.isAbsolute ? "T" : "t") + Array.prototype.splice.call(arguments, 0, arguments.length);
 171                     }
 172                     this.node.path = this.Path += d;
 173                     this.path.push({type: "qcurve", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 174                     return this;
 175                 };
 176                 p.addRoundedCorner = function (r, dir) {
 177                     var R = .5522 * r, rollback = this.isAbsolute, o = this;
 178                     if (rollback) {
 179                         this.relatively();
 180                         rollback = function () {
 181                             o.absolutely();
 182                         };
 183                     } else {
 184                         rollback = function () {};
 185                     }
 186                     var actions = {
 187                         l: function () {
 188                             return {
 189                                 u: function () {
 190                                     o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 191                                 },
 192                                 d: function () {
 193                                     o.curveTo(-R, 0, -r, r - R, -r, r);
 194                                 }
 195                             };
 196                         },
 197                         r: function () {
 198                             return {
 199                                 u: function () {
 200                                     o.curveTo(R, 0, r, -(r - R), r, -r);
 201                                 },
 202                                 d: function () {
 203                                     o.curveTo(R, 0, r, r - R, r, r);
 204                                 }
 205                             };
 206                         },
 207                         u: function () {
 208                             return {
 209                                 r: function () {
 210                                     o.curveTo(0, -R, -(R - r), -r, r, -r);
 211                                 },
 212                                 l: function () {
 213                                     o.curveTo(0, -R, R - r, -r, -r, -r);
 214                                 }
 215                             };
 216                         },
 217                         d: function () {
 218                             return {
 219                                 r: function () {
 220                                     o.curveTo(0, R, -(R - r), r, r, r);
 221                                 },
 222                                 l: function () {
 223                                     o.curveTo(0, R, R - r, r, -r, r);
 224                                 }
 225                             };
 226                         }
 227                     };
 228                     actions[dir.charAt(0)]()[dir.charAt(1)]();
 229                     rollback();
 230                     return o;
 231                 };
 232                 p.andClose = function () {
 233                     this.node.path = (this.Path += "x e");
 234                     this.attrs.path += "z";
 235                     return this;
 236                 };
 237                 if (typeof pathString == "string") {
 238                     p.absolutely();
 239                     p.attrs.path = "";
 240                     C.pathfinder(p, pathString);
 241                 }
 242                 p.setBox();
 243                 setFillAndStroke(p, params);
 244                 if (params.gradient) {
 245                     addGrdientFill(p, params.gradient);
 246                 }
 247                 return p;
 248             };
 249             var setFillAndStroke = function (o, params) {
 250                 var s = o[0].style;
 251                 o.attrs = o.attrs || {};
 252                 for (var par in params) {
 253                     o.attrs[par] = params[par];
 254                 }
 255                 if (params.path && o.type == "path") {
 256                     o.Path = "";
 257                     o.path = [];
 258                     C.pathfinder(o, params.path);
 259                 }
 260                 if (params.rotation != null) {
 261                     o.Group.style.rotation = params.rotation;
 262                 }
 263                 if (params.translation) {
 264                     var xy = params.translation.split(/[, ]+/);
 265                     o.translate(xy[0], xy[1]);
 266                 }
 267                 if (params.scale) {
 268                     var xy = params.scale.split(/[, ]+/);
 269                     o.scale(xy[0], xy[1]);
 270                 }
 271                 params["font-family"] && (s.fontFamily = params["font-family"]);
 272                 params["font-size"] && (s.fontSize = params["font-size"]);
 273                 params["font"] && (s.font = params["font"]);
 274                 params["font-weight"] && (s.fontWeight = params["font-weight"]);
 275                 if (typeof params.opacity != "undefined" || typeof params["stroke-width"] != "undefined" || typeof params.fill != "undefined" || typeof params.stroke != "undefined") {
 276                     o = o.shape || o.node;
 277                     var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || document.createElement("rvml:fill");
 278                     if ("fill-opacity" in params || "opacity" in params) {
 279                         fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 280                     }
 281                     if (params.fill) {
 282                         fill.on = true;
 283                     }
 284                     if (fill.on == undefined || params.fill == "none") {
 285                         fill.on = false;
 286                     }
 287                     if (fill.on && params.fill) {
 288                         var isURL = params.fill.match(/^url\(([^\)]+)\)$/i);
 289                         if (isURL) {
 290                             fill.src = isURL[1];
 291                             fill.type = "tile";
 292                         } else {
 293                             fill.color = params.fill;
 294                             fill.src = "";
 295                             fill.type = "solid";
 296                         }
 297                     }
 298                     o.appendChild(fill);
 299                     var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || document.createElement("rvml:stroke");
 300                     if ((params.stroke && params.stroke != "none") || params["stroke-width"] || params["stroke-opacity"] || params["stroke-dasharray"]) {
 301                         stroke.on = true;
 302                     }
 303                     if (params.stroke == "none" || typeof stroke.on == "undefined") {
 304                         stroke.on = false;
 305                     }
 306                     if (stroke.on && params.stroke) {
 307                         stroke.color = params.stroke;
 308                     }
 309                     stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 310                     params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
 311                     stroke.miterlimit = params["stroke-miterlimit"] || 8;
 312                     params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
 313                     params["stroke-width"] && (stroke.weight = (parseFloat(params["stroke-width"], 10) || 1) * 12 / 16);
 314                     if (params["stroke-dasharray"]) {
 315                         var dasharray = {
 316                             "-": "shortdash",
 317                             ".": "shortdot",
 318                             "-.": "shortdashdot",
 319                             "-..": "shortdashdotdot",
 320                             ". ": "dot",
 321                             "- ": "dash",
 322                             "--": "longdash",
 323                             "- .": "dashdot",
 324                             "--.": "longdashdot",
 325                             "--..": "longdashdotdot"
 326                         };
 327                         stroke.dashstyle = dasharray[params["stroke-dasharray"]] || "";
 328                     }
 329                     o.appendChild(stroke);
 330                 }
 331             };
 332             var addGrdientFill = function (o, gradient) {
 333                 o.attrs = o.attrs || {};
 334                 o.attrs.gradient = gradient;
 335                 o = o.shape || o[0];
 336                 var fill = o.getElementsByTagName("fill");
 337                 if (fill.length) {
 338                     fill = fill[0];
 339                 } else {
 340                     fill = document.createElement("rvml:fill");
 341                 }
 342                 if (gradient.dots.length) {
 343                     fill.on = true;
 344                     fill.method = "none";
 345                     fill.type = (gradient.type.toLowerCase() == "linear") ? "gradient" : "gradientTitle";
 346                     if (typeof gradient.dots[0].color != "undefined") {
 347                         fill.color = gradient.dots[0].color || "#000";
 348                     }
 349                     if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") {
 350                         fill.color2 = gradient.dots[gradient.dots.length - 1].color || "#000";
 351                     }
 352                     var colors = [];
 353                     for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
 354                         if (gradient.dots[i].offset) {
 355                             colors.push(gradient.dots[i].offset + " " + gradient.dots[i].color);
 356                         }
 357                     };
 358                     var fillOpacity = gradient.dots[0].opacity || 1;
 359                     var fillOpacity2 = gradient.dots[gradient.dots.length - 1].opacity || 1;
 360                     if (colors) {
 361                         fill.colors.value = colors.join(",");
 362                         fillOpacity2 += fillOpacity;
 363                         fillOpacity = fillOpacity2 - fillOpacity;
 364                         fillOpacity2 -= fillOpacity;
 365                     }
 366                     fill.setAttribute("opacity", fillOpacity);
 367                     fill.setAttribute("opacity2", fillOpacity2);
 368                     if (gradient.vector) {
 369                         var angle = Math.round(Math.atan((parseFloat(gradient.vector[3], 10) - parseFloat(gradient.vector[1], 10)) / (parseFloat(gradient.vector[2], 10) - parseFloat(gradient.vector[0], 10))) * 57.29) || 0;
 370                         fill.angle = 270 - angle;
 371                     }
 372                     if (gradient.type.toLowerCase() == "radial") {
 373                         fill.focus = "100%";
 374                         fill.focusposition = "0.5 0.5";
 375                     }
 376                 }
 377             };
 378             var Element = function (node, group, vml) {
 379                 var Rotation = 0,
 380                     RotX = 0,
 381                     RotY = 0,
 382                     Scale = 1;
 383                 this[0] = node;
 384                 this.node = node;
 385                 this.X = 0;
 386                 this.Y = 0;
 387                 this.attrs = {};
 388                 this.Group = group;
 389                 this.vml = vml;
 390                 this._ = {
 391                     tx: 0,
 392                     ty: 0,
 393                     rt: 0,
 394                     sx: 1,
 395                     sy: 1
 396                 };
 397             };
 398             Element.prototype.rotate = function (deg, isAbsolute) {
 399                 if (deg == undefined) {
 400                     return this._.rt;
 401                 }
 402                 if (isAbsolute) {
 403                     this._.rt = deg;
 404                 } else {
 405                     this._.rt += deg;
 406                 }
 407                 this.Group.style.rotation = this._.rt;
 408                 return this;
 409             };
 410             Element.prototype.setBox = function (params) {
 411                 var gs = this.Group.style,
 412                     os = this[0].style;
 413                 for (var i in params) {
 414                     this.attrs[i] = params[i];
 415                 }
 416                 var attr = this.attrs, x, y, w, h;
 417                 switch (this.type) {
 418                     case "circle":
 419                         x = attr.cx - attr.r;
 420                         y = attr.cy - attr.r;
 421                         w = h = attr.r * 2;
 422                         break;
 423                     case "ellipse":
 424                         x = attr.cx - attr.rx;
 425                         y = attr.cy - attr.ry;
 426                         w = attr.rx * 2;
 427                         h = attr.ry * 2;
 428                         break;
 429                     case "rect":
 430                     case "image":
 431                         x = attr.x;
 432                         y = attr.y;
 433                         w = attr.width || 0;
 434                         h = attr.height || 0;
 435                         break;
 436                     case "text":
 437                         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("");
 438                         return;
 439                     case "path":
 440                         if (!this.attrs.path) {
 441                             x = y = w = h = 0;
 442                         } else {
 443                             var dim = Raphael.pathDimensions(this.attrs.path),
 444                             x = dim.x;
 445                             y = dim.y;
 446                             w = dim.width;
 447                             h = dim.height;
 448                         }
 449                         break;
 450                     default:
 451                         x = 0;
 452                         y = 0;
 453                         w = this.vml.width;
 454                         h = this.vml.height;
 455                         break;
 456                 }
 457                 if (this.type == "path") {
 458                     var left = Math.round(this.vml.width / 2 - w / 2 - x),
 459                         top = Math.round(this.vml.height / 2 - h / 2 - y);
 460                     gs.left = - left + "px";
 461                     gs.top = - top + "px";
 462                     this.X = left;
 463                     this.Y = top;
 464                     this.W = w;
 465                     this.H = h;
 466                     os.top = top + "px";
 467                     os.left = left + "px";
 468                 } else {
 469                     var left = this.vml.width / 2 - w / 2,
 470                         top = this.vml.height / 2 - h / 2;
 471                     gs.position = "absolute";
 472                     gs.left = x - left + "px";
 473                     gs.top = y - top + "px";
 474                     this.X = x - left;
 475                     this.Y = y - top;
 476                     this.W = w;
 477                     this.H = h;
 478                     gs.width = this.vml.width + "px";
 479                     gs.height = this.vml.height + "px";
 480                     os.position = "absolute";
 481                     os.top = top + "px";
 482                     os.left = left + "px";
 483                     os.width = w + "px";
 484                     os.height = h + "px";
 485                 }
 486             };
 487             Element.prototype.hide = function () {
 488                 this.Group.style.display = "none";
 489                 return this;
 490             };
 491             Element.prototype.show = function () {
 492                 this.Group.style.display = "block";
 493                 return this;
 494             };
 495             Element.prototype.translate = function (x, y) {
 496                 if (x == undefined && y == undefined) {
 497                     return {x: this._.tx, y: this._.ty};
 498                 }
 499                 this._.tx += +x;
 500                 this._.ty += +y;
 501                 if (this.type == "path") {
 502                     var path = this.attrs.path;
 503                     path = Raphael.pathToRelative(path);
 504                     path[0][1] += +x;
 505                     path[0][2] += +y;
 506                     this.attr({path: path.join(" ")});
 507                 }
 508                 this.setBox({x: this._.tx, y: this._.ty});
 509                 return this;
 510             };
 511             Element.prototype.getBBox = function () {
 512                 return {
 513                     x: this.X,
 514                     y: this.Y,
 515                     width: this.W,
 516                     height: this.H
 517                 };
 518             };
 519             Element.prototype.remove = function () {
 520                 this[0].parentNode.removeChild(this[0]);
 521                 this.Group.parentNode.removeChild(this.Group);
 522                 this.shape && this.shape.parentNode.removeChild(this.shape);
 523             };
 524             Element.prototype.attr = function () {
 525                 if (arguments.length == 1 && typeof arguments[0] == "string") {
 526                     return this.attrs[arguments[0]];
 527                 }
 528                 if (this.attrs && arguments.length == 1 && arguments[0] instanceof Array) {
 529                     var values = {};
 530                     for (var i = 0, ii = arguments[0].length; i < ii; i++) {
 531                         values[arguments[0][i]] = this.attrs[arguments[0][i]];
 532                     };
 533                     return values;
 534                 }
 535                 if (this[0].tagName.toLowerCase() == "group") {
 536                     var children = this[0].childNodes;
 537                     this.attrs = this.attrs || {};
 538                     if (arguments.length == 2) {
 539                         this.attrs[arguments[0]] = arguments[1];
 540                     } else if (arguments.length == 1 || typeof arguments[0] == "object") {
 541                         for (var j in arguments[0]) {
 542                             this.attrs[j] = arguments[0][j];
 543                         }
 544                     }
 545                     for (var i = 0, ii = children.length; i < ii; i++) {
 546                         this.attr.apply(new item(children[i], this[0], this.vml), arguments);
 547                     }
 548                 } else {
 549                     var params;
 550                     if (arguments.length == 2) {
 551                         params = {};
 552                         params[arguments[0]] = arguments[1];
 553                     }
 554                     if (arguments.length == 1 && typeof arguments[0] == "object") {
 555                         params = arguments[0];
 556                     }
 557                     if (params) {
 558                         setFillAndStroke(this, params);
 559                         this.setBox(params);
 560                         if (params.gradient) {
 561                             addGrdientFill(this, params.gradient);
 562                         }
 563                         if (params.text && this.type == "text") {
 564                             this[0].string = params.text;
 565                         }
 566                         if (params.id) {
 567                             this[0].id = params.id;
 568                         }
 569                     }
 570                 }
 571                 return this;
 572             };
 573             Element.prototype.toFront = function () {
 574                 this.Group.parentNode.appendChild(this.Group);
 575                 return this;
 576             };
 577             Element.prototype.toBack = function () {
 578                 if (this.Group.parentNode.firstChild != this.Group) {
 579                     this.Group.parentNode.insertBefore(this.Group, this.Group.parentNode.firstChild);
 580                 }
 581                 return this;
 582             };
 583             var theCircle = function (vml, x, y, r) {
 584                 var g = document.createElement("rvml:group");
 585                 var o = document.createElement("rvml:oval");
 586                 g.appendChild(o);
 587                 vml.canvas.appendChild(g);
 588                 var res = new Element(o, g, vml);
 589                 setFillAndStroke(res, {stroke: "#000", fill: "none"});
 590                 res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2});
 591                 res.attrs.cx = x;
 592                 res.attrs.cy = y;
 593                 res.attrs.r = r;
 594                 res.type = "circle";
 595                 return res;
 596             };
 597             var theRect = function (vml, x, y, w, h, r) {
 598                 var g = document.createElement("rvml:group");
 599                 var o = document.createElement(r ? "rvml:roundrect" : "rvml:rect");
 600                 if (r) {
 601                     o.arcsize = r / (Math.min(w, h));
 602                 }
 603                 g.appendChild(o);
 604                 vml.canvas.appendChild(g);
 605                 var res = new Element(o, g, vml);
 606                 setFillAndStroke(res, {stroke: "#000"});
 607                 res.setBox({x: x, y: y, width: w, height: h});
 608                 res.attrs.x = x;
 609                 res.attrs.y = y;
 610                 res.attrs.w = w;
 611                 res.attrs.h = h;
 612                 res.attrs.r = r;
 613                 res.type = "rect";
 614                 return res;
 615             };
 616             var theEllipse = function (vml, x, y, rx, ry) {
 617                 var g = document.createElement("rvml:group");
 618                 var o = document.createElement("rvml:oval");
 619                 g.appendChild(o);
 620                 vml.canvas.appendChild(g);
 621                 var res = new Element(o, g, vml);
 622                 setFillAndStroke(res, {stroke: "#000"});
 623                 res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2});
 624                 res.attrs.cx = x;
 625                 res.attrs.cy = y;
 626                 res.attrs.rx = rx;
 627                 res.attrs.ry = ry;
 628                 res.type = "ellipse";
 629                 return res;
 630             };
 631             var theImage = function (vml, src, x, y, w, h) {
 632                 var g = document.createElement("rvml:group");
 633                 var o = document.createElement("rvml:image");
 634                 o.src = src;
 635                 g.appendChild(o);
 636                 vml.canvas.appendChild(g);
 637                 var res = new Element(o, g, vml);
 638                 res.type = "image";
 639                 res.setBox({x: x, y: y, width: w, height: h});
 640                 res.attrs.x = x;
 641                 res.attrs.y = y;
 642                 res.attrs.w = w;
 643                 res.attrs.h = h;
 644                 return res;
 645             };
 646             var theText = function (vml, x, y, text) {
 647                 // @TODO: setTheBox
 648                 var g = document.createElement("rvml:group"), gs = g.style;
 649                 var el = document.createElement("rvml:shape"), ol = el.style;
 650                 var path = document.createElement("rvml:path"), ps = path.style;
 651                 path.v = ["m", Math.round(x), ", ", Math.round(y - 2), "l", Math.round(x) + 1, ", ", Math.round(y - 2)].join("");
 652                 path.textpathok = true;
 653                 ol.width = vml.width;
 654                 ol.height = vml.height;
 655                 gs.position = "absolute";
 656                 gs.left = 0;
 657                 gs.top = 0;
 658                 gs.width = vml.width;
 659                 gs.height = vml.height;
 660                 var o = document.createElement("rvml:textpath");
 661                 o.string = text;
 662                 o.on = true;
 663                 o.coordsize = vml.coordsize;
 664                 o.coordorigin = vml.coordorigin;
 665                 el.appendChild(o);
 666                 el.appendChild(path);
 667                 g.appendChild(el);
 668                 vml.canvas.appendChild(g);
 669                 var res = new Element(o, g, vml);
 670                 res.shape = el;
 671                 res.textpath = path;
 672                 res.type = "text";
 673                 res.attrs.x = x;
 674                 res.attrs.y = y;
 675                 res.attrs.w = 1;
 676                 res.attrs.h = 1;
 677                 setFillAndStroke(res, {stroke: "none", fill: "#000"});
 678                 return res;
 679             };
 680             var theGroup = function (vml) {
 681                 var el = document.createElement("rvml:group"), els = el.style;
 682                 els.position = "absolute";
 683                 els.left = 0;
 684                 els.top = 0;
 685                 els.width = vml.width;
 686                 els.height = vml.height;
 687                 if (vml.canvas) {
 688                     vml.canvas.appendChild(el);
 689                 }
 690                 var res = new Element(el, el, vml);
 691                 for (var f in vml) {
 692                     if (f.charAt(0) != "_" && typeof vml[f] == "function") {
 693                         res[f] = (function (f) {
 694                             return function () {
 695                                 var e = vml[f].apply(vml, arguments);
 696                                 el.appendChild(e[0].parentNode);
 697                                 return e;
 698                             };
 699                         })(f);
 700                     }
 701                 }
 702                 res.type = "group";
 703                 return res;
 704             };
 705             r._create = function () {
 706                 // container, width, height
 707                 // x, y, width, height
 708                 var container, width, height;
 709                 if (typeof arguments[0] == "string") {
 710                     container = document.getElementById(arguments[0]);
 711                     width = arguments[1];
 712                     height = arguments[2];
 713                 }
 714                 if (typeof arguments[0] == "object") {
 715                     container = arguments[0];
 716                     width = arguments[1];
 717                     height = arguments[2];
 718                 }
 719                 if (typeof arguments[0] == "number") {
 720                     container = 1;
 721                     x = arguments[0];
 722                     y = arguments[1];
 723                     width = arguments[2];
 724                     height = arguments[3];
 725                 }
 726                 if (!container) {
 727                     throw new Error("VML container not found.");
 728                 }
 729                 if (!document.namespaces["rvml"]) {
 730                     document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
 731                     document.createStyleSheet().addRule("rvml\\:*", "behavior:url(#default#VML)");
 732                 }
 733                 var c = document.createElement("div"),
 734                     r = C.canvas = document.createElement("rvml:group"),
 735                     cs = c.style, rs = r.style;
 736                 C.width = width;
 737                 C.height = height;
 738                 width = width || "320px";
 739                 height = height || "200px";
 740                 cs.clip = "rect(0 " + width + " " + height + " 0)";
 741                 cs.position = "absolute";
 742                 rs.width  = width;
 743                 rs.height = height;
 744                 r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " + (height == "100%" ? height : parseFloat(height));
 745                 r.coordorigin = "0 0";
 746
 747                 var b = document.createElement("rvml:rect"), bs = b.style;
 748                 bs.left = bs.top = 0;
 749                 bs.width  = rs.width;
 750                 bs.height = rs.height;
 751                 b.filled = b.stroked = "f";
 752
 753                 r.appendChild(b);
 754                 c.appendChild(r);
 755                 if (container == 1) {
 756                     document.body.appendChild(c);
 757                     cs.position = "absolute";
 758                     cs.left = x + "px";
 759                     cs.top = y + "px";
 760                     cs.width = width;
 761                     cs.height = height;
 762                     container = {
 763                         style: {
 764                             width: width,
 765                             height: height
 766                         }
 767                     };
 768                 } else {
 769                     cs.width = container.style.width = width;
 770                     cs.height = container.style.height = height;
 771                     if (container.firstChild) {
 772                         container.insertBefore(c, container.firstChild);
 773                     } else {
 774                         container.appendChild(c);
 775                     }
 776                 }
 777                 for (var prop in C) {
 778                     container[prop] = C[prop];
 779                 }
 780                 container.clear = function () {
 781                     var todel = [];
 782                     for (var i = 0, ii = r.childNodes.length; i < ii; i++) {
 783                         if (r.childNodes[i] != b) {
 784                             todel.push(r.childNodes[i]);
 785                         }
 786                     }
 787                     for (i = 0, ii = todel.length; i < ii; i++) {
 788                         r.removeChild(todel[i]);
 789                     }
 790                 };
 791                 return container;
 792             };
 793             C.remove = function () {
 794                 C.canvas.parentNode.parentNode.removeChild(C.canvas.parentNode);
 795             };
 796         }
 797         if (type == "SVG") {
 798             var thePath = function (params, pathString, SVG) {
 799                 var el = document.createElementNS(SVG.svgns, "path");
 800                 el.setAttribute("fill", "none");
 801                 if (SVG.canvas) {
 802                     SVG.canvas.appendChild(el);
 803                 }
 804                 var p = new Element(el, SVG);
 805                 p.isAbsolute = true;
 806                 p.type = "path";
 807                 p.last = {x: 0, y: 0, bx: 0, by: 0};
 808                 p.absolutely = function () {
 809                     this.isAbsolute = true;
 810                     return this;
 811                 };
 812                 p.relatively = function () {
 813                     this.isAbsolute = false;
 814                     return this;
 815                 };
 816                 p.moveTo = function (x, y) {
 817                     var d = this.isAbsolute?"M":"m";
 818                     d += parseFloat(x, 10).toFixed(3) + " " + parseFloat(y, 10).toFixed(3) + " ";
 819                     var oldD = this[0].getAttribute("d") || "";
 820                     (oldD == "M0,0") && (oldD = "");
 821                     this[0].setAttribute("d", oldD + d);
 822                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
 823                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
 824                     this.attrs.path = oldD + d;
 825                     return this;
 826                 };
 827                 p.lineTo = function (x, y) {
 828                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
 829                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
 830                     var d = this.isAbsolute?"L":"l";
 831                     d += parseFloat(x, 10).toFixed(3) + " " + parseFloat(y, 10).toFixed(3) + " ";
 832                     var oldD = this[0].getAttribute("d") || "";
 833                     this[0].setAttribute("d", oldD + d);
 834                     this.attrs.path = oldD + d;
 835                     return this;
 836                 };
 837                 p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x, y) {
 838                     var d = this.isAbsolute ? "A" : "a";
 839                     d += [parseFloat(rx, 10).toFixed(3), parseFloat(ry, 10).toFixed(3), 0, large_arc_flag, sweep_flag, parseFloat(x, 10).toFixed(3), parseFloat(y, 10).toFixed(3)].join(" ");
 840                     var oldD = this[0].getAttribute("d") || "";
 841                     this[0].setAttribute("d", oldD + d);
 842                     this.last.x = parseFloat(x, 10);
 843                     this.last.y = parseFloat(y, 10);
 844                     this.attrs.path = oldD + d;
 845                     return this;
 846                 };
 847                 p.cplineTo = function (x1, y1, w1) {
 848                     if (!w1) {
 849                         return this.lineTo(x1, y1);
 850                     } else {
 851                         var p = {};
 852                         var x = parseFloat(x1, 10);
 853                         var y = parseFloat(y1, 10);
 854                         var w = parseFloat(w1, 10);
 855                         var d = this.isAbsolute?"C":"c";
 856                         var attr = [+this.last.x + w, +this.last.y, x - w, y, x, y];
 857                         for (var i = 0, ii = attr.length; i < ii; i++) {
 858                             d += attr[i].toFixed(3) + " ";
 859                         }
 860                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 861                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 862                         this.last.bx = attr[2];
 863                         this.last.by = attr[3];
 864                         var oldD = this[0].getAttribute("d") || "";
 865                         this[0].setAttribute("d", oldD + d);
 866                         this.attrs.path = oldD + d;
 867                         return this;
 868                     }
 869                 };
 870                 p.curveTo = function () {
 871                     var p = {},
 872                         command = [0, 1, 2, 3, "s", 5, "c"];
 873
 874                     var d = command[arguments.length];
 875                     if (this.isAbsolute) {
 876                         d = d.toUpperCase();
 877                     }
 878                     for (var i = 0, ii = arguments.length; i < ii; i++) {
 879                         d += parseFloat(arguments[i], 10).toFixed(3) + " ";
 880                     }
 881                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2], 10);
 882                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1], 10);
 883                     this.last.bx = parseFloat(arguments[arguments.length - 4], 10);
 884                     this.last.by = parseFloat(arguments[arguments.length - 3], 10);
 885                     var oldD = this.node.getAttribute("d") || "";
 886                     this.node.setAttribute("d", oldD + d);
 887                     this.attrs.path = oldD + d;
 888                     return this;
 889                 };
 890                 p.qcurveTo = function () {
 891                     var p = {},
 892                         command = [0, 1, "t", 3, "q"];
 893
 894                     var d = command[arguments.length];
 895                     if (this.isAbsolute) {
 896                         d = d.toUpperCase();
 897                     }
 898                     for (var i = 0, ii = arguments.length; i < ii; i++) {
 899                         d += parseFloat(arguments[i], 10).toFixed(3) + " ";
 900                     }
 901                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2], 10);
 902                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1], 10);
 903                     if (arguments.length != 2) {
 904                         this.last.qx = parseFloat(arguments[arguments.length - 4], 10);
 905                         this.last.qy = parseFloat(arguments[arguments.length - 3], 10);
 906                     }
 907                     var oldD = this.node.getAttribute("d") || "";
 908                     this.node.setAttribute("d", oldD + d);
 909                     this.attrs.path = oldD + d;
 910                     return this;
 911                 };
 912                 p.addRoundedCorner = function (r, dir) {
 913                     var R = .5522 * r, rollback = this.isAbsolute, o = this;
 914                     if (rollback) {
 915                         this.relatively();
 916                         rollback = function () {
 917                             o.absolutely();
 918                         };
 919                     } else {
 920                         rollback = function () {};
 921                     }
 922                     var actions = {
 923                         l: function () {
 924                             return {
 925                                 u: function () {
 926                                     o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 927                                 },
 928                                 d: function () {
 929                                     o.curveTo(-R, 0, -r, r - R, -r, r);
 930                                 }
 931                             };
 932                         },
 933                         r: function () {
 934                             return {
 935                                 u: function () {
 936                                     o.curveTo(R, 0, r, -(r - R), r, -r);
 937                                 },
 938                                 d: function () {
 939                                     o.curveTo(R, 0, r, r - R, r, r);
 940                                 }
 941                             };
 942                         },
 943                         u: function () {
 944                             return {
 945                                 r: function () {
 946                                     o.curveTo(0, -R, -(R - r), -r, r, -r);
 947                                 },
 948                                 l: function () {
 949                                     o.curveTo(0, -R, R - r, -r, -r, -r);
 950                                 }
 951                             };
 952                         },
 953                         d: function () {
 954                             return {
 955                                 r: function () {
 956                                     o.curveTo(0, R, -(R - r), r, r, r);
 957                                 },
 958                                 l: function () {
 959                                     o.curveTo(0, R, R - r, r, -r, r);
 960                                 }
 961                             };
 962                         }
 963                     };
 964                     actions[dir[0]]()[dir[1]]();
 965                     rollback();
 966                     return o;
 967                 };
 968                 p.andClose = function () {
 969                     var oldD = this[0].getAttribute("d") || "";
 970                     this[0].setAttribute("d", oldD + "Z ");
 971                     this.attrs.path = oldD + "Z ";
 972                     return this;
 973                 };
 974                 if (typeof pathString == "string") {
 975                     p.attrs.path = pathString;
 976                     p.absolutely();
 977                     C.pathfinder(p, pathString);
 978                 }
 979                 if (params) {
 980                     setFillAndStroke(p, params);
 981                 }
 982                 return p;
 983             };
 984             var addGrdientFill = function (o, gradient, SVG) {
 985                 var el = document.createElementNS(SVG.svgns, gradient.type + "Gradient");
 986                 el.id = "raphael-gradient-" + SVG.gradients++;
 987                 if (gradient.vector && gradient.vector.length) {
 988                     el.setAttribute("x1", gradient.vector[0]);
 989                     el.setAttribute("y1", gradient.vector[1]);
 990                     el.setAttribute("x2", gradient.vector[2]);
 991                     el.setAttribute("y2", gradient.vector[3]);
 992                 }
 993                 SVG.defs.appendChild(el);
 994                 for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
 995                     var stop = document.createElementNS(SVG.svgns, "stop");
 996                     stop.setAttribute("offset", gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%");
 997                     stop.setAttribute("stop-color", gradient.dots[i].color || "#fff");
 998                     if (typeof gradient.dots[i].opacity != "undefined") {
 999                         stop.setAttribute("stop-opacity", gradient.dots[i].opacity);
1000                     }
1001                     el.appendChild(stop);
1002                 };
1003                 o.setAttribute("fill", "url(#" + el.id + ")");
1004             };
1005             var updatePosition = function (o) {
1006                 if (o.pattern) {
1007                     var bbox = o.node.getBBox();
1008                     o.pattern.setAttribute("patternTransform", "translate(" + [bbox.x, bbox.y].join(",") + ")");
1009                 }
1010             };
1011             var setFillAndStroke = function (o, params) {
1012                 var dasharray = {
1013                     "-": [3, 1],
1014                     ".": [1, 1],
1015                     "-.": [3, 1, 1, 1],
1016                     "-..": [3, 1, 1, 1, 1, 1],
1017                     ". ": [1, 3],
1018                     "- ": [4, 3],
1019                     "--": [8, 3],
1020                     "- .": [4, 3, 1, 3],
1021                     "--.": [8, 3, 1, 3],
1022                     "--..": [8, 3, 1, 3, 1, 3]
1023                 },
1024                 addDashes = function (o, value) {
1025                     value = dasharray[value.toString().toLowerCase()];
1026                     if (value) {
1027                         var width = o.attrs["stroke-width"] || "1",
1028                             butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"]] || 0,
1029                             dashes = [];
1030                         for (var i = 0, ii = value.length; i < ii; i++) {
1031                             dashes.push(value[i] * width + ((i % 2) ? 1 : -1) * butt);
1032                         }
1033                         value = dashes.join(",");
1034                         o[0].setAttribute("stroke-dasharray", value);
1035                     }
1036                 };
1037                 for (var att in params) {
1038                     var value = params[att];
1039                     o.attrs[att] = value;
1040                     switch (att) {
1041                         case "path":
1042                             if (o.type == "path") {
1043                                 o[0].setAttribute("d", "M0,0");
1044                                 C.pathfinder(o, value);
1045                             }
1046                         case "rx":
1047                         case "cx":
1048                         case "x":
1049                             o[0].setAttribute(att, value);
1050                             updatePosition(o);
1051                             break;
1052                         case "ry":
1053                         case "cy":
1054                         case "y":
1055                             o[0].setAttribute(att, value);
1056                             updatePosition(o);
1057                             break;
1058                         case "width":
1059                             o[0].setAttribute(att, value);
1060                             break;
1061                         case "height":
1062                             o[0].setAttribute(att, value);
1063                             break;
1064                         case "gradient":
1065                             addGrdientFill(o[0], value, o.svg);
1066                             break;
1067                         case "stroke-width":
1068                             o[0].style.strokeWidth = value;
1069                             // Need following line for Firefox
1070                             o[0].setAttribute(att, value);
1071                             if (o.attrs["stroke-dasharray"]) {
1072                                 addDashes(o, o.attrs["stroke-dasharray"]);
1073                             }
1074                             break;
1075                         case "stroke-dasharray":
1076                             addDashes(o, value);
1077                             break;
1078                         case "text":
1079                             if (o.type == "text") {
1080                                 o[0].childNodes.length && o[0].removeChild(o[0].firstChild);
1081                                 o[0].appendChild(document.createTextNode(value));
1082                             }
1083                             break;
1084                         case "rotation":
1085                             o.rotate(value, true);
1086                             break;
1087                         case "translation":
1088                             var xy = value.split(/[, ]+/);
1089                             o.translate(xy[0], xy[1]);
1090                             break;
1091                         case "scale":
1092                             var xy = value.split(/[, ]+/);
1093                             o.scale(xy[0], xy[1]);
1094                             break;
1095                         case "fill":
1096                             var isURL = value.match(/^url\(([^\)]+)\)$/i);
1097                             if (isURL) {
1098                                 var el = document.createElementNS(o.svg.svgns, "pattern");
1099                                 var ig = document.createElementNS(o.svg.svgns, "image");
1100                                 el.id = "raphael-pattern-" + o.svg.gradients++;
1101                                 el.setAttribute("x", 0);
1102                                 el.setAttribute("y", 0);
1103                                 el.setAttribute("patternUnits", "userSpaceOnUse");
1104                                 ig.setAttribute("x", 0);
1105                                 ig.setAttribute("y", 0);
1106                                 ig.setAttributeNS(o.svg.xlink, "href", isURL[1]);
1107                                 el.appendChild(ig);
1108
1109                                 var img = document.createElement("img");
1110                                 img.style.position = "absolute";
1111                                 img.style.top = "-9999em";
1112                                 img.style.left = "-9999em";
1113                                 img.onload = function () {
1114                                     el.setAttribute("width", this.offsetWidth);
1115                                     el.setAttribute("height", this.offsetHeight);
1116                                     ig.setAttribute("width", this.offsetWidth);
1117                                     ig.setAttribute("height", this.offsetHeight);
1118                                     document.body.removeChild(this);
1119                                     C.safari();
1120                                 };
1121                                 document.body.appendChild(img);
1122                                 img.src = isURL[1];
1123                                 o.svg.defs.appendChild(el);
1124                                 o[0].style.fill = "url(#" + el.id + ")";
1125                                 o[0].setAttribute("fill", "url(#" + el.id + ")");
1126                                 o.pattern = el;
1127                                 updatePosition(o);
1128                                 break;
1129                             }
1130                         default :
1131                             var cssrule = att.replace(/(\-.)/g, function (w) {
1132                                 return w.substring(1).toUpperCase();
1133                             });
1134                             o[0].style[cssrule] = value;
1135                             // Need following line for Firefox
1136                             o[0].setAttribute(att, value);
1137                             break;
1138                     }
1139                 }
1140             };
1141             var Element = function (node, svg) {
1142                 var X = 0,
1143                     Y = 0;
1144                 this[0] = node;
1145                 this.node = node;
1146                 this.svg = svg;
1147                 this.attrs = this.attrs || {};
1148                 this.transformations = []; // rotate, translate, scale, matrix
1149                 this._ = {
1150                     tx: 0,
1151                     ty: 0,
1152                     rt: {deg: 0, x: 0, y: 0},
1153                     sx: 1,
1154                     sy: 1
1155                 };
1156             };
1157             Element.prototype.translate = function (x, y) {
1158                 if (x == undefined && y == undefined) {
1159                     return {x: this._.tx, y: this._.ty};
1160                 }
1161                 this._.tx += +x;
1162                 this._.ty += +y;
1163                 switch (this.type) {
1164                     case "circle":
1165                     case "ellipse":
1166                         this.attr({cx: this.attrs.cx + x, cy: this.attrs.cy + y});
1167                         break;
1168                     case "rect":
1169                     case "image":
1170                     case "text":
1171                         this.attr({x: this.attrs.x + x, y: this.attrs.y + y});
1172                         break;
1173                     case "path":
1174                         var path = Raphael.pathToRelative(this.attrs.path);
1175                         path[0][1] += +x;
1176                         path[0][2] += +y;
1177                         this.attr({path: path.join(" ")});
1178                     break;
1179                 }
1180                 return this;
1181             };
1182             Element.prototype.rotate = function (deg, isAbsolute) {
1183                 if (deg == undefined) {
1184                     return this._.rt.deg;
1185                 }
1186                 var bbox = this.getBBox();
1187                 if (isAbsolute) {
1188                     this._.rt.deg = deg;
1189                 } else {
1190                     this._.rt.deg += deg;
1191                 }
1192
1193                 if (this._.rt.deg) {
1194                     this.transformations[0] = ("rotate(" + this._.rt.deg + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")");
1195                 } else {
1196                     this.transformations[0] = "";
1197                 }
1198                 this[0].setAttribute("transform", this.transformations.join(" "));
1199                 return this;
1200             };
1201             Element.prototype.hide = function () {
1202                 this[0].style.display = "none";
1203                 return this;
1204             };
1205             Element.prototype.show = function () {
1206                 this[0].style.display = "block";
1207                 return this;
1208             };
1209             Element.prototype.remove = function () {
1210                 this[0].parentNode.removeChild(this[0]);
1211             };
1212             Element.prototype.getBBox = function () {
1213                 return this[0].getBBox();
1214             };
1215             Element.prototype.attr = function () {
1216                 if (arguments.length == 1 && typeof arguments[0] == "string") {
1217                     if (arguments[0] == "translation") {
1218                         return this.translate();
1219                     }
1220                     return this.attrs[arguments[0]];
1221                 }
1222                 if (arguments.length == 1 && arguments[0] instanceof Array) {
1223                     var values = {};
1224                     for (var j in arguments[0]) {
1225                         values[arguments[0][j]] = this.attrs[arguments[0][j]];
1226                     }
1227                     return values;
1228                 }
1229                 if (arguments.length == 2) {
1230                     var params = {};
1231                     params[arguments[0]] = arguments[1];
1232                     setFillAndStroke(this, params);
1233                 } else if (arguments.length == 1 && typeof arguments[0] == "object") {
1234                     setFillAndStroke(this, arguments[0]);
1235                 }
1236                 return this;
1237             };
1238             Element.prototype.toFront = function () {
1239                 this[0].parentNode.appendChild(this[0]);
1240                 return this;
1241             };
1242             Element.prototype.toBack = function () {
1243                 if (this[0].parentNode.firstChild != this[0]) {
1244                     this[0].parentNode.insertBefore(this[0], this[0].parentNode.firstChild);
1245                 }
1246                 return this;
1247             };
1248             var theCircle = function (svg, x, y, r) {
1249                 var el = document.createElementNS(svg.svgns, "circle");
1250                 el.setAttribute("cx", x);
1251                 el.setAttribute("cy", y);
1252                 el.setAttribute("r", r);
1253                 el.setAttribute("fill", "none");
1254                 el.setAttribute("stroke", "#000");
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.cx = x;
1261                 res.attrs.cy = y;
1262                 res.attrs.r = r;
1263                 res.attrs.stroke = "#000";
1264                 res.type = "circle";
1265                 return res;
1266             };
1267             var theRect = function (svg, x, y, w, h, r) {
1268                 var el = document.createElementNS(svg.svgns, "rect");
1269                 el.setAttribute("x", x);
1270                 el.setAttribute("y", y);
1271                 el.setAttribute("width", w);
1272                 el.setAttribute("height", h);
1273                 if (r) {
1274                     el.setAttribute("rx", r);
1275                     el.setAttribute("ry", r);
1276                 }
1277                 el.setAttribute("fill", "none");
1278                 el.setAttribute("stroke", "#000");
1279                 if (svg.canvas) {
1280                     svg.canvas.appendChild(el);
1281                 }
1282                 var res = new Element(el, svg);
1283                 res.attrs = res.attrs || {};
1284                 res.attrs.x = x;
1285                 res.attrs.y = y;
1286                 res.attrs.width = w;
1287                 res.attrs.height = h;
1288                 res.attrs.stroke = "#000";
1289                 if (r) {
1290                     res.attrs.rx = res.attrs.ry = r;
1291                 }
1292                 res.type = "rect";
1293                 return res;
1294             };
1295             var theEllipse = function (svg, x, y, rx, ry) {
1296                 var el = document.createElementNS(svg.svgns, "ellipse");
1297                 el.setAttribute("cx", x);
1298                 el.setAttribute("cy", y);
1299                 el.setAttribute("rx", rx);
1300                 el.setAttribute("ry", ry);
1301                 el.setAttribute("fill", "none");
1302                 el.setAttribute("stroke", "#000");
1303                 if (svg.canvas) {
1304                     svg.canvas.appendChild(el);
1305                 }
1306                 var res = new Element(el, svg);
1307                 res.attrs = res.attrs || {};
1308                 res.attrs.cx = x;
1309                 res.attrs.cy = y;
1310                 res.attrs.rx = rx;
1311                 res.attrs.ry = ry;
1312                 res.attrs.stroke = "#000";
1313                 res.type = "ellipse";
1314                 return res;
1315             };
1316             var theImage = function (svg, src, x, y, w, h) {
1317                 var el = document.createElementNS(svg.svgns, "image");
1318                 el.setAttribute("x", x);
1319                 el.setAttribute("y", y);
1320                 el.setAttribute("width", w);
1321                 el.setAttribute("height", h);
1322                 el.setAttribute("preserveAspectRatio", "none");
1323                 el.setAttributeNS(svg.xlink, "href", src);
1324                 if (svg.canvas) {
1325                     svg.canvas.appendChild(el);
1326                 }
1327                 var res = new Element(el, svg);
1328                 res.attrs = res.attrs || {};
1329                 res.attrs.x = x;
1330                 res.attrs.y = y;
1331                 res.attrs.width = w;
1332                 res.attrs.height = h;
1333                 res.type = "image";
1334                 return res;
1335             };
1336             var theText = function (svg, x, y, text) {
1337                 var el = document.createElementNS(svg.svgns, "text");
1338                 el.setAttribute("x", x);
1339                 el.setAttribute("y", y);
1340                 el.setAttribute("text-anchor", "middle");
1341                 el.setAttribute("fill", "#000");
1342                 if (text) {
1343                     el.appendChild(document.createTextNode(text));
1344                 }
1345                 if (svg.canvas) {
1346                     svg.canvas.appendChild(el);
1347                 }
1348                 var res = new Element(el, svg);
1349                 res.attrs = res.attrs || {};
1350                 res.attrs.x = x;
1351                 res.attrs.y = y;
1352                 res.attrs.fill = "#000";
1353                 res.type = "text";
1354                 return res;
1355             };
1356             var theGroup = function (svg) {
1357                 var el = document.createElementNS(svg.svgns, "g");
1358                 if (svg.canvas) {
1359                     svg.canvas.appendChild(el);
1360                 }
1361                 var i = new Element(el, svg);
1362                 for (var f in svg) {
1363                     if (f[0] != "_" && typeof svg[f] == "function") {
1364                         i[f] = (function (f) {
1365                             return function () {
1366                                 var e = svg[f].apply(svg, arguments);
1367                                 el.appendChild(e[0]);
1368                                 return e;
1369                             };
1370                         })(f);
1371                     }
1372                 }
1373                 i.type = "group";
1374                 return i;
1375             };
1376             r._create = function () {
1377                 // container, width, height
1378                 // x, y, width, height
1379                 if (typeof arguments[0] == "string") {
1380                     var container = document.getElementById(arguments[0]);
1381                     var width = arguments[1];
1382                     var height = arguments[2];
1383                 }
1384                 if (typeof arguments[0] == "object") {
1385                     var container = arguments[0];
1386                     var width = arguments[1];
1387                     var height = arguments[2];
1388                 }
1389                 if (typeof arguments[0] == "number") {
1390                     var container = 1,
1391                         x = arguments[0],
1392                         y = arguments[1],
1393                         width = arguments[2],
1394                         height = arguments[3];
1395                 }
1396                 if (!container) {
1397                     throw new Error("SVG container not found.");
1398                 }
1399                 C.canvas = document.createElementNS(C.svgns, "svg");
1400                 C.canvas.setAttribute("width", width || 320);
1401                 C.width = width || 320;
1402                 C.canvas.setAttribute("height", height || 200);
1403                 C.height = height || 200;
1404                 if (container == 1) {
1405                     document.body.appendChild(C.canvas);
1406                     C.canvas.style.position = "absolute";
1407                     C.canvas.style.left = x + "px";
1408                     C.canvas.style.top = y + "px";
1409                 } else {
1410                     if (container.firstChild) {
1411                         container.insertBefore(C.canvas, container.firstChild);
1412                     } else {
1413                         container.appendChild(C.canvas);
1414                     }
1415                 }
1416                 container = {
1417                     canvas: C.canvas,
1418                     clear: function () {
1419                         while (this.canvas.firstChild) {
1420                             this.canvas.removeChild(this.canvas.firstChild);
1421                         }
1422                         this.defs = document.createElementNS(C.svgns, "defs");
1423                         this.gradients = 0;
1424                         this.canvas.appendChild(this.defs);
1425                     }
1426                 };
1427                 for (var prop in C) {
1428                     if (prop != "create") {
1429                         container[prop] = C[prop];
1430                     }
1431                 }
1432                 container.clear();
1433                 return container;
1434             };
1435             C.remove = function () {
1436                 C.canvas.parentNode.removeChild(C.canvas);
1437             };
1438             C.svgns = "http://www.w3.org/2000/svg";
1439             C.xlink = "http://www.w3.org/1999/xlink";
1440         }
1441         if (type == "VML" || type == "SVG") {
1442             C.circle = function (x, y, r) {
1443                 return theCircle(this, x, y, r);
1444             };
1445             C.rect = function (x, y, w, h, r) {
1446                 return theRect(this, x, y, w, h, r);
1447             };
1448             C.ellipse = function (x, y, rx, ry) {
1449                 return theEllipse(this, x, y, rx, ry);
1450             };
1451             C.path = function (params, pathString) {
1452                 return thePath(params, pathString, this);
1453             };
1454             C.image = function (src, x, y, w, h) {
1455                 return theImage(this, src, x, y, w, h);
1456             };
1457             C.text = function (x, y, text) {
1458                 return theText(this, x, y, text);
1459             };
1460             C.group = function () {
1461                 return theGroup(this);
1462             };
1463             C.drawGrid = function (x, y, w, h, wv, hv, color) {
1464                 color = color || "#000";
1465                 var p = this.path({stroke: color, "stroke-width": 1})
1466                         .moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h).lineTo(x, y + h).lineTo(x, y),
1467                     rowHeight = h / hv,
1468                     columnWidth = w / wv;
1469                 for (var i = 1; i < hv; i++) {
1470                     p.moveTo(x, y + i * rowHeight).lineTo(x + w, y + i * rowHeight);
1471                 }
1472                 for (var i = 1; i < wv; i++) {
1473                     p.moveTo(x + i * columnWidth, y).lineTo(x + i * columnWidth, y + h);
1474                 }
1475                 return p;
1476             };
1477             C.safari = function () {
1478                 if (r.type == "SVG") {
1479                     var rect = C.rect(-C.width, -C.height, C.width * 3, C.height * 3).attr({stroke: "none"});
1480                     setTimeout(function () {rect.remove();}, 0);
1481                 }
1482             };
1483             Element.prototype.stop = function () {
1484                 clearTimeout(this.animation_in_progress);
1485             };
1486             Element.prototype.scale = function (x, y) {
1487                 if (x == undefined && y == undefined) {
1488                     return {x: this._.sx, y: this._.sy};
1489                 }
1490                 y = y || x;
1491                 var dx, dy, cx, cy;
1492                 if (x != 0 && !(x == 1 && y == 1)) {
1493                     var dirx = Math.round(x / Math.abs(x)),
1494                         diry = Math.round(y / Math.abs(y)),
1495                         s = this.node.style;
1496                     dx = this.attr("x");
1497                     dy = this.attr("y");
1498                     cx = this.attr("cx");
1499                     cy = this.attr("cy");
1500                     if (dirx != 1 || diry != 1) {
1501                         if (this.transformations) {
1502                             this.transformations[2] = "scale(" + [dirx, diry] + ")";
1503                             this.node.setAttribute("transform", this.transformations.join(" "));
1504                             dx = (dirx < 0) ? -this.attr("x") - this.attrs.width * x * dirx / this._.sx : this.attr("x");
1505                             dy = (diry < 0) ? -this.attr("y") - this.attrs.height * y * diry / this._.sy : this.attr("y");
1506                             cx = this.attr("cx") * dirx;
1507                             cy = this.attr("cy") * diry;
1508                         } else {
1509                             s.filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + dirx +
1510                                 ", M12=0, M21=0, M22=" + diry +
1511                                 ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')";
1512                         }
1513                     } else {
1514                         if (this.transformations) {
1515                             this.transformations[2] = "";
1516                             this.node.setAttribute("transform", this.transformations.join(" "));
1517                         } else {
1518                             s.filter = "";
1519                         }
1520                     }
1521                     switch (this.type) {
1522                         case "rect":
1523                         case "image":
1524                             this.attr({
1525                                 width: this.attrs.width * x * dirx / this._.sx,
1526                                 height: this.attrs.height * y * diry / this._.sy,
1527                                 x: dx,
1528                                 y: dy
1529                             });
1530                             break;
1531                         case "circle":
1532                         case "ellipse":
1533                             this.attr({
1534                                 rx: this.attrs.rx * x * dirx / this._.sx,
1535                                 ry: this.attrs.ry * y * diry / this._.sy,
1536                                 r: this.attrs.r * x * diry / this._.sx,
1537                                 cx: cx,
1538                                 cy: cy
1539                             });
1540                             break;
1541                         case "path":
1542                             var path = Raphael.pathToRelative(Raphael.parsePathString(this.attr("path"))),
1543                                 skip = true,
1544                                 dim = Raphael.pathDimensions(this.attrs.path),
1545                                 dx = -dim.width * (x - 1) / 2,
1546                                 dy = -dim.height * (y - 1) / 2;
1547                             for (var i = 0, ii = path.length; i < ii; i++) {
1548                                 if (path[i][0].toUpperCase() == "M" && skip) {
1549                                     continue;
1550                                 } else {
1551                                     skip = false;
1552                                 }
1553                                 if (path[i][0].toUpperCase() == "A") {
1554                                     path[i][path[i].length - 2] *= x * dirx;
1555                                     path[i][path[i].length - 1] *= y * diry;
1556                                 } else {
1557                                     for (var j = 1, jj = path[i].length; j < jj; j++) {
1558                                         path[i][j] *= (j % 2) ? x * dirx / this._.sx : y * diry / this._.sy;
1559                                     }
1560                                 }
1561                             }
1562                             var dim2 = Raphael.pathDimensions(path),
1563                                 dx = dim.x + dim.width / 2 - dim2.x - dim2.width / 2,
1564                                 dy = dim.y + dim.height / 2 - dim2.y - dim2.height / 2;
1565                             path = Raphael.pathToRelative(path);
1566                             path[0][1] += dx;
1567                             path[0][2] += dy;
1568
1569                             this.attr({path: path.join(" ")});
1570                     }
1571                 }
1572                 this._.sx = x;
1573                 this._.sy = y;
1574                 return this;
1575             };
1576             Element.prototype.animate = function (params, ms, callback) {
1577                 clearTimeout(this.animation_in_progress);
1578                 var from = {}, to = {}, diff = {}, t = {x: 0, y: 0};
1579                 for (var attr in params) {
1580                     if (attr in availableAnimAttrs) {
1581                         from[attr] = this.attr(attr);
1582                         if (typeof from[attr] == "undefined") {
1583                             from[attr] = availableAttrs[attr];
1584                         }
1585                         to[attr] = params[attr];
1586                         switch (availableAnimAttrs[attr]) {
1587                             case "number":
1588                                 diff[attr] = (to[attr] - from[attr]) / ms;
1589                                 break;
1590                             case "colour":
1591                                 from[attr] = Raphael.getRGB(from[attr]);
1592                                 var toColour = Raphael.getRGB(to[attr]);
1593                                 diff[attr] = {
1594                                     r: (toColour.r - from[attr].r) / ms,
1595                                     g: (toColour.g - from[attr].g) / ms,
1596                                     b: (toColour.b - from[attr].b) / ms
1597                                 };
1598                                 break;
1599                             case "path":
1600                                 var pathes = Raphael.pathEqualiser(from[attr], to[attr]);
1601                                 from[attr] = pathes[0];
1602                                 to[attr] = pathes[1];
1603                                 diff[attr] = [];
1604                                 for (var i = 0, ii = from[attr].length; i < ii; i++) {
1605                                     diff[attr][i] = [0];
1606                                     for (var j = 1, jj = from[attr][i].length; j < jj; j++) {
1607                                         diff[attr][i][j] = (to[attr][i][j] - from[attr][i][j]) / ms;
1608                                     }
1609                                 }
1610                                 break;
1611                             case "csv":
1612                                 var values = params[attr].split(/[, ]+/);
1613                                 if (attr == "translation") {
1614                                     from[attr] = [0, 0];
1615                                     diff[attr] = [values[0] / ms, values[1] / ms];
1616                                 } else {
1617                                     from[attr] = from[attr].split(/[, ]+/);
1618                                     diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms];
1619                                 }
1620                                 to[attr] = values;
1621                         }
1622                     }
1623                 }
1624                 var start = new Date(),
1625                     prev = 0,
1626                     that = this;
1627                 (function () {
1628                     var time = (new Date()).getTime() - start.getTime(),
1629                         set = {},
1630                         now;
1631                     if (time < ms) {
1632                         for (var attr in from) {
1633                             switch (availableAnimAttrs[attr]) {
1634                                 case "number":
1635                                     now = +from[attr] + time * diff[attr];
1636                                     break;
1637                                 case "colour":
1638                                     now = "rgb(" + [
1639                                         Math.round(from[attr].r + time * diff[attr].r),
1640                                         Math.round(from[attr].g + time * diff[attr].g),
1641                                         Math.round(from[attr].b + time * diff[attr].b)
1642                                     ].join(",") + ")";
1643                                     break;
1644                                 case "path":
1645                                     now = [];
1646                                     for (var i = 0, ii = from[attr].length; i < ii; i++) {
1647                                         now[i] = [from[attr][i][0]];
1648                                         for (var j = 1, jj = from[attr][i].length; j < jj; j++) {
1649                                             now[i][j] = from[attr][i][j] + time * diff[attr][i][j];
1650                                         }
1651                                         now[i] = now[i].join(" ");
1652                                     }
1653                                     now = now.join(" ");
1654                                     break;
1655                                 case "csv":
1656                                     if (attr == "translation") {
1657                                         var x = diff[attr][0] * (time - prev),
1658                                             y = diff[attr][1] * (time - prev);
1659                                         t.x += x;
1660                                         t.y += y;
1661                                         now = [x, y].join(" ");
1662                                     } else {
1663                                         now = [+from[attr][0] + time * diff[attr][0], +from[attr][1] + time * diff[attr][1]].join(" ");
1664                                     }
1665                                     break;
1666                             }
1667                             if (attr == "font-size") {
1668                                 set[attr] = now + "px";
1669                             } else {
1670                                 set[attr] = now;
1671                             }
1672                         }
1673                         that.attr(set);
1674                         that.animation_in_progress = setTimeout(arguments.callee, 0);
1675                         C.safari();
1676                     } else {
1677                         if (t.x || t.y) {
1678                             that.translate(-t.x, -t.y);
1679                         }
1680                         that.attr(params);
1681                         clearTimeout(that.animation_in_progress);
1682                         C.safari();
1683                         (typeof callback == "function") && callback.call(that);
1684                     }
1685                     prev = time;
1686                 })();
1687                 return this;
1688             };
1689
1690             // depricated
1691             Element.prototype.animateTo = function (x, y, ms, callback) {
1692                 clearTimeout(this.animation_in_progress);
1693                 if ("cx" in this.attrs || "x" in this.attrs) {
1694                     var is_round = ("cx" in this.attrs),
1695                         X = this.attrs.cx || this.attrs.x,
1696                         Y = this.attrs.cy || this.attrs.y;
1697                     if (x == X && y == Y) {
1698                         return this;
1699                     }
1700                     var dy = y - Y,
1701                         dx = x - X;
1702                     var start = new Date(),
1703                         that = this;
1704                     (function () {
1705                         var time = (new Date()).getTime() - start.getTime();
1706                         if (time < ms) {
1707                             var x1 = X + time * dx / ms;
1708                             var y1 = Y + time * dy / ms;
1709                             that.attr(is_round ? {cx: x1, cy: y1} : {x: x1, y: y1});
1710                             that.animation_in_progress = setTimeout(arguments.callee, 1);
1711                             C.safari();
1712                         } else {
1713                             that.attr(is_round ? {cx: x, cy: y} : {x: x, y: y});
1714                             C.safari();
1715                             callback && callback.call(that);
1716                         }
1717                     })();
1718                 }
1719                 return this;
1720             };
1721             C.pathfinder = function (p, path) {
1722                 var commands = {
1723                     M: function (x, y) {
1724                         this.moveTo(x, y);
1725                     },
1726                     C: function (x1, y1, x2, y2, x3, y3) {
1727                         this.curveTo(x1, y1, x2, y2, x3, y3);
1728                     },
1729                     Q: function (x1, y1, x2, y2) {
1730                         this.qcurveTo(x1, y1, x2, y2);
1731                     },
1732                     T: function (x, y) {
1733                         this.qcurveTo(x, y);
1734                     },
1735                     S: function (x1, y1, x2, y2) {
1736                         p.curveTo(x1, y1, x2, y2);
1737                     },
1738                     L: function (x, y) {
1739                         p.lineTo(x, y);
1740                     },
1741                     H: function (x) {
1742                         this.lineTo(x, this.last.y);
1743                     },
1744                     V: function (y) {
1745                         this.lineTo(this.last.x, y);
1746                     },
1747                     A: function (rx, ry, xaxisrotation, largearcflag, sweepflag, x, y) {
1748                         this.arcTo(rx, ry, largearcflag, sweepflag, x, y);
1749                     },
1750                     Z: function () {
1751                         this.andClose();
1752                     }
1753                 };
1754
1755                 path = Raphael.pathToAbsolute(path);
1756                 for (var i = 0, ii = path.length; i < ii; i++) {
1757                     var b = path[i].shift();
1758                     commands[b].apply(p, path[i]);
1759                 }
1760             };
1761             return r;
1762         } else {
1763             return function () {};
1764         }
1765     })((!window.SVGAngle) ? "VML" : "SVG");
1766
1767
1768 Raphael.vml = !(Raphael.svg = (Raphael.type == "SVG"));
1769 if (Raphael.vml && window.CanvasRenderingContext2D) {
1770     Raphael.type = "Canvas only";
1771     Raphael.vml = Raphael.svg = false;
1772 }
1773 Raphael.toString = function () {
1774     return "Your browser supports " + this.type + ".\nYou are running " + unescape("Rapha%EBl%20") + this.version;
1775 };
1776 // generic utilities
1777 Raphael.hsb2rgb = function (hue, saturation, brightness) {
1778     if (typeof hue == "object" && "h" in hue && "s" in hue && "b" in hue) {
1779         brightness = hue.b;
1780         saturation = hue.s;
1781         hue = hue.h;
1782     }
1783     var red,
1784         green,
1785         blue;
1786     if (brightness == 0) {
1787         return {r: 0, g: 0, b: 0, hex: "#000"};
1788     } else {
1789         var i = Math.floor(hue * 6),
1790             f = (hue * 6) - i,
1791             p = brightness * (1 - saturation),
1792             q = brightness * (1 - (saturation * f)),
1793             t = brightness * (1 - (saturation * (1 - f)));
1794         [
1795             function () {red = brightness; green = t; blue = p;},
1796             function () {red = q; green = brightness; blue = p;},
1797             function () {red = p; green = brightness; blue = t;},
1798             function () {red = p; green = q; blue = brightness;},
1799             function () {red = t; green = p; blue = brightness;},
1800             function () {red = brightness; green = p; blue = q;},
1801             function () {red = brightness; green = t; blue = p;}
1802         ][i]();
1803     }
1804     var rgb = {r: red, g: green, b: blue};
1805     red *= 255;
1806     green *= 255;
1807     blue *= 255;
1808     var r = Math.round(red).toString(16);
1809     if (r.length == 1) {
1810         r = "0" + r;
1811     }
1812     var g = Math.round(green).toString(16);
1813     if (g.length == 1) {
1814         g = "0" + g;
1815     }
1816     var b = Math.round(blue).toString(16);
1817     if (b.length == 1) {
1818         b = "0" + b;
1819     }
1820     rgb.hex = "#" + r + g + b;
1821     return rgb;
1822 };
1823 Raphael.rgb2hsb = function (red, green, blue) {
1824     if (typeof red == "object" && "r" in red && "g" in red && "b" in red) {
1825         blue = red.b;
1826         green = red.g;
1827         red = red.r;
1828     }
1829     if (typeof red == "string" && red.charAt(0) == "#") {
1830         if (red.length == 4) {
1831             blue = parseInt(red.substring(3), 16);
1832             green = parseInt(red.substring(2, 3), 16);
1833             red = parseInt(red.substring(1, 2), 16);
1834         } else {
1835             blue = parseInt(red.substring(5), 16);
1836             green = parseInt(red.substring(3, 5), 16);
1837             red = parseInt(red.substring(1, 3), 16);
1838         }
1839     }
1840     if (red > 1 || green > 1 || blue > 1) {
1841         red /= 255;
1842         green /= 255;
1843         blue /= 255;
1844     }
1845     var max = Math.max(red, green, blue),
1846         min = Math.min(red, green, blue),
1847         hue,
1848         saturation,
1849         brightness = max;
1850     if (min == max) {
1851         return {h: 0, s: 0, b: max};
1852     } else {
1853         var delta = (max - min);
1854         saturation = delta / max;
1855         if (red == max) {
1856             hue = (green - blue) / delta;
1857         } else if (green == max) {
1858             hue = 2 + ((blue - red) / delta);
1859         } else {
1860             hue = 4 + ((red - green) / delta);
1861         }
1862         hue /= 6;
1863         if (hue < 0) {
1864             hue += 1;
1865         }
1866         if (hue > 1) {
1867             hue -= 1;
1868         }
1869     }
1870     return {h: hue, s: saturation, b: brightness};
1871 };
1872 Raphael.getRGB = function (colour) {
1873     var red, green, blue,
1874         rgb = colour.match(/^\s*((#[a-f\d]{6})|(#[a-f\d]{3})|rgb\(\s*(\d+,\s*\d+,\s*\d+)\s*\)|rgb\(\s*(\d+%,\s*\d+%,\s*\d+%)\s*\)|hsb\(\s*(\d+,\s*\d+,\s*\d+)\s*\)|hsb\(\s*(\d+%,\s*\d+%,\s*\d+%)\s*\))\s*$/i);
1875     if (rgb) {
1876         if (rgb[2]) {
1877             blue = parseInt(rgb[2].substring(5), 16);
1878             green = parseInt(rgb[2].substring(3, 5), 16);
1879             red = parseInt(rgb[2].substring(1, 3), 16);
1880         }
1881         if (rgb[3]) {
1882             blue = parseInt(rgb[3].substring(3) + rgb[3].substring(3), 16);
1883             green = parseInt(rgb[3].substring(2, 3) + rgb[3].substring(2, 3), 16);
1884             red = parseInt(rgb[3].substring(1, 2) + rgb[3].substring(1, 2), 16);
1885         }
1886         if (rgb[4]) {
1887             rgb = rgb[4].split(/\s*,\s*/);
1888             red = parseInt(rgb[0], 10);
1889             green = parseInt(rgb[1], 10);
1890             blue = parseInt(rgb[2], 10);
1891         }
1892         if (rgb[5]) {
1893             rgb = rgb[5].split(/\s*,\s*/);
1894             red = parseInt(rgb[0], 10) * 2.55;
1895             green = parseInt(rgb[1], 10) * 2.55;
1896             blue = parseInt(rgb[2], 10) * 2.55;
1897         }
1898         if (rgb[6]) {
1899             rgb = rgb[6].split(/\s*,\s*/);
1900             red = parseInt(rgb[0], 10);
1901             green = parseInt(rgb[1], 10);
1902             blue = parseInt(rgb[2], 10);
1903             return this.hsb2rgb(red, green, blue);
1904         }
1905         if (rgb[7]) {
1906             rgb = rgb[7].split(/\s*,\s*/);
1907             red = parseInt(rgb[0], 10) * 2.55;
1908             green = parseInt(rgb[1], 10) * 2.55;
1909             blue = parseInt(rgb[2], 10) * 2.55;
1910             return this.hsb2rgb(red, green, blue);
1911         }
1912         var rgb = {r: red, g: green, b: blue};
1913         var r = Math.round(red).toString(16);
1914         (r.length == 1) && (r = "0" + r);
1915         var g = Math.round(green).toString(16);
1916         (g.length == 1) && (g = "0" + g);
1917         var b = Math.round(blue).toString(16);
1918         (b.length == 1) && (b = "0" + b);
1919         rgb.hex = "#" + r + g + b;
1920         return rgb;
1921     }
1922 };
1923 Raphael.getColor = function (value) {
1924     var start = arguments.callee.start = arguments.callee.start || {h: 0, s: 1, b: value || .75};
1925     var rgb = this.hsb2rgb(start.h, start.s, start.b);
1926     start.h += .075;
1927     if (start.h > 1) {
1928         start.h = 0;
1929         start.s -= .2;
1930         if (start.s <= 0) {
1931             arguments.callee.start = {h: 0, s: 1, b: start.b};
1932         }
1933     }
1934     return rgb.hex;
1935 };
1936 Raphael.getColor.reset = function () {
1937     this.start = undefined;
1938 };
1939 Raphael.parsePathString = function (pathString) {
1940     var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0};
1941     var data = [];
1942     pathString.replace(/([achlmqstvz])\s*((-?\d*\.?\d*\s*,?\s*)+)/ig, function (a, b, c) {
1943         var params = [], name = b.toLowerCase();
1944         c.replace(/(-?\d*\.?\d*)\s*,?\s*/ig, function (a, b) {
1945             b && params.push(+b);
1946         });
1947         while (params.length >= paramCounts[name]) {
1948             data.push([b].concat(params.splice(0, paramCounts[name])));
1949             if (!paramCounts[name]) {
1950                 break;
1951             };
1952         }
1953     });
1954     return data;
1955 };
1956 Raphael.pathDimensions = function (path) {
1957     var pathArray = path;
1958     if (typeof path == "string") {
1959         pathArray = this.parsePathString(path);
1960     }
1961     pathArray = this.pathToAbsolute(pathArray);
1962     var x = [], y = [], length = 0;
1963     for (var i = 0, ii = pathArray.length; i < ii; i++) {
1964         switch (pathArray[i][0]) {
1965             case "Z":
1966                 break;
1967             case "A":
1968                 x.push(pathArray[i][pathArray[i].length - 2]);
1969                 y.push(pathArray[i][pathArray[i].length - 1]);
1970                 break;
1971             default:
1972                 for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
1973                     if (j % 2) {
1974                         x.push(pathArray[i][j]);
1975                     } else {
1976                         y.push(pathArray[i][j]);
1977                     }
1978                 }
1979         }
1980     }
1981     var minx = Math.min.apply(Math, x),
1982         miny = Math.min.apply(Math, y);
1983     return {
1984         x: minx,
1985         y: miny,
1986         width: Math.max.apply(Math, x) - minx,
1987         height: Math.max.apply(Math, y) - miny,
1988         X: x,
1989         Y: y
1990     };
1991 };
1992 Raphael.pathToRelative = function (pathArray) {
1993     var res = [];
1994     if (typeof pathArray == "string") {
1995         pathArray = this.parsePathString(pathArray);
1996     }
1997     var x = 0, y = 0, start = 0;
1998     if (pathArray[0][0] == "M") {
1999         x = pathArray[0][1];
2000         y = pathArray[0][2];
2001         start++;
2002         res.push(pathArray[0]);
2003     }
2004     for (var i = start, ii = pathArray.length; i < ii; i++) {
2005         res[i] = [];
2006         if (pathArray[i][0] != pathArray[i][0].toLowerCase()) {
2007             res[i][0] = pathArray[i][0].toLowerCase();
2008             switch (res[i][0]) {
2009                 case "a":
2010                     res[i][1] = pathArray[i][1];
2011                     res[i][2] = pathArray[i][2];
2012                     res[i][3] = 0;
2013                     res[i][4] = pathArray[i][4];
2014                     res[i][5] = pathArray[i][5];
2015                     res[i][6] = +(pathArray[i][6] - x).toFixed(3);
2016                     res[i][7] = +(pathArray[i][7] - y).toFixed(3);
2017                     break;
2018                 case "v":
2019                     res[i][1] = +(pathArray[i][1] - y).toFixed(3);
2020                     break;
2021                 default:
2022                     for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
2023                         res[i][j] = +(pathArray[i][j] - ((j % 2) ? x : y)).toFixed(3);
2024                     }
2025             }
2026         } else {
2027             res[i] = pathArray[i];
2028         }
2029         switch (res[i][0]) {
2030             case "z":
2031                 break;
2032             case "h":
2033                 x += res[i][res[i].length - 1];
2034                 break;
2035             case "v":
2036                 y += res[i][res[i].length - 1];
2037                 break;
2038             default:
2039                 x += res[i][res[i].length - 2];
2040                 y += res[i][res[i].length - 1];
2041         }
2042     }
2043     return res;
2044 };
2045 Raphael.pathToAbsolute = function (pathArray) {
2046     var res = [];
2047     if (typeof pathArray == "string") {
2048         pathArray = this.parsePathString(pathArray);
2049     }
2050     var x = 0, y = 0, start = 0;
2051     if (pathArray[0][0] == "M") {
2052         x = +pathArray[0][1];
2053         y = +pathArray[0][2];
2054         start++;
2055         res[0] = pathArray[0];
2056     }
2057     for (var i = start, ii = pathArray.length; i < ii; i++) {
2058         res[i] = [];
2059         if (pathArray[i][0] != pathArray[i][0].toUpperCase()) {
2060             res[i][0] = pathArray[i][0].toUpperCase();
2061             switch (res[i][0]) {
2062                 case "A":
2063                     res[i][1] = pathArray[i][1];
2064                     res[i][2] = pathArray[i][2];
2065                     res[i][3] = 0;
2066                     res[i][4] = pathArray[i][4];
2067                     res[i][5] = pathArray[i][5];
2068                     res[i][6] = +(pathArray[i][6] + x).toFixed(3);
2069                     res[i][7] = +(pathArray[i][7] + y).toFixed(3);
2070                     break;
2071                 case "V":
2072                     res[i][1] = +pathArray[i][1] + y;
2073                     break;
2074                 default:
2075                     for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
2076                         res[i][j] = +pathArray[i][j] + ((j % 2) ? x : y);
2077                     }
2078             }
2079         } else {
2080             res[i] = pathArray[i];
2081         }
2082         switch (res[i][0]) {
2083             case "Z":
2084                 break;
2085             case "H":
2086                 x = res[i][1];
2087                 break;
2088             case "V":
2089                 y = res[i][1];
2090                 break;
2091             default:
2092                 x = res[i][res[i].length - 2];
2093                 y = res[i][res[i].length - 1];
2094         }
2095     }
2096     return res;
2097 };
2098 Raphael.pathEqualiser = function (path1, path2) {
2099     var data = [this.pathToAbsolute(this.parsePathString(path1)), this.pathToAbsolute(this.parsePathString(path2))],
2100         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}],
2101         processPath = function (path, d) {
2102             if (!path) {
2103                 return ["U"];
2104             }
2105             switch (path[0]) {
2106                 case "M":
2107                     d.X = path[1];
2108                     d.Y = path[2];
2109                     break;
2110                 case "S":
2111                     var nx = d.x + (d.x - (d.bx || d.x));
2112                     var ny = d.y + (d.y - (d.by || d.y));
2113                     path = ["C", nx, ny, path[1], path[2], path[3], path[4]];
2114                     break;
2115                 case "T":
2116                     var nx = d.x + (d.x - (d.bx || d.x));
2117                     var ny = d.y + (d.y - (d.by || d.y));
2118                     path = ["Q", nx, ny, path[1], path[2]];
2119                     break;
2120                 case "H":
2121                     path = ["L", path[1], d.y];
2122                     break;
2123                 case "V":
2124                     path = ["L", d.x, path[1]];
2125                     break;
2126                 case "Z":
2127                     path = ["L", d.X, d.Y];
2128                     break;
2129             }
2130             return path;
2131         },
2132         edgeCases = function (a, b, i) {
2133             if (data[a][i][0] == "M" && data[b][i][0] != "M") {
2134                 data[b].splice(i, 0, ["M", attrs[b].x, attrs[b].y]);
2135                 attrs[a].bx = data[a][i][data[a][i].length - 4] || 0;
2136                 attrs[a].by = data[a][i][data[a][i].length - 3] || 0;
2137                 attrs[a].x = data[a][i][data[a][i].length - 2];
2138                 attrs[a].y = data[a][i][data[a][i].length - 1];
2139                 return true;
2140             } else if (data[a][i][0] == "L" && data[b][i][0] == "C") {
2141                 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]];
2142             } else if (data[a][i][0] == "L" && data[b][i][0] == "Q") {
2143                 data[a][i] = ["Q", data[a][i][1], data[a][i][2], data[a][i][1], data[a][i][2]];
2144             } else if (data[a][i][0] == "Q" && data[b][i][0] == "C") {
2145                 var x = data[b][i][data[b][i].length - 2];
2146                 var y = data[b][i][data[b][i].length - 1];
2147                 data[b].splice(i + 1, 0, ["Q", x, y, x, y]);
2148                 data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
2149                 i++;
2150                 attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
2151                 attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
2152                 attrs[b].x = data[b][i][data[b][i].length - 2];
2153                 attrs[b].y = data[b][i][data[b][i].length - 1];
2154                 return true;
2155             } else if (data[a][i][0] == "A" && data[b][i][0] == "C") {
2156                 var x = data[b][i][data[b][i].length - 2];
2157                 var y = data[b][i][data[b][i].length - 1];
2158                 data[b].splice(i + 1, 0, ["A", 0, 0, data[a][i][3], data[a][i][4], data[a][i][5], x, y]);
2159                 data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
2160                 i++;
2161                 attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
2162                 attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
2163                 attrs[b].x = data[b][i][data[b][i].length - 2];
2164                 attrs[b].y = data[b][i][data[b][i].length - 1];
2165                 return true;
2166             } else if (data[a][i][0] == "U") {
2167                 data[a][i][0] = data[b][i][0];
2168                 for (var j = 1, jj = data[b][i].length; j < jj; j++) {
2169                     data[a][i][j] = (j % 2) ? attrs[a].x : attrs[a].y;
2170                 }
2171             }
2172             return false;
2173         };
2174     for (var i = 0; i < Math.max(data[0].length, data[1].length); i++) {
2175         data[0][i] = processPath(data[0][i], attrs[0]);
2176         data[1][i] = processPath(data[1][i], attrs[1]);
2177         if (data[0][i][0] != data[1][i][0] && (edgeCases(0, 1, i) || edgeCases(1, 0, i))) {
2178             continue;
2179         }
2180         attrs[0].bx = data[0][i][data[0][i].length - 4] || 0;
2181         attrs[0].by = data[0][i][data[0][i].length - 3] || 0;
2182         attrs[0].x = data[0][i][data[0][i].length - 2];
2183         attrs[0].y = data[0][i][data[0][i].length - 1];
2184         attrs[1].bx = data[1][i][data[1][i].length - 4] || 0;
2185         attrs[1].by = data[1][i][data[1][i].length - 3] || 0;
2186         attrs[1].x = data[1][i][data[1][i].length - 2];
2187         attrs[1].y = data[1][i][data[1][i].length - 1];
2188     }
2189     return data;
2190 };