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

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