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

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