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

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