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

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