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