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

   1 /*
   2  * Raphael 0.6.4 - 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.4";
  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 (pathString) {
 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                     d = document.createElement("div"),
 757                     r = C.canvas = document.createElement("rvml:group"),
 758                     cs = c.style, rs = r.style;
 759                 C.width = width;
 760                 C.height = height;
 761                 width = width || "320px";
 762                 height = height || "200px";
 763                 cs.clip = "rect(0 " + width + " " + height + " 0)";
 764                 cs.top = "-2px";
 765                 cs.left = "-2px";
 766                 cs.position = "absolute";
 767                 rs.position = "absolute";
 768                 d.style.position = "relative";
 769                 rs.width  = width;
 770                 rs.height = height;
 771                 r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " + (height == "100%" ? height : parseFloat(height));
 772                 r.coordorigin = "0 0";
 773
 774                 var b = document.createElement("rvml:rect"), bs = b.style;
 775                 bs.left = bs.top = 0;
 776                 bs.width  = rs.width;
 777                 bs.height = rs.height;
 778                 b.filled = b.stroked = "f";
 779
 780                 r.appendChild(b);
 781                 c.appendChild(r);
 782                 d.appendChild(c);
 783                 if (container == 1) {
 784                     document.body.appendChild(d);
 785                     cs.position = "absolute";
 786                     cs.left = x + "px";
 787                     cs.top = y + "px";
 788                     cs.width = width;
 789                     cs.height = height;
 790                     container = {
 791                         style: {
 792                             width: width,
 793                             height: height
 794                         }
 795                     };
 796                 } else {
 797                     cs.width = container.style.width = width;
 798                     cs.height = container.style.height = height;
 799                     if (container.firstChild) {
 800                         container.insertBefore(d, container.firstChild);
 801                     } else {
 802                         container.appendChild(d);
 803                     }
 804                 }
 805                 for (var prop in C) {
 806                     container[prop] = C[prop];
 807                 }
 808                 container.clear = function () {
 809                     var todel = [];
 810                     for (var i = 0, ii = r.childNodes.length; i < ii; i++) {
 811                         if (r.childNodes[i] != b) {
 812                             todel.push(r.childNodes[i]);
 813                         }
 814                     }
 815                     for (i = 0, ii = todel.length; i < ii; i++) {
 816                         r.removeChild(todel[i]);
 817                     }
 818                 };
 819                 return container;
 820             };
 821             C.remove = function () {
 822                 C.canvas.parentNode.parentNode.parentNode.removeChild(C.canvas.parentNode.parentNode);
 823             };
 824         }
 825         if (type == "SVG") {
 826             var thePath = function (params, pathString, SVG) {
 827                 var el = document.createElementNS(SVG.svgns, "path");
 828                 el.setAttribute("fill", "none");
 829                 if (SVG.canvas) {
 830                     SVG.canvas.appendChild(el);
 831                 }
 832                 var p = new Element(el, SVG);
 833                 p.isAbsolute = true;
 834                 p.type = "path";
 835                 p.last = {x: 0, y: 0, bx: 0, by: 0};
 836                 p.absolutely = function () {
 837                     this.isAbsolute = true;
 838                     return this;
 839                 };
 840                 p.relatively = function () {
 841                     this.isAbsolute = false;
 842                     return this;
 843                 };
 844                 p.moveTo = function (x, y) {
 845                     var d = this.isAbsolute?"M":"m";
 846                     d += parseFloat(x, 10).toFixed(3) + " " + parseFloat(y, 10).toFixed(3) + " ";
 847                     var oldD = this[0].getAttribute("d") || "";
 848                     (oldD == "M0,0") && (oldD = "");
 849                     this[0].setAttribute("d", oldD + d);
 850                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
 851                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
 852                     this.attrs.path = oldD + d;
 853                     return this;
 854                 };
 855                 p.lineTo = function (x, y) {
 856                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
 857                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
 858                     var d = this.isAbsolute?"L":"l";
 859                     d += parseFloat(x, 10).toFixed(3) + " " + parseFloat(y, 10).toFixed(3) + " ";
 860                     var oldD = this[0].getAttribute("d") || "";
 861                     this[0].setAttribute("d", oldD + d);
 862                     this.attrs.path = oldD + d;
 863                     return this;
 864                 };
 865                 p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x, y) {
 866                     var d = this.isAbsolute ? "A" : "a";
 867                     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(" ");
 868                     var oldD = this[0].getAttribute("d") || "";
 869                     this[0].setAttribute("d", oldD + d);
 870                     this.last.x = parseFloat(x, 10);
 871                     this.last.y = parseFloat(y, 10);
 872                     this.attrs.path = oldD + d;
 873                     return this;
 874                 };
 875                 p.cplineTo = function (x1, y1, w1) {
 876                     if (!w1) {
 877                         return this.lineTo(x1, y1);
 878                     } else {
 879                         var p = {};
 880                         var x = parseFloat(x1, 10);
 881                         var y = parseFloat(y1, 10);
 882                         var w = parseFloat(w1, 10);
 883                         var d = this.isAbsolute?"C":"c";
 884                         var attr = [+this.last.x + w, +this.last.y, x - w, y, x, y];
 885                         for (var i = 0, ii = attr.length; i < ii; i++) {
 886                             d += attr[i].toFixed(3) + " ";
 887                         }
 888                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 889                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 890                         this.last.bx = attr[2];
 891                         this.last.by = attr[3];
 892                         var oldD = this[0].getAttribute("d") || "";
 893                         this[0].setAttribute("d", oldD + d);
 894                         this.attrs.path = oldD + d;
 895                         return this;
 896                     }
 897                 };
 898                 p.curveTo = function () {
 899                     var p = {},
 900                         command = [0, 1, 2, 3, "s", 5, "c"];
 901
 902                     var d = command[arguments.length];
 903                     if (this.isAbsolute) {
 904                         d = d.toUpperCase();
 905                     }
 906                     for (var i = 0, ii = arguments.length; i < ii; i++) {
 907                         d += parseFloat(arguments[i], 10).toFixed(3) + " ";
 908                     }
 909                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2], 10);
 910                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1], 10);
 911                     this.last.bx = parseFloat(arguments[arguments.length - 4], 10);
 912                     this.last.by = parseFloat(arguments[arguments.length - 3], 10);
 913                     var oldD = this.node.getAttribute("d") || "";
 914                     this.node.setAttribute("d", oldD + d);
 915                     this.attrs.path = oldD + d;
 916                     return this;
 917                 };
 918                 p.qcurveTo = function () {
 919                     var p = {},
 920                         command = [0, 1, "t", 3, "q"];
 921
 922                     var d = command[arguments.length];
 923                     if (this.isAbsolute) {
 924                         d = d.toUpperCase();
 925                     }
 926                     for (var i = 0, ii = arguments.length; i < ii; i++) {
 927                         d += parseFloat(arguments[i], 10).toFixed(3) + " ";
 928                     }
 929                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[arguments.length - 2], 10);
 930                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[arguments.length - 1], 10);
 931                     if (arguments.length != 2) {
 932                         this.last.qx = parseFloat(arguments[arguments.length - 4], 10);
 933                         this.last.qy = parseFloat(arguments[arguments.length - 3], 10);
 934                     }
 935                     var oldD = this.node.getAttribute("d") || "";
 936                     this.node.setAttribute("d", oldD + d);
 937                     this.attrs.path = oldD + d;
 938                     return this;
 939                 };
 940                 p.addRoundedCorner = function (r, dir) {
 941                     var R = .5522 * r, rollback = this.isAbsolute, o = this;
 942                     if (rollback) {
 943                         this.relatively();
 944                         rollback = function () {
 945                             o.absolutely();
 946                         };
 947                     } else {
 948                         rollback = function () {};
 949                     }
 950                     var actions = {
 951                         l: function () {
 952                             return {
 953                                 u: function () {
 954                                     o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 955                                 },
 956                                 d: function () {
 957                                     o.curveTo(-R, 0, -r, r - R, -r, r);
 958                                 }
 959                             };
 960                         },
 961                         r: function () {
 962                             return {
 963                                 u: function () {
 964                                     o.curveTo(R, 0, r, -(r - R), r, -r);
 965                                 },
 966                                 d: function () {
 967                                     o.curveTo(R, 0, r, r - R, r, r);
 968                                 }
 969                             };
 970                         },
 971                         u: function () {
 972                             return {
 973                                 r: function () {
 974                                     o.curveTo(0, -R, -(R - r), -r, r, -r);
 975                                 },
 976                                 l: function () {
 977                                     o.curveTo(0, -R, R - r, -r, -r, -r);
 978                                 }
 979                             };
 980                         },
 981                         d: function () {
 982                             return {
 983                                 r: function () {
 984                                     o.curveTo(0, R, -(R - r), r, r, r);
 985                                 },
 986                                 l: function () {
 987                                     o.curveTo(0, R, R - r, r, -r, r);
 988                                 }
 989                             };
 990                         }
 991                     };
 992                     actions[dir[0]]()[dir[1]]();
 993                     rollback();
 994                     return o;
 995                 };
 996                 p.andClose = function () {
 997                     var oldD = this[0].getAttribute("d") || "";
 998                     this[0].setAttribute("d", oldD + "Z ");
 999                     this.attrs.path = oldD + "Z ";
1000                     return this;
1001                 };
1002                 if (pathString) {
1003                     p.attrs.path = "" + pathString;
1004                     p.absolutely();
1005                     C.pathfinder(p, p.attrs.path);
1006                 }
1007                 if (params) {
1008                     setFillAndStroke(p, params);
1009                 }
1010                 return p;
1011             };
1012             var addGrdientFill = function (o, gradient, SVG) {
1013                 var el = document.createElementNS(SVG.svgns, gradient.type + "Gradient");
1014                 el.id = "raphael-gradient-" + SVG.gradients++;
1015                 if (gradient.vector && gradient.vector.length) {
1016                     el.setAttribute("x1", gradient.vector[0]);
1017                     el.setAttribute("y1", gradient.vector[1]);
1018                     el.setAttribute("x2", gradient.vector[2]);
1019                     el.setAttribute("y2", gradient.vector[3]);
1020                 }
1021                 SVG.defs.appendChild(el);
1022                 for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
1023                     var stop = document.createElementNS(SVG.svgns, "stop");
1024                     stop.setAttribute("offset", gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%");
1025                     stop.setAttribute("stop-color", gradient.dots[i].color || "#fff");
1026                     if (typeof gradient.dots[i].opacity != "undefined") {
1027                         stop.setAttribute("stop-opacity", gradient.dots[i].opacity);
1028                     }
1029                     el.appendChild(stop);
1030                 };
1031                 o.setAttribute("fill", "url(#" + el.id + ")");
1032             };
1033             var updatePosition = function (o) {
1034                 if (o.pattern) {
1035                     var bbox = o.node.getBBox();
1036                     o.pattern.setAttribute("patternTransform", "translate(" + [bbox.x, bbox.y].join(",") + ")");
1037                 }
1038             };
1039             var setFillAndStroke = function (o, params) {
1040                 var dasharray = {
1041                     "-": [3, 1],
1042                     ".": [1, 1],
1043                     "-.": [3, 1, 1, 1],
1044                     "-..": [3, 1, 1, 1, 1, 1],
1045                     ". ": [1, 3],
1046                     "- ": [4, 3],
1047                     "--": [8, 3],
1048                     "- .": [4, 3, 1, 3],
1049                     "--.": [8, 3, 1, 3],
1050                     "--..": [8, 3, 1, 3, 1, 3]
1051                 },
1052                 addDashes = function (o, value) {
1053                     value = dasharray[value.toString().toLowerCase()];
1054                     if (value) {
1055                         var width = o.attrs["stroke-width"] || "1",
1056                             butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
1057                             dashes = [];
1058                         for (var i = 0, ii = value.length; i < ii; i++) {
1059                             dashes.push(value[i] * width + ((i % 2) ? 1 : -1) * butt);
1060                         }
1061                         value = dashes.join(",");
1062                         o.node.setAttribute("stroke-dasharray", value);
1063                     }
1064                 };
1065                 for (var att in params) {
1066                     var value = params[att];
1067                     o.attrs[att] = value;
1068                     switch (att) {
1069                         case "path":
1070                             if (o.type == "path") {
1071                                 o.node.setAttribute("d", "M0,0");
1072                                 C.pathfinder(o, value);
1073                             }
1074                         case "rx":
1075                         case "cx":
1076                         case "x":
1077                             o.node.setAttribute(att, value);
1078                             updatePosition(o);
1079                             break;
1080                         case "ry":
1081                         case "cy":
1082                         case "y":
1083                             o.node.setAttribute(att, value);
1084                             updatePosition(o);
1085                             break;
1086                         case "width":
1087                             o.node.setAttribute(att, value);
1088                             break;
1089                         case "height":
1090                             o.node.setAttribute(att, value);
1091                             break;
1092                         case "gradient":
1093                             addGrdientFill(o.node, value, o.svg);
1094                             break;
1095                         case "stroke-width":
1096                             o.node.style.strokeWidth = value;
1097                             // Need following line for Firefox
1098                             o.node.setAttribute(att, value);
1099                             if (o.attrs["stroke-dasharray"]) {
1100                                 addDashes(o, o.attrs["stroke-dasharray"]);
1101                             }
1102                             break;
1103                         case "stroke-dasharray":
1104                             addDashes(o, value);
1105                             break;
1106                         case "text":
1107                             if (o.type == "text") {
1108                                 o.node.childNodes.length && o.node.removeChild(o.node.firstChild);
1109                                 o.node.appendChild(document.createTextNode(value));
1110                             }
1111                             break;
1112                         case "rotation":
1113                             o.rotate(value, true);
1114                             break;
1115                         case "translation":
1116                             var xy = value.split(/[, ]+/);
1117                             o.translate(xy[0], xy[1]);
1118                             break;
1119                         case "scale":
1120                             var xy = value.split(/[, ]+/);
1121                             o.scale(xy[0], xy[1]);
1122                             break;
1123                         case "fill":
1124                             var isURL = value.match(/^url\(([^\)]+)\)$/i);
1125                             if (isURL) {
1126                                 var el = document.createElementNS(o.svg.svgns, "pattern");
1127                                 var ig = document.createElementNS(o.svg.svgns, "image");
1128                                 el.id = "raphael-pattern-" + o.svg.gradients++;
1129                                 el.setAttribute("x", 0);
1130                                 el.setAttribute("y", 0);
1131                                 el.setAttribute("patternUnits", "userSpaceOnUse");
1132                                 ig.setAttribute("x", 0);
1133                                 ig.setAttribute("y", 0);
1134                                 ig.setAttributeNS(o.svg.xlink, "href", isURL[1]);
1135                                 el.appendChild(ig);
1136
1137                                 var img = document.createElement("img");
1138                                 img.style.position = "absolute";
1139                                 img.style.top = "-9999em";
1140                                 img.style.left = "-9999em";
1141                                 img.onload = function () {
1142                                     el.setAttribute("width", this.offsetWidth);
1143                                     el.setAttribute("height", this.offsetHeight);
1144                                     ig.setAttribute("width", this.offsetWidth);
1145                                     ig.setAttribute("height", this.offsetHeight);
1146                                     document.body.removeChild(this);
1147                                     C.safari();
1148                                 };
1149                                 document.body.appendChild(img);
1150                                 img.src = isURL[1];
1151                                 o.svg.defs.appendChild(el);
1152                                 o.node.style.fill = "url(#" + el.id + ")";
1153                                 o.node.setAttribute("fill", "url(#" + el.id + ")");
1154                                 o.pattern = el;
1155                                 updatePosition(o);
1156                                 break;
1157                             }
1158                         default :
1159                             var cssrule = att.replace(/(\-.)/g, function (w) {
1160                                 return w.substring(1).toUpperCase();
1161                             });
1162                             o.node.style[cssrule] = value;
1163                             // Need following line for Firefox
1164                             o.node.setAttribute(att, value);
1165                             break;
1166                     }
1167                 }
1168             };
1169             var Element = function (node, svg) {
1170                 var X = 0,
1171                     Y = 0;
1172                 this[0] = node;
1173                 this.node = node;
1174                 this.svg = svg;
1175                 this.attrs = this.attrs || {};
1176                 this.transformations = []; // rotate, translate, scale
1177                 this._ = {
1178                     tx: 0,
1179                     ty: 0,
1180                     rt: {deg: 0, x: 0, y: 0},
1181                     sx: 1,
1182                     sy: 1
1183                 };
1184             };
1185             Element.prototype.translate = function (x, y) {
1186                 if (x == undefined && y == undefined) {
1187                     return {x: this._.tx, y: this._.ty};
1188                 }
1189                 this._.tx += +x;
1190                 this._.ty += +y;
1191                 switch (this.type) {
1192                     case "circle":
1193                     case "ellipse":
1194                         this.attr({cx: this.attrs.cx + x, cy: this.attrs.cy + y});
1195                         break;
1196                     case "rect":
1197                     case "image":
1198                     case "text":
1199                         this.attr({x: this.attrs.x + x, y: this.attrs.y + y});
1200                         break;
1201                     case "path":
1202                         var path = Raphael.pathToRelative(this.attrs.path);
1203                         path[0][1] += +x;
1204                         path[0][2] += +y;
1205                         this.attr({path: path.join(" ")});
1206                     break;
1207                 }
1208                 return this;
1209             };
1210             Element.prototype.rotate = function (deg, isAbsolute) {
1211                 if (deg == undefined) {
1212                     return this._.rt.deg;
1213                 }
1214                 var bbox = this.getBBox();
1215                 if (isAbsolute) {
1216                     this._.rt.deg = deg;
1217                 } else {
1218                     this._.rt.deg += deg;
1219                 }
1220
1221                 if (this._.rt.deg) {
1222                     this.transformations[0] = ("rotate(" + this._.rt.deg + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")");
1223                 } else {
1224                     this.transformations[0] = "";
1225                 }
1226                 this.node.setAttribute("transform", this.transformations.join(" "));
1227                 return this;
1228             };
1229             Element.prototype.hide = function () {
1230                 this.node.style.display = "none";
1231                 return this;
1232             };
1233             Element.prototype.show = function () {
1234                 this.node.style.display = "block";
1235                 return this;
1236             };
1237             Element.prototype.remove = function () {
1238                 this.node.parentNode.removeChild(this.node);
1239             };
1240             Element.prototype.getBBox = function () {
1241                 return this.node.getBBox();
1242             };
1243             Element.prototype.attr = function () {
1244                 if (arguments.length == 1 && typeof arguments[0] == "string") {
1245                     if (arguments[0] == "translation") {
1246                         return this.translate();
1247                     }
1248                     return this.attrs[arguments[0]];
1249                 }
1250                 if (arguments.length == 1 && arguments[0] instanceof Array) {
1251                     var values = {};
1252                     for (var j in arguments[0]) {
1253                         values[arguments[0][j]] = this.attrs[arguments[0][j]];
1254                     }
1255                     return values;
1256                 }
1257                 if (arguments.length == 2) {
1258                     var params = {};
1259                     params[arguments[0]] = arguments[1];
1260                     setFillAndStroke(this, params);
1261                 } else if (arguments.length == 1 && typeof arguments[0] == "object") {
1262                     setFillAndStroke(this, arguments[0]);
1263                 }
1264                 return this;
1265             };
1266             Element.prototype.toFront = function () {
1267                 this.node.parentNode.appendChild(this.node);
1268                 return this;
1269             };
1270             Element.prototype.toBack = function () {
1271                 if (this.node.parentNode.firstChild != this.node) {
1272                     this.node.parentNode.insertBefore(this.node, this.node.parentNode.firstChild);
1273                 }
1274                 return this;
1275             };
1276             Element.prototype.insertAfter = function (element) {
1277                 if (element.node.nextSibling) {
1278                     element.node.parentNode.insertBefore(this.node, element.node.nextSibling);
1279                 } else {
1280                     element.node.parentNode.appendChild(this.node);
1281                 }
1282                 return this;
1283             };
1284             Element.prototype.insertBefore = function (element) {
1285                 element.node.parentNode.insertBefore(this.node, element.node);
1286                 return this;
1287             };
1288             var theCircle = function (svg, x, y, r) {
1289                 var el = document.createElementNS(svg.svgns, "circle");
1290                 el.setAttribute("cx", x);
1291                 el.setAttribute("cy", y);
1292                 el.setAttribute("r", r);
1293                 el.setAttribute("fill", "none");
1294                 el.setAttribute("stroke", "#000");
1295                 if (svg.canvas) {
1296                     svg.canvas.appendChild(el);
1297                 }
1298                 var res = new Element(el, svg);
1299                 res.attrs = res.attrs || {};
1300                 res.attrs.cx = x;
1301                 res.attrs.cy = y;
1302                 res.attrs.r = r;
1303                 res.attrs.stroke = "#000";
1304                 res.type = "circle";
1305                 return res;
1306             };
1307             var theRect = function (svg, x, y, w, h, r) {
1308                 var el = document.createElementNS(svg.svgns, "rect");
1309                 el.setAttribute("x", x);
1310                 el.setAttribute("y", y);
1311                 el.setAttribute("width", w);
1312                 el.setAttribute("height", h);
1313                 if (r) {
1314                     el.setAttribute("rx", r);
1315                     el.setAttribute("ry", r);
1316                 }
1317                 el.setAttribute("fill", "none");
1318                 el.setAttribute("stroke", "#000");
1319                 if (svg.canvas) {
1320                     svg.canvas.appendChild(el);
1321                 }
1322                 var res = new Element(el, svg);
1323                 res.attrs = res.attrs || {};
1324                 res.attrs.x = x;
1325                 res.attrs.y = y;
1326                 res.attrs.width = w;
1327                 res.attrs.height = h;
1328                 res.attrs.stroke = "#000";
1329                 if (r) {
1330                     res.attrs.rx = res.attrs.ry = r;
1331                 }
1332                 res.type = "rect";
1333                 return res;
1334             };
1335             var theEllipse = function (svg, x, y, rx, ry) {
1336                 var el = document.createElementNS(svg.svgns, "ellipse");
1337                 el.setAttribute("cx", x);
1338                 el.setAttribute("cy", y);
1339                 el.setAttribute("rx", rx);
1340                 el.setAttribute("ry", ry);
1341                 el.setAttribute("fill", "none");
1342                 el.setAttribute("stroke", "#000");
1343                 if (svg.canvas) {
1344                     svg.canvas.appendChild(el);
1345                 }
1346                 var res = new Element(el, svg);
1347                 res.attrs = res.attrs || {};
1348                 res.attrs.cx = x;
1349                 res.attrs.cy = y;
1350                 res.attrs.rx = rx;
1351                 res.attrs.ry = ry;
1352                 res.attrs.stroke = "#000";
1353                 res.type = "ellipse";
1354                 return res;
1355             };
1356             var theImage = function (svg, src, x, y, w, h) {
1357                 var el = document.createElementNS(svg.svgns, "image");
1358                 el.setAttribute("x", x);
1359                 el.setAttribute("y", y);
1360                 el.setAttribute("width", w);
1361                 el.setAttribute("height", h);
1362                 el.setAttribute("preserveAspectRatio", "none");
1363                 el.setAttributeNS(svg.xlink, "href", src);
1364                 if (svg.canvas) {
1365                     svg.canvas.appendChild(el);
1366                 }
1367                 var res = new Element(el, svg);
1368                 res.attrs = res.attrs || {};
1369                 res.attrs.x = x;
1370                 res.attrs.y = y;
1371                 res.attrs.width = w;
1372                 res.attrs.height = h;
1373                 res.type = "image";
1374                 return res;
1375             };
1376             var theText = function (svg, x, y, text) {
1377                 var el = document.createElementNS(svg.svgns, "text");
1378                 el.setAttribute("x", x);
1379                 el.setAttribute("y", y);
1380                 el.setAttribute("text-anchor", "middle");
1381                 el.setAttribute("fill", "#000");
1382                 if (text) {
1383                     el.appendChild(document.createTextNode(text));
1384                 }
1385                 if (svg.canvas) {
1386                     svg.canvas.appendChild(el);
1387                 }
1388                 var res = new Element(el, svg);
1389                 res.attrs = res.attrs || {};
1390                 res.attrs.x = x;
1391                 res.attrs.y = y;
1392                 res.attrs.fill = "#000";
1393                 res.type = "text";
1394                 return res;
1395             };
1396             var theGroup = function (svg) {
1397                 var el = document.createElementNS(svg.svgns, "g");
1398                 if (svg.canvas) {
1399                     svg.canvas.appendChild(el);
1400                 }
1401                 var i = new Element(el, svg);
1402                 for (var f in svg) {
1403                     if (f[0] != "_" && typeof svg[f] == "function") {
1404                         i[f] = (function (f) {
1405                             return function () {
1406                                 var e = svg[f].apply(svg, arguments);
1407                                 el.appendChild(e[0]);
1408                                 return e;
1409                             };
1410                         })(f);
1411                     }
1412                 }
1413                 i.type = "group";
1414                 return i;
1415             };
1416             r._create = function () {
1417                 // container, width, height
1418                 // x, y, width, height
1419                 if (typeof arguments[0] == "string") {
1420                     var container = document.getElementById(arguments[0]);
1421                     var width = arguments[1];
1422                     var height = arguments[2];
1423                 }
1424                 if (typeof arguments[0] == "object") {
1425                     var container = arguments[0];
1426                     var width = arguments[1];
1427                     var height = arguments[2];
1428                 }
1429                 if (typeof arguments[0] == "number") {
1430                     var container = 1,
1431                         x = arguments[0],
1432                         y = arguments[1],
1433                         width = arguments[2],
1434                         height = arguments[3];
1435                 }
1436                 if (!container) {
1437                     throw new Error("SVG container not found.");
1438                 }
1439                 C.canvas = document.createElementNS(C.svgns, "svg");
1440                 C.canvas.setAttribute("width", width || 320);
1441                 C.width = width || 320;
1442                 C.canvas.setAttribute("height", height || 200);
1443                 C.height = height || 200;
1444                 if (container == 1) {
1445                     document.body.appendChild(C.canvas);
1446                     C.canvas.style.position = "absolute";
1447                     C.canvas.style.left = x + "px";
1448                     C.canvas.style.top = y + "px";
1449                 } else {
1450                     if (container.firstChild) {
1451                         container.insertBefore(C.canvas, container.firstChild);
1452                     } else {
1453                         container.appendChild(C.canvas);
1454                     }
1455                 }
1456                 container = {
1457                     canvas: C.canvas,
1458                     clear: function () {
1459                         while (this.canvas.firstChild) {
1460                             this.canvas.removeChild(this.canvas.firstChild);
1461                         }
1462                         this.defs = document.createElementNS(C.svgns, "defs");
1463                         this.gradients = 0;
1464                         this.canvas.appendChild(this.defs);
1465                     }
1466                 };
1467                 for (var prop in C) {
1468                     if (prop != "create") {
1469                         container[prop] = C[prop];
1470                     }
1471                 }
1472                 container.clear();
1473                 return container;
1474             };
1475             C.remove = function () {
1476                 C.canvas.parentNode.removeChild(C.canvas);
1477             };
1478             C.svgns = "http://www.w3.org/2000/svg";
1479             C.xlink = "http://www.w3.org/1999/xlink";
1480         }
1481         if (type == "VML" || type == "SVG") {
1482             C.circle = function (x, y, r) {
1483                 return theCircle(this, x, y, r);
1484             };
1485             C.rect = function (x, y, w, h, r) {
1486                 return theRect(this, x, y, w, h, r);
1487             };
1488             C.ellipse = function (x, y, rx, ry) {
1489                 return theEllipse(this, x, y, rx, ry);
1490             };
1491             C.path = function (params, pathString) {
1492                 return thePath(params, pathString, this);
1493             };
1494             C.image = function (src, x, y, w, h) {
1495                 return theImage(this, src, x, y, w, h);
1496             };
1497             C.text = function (x, y, text) {
1498                 return theText(this, x, y, text);
1499             };
1500             C.group = function () {
1501                 return theGroup(this);
1502             };
1503             C.drawGrid = function (x, y, w, h, wv, hv, color) {
1504                 color = color || "#000";
1505                 var p = this.path({stroke: color, "stroke-width": 1})
1506                         .moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h).lineTo(x, y + h).lineTo(x, y),
1507                     rowHeight = h / hv,
1508                     columnWidth = w / wv;
1509                 for (var i = 1; i < hv; i++) {
1510                     p.moveTo(x, y + i * rowHeight).lineTo(x + w, y + i * rowHeight);
1511                 }
1512                 for (var i = 1; i < wv; i++) {
1513                     p.moveTo(x + i * columnWidth, y).lineTo(x + i * columnWidth, y + h);
1514                 }
1515                 return p;
1516             };
1517             C.safari = function () {
1518                 if (navigator.vendor == "Apple Computer, Inc.") {
1519                     var rect = C.rect(-C.width, -C.height, C.width * 3, C.height * 3).attr({stroke: "none"});
1520                     setTimeout(function () {rect.remove();}, 0);
1521                 }
1522             };
1523             Element.prototype.stop = function () {
1524                 clearTimeout(this.animation_in_progress);
1525             };
1526             Element.prototype.scale = function (x, y) {
1527                 if (x == undefined && y == undefined) {
1528                     return {x: this._.sx, y: this._.sy};
1529                 }
1530                 y = y || x;
1531                 var dx, dy, cx, cy;
1532                 if (x != 0 && !(x == 1 && y == 1)) {
1533                     var dirx = Math.round(x / Math.abs(x)),
1534                         diry = Math.round(y / Math.abs(y)),
1535                         s = this.node.style;
1536                     dx = this.attr("x");
1537                     dy = this.attr("y");
1538                     cx = this.attr("cx");
1539                     cy = this.attr("cy");
1540                     if (dirx != 1 || diry != 1) {
1541                         if (this.transformations) {
1542                             this.transformations[2] = "scale(" + [dirx, diry] + ")";
1543                             this.node.setAttribute("transform", this.transformations.join(" "));
1544                             dx = (dirx < 0) ? -this.attr("x") - this.attrs.width * x * dirx / this._.sx : this.attr("x");
1545                             dy = (diry < 0) ? -this.attr("y") - this.attrs.height * y * diry / this._.sy : this.attr("y");
1546                             cx = this.attr("cx") * dirx;
1547                             cy = this.attr("cy") * diry;
1548                         } else {
1549                             this.node.filterMatrix = " progid:DXImageTransform.Microsoft.Matrix(M11=" + dirx +
1550                                 ", M12=0, M21=0, M22=" + diry +
1551                                 ", Dx=0, Dy=0, sizingmethod='auto expand', filtertype='bilinear')";
1552                             s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
1553                         }
1554                     } else {
1555                         if (this.transformations) {
1556                             this.transformations[2] = "";
1557                             this.node.setAttribute("transform", this.transformations.join(" "));
1558                         } else {
1559                             this.node.filterMatrix = "";
1560                             s.filter = (this.node.filterMatrix || "") + (this.node.filterOpacity || "");
1561                         }
1562                     }
1563                     switch (this.type) {
1564                         case "rect":
1565                         case "image":
1566                             this.attr({
1567                                 width: this.attrs.width * x * dirx / this._.sx,
1568                                 height: this.attrs.height * y * diry / this._.sy,
1569                                 x: dx,
1570                                 y: dy
1571                             });
1572                             break;
1573                         case "circle":
1574                         case "ellipse":
1575                             this.attr({
1576                                 rx: this.attrs.rx * x * dirx / this._.sx,
1577                                 ry: this.attrs.ry * y * diry / this._.sy,
1578                                 r: this.attrs.r * x * diry / this._.sx,
1579                                 cx: cx,
1580                                 cy: cy
1581                             });
1582                             break;
1583                         case "path":
1584                             var path = Raphael.pathToRelative(Raphael.parsePathString(this.attr("path"))),
1585                                 skip = true,
1586                                 dim = Raphael.pathDimensions(this.attrs.path),
1587                                 dx = -dim.width * (x - 1) / 2,
1588                                 dy = -dim.height * (y - 1) / 2;
1589                             for (var i = 0, ii = path.length; i < ii; i++) {
1590                                 if (path[i][0].toUpperCase() == "M" && skip) {
1591                                     continue;
1592                                 } else {
1593                                     skip = false;
1594                                 }
1595                                 if (path[i][0].toUpperCase() == "A") {
1596                                     path[i][path[i].length - 2] *= x * dirx;
1597                                     path[i][path[i].length - 1] *= y * diry;
1598                                 } else {
1599                                     for (var j = 1, jj = path[i].length; j < jj; j++) {
1600                                         path[i][j] *= (j % 2) ? x * dirx / this._.sx : y * diry / this._.sy;
1601                                     }
1602                                 }
1603                             }
1604                             var dim2 = Raphael.pathDimensions(path),
1605                                 dx = dim.x + dim.width / 2 - dim2.x - dim2.width / 2,
1606                                 dy = dim.y + dim.height / 2 - dim2.y - dim2.height / 2;
1607                             path = Raphael.pathToRelative(path);
1608                             path[0][1] += dx;
1609                             path[0][2] += dy;
1610
1611                             this.attr({path: path.join(" ")});
1612                     }
1613                 }
1614                 this._.sx = x;
1615                 this._.sy = y;
1616                 return this;
1617             };
1618             Element.prototype.animate = function (params, ms, callback) {
1619                 clearTimeout(this.animation_in_progress);
1620                 var from = {}, to = {}, diff = {}, t = {x: 0, y: 0};
1621                 for (var attr in params) {
1622                     if (attr in availableAnimAttrs) {
1623                         from[attr] = this.attr(attr);
1624                         if (typeof from[attr] == "undefined") {
1625                             from[attr] = availableAttrs[attr];
1626                         }
1627                         to[attr] = params[attr];
1628                         switch (availableAnimAttrs[attr]) {
1629                             case "number":
1630                                 diff[attr] = (to[attr] - from[attr]) / ms;
1631                                 break;
1632                             case "colour":
1633                                 from[attr] = Raphael.getRGB(from[attr]);
1634                                 var toColour = Raphael.getRGB(to[attr]);
1635                                 diff[attr] = {
1636                                     r: (toColour.r - from[attr].r) / ms,
1637                                     g: (toColour.g - from[attr].g) / ms,
1638                                     b: (toColour.b - from[attr].b) / ms
1639                                 };
1640                                 break;
1641                             case "path":
1642                                 var pathes = Raphael.pathEqualiser(from[attr], to[attr]);
1643                                 from[attr] = pathes[0];
1644                                 to[attr] = pathes[1];
1645                                 diff[attr] = [];
1646                                 for (var i = 0, ii = from[attr].length; i < ii; i++) {
1647                                     diff[attr][i] = [0];
1648                                     for (var j = 1, jj = from[attr][i].length; j < jj; j++) {
1649                                         diff[attr][i][j] = (to[attr][i][j] - from[attr][i][j]) / ms;
1650                                     }
1651                                 }
1652                                 break;
1653                             case "csv":
1654                                 var values = params[attr].split(/[, ]+/);
1655                                 if (attr == "translation") {
1656                                     from[attr] = [0, 0];
1657                                     diff[attr] = [values[0] / ms, values[1] / ms];
1658                                 } else {
1659                                     from[attr] = from[attr].split(/[, ]+/);
1660                                     diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms];
1661                                 }
1662                                 to[attr] = values;
1663                         }
1664                     }
1665                 }
1666                 var start = new Date(),
1667                     prev = 0,
1668                     that = this;
1669                 (function () {
1670                     var time = (new Date()).getTime() - start.getTime(),
1671                         set = {},
1672                         now;
1673                     if (time < ms) {
1674                         for (var attr in from) {
1675                             switch (availableAnimAttrs[attr]) {
1676                                 case "number":
1677                                     now = +from[attr] + time * diff[attr];
1678                                     break;
1679                                 case "colour":
1680                                     now = "rgb(" + [
1681                                         Math.round(from[attr].r + time * diff[attr].r),
1682                                         Math.round(from[attr].g + time * diff[attr].g),
1683                                         Math.round(from[attr].b + time * diff[attr].b)
1684                                     ].join(",") + ")";
1685                                     break;
1686                                 case "path":
1687                                     now = [];
1688                                     for (var i = 0, ii = from[attr].length; i < ii; i++) {
1689                                         now[i] = [from[attr][i][0]];
1690                                         for (var j = 1, jj = from[attr][i].length; j < jj; j++) {
1691                                             now[i][j] = from[attr][i][j] + time * diff[attr][i][j];
1692                                         }
1693                                         now[i] = now[i].join(" ");
1694                                     }
1695                                     now = now.join(" ");
1696                                     break;
1697                                 case "csv":
1698                                     if (attr == "translation") {
1699                                         var x = diff[attr][0] * (time - prev),
1700                                             y = diff[attr][1] * (time - prev);
1701                                         t.x += x;
1702                                         t.y += y;
1703                                         now = [x, y].join(" ");
1704                                     } else {
1705                                         now = [+from[attr][0] + time * diff[attr][0], +from[attr][1] + time * diff[attr][1]].join(" ");
1706                                     }
1707                                     break;
1708                             }
1709                             if (attr == "font-size") {
1710                                 set[attr] = now + "px";
1711                             } else {
1712                                 set[attr] = now;
1713                             }
1714                         }
1715                         that.attr(set);
1716                         that.animation_in_progress = setTimeout(arguments.callee, 0);
1717                         C.safari();
1718                     } else {
1719                         if (t.x || t.y) {
1720                             that.translate(-t.x, -t.y);
1721                         }
1722                         that.attr(params);
1723                         clearTimeout(that.animation_in_progress);
1724                         C.safari();
1725                         (typeof callback == "function") && callback.call(that);
1726                     }
1727                     prev = time;
1728                 })();
1729                 return this;
1730             };
1731
1732             C.pathfinder = function (p, path) {
1733                 var commands = {
1734                     M: function (x, y) {
1735                         this.moveTo(x, y);
1736                     },
1737                     C: function (x1, y1, x2, y2, x3, y3) {
1738                         this.curveTo(x1, y1, x2, y2, x3, y3);
1739                     },
1740                     Q: function (x1, y1, x2, y2) {
1741                         this.qcurveTo(x1, y1, x2, y2);
1742                     },
1743                     T: function (x, y) {
1744                         this.qcurveTo(x, y);
1745                     },
1746                     S: function (x1, y1, x2, y2) {
1747                         p.curveTo(x1, y1, x2, y2);
1748                     },
1749                     L: function (x, y) {
1750                         p.lineTo(x, y);
1751                     },
1752                     H: function (x) {
1753                         this.lineTo(x, this.last.y);
1754                     },
1755                     V: function (y) {
1756                         this.lineTo(this.last.x, y);
1757                     },
1758                     A: function (rx, ry, xaxisrotation, largearcflag, sweepflag, x, y) {
1759                         this.arcTo(rx, ry, largearcflag, sweepflag, x, y);
1760                     },
1761                     Z: function () {
1762                         this.andClose();
1763                     }
1764                 };
1765
1766                 path = Raphael.pathToAbsolute(path);
1767                 for (var i = 0, ii = path.length; i < ii; i++) {
1768                     var b = path[i].shift();
1769                     commands[b].apply(p, path[i]);
1770                 }
1771             };
1772             return r;
1773         } else {
1774             return function () {};
1775         }
1776     })((!window.SVGAngle) ? "VML" : "SVG");
1777
1778
1779 Raphael.vml = !(Raphael.svg = (Raphael.type == "SVG"));
1780 if (Raphael.vml && window.CanvasRenderingContext2D) {
1781     Raphael.type = "Canvas only";
1782     Raphael.vml = Raphael.svg = false;
1783 }
1784 Raphael.toString = function () {
1785     return  "Your browser " + (this.vml ? "doesn't ": "") + "support" + (this.svg ? "s": "") +
1786             " SVG.\nYou are running " + unescape("Rapha%EBl%20") + this.version;
1787 };
1788 // generic utilities
1789 Raphael.hsb2rgb = function (hue, saturation, brightness) {
1790     if (typeof hue == "object" && "h" in hue && "s" in hue && "b" in hue) {
1791         brightness = hue.b;
1792         saturation = hue.s;
1793         hue = hue.h;
1794     }
1795     var red,
1796         green,
1797         blue;
1798     if (brightness == 0) {
1799         return {r: 0, g: 0, b: 0, hex: "#000"};
1800     } else {
1801         var i = Math.floor(hue * 6),
1802             f = (hue * 6) - i,
1803             p = brightness * (1 - saturation),
1804             q = brightness * (1 - (saturation * f)),
1805             t = brightness * (1 - (saturation * (1 - f)));
1806         [
1807             function () {red = brightness; green = t; blue = p;},
1808             function () {red = q; green = brightness; blue = p;},
1809             function () {red = p; green = brightness; blue = t;},
1810             function () {red = p; green = q; blue = brightness;},
1811             function () {red = t; green = p; blue = brightness;},
1812             function () {red = brightness; green = p; blue = q;},
1813             function () {red = brightness; green = t; blue = p;}
1814         ][i]();
1815     }
1816     var rgb = {r: red, g: green, b: blue};
1817     red *= 255;
1818     green *= 255;
1819     blue *= 255;
1820     var r = Math.round(red).toString(16);
1821     if (r.length == 1) {
1822         r = "0" + r;
1823     }
1824     var g = Math.round(green).toString(16);
1825     if (g.length == 1) {
1826         g = "0" + g;
1827     }
1828     var b = Math.round(blue).toString(16);
1829     if (b.length == 1) {
1830         b = "0" + b;
1831     }
1832     rgb.hex = "#" + r + g + b;
1833     return rgb;
1834 };
1835 Raphael.rgb2hsb = function (red, green, blue) {
1836     if (typeof red == "object" && "r" in red && "g" in red && "b" in red) {
1837         blue = red.b;
1838         green = red.g;
1839         red = red.r;
1840     }
1841     if (typeof red == "string" && red.charAt(0) == "#") {
1842         if (red.length == 4) {
1843             blue = parseInt(red.substring(3), 16);
1844             green = parseInt(red.substring(2, 3), 16);
1845             red = parseInt(red.substring(1, 2), 16);
1846         } else {
1847             blue = parseInt(red.substring(5), 16);
1848             green = parseInt(red.substring(3, 5), 16);
1849             red = parseInt(red.substring(1, 3), 16);
1850         }
1851     }
1852     if (red > 1 || green > 1 || blue > 1) {
1853         red /= 255;
1854         green /= 255;
1855         blue /= 255;
1856     }
1857     var max = Math.max(red, green, blue),
1858         min = Math.min(red, green, blue),
1859         hue,
1860         saturation,
1861         brightness = max;
1862     if (min == max) {
1863         return {h: 0, s: 0, b: max};
1864     } else {
1865         var delta = (max - min);
1866         saturation = delta / max;
1867         if (red == max) {
1868             hue = (green - blue) / delta;
1869         } else if (green == max) {
1870             hue = 2 + ((blue - red) / delta);
1871         } else {
1872             hue = 4 + ((red - green) / delta);
1873         }
1874         hue /= 6;
1875         if (hue < 0) {
1876             hue += 1;
1877         }
1878         if (hue > 1) {
1879             hue -= 1;
1880         }
1881     }
1882     return {h: hue, s: saturation, b: brightness};
1883 };
1884 Raphael.getRGB = function (colour) {
1885     var red, green, blue,
1886         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);
1887     if (rgb) {
1888         if (rgb[2]) {
1889             blue = parseInt(rgb[2].substring(5), 16);
1890             green = parseInt(rgb[2].substring(3, 5), 16);
1891             red = parseInt(rgb[2].substring(1, 3), 16);
1892         }
1893         if (rgb[3]) {
1894             blue = parseInt(rgb[3].substring(3) + rgb[3].substring(3), 16);
1895             green = parseInt(rgb[3].substring(2, 3) + rgb[3].substring(2, 3), 16);
1896             red = parseInt(rgb[3].substring(1, 2) + rgb[3].substring(1, 2), 16);
1897         }
1898         if (rgb[4]) {
1899             rgb = rgb[4].split(/\s*,\s*/);
1900             red = parseInt(rgb[0], 10);
1901             green = parseInt(rgb[1], 10);
1902             blue = parseInt(rgb[2], 10);
1903         }
1904         if (rgb[5]) {
1905             rgb = rgb[5].split(/\s*,\s*/);
1906             red = parseInt(rgb[0], 10) * 2.55;
1907             green = parseInt(rgb[1], 10) * 2.55;
1908             blue = parseInt(rgb[2], 10) * 2.55;
1909         }
1910         if (rgb[6]) {
1911             rgb = rgb[6].split(/\s*,\s*/);
1912             red = parseInt(rgb[0], 10);
1913             green = parseInt(rgb[1], 10);
1914             blue = parseInt(rgb[2], 10);
1915             return this.hsb2rgb(red, green, blue);
1916         }
1917         if (rgb[7]) {
1918             rgb = rgb[7].split(/\s*,\s*/);
1919             red = parseInt(rgb[0], 10) * 2.55;
1920             green = parseInt(rgb[1], 10) * 2.55;
1921             blue = parseInt(rgb[2], 10) * 2.55;
1922             return this.hsb2rgb(red, green, blue);
1923         }
1924         var rgb = {r: red, g: green, b: blue};
1925         var r = Math.round(red).toString(16);
1926         (r.length == 1) && (r = "0" + r);
1927         var g = Math.round(green).toString(16);
1928         (g.length == 1) && (g = "0" + g);
1929         var b = Math.round(blue).toString(16);
1930         (b.length == 1) && (b = "0" + b);
1931         rgb.hex = "#" + r + g + b;
1932         return rgb;
1933     }
1934 };
1935 Raphael.getColor = function (value) {
1936     var start = arguments.callee.start = arguments.callee.start || {h: 0, s: 1, b: value || .75};
1937     var rgb = this.hsb2rgb(start.h, start.s, start.b);
1938     start.h += .075;
1939     if (start.h > 1) {
1940         start.h = 0;
1941         start.s -= .2;
1942         if (start.s <= 0) {
1943             arguments.callee.start = {h: 0, s: 1, b: start.b};
1944         }
1945     }
1946     return rgb.hex;
1947 };
1948 Raphael.getColor.reset = function () {
1949     this.start = undefined;
1950 };
1951 Raphael.parsePathString = function (pathString) {
1952     var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0};
1953     var data = [];
1954     pathString.replace(/([achlmqstvz])[\s,]*((-?\d*\.?\d*\s*,?\s*)+)/ig, function (a, b, c) {
1955         var params = [], name = b.toLowerCase();
1956         c.replace(/(-?\d*\.?\d*)\s*,?\s*/ig, function (a, b) {
1957             b && params.push(+b);
1958         });
1959         while (params.length >= paramCounts[name]) {
1960             data.push([b].concat(params.splice(0, paramCounts[name])));
1961             if (!paramCounts[name]) {
1962                 break;
1963             };
1964         }
1965     });
1966     data.toString = function () {
1967         var res = "";
1968         for (var i = 0, ii = this.length; i < ii; i++) {
1969             res += this[i][0] + this[i].join(",").substring(2);
1970         }
1971         return res;
1972     };
1973     return data;
1974 };
1975 Raphael.pathDimensions = function (path) {
1976     var pathArray = path;
1977     if (typeof path == "string") {
1978         pathArray = this.parsePathString(path);
1979     }
1980     pathArray = this.pathToAbsolute(pathArray);
1981     var x = [], y = [], length = 0;
1982     for (var i = 0, ii = pathArray.length; i < ii; i++) {
1983         switch (pathArray[i][0]) {
1984             case "Z":
1985                 break;
1986             case "A":
1987                 x.push(pathArray[i][pathArray[i].length - 2]);
1988                 y.push(pathArray[i][pathArray[i].length - 1]);
1989                 break;
1990             default:
1991                 for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
1992                     if (j % 2) {
1993                         x.push(pathArray[i][j]);
1994                     } else {
1995                         y.push(pathArray[i][j]);
1996                     }
1997                 }
1998         }
1999     }
2000     var minx = Math.min.apply(Math, x),
2001         miny = Math.min.apply(Math, y);
2002     return {
2003         x: minx,
2004         y: miny,
2005         width: Math.max.apply(Math, x) - minx,
2006         height: Math.max.apply(Math, y) - miny,
2007         X: x,
2008         Y: y
2009     };
2010 };
2011 Raphael.pathToRelative = function (pathArray) {
2012     var res = [];
2013     if (typeof pathArray == "string") {
2014         pathArray = this.parsePathString(pathArray);
2015     }
2016     var x = 0, y = 0, start = 0;
2017     if (pathArray[0][0] == "M") {
2018         x = pathArray[0][1];
2019         y = pathArray[0][2];
2020         start++;
2021         res.push(pathArray[0]);
2022     }
2023     for (var i = start, ii = pathArray.length; i < ii; i++) {
2024         res[i] = [];
2025         if (pathArray[i][0] != pathArray[i][0].toLowerCase()) {
2026             res[i][0] = pathArray[i][0].toLowerCase();
2027             switch (res[i][0]) {
2028                 case "a":
2029                     res[i][1] = pathArray[i][1];
2030                     res[i][2] = pathArray[i][2];
2031                     res[i][3] = 0;
2032                     res[i][4] = pathArray[i][4];
2033                     res[i][5] = pathArray[i][5];
2034                     res[i][6] = +(pathArray[i][6] - x).toFixed(3);
2035                     res[i][7] = +(pathArray[i][7] - y).toFixed(3);
2036                     break;
2037                 case "v":
2038                     res[i][1] = +(pathArray[i][1] - y).toFixed(3);
2039                     break;
2040                 default:
2041                     for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
2042                         res[i][j] = +(pathArray[i][j] - ((j % 2) ? x : y)).toFixed(3);
2043                     }
2044             }
2045         } else {
2046             res[i] = pathArray[i];
2047         }
2048         switch (res[i][0]) {
2049             case "z":
2050                 break;
2051             case "h":
2052                 x += res[i][res[i].length - 1];
2053                 break;
2054             case "v":
2055                 y += res[i][res[i].length - 1];
2056                 break;
2057             default:
2058                 x += res[i][res[i].length - 2];
2059                 y += res[i][res[i].length - 1];
2060         }
2061     }
2062     res.toString = pathArray.toString;
2063     return res;
2064 };
2065 Raphael.pathToAbsolute = function (pathArray) {
2066     var res = [];
2067     if (typeof pathArray == "string") {
2068         pathArray = this.parsePathString(pathArray);
2069     }
2070     var x = 0, y = 0, start = 0;
2071     if (pathArray[0][0] == "M") {
2072         x = +pathArray[0][1];
2073         y = +pathArray[0][2];
2074         start++;
2075         res[0] = pathArray[0];
2076     }
2077     for (var i = start, ii = pathArray.length; i < ii; i++) {
2078         res[i] = [];
2079         if (pathArray[i][0] != pathArray[i][0].toUpperCase()) {
2080             res[i][0] = pathArray[i][0].toUpperCase();
2081             switch (res[i][0]) {
2082                 case "A":
2083                     res[i][1] = pathArray[i][1];
2084                     res[i][2] = pathArray[i][2];
2085                     res[i][3] = 0;
2086                     res[i][4] = pathArray[i][4];
2087                     res[i][5] = pathArray[i][5];
2088                     res[i][6] = +(pathArray[i][6] + x).toFixed(3);
2089                     res[i][7] = +(pathArray[i][7] + y).toFixed(3);
2090                     break;
2091                 case "V":
2092                     res[i][1] = +pathArray[i][1] + y;
2093                     break;
2094                 default:
2095                     for (var j = 1, jj = pathArray[i].length; j < jj; j++) {
2096                         res[i][j] = +pathArray[i][j] + ((j % 2) ? x : y);
2097                     }
2098             }
2099         } else {
2100             res[i] = pathArray[i];
2101         }
2102         switch (res[i][0]) {
2103             case "Z":
2104                 break;
2105             case "H":
2106                 x = res[i][1];
2107                 break;
2108             case "V":
2109                 y = res[i][1];
2110                 break;
2111             default:
2112                 x = res[i][res[i].length - 2];
2113                 y = res[i][res[i].length - 1];
2114         }
2115     }
2116     res.toString = pathArray.toString;
2117     return res;
2118 };
2119 Raphael.pathEqualiser = function (path1, path2) {
2120     var data = [this.pathToAbsolute(this.parsePathString(path1)), this.pathToAbsolute(this.parsePathString(path2))],
2121         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}],
2122         processPath = function (path, d) {
2123             if (!path) {
2124                 return ["U"];
2125             }
2126             switch (path[0]) {
2127                 case "M":
2128                     d.X = path[1];
2129                     d.Y = path[2];
2130                     break;
2131                 case "S":
2132                     var nx = d.x + (d.x - (d.bx || d.x));
2133                     var ny = d.y + (d.y - (d.by || d.y));
2134                     path = ["C", nx, ny, path[1], path[2], path[3], path[4]];
2135                     break;
2136                 case "T":
2137                     var nx = d.x + (d.x - (d.bx || d.x));
2138                     var ny = d.y + (d.y - (d.by || d.y));
2139                     path = ["Q", nx, ny, path[1], path[2]];
2140                     break;
2141                 case "H":
2142                     path = ["L", path[1], d.y];
2143                     break;
2144                 case "V":
2145                     path = ["L", d.x, path[1]];
2146                     break;
2147                 case "Z":
2148                     path = ["L", d.X, d.Y];
2149                     break;
2150             }
2151             return path;
2152         },
2153         edgeCases = function (a, b, i) {
2154             if (data[a][i][0] == "M" && data[b][i][0] != "M") {
2155                 data[b].splice(i, 0, ["M", attrs[b].x, attrs[b].y]);
2156                 attrs[a].bx = data[a][i][data[a][i].length - 4] || 0;
2157                 attrs[a].by = data[a][i][data[a][i].length - 3] || 0;
2158                 attrs[a].x = data[a][i][data[a][i].length - 2];
2159                 attrs[a].y = data[a][i][data[a][i].length - 1];
2160                 return true;
2161             } else if (data[a][i][0] == "L" && data[b][i][0] == "C") {
2162                 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]];
2163             } else if (data[a][i][0] == "L" && data[b][i][0] == "Q") {
2164                 data[a][i] = ["Q", data[a][i][1], data[a][i][2], data[a][i][1], data[a][i][2]];
2165             } else if (data[a][i][0] == "Q" && data[b][i][0] == "C") {
2166                 var x = data[b][i][data[b][i].length - 2];
2167                 var y = data[b][i][data[b][i].length - 1];
2168                 data[b].splice(i + 1, 0, ["Q", x, y, x, y]);
2169                 data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
2170                 i++;
2171                 attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
2172                 attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
2173                 attrs[b].x = data[b][i][data[b][i].length - 2];
2174                 attrs[b].y = data[b][i][data[b][i].length - 1];
2175                 return true;
2176             } else if (data[a][i][0] == "A" && data[b][i][0] == "C") {
2177                 var x = data[b][i][data[b][i].length - 2];
2178                 var y = data[b][i][data[b][i].length - 1];
2179                 data[b].splice(i + 1, 0, ["A", 0, 0, data[a][i][3], data[a][i][4], data[a][i][5], x, y]);
2180                 data[a].splice(i, 0, ["C", attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y, attrs[a].x, attrs[a].y]);
2181                 i++;
2182                 attrs[b].bx = data[b][i][data[b][i].length - 4] || 0;
2183                 attrs[b].by = data[b][i][data[b][i].length - 3] || 0;
2184                 attrs[b].x = data[b][i][data[b][i].length - 2];
2185                 attrs[b].y = data[b][i][data[b][i].length - 1];
2186                 return true;
2187             } else if (data[a][i][0] == "U") {
2188                 data[a][i][0] = data[b][i][0];
2189                 for (var j = 1, jj = data[b][i].length; j < jj; j++) {
2190                     data[a][i][j] = (j % 2) ? attrs[a].x : attrs[a].y;
2191                 }
2192             }
2193             return false;
2194         };
2195     for (var i = 0; i < Math.max(data[0].length, data[1].length); i++) {
2196         data[0][i] = processPath(data[0][i], attrs[0]);
2197         data[1][i] = processPath(data[1][i], attrs[1]);
2198         if (data[0][i][0] != data[1][i][0] && (edgeCases(0, 1, i) || edgeCases(1, 0, i))) {
2199             continue;
2200         }
2201         attrs[0].bx = data[0][i][data[0][i].length - 4] || 0;
2202         attrs[0].by = data[0][i][data[0][i].length - 3] || 0;
2203         attrs[0].x = data[0][i][data[0][i].length - 2];
2204         attrs[0].y = data[0][i][data[0][i].length - 1];
2205         attrs[1].bx = data[1][i][data[1][i].length - 4] || 0;
2206         attrs[1].by = data[1][i][data[1][i].length - 3] || 0;
2207         attrs[1].x = data[1][i][data[1][i].length - 2];
2208         attrs[1].y = data[1][i][data[1][i].length - 1];
2209     }
2210     return data;
2211 };