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

   1 /*
   2  * Raphael 0.5.10 - JavaScript Vector Library
   3  *
   4  * Copyright (c) 2008 Dmitry Baranovskiy (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.5.10";
  12         r.type = type;
  13         var C = {};
  14         function Matrix(m11, m12, m21, m22, dx, dy) {
  15             this.m = [
  16                 [m11 || 1, m12 || 0, 0],
  17                 [m21 || 0, m22 || 1, 0],
  18                 [dx || 0, dy || 0, 1]
  19             ];
  20         }
  21
  22         C._getX = C._getY = C._getW = C._getH = function (x) { return x; };
  23
  24         if (type == "VML") {
  25             Matrix.prototype.toString = function () {
  26                 return "progid:DXImageTransform.Microsoft.Matrix(M11=" + this.m[0][0] +
  27                     ", M12=" + this.m[1][0] + ", M21=" + this.m[0][1] + ", M22=" + this.m[1][1] +
  28                     ", Dx=" + this.m[2][0] + ", Dy=" + this.m[2][1] + ", sizingmethod='auto expand', filtertype='bilinear')";
  29             };
  30             var thePath = function (params, pathString, VML) {
  31                 var g = document.createElement("rvml:group"), gl = g.style;
  32                 gl.position = "absolute";
  33                 gl.left = 0;
  34                 gl.top = 0;
  35                 gl.width = VML.width + "px";
  36                 gl.height = VML.height + "px";
  37                 var el = document.createElement("rvml:shape"), ol = el.style;
  38                 ol.width = VML.width + "px";
  39                 ol.height = VML.height + "px";
  40                 el.path = "";
  41                 if (params["class"]) {
  42                     el.className = params["class"];
  43                 }
  44                 el.coordsize = this.coordsize;
  45                 el.coordorigin = this.coordorigin;
  46                 g.appendChild(el);
  47                 VML.canvas.appendChild(g);
  48                 var p = new Element(el, g, VML);
  49                 setFillAndStroke(p, params);
  50                 if (params.gradient) {
  51                     addGrdientFill(p, params.gradient);
  52                 }
  53                 p.isAbsolute = true;
  54                 p.type = "path";
  55                 p.path = [];
  56                 p.last = {x: 0, y: 0, bx: 0, by: 0, isAbsolute: true};
  57                 p.Path = "";
  58                 p.absolutely = function () {
  59                     this.isAbsolute = true;
  60                     return this;
  61                 };
  62                 p.relatively = function () {
  63                     this.isAbsolute = false;
  64                     return this;
  65                 };
  66                 p.redraw = function () {
  67                     this.Path = "";
  68                     var oldPath = this.path;
  69                     this.path = [];
  70                     for (var i = 0, ii = oldPath.length; i < ii; i++) {
  71                         if (oldPath[i].type != "end") {
  72                             this[oldPath[i].type + "To"].apply(this, oldPath[i].arg);
  73                         } else {
  74                             this.andClose();
  75                         }
  76                     }
  77                     return this;
  78                 };
  79                 p.moveTo = function (x, y) {
  80                     var d = this.isAbsolute?"m":"t";
  81                     var _getX = this.isAbsolute ? VML._getX : VML._getW;
  82                     var _getY = this.isAbsolute ? VML._getY : VML._getH;
  83                     d += Math.round(_getX(parseFloat(x, 10))) + " " + Math.round(_getY(parseFloat(y, 10)));
  84                     this[0].path = this.Path += d;
  85                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(x, 10));
  86                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(y, 10));
  87                     this.last.isAbsolute = this.isAbsolute;
  88                     this.path.push({type: "move", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
  89                     return this;
  90                 };
  91                 p.lineTo = function (x, y) {
  92                     var d = this.isAbsolute?"l":"r";
  93                     var _getX = this.isAbsolute ? VML._getX : VML._getW;
  94                     var _getY = this.isAbsolute ? VML._getY : VML._getH;
  95                     d += Math.round(_getX(parseFloat(x, 10))) + " " + Math.round(_getY(parseFloat(y, 10)));
  96                     this[0].path = this.Path += d;
  97                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(x, 10));
  98                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(y, 10));
  99                     this.last.isAbsolute = this.isAbsolute;
 100                     this.path.push({type: "line", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 101                     return this;
 102                 };
 103                 p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x2, y2) {
 104                     // for more information of where this math came from visit:
 105                     // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
 106                     x2 = (this.isAbsolute ? 0 : this.last.x) + x2;
 107                     y2 = (this.isAbsolute ? 0 : this.last.y) + y2;
 108                     var x1 = this.last.x,
 109                         y1 = this.last.y,
 110                         x = (x1 - x2) / 2,
 111                         y = (y1 - y2) / 2,
 112                         k = (large_arc_flag == sweep_flag ? -1 : 1) *
 113                             Math.sqrt((rx * rx * ry * ry - rx * rx * y * y - ry * ry * x * x) / (rx * rx * y * y + ry * ry * x * x)),
 114                         cx = k * rx * y / ry + (x1 + x2) / 2,
 115                         cy = k * -ry * x / rx + (y1 + y2) / 2,
 116                         d = sweep_flag ? (this.isAbsolute?"wa":"wr") : (this.isAbsolute?"at":"ar"),
 117                         _getX = this.isAbsolute ? VML._getX : VML._getW,
 118                         _getY = this.isAbsolute ? VML._getY : VML._getH,
 119                         left = Math.round(cx - rx),
 120                         top = Math.round(cy - ry);
 121                     d += [left, top, Math.round(left + rx * 2), Math.round(top + ry * 2), Math.round(x1), Math.round(y1), Math.round(_getX(parseFloat(x2, 10))), Math.round(_getX(parseFloat(y2, 10)))].join(", ");
 122                     this[0].path = this.Path += d;
 123                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(x2, 10));
 124                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(y2, 10));
 125                     this.last.isAbsolute = this.isAbsolute;
 126                     this.path.push({type: "arc", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 127                     return this;
 128                 };
 129                 p.cplineTo = function (x1, y1, w1) {
 130                     if (!w1) {
 131                         return this.lineTo(x1, y1);
 132                     } else {
 133                         var p = {};
 134                         p._getX = this.isAbsolute ? VML._getX : VML._getW;
 135                         p._getY = this.isAbsolute ? VML._getY : VML._getH;
 136                         var x = Math.round(p._getX(Math.round(parseFloat(x1, 10) * 100) / 100));
 137                         var y = Math.round(p._getY(Math.round(parseFloat(y1, 10) * 100) / 100));
 138                         var w = Math.round(VML._getW(Math.round(parseFloat(w1, 10) * 100) / 100));
 139                         var d = this.isAbsolute?"c":"v";
 140                         var attr = [Math.round(this.last.x) + w, Math.round(this.last.y), x - w, y, x, y];
 141                         d += attr.join(" ") + " ";
 142                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 143                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 144                         this.last.bx = attr[2];
 145                         this.last.by = attr[3];
 146                         this[0].path = this.Path += d;
 147                         this.path.push({type: "cpline", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 148                         return this;
 149                     }
 150                 };
 151                 p.curveTo = function () {
 152                     var d = this.isAbsolute?"c":"v";
 153                     var _getX = this.isAbsolute ? VML._getX : VML._getW;
 154                     var _getY = this.isAbsolute ? VML._getY : VML._getH;
 155                     if (arguments.length == 6) {
 156                         this.last.bx = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(arguments[2], 10));
 157                         this.last.by = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(arguments[3], 10));
 158                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(arguments[4], 10));
 159                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(arguments[5], 10));
 160                         d += Math.round(_getX(parseFloat(arguments[0], 10))) + " " +
 161                              Math.round(_getY(parseFloat(arguments[1], 10))) + " " +
 162                              Math.round(_getX(parseFloat(arguments[2], 10))) + " " +
 163                              Math.round(_getY(parseFloat(arguments[3], 10))) + " " +
 164                              Math.round(_getX(parseFloat(arguments[4], 10))) + " " +
 165                              Math.round(_getY(parseFloat(arguments[5], 10))) + " ";
 166                         this.last.isAbsolute = this.isAbsolute;
 167                     }
 168                     if (arguments.length == 4) {
 169                         var bx = this.last.x * 2 - this.last.bx;
 170                         var by = this.last.y * 2 - this.last.by;
 171                         this.last.bx = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(arguments[0], 10));
 172                         this.last.by = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(arguments[1], 10));
 173                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + _getX(parseFloat(arguments[2], 10));
 174                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + _getY(parseFloat(arguments[3], 10));
 175                         d += [Math.round(bx), Math.round(by),
 176                              Math.round(_getX(parseFloat(arguments[0], 10))),
 177                              Math.round(_getY(parseFloat(arguments[1], 10))),
 178                              Math.round(_getX(parseFloat(arguments[2], 10))),
 179                              Math.round(_getY(parseFloat(arguments[3], 10)))].join(" ");
 180                     }
 181                     this[0].path = this.Path += d;
 182                     this.path.push({type: "curve", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 183                     return this;
 184                 };
 185                 p.addRoundedCorner = function (r, dir) {
 186                     var R = .5522 * r, rollback = this.isAbsolute, o = this;
 187                     if (rollback) {
 188                         this.relatively();
 189                         rollback = function () {
 190                             o.absolutely();
 191                         };
 192                     } else {
 193                         rollback = function () {};
 194                     }
 195                     var actions = {
 196                         l: function () {
 197                             return {
 198                                 u: function () {
 199                                     o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 200                                 },
 201                                 d: function () {
 202                                     o.curveTo(-R, 0, -r, r - R, -r, r);
 203                                 }
 204                             };
 205                         },
 206                         r: function () {
 207                             return {
 208                                 u: function () {
 209                                     o.curveTo(R, 0, r, -(r - R), r, -r);
 210                                 },
 211                                 d: function () {
 212                                     o.curveTo(R, 0, r, r - R, r, r);
 213                                 }
 214                             };
 215                         },
 216                         u: function () {
 217                             return {
 218                                 r: function () {
 219                                     o.curveTo(0, -R, -(R - r), -r, r, -r);
 220                                 },
 221                                 l: function () {
 222                                     o.curveTo(0, -R, R - r, -r, -r, -r);
 223                                 }
 224                             };
 225                         },
 226                         d: function () {
 227                             return {
 228                                 r: function () {
 229                                     o.curveTo(0, R, -(R - r), r, r, r);
 230                                 },
 231                                 l: function () {
 232                                     o.curveTo(0, R, R - r, r, -r, r);
 233                                 }
 234                             };
 235                         }
 236                     };
 237                     actions[dir.charAt(0)]()[dir.charAt(1)]();
 238                     rollback();
 239                     return o;
 240                 };
 241                 p.andClose = function () {
 242                     this[0].path = (this.Path += "x e");
 243                     return this;
 244                 };
 245                 if (typeof pathString == "string") {
 246                     p.absolutely();
 247                     C.pathfinder(p, pathString);
 248                 }
 249                 return p;
 250             };
 251             var setFillAndStroke = function (o, params) {
 252                 var s = o[0].style;
 253                 o.attrs = o.attrs || {};
 254                 for (var par in params) {
 255                     o.attrs[par] = params[par];
 256                 }
 257                 params["font-family"] && (s.fontFamily = params["font-family"]);
 258                 params["font-size"] && (s.fontSize = params["font-size"]);
 259                 params["font"] && (s.font = params["font"]);
 260                 params["font-weight"] && (s.fontWeight = params["font-weight"]);
 261                 if (typeof params.opacity != "undefined" || typeof params["stroke-width"] != "undefined" || typeof params.fill != "undefined" || typeof params.stroke != "undefined") {
 262                     o = o.shape || o[0];
 263                     var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || document.createElement("rvml:fill");
 264                     if ("fill-opacity" in params || "opacity" in params) {
 265                         fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 266                     }
 267                     if (params.fill) {
 268                         fill.on = true;
 269                     }
 270                     if (fill.on == undefined || params.fill == "none") {
 271                         fill.on = false;
 272                     }
 273                     if (fill.on && params.fill) {
 274                         var isURL = params.fill.match(/^url\(([^\)]+)\)$/i);
 275                         if (isURL) {
 276                             fill.src = isURL[1];
 277                             fill.type = "tile";
 278                         } else {
 279                             fill.color = params.fill;
 280                             fill.src = "";
 281                             fill.type = "solid";
 282                         }
 283                     }
 284                     o.appendChild(fill);
 285                     var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || document.createElement("rvml:stroke");
 286                     if ((params.stroke && params.stroke != "none") || params["stroke-width"] || params["stroke-opacity"] || params["stroke-dasharray"]) {
 287                         stroke.on = true;
 288                     }
 289                     if (params.stroke == "none" || typeof stroke.on == "undefined") {
 290                         stroke.on = false;
 291                     }
 292                     if (stroke.on && params.stroke) {
 293                         stroke.color = params.stroke;
 294                     }
 295                     stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 296                     params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
 297                     stroke.miterlimit = params["stroke-miterlimit"] || 8;
 298                     params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
 299                     params["stroke-width"] && (stroke.weight = (parseFloat(params["stroke-width"], 10) || 1) * 12 / 16);
 300                     if (params["stroke-dasharray"]) {
 301                         var dasharray = {
 302                             "-": "shortdash",
 303                             ".": "shortdot",
 304                             "-.": "shortdashdot",
 305                             "-..": "shortdashdotdot",
 306                             ". ": "dot",
 307                             "- ": "dash",
 308                             "--": "longdash",
 309                             "- .": "dashdot",
 310                             "--.": "longdashdot",
 311                             "--..": "longdashdotdot"
 312                         };
 313                         stroke.dashstyle = dasharray[params["stroke-dasharray"]] || "";
 314                     }
 315                     o.appendChild(stroke);
 316                 }
 317             };
 318             var addGrdientFill = function (o, gradient) {
 319                 o.attrs = o.attrs || {};
 320                 o.attrs.gradient = gradient;
 321                 o = o.shape || o[0];
 322                 var fill = o.getElementsByTagName("fill");
 323                 if (fill.length) {
 324                     fill = fill[0];
 325                 } else {
 326                     fill = document.createElement("rvml:fill");
 327                 }
 328                 if (gradient.dots.length) {
 329                     fill.on = true;
 330                     fill.method = "none";
 331                     fill.type = (gradient.type.toLowerCase() == "linear") ? "gradient" : "gradientTitle";
 332                     if (typeof gradient.dots[0].color != "undefined") {
 333                         fill.color = gradient.dots[0].color || "#000";
 334                     }
 335                     if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") {
 336                         fill.color2 = gradient.dots[gradient.dots.length - 1].color || "#000";
 337                     }
 338                     var colors = [];
 339                     for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
 340                         if (gradient.dots[i].offset) {
 341                             colors.push(gradient.dots[i].offset + " " + gradient.dots[i].color);
 342                         }
 343                     };
 344                     var fillOpacity = gradient.dots[0].opacity || 1;
 345                     var fillOpacity2 = gradient.dots[gradient.dots.length - 1].opacity || 1;
 346                     if (colors) {
 347                         fill.colors.value = colors.join(",");
 348                         fillOpacity2 += fillOpacity;
 349                         fillOpacity = fillOpacity2 - fillOpacity;
 350                         fillOpacity2 -= fillOpacity;
 351                     }
 352                     fill.setAttribute("opacity", fillOpacity);
 353                     fill.setAttribute("opacity2", fillOpacity2);
 354                     if (gradient.vector) {
 355                         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;
 356                         fill.angle = 270 - angle;
 357                     }
 358                     if (gradient.type.toLowerCase() == "radial") {
 359                         fill.focus = "100%";
 360                         fill.focusposition = "0.5 0.5";
 361                     }
 362                 }
 363             };
 364             var Element = function (node, group, vml) {
 365                 var Rotation = 0,
 366                     RotX = 0,
 367                     RotY = 0,
 368                     Scale = 1;
 369                 this[0] = node;
 370                 this.node = node;
 371                 this.X = 0;
 372                 this.Y = 0;
 373                 this.attrs = {};
 374                 this.Group = group;
 375                 this.vml = vml;
 376                 this.rotate = function (deg) {
 377                     if (deg == undefined) {
 378                         return Rotation;
 379                     }
 380                     Rotation += deg;
 381                     this.Group.style.rotation = Rotation;
 382                     return this;
 383                 };
 384             };
 385             Element.prototype.setBox = function (params) {
 386                 var gs = this.Group.style,
 387                     os = this[0].style;
 388                 for (var i in params) {
 389                     this.attrs[i] = params[i];
 390                 }
 391                 var attr = this.attrs, x, y, w, h;
 392                 switch (this.type) {
 393                     case "circle":
 394                         x = attr.cx - attr.r;
 395                         y = attr.cy - attr.r;
 396                         w = h = attr.r * 2;
 397                         break;
 398                     case "ellipse":
 399                         x = attr.cx - attr.rx;
 400                         y = attr.cy - attr.ry;
 401                         w = attr.rx * 2;
 402                         h = attr.ry * 2;
 403                         break;
 404                     case "rect":
 405                     case "image":
 406                         x = attr.x;
 407                         y = attr.y;
 408                         w = attr.w;
 409                         h = attr.h;
 410                         break;
 411                     case "text":
 412                         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("");
 413                         return;
 414                     default:
 415                         return;
 416                 }
 417                 var left = this.vml.width / 2 - w / 2,
 418                     top = this.vml.height / 2 - h / 2;
 419                 gs.position = "absolute";
 420                 gs.left = x - left + "px";
 421                 gs.top = y - top + "px";
 422                 this.X = x - left;
 423                 this.Y = y - top;
 424                 this.W = w;
 425                 this.H = h;
 426                 gs.width = this.vml.width + "px";
 427                 gs.height = this.vml.height + "px";
 428                 os.position = "absolute";
 429                 os.top = top + "px";
 430                 os.left = left + "px";
 431                 os.width = w + "px";
 432                 os.height = h + "px";
 433             };
 434             Element.prototype.hide = function () {
 435                 this.Group.style.display = "none";
 436                 return this;
 437             };
 438             Element.prototype.show = function () {
 439                 this.Group.style.display = "block";
 440                 return this;
 441             };
 442             Element.prototype.translate = function (x, y) {
 443                 if (x == undefined && y == undefined) {
 444                     return {x: this.X, y: this.Y};
 445                 }
 446                 this.X += x;
 447                 this.Y += y;
 448                 this.Group.style.left = this.X + "px";
 449                 this.Group.style.top = this.Y + "px";
 450                 return this;
 451             };
 452             // depricated
 453             Element.prototype.matrix = function (xx, xy, yx, yy, dx, dy) {
 454                 tMatrix = new Matrix(xx, xy, yx, yy, dx, dy);
 455                 this.Group.style.filter = tMatrix;
 456                 return this;
 457             };
 458             Element.prototype.scale = function (x, y) {
 459                 if (x == undefined && y == undefined) {
 460                     return ;
 461                     // TODO
 462                 }
 463                 y = y || x;
 464                 if (x != 0 && !(x == 1 && y == 1)) {
 465                     var dirx = Math.round(x / Math.abs(x)),
 466                         diry = Math.round(y / Math.abs(y)),
 467                         s = this[0].style;
 468                     if (dirx != 1 || diry != 1) {
 469                         s.filter = new Matrix(dirx, 0, 0, diry, 0, 0);
 470                     }
 471                     var width = parseInt(s.width, 10) * x * dirx;
 472                     var height = parseInt(s.height, 10) * y * diry;
 473                     var left = parseInt(s.left, 10);
 474                     var top = parseInt(s.top, 10);
 475                     s.left = this.X = left + this.W / 2 - width / 2;
 476                     s.top = this.Y = top + this.H / 2 - height / 2;
 477                     s.width = this.W = width;
 478                     s.height = this.H = height;
 479                 }
 480                 return this;
 481             };
 482             Element.prototype.getBBox = function () {
 483                 return {
 484                     x: this.Group.offsetLeft,
 485                     y: this.Group.offsetTop,
 486                     width: this.Group.offsetWidth,
 487                     height: this.Group.offsetHeight
 488                 };
 489             };
 490             Element.prototype.remove = function () {
 491                 this[0].parentNode.removeChild(this[0]);
 492                 this.Group.parentNode.removeChild(this.Group);
 493                 this.shape && this.shape.parentNode.removeChild(this.shape);
 494             };
 495             Element.prototype.attr = function () {
 496                 if (arguments.length == 1 && typeof arguments[0] == "string") {
 497                     return this.attrs[arguments[0]];
 498                 }
 499                 if (this.attrs && arguments.length == 1 && arguments[0] instanceof Array) {
 500                     var values = {};
 501                     for (var i = 0, ii = arguments[0].length; i < ii; i++) {
 502                         values[arguments[0][i]] = this.attrs[arguments[0][i]];
 503                     };
 504                     return values;
 505                 }
 506                 if (this[0].tagName.toLowerCase() == "group") {
 507                     var children = this[0].childNodes;
 508                     this.attrs = this.attrs || {};
 509                     if (arguments.length == 2) {
 510                         this.attrs[arguments[0]] = arguments[1];
 511                     } else if (arguments.length == 1 || typeof arguments[0] == "object") {
 512                         for (var j in arguments[0]) {
 513                             this.attrs[j] = arguments[0][j];
 514                         }
 515                     }
 516                     for (var i = 0, ii = children.length; i < ii; i++) {
 517                         this.attr.apply(new item(children[i], this[0], this.vml), arguments);
 518                     }
 519                 } else {
 520                     var params;
 521                     if (arguments.length == 2) {
 522                         params = {};
 523                         params[arguments[0]] = arguments[1];
 524                     }
 525                     if (arguments.length == 1 && typeof arguments[0] == "object") {
 526                         params = arguments[0];
 527                     }
 528                     if (params) {
 529                         setFillAndStroke(this, params);
 530                         this.setBox(params);
 531                         if (params.gradient) {
 532                             addGrdientFill(this, params.gradient);
 533                         }
 534                         if (params.text && this.type == "text") {
 535                             this[0].string = params.text;
 536                         }
 537                         if (params.id) {
 538                             this[0].id = params.id;
 539                         }
 540                     }
 541                 }
 542                 return this;
 543             };
 544             Element.prototype.toFront = function () {
 545                 this.Group.parentNode.appendChild(this.Group);
 546                 return this;
 547             };
 548             Element.prototype.toBack = function () {
 549                 if (this.Group.parentNode.firstChild != this.Group) {
 550                     this.Group.parentNode.insertBefore(this.Group, this.Group.parentNode.firstChild);
 551                 }
 552                 return this;
 553             };
 554             var theCircle = function (vml, x, y, r) {
 555                 var g = document.createElement("rvml:group");
 556                 var o = document.createElement("rvml:oval");
 557                 g.appendChild(o);
 558                 vml.canvas.appendChild(g);
 559                 var res = new Element(o, g, vml);
 560                 setFillAndStroke(res, {stroke: "#000", fill: "none"});
 561                 res.setBox({x: x - r, y: y - r, w: r * 2, h: r * 2});
 562                 res.attrs.cx = x;
 563                 res.attrs.cy = y;
 564                 res.attrs.r = r;
 565                 res.type = "circle";
 566                 return res;
 567             };
 568             var theRect = function (vml, x, y, w, h, r) {
 569                 var g = document.createElement("rvml:group");
 570                 var o = document.createElement(r ? "rvml:roundrect" : "rvml:rect");
 571                 if (r) {
 572                     o.arcsize = r / (Math.min(w, h));
 573                 }
 574                 g.appendChild(o);
 575                 vml.canvas.appendChild(g);
 576                 var res = new Element(o, g, vml);
 577                 setFillAndStroke(res, {stroke: "#000"});
 578                 res.setBox({x: x, y: y, w: w, h: h});
 579                 res.attrs.x = x;
 580                 res.attrs.y = y;
 581                 res.attrs.w = w;
 582                 res.attrs.h = h;
 583                 res.attrs.r = r;
 584                 res.type = "rect";
 585                 return res;
 586             };
 587             var theEllipse = function (vml, x, y, rx, ry) {
 588                 var g = document.createElement("rvml:group");
 589                 var o = document.createElement("rvml:oval");
 590                 g.appendChild(o);
 591                 vml.canvas.appendChild(g);
 592                 var res = new Element(o, g, vml);
 593                 setFillAndStroke(res, {stroke: "#000"});
 594                 res.setBox({x: x - rx, y: y - ry, w: rx * 2, h: ry * 2});
 595                 res.attrs.cx = x;
 596                 res.attrs.cy = y;
 597                 res.attrs.rx = rx;
 598                 res.attrs.ry = ry;
 599                 res.type = "ellipse";
 600                 return res;
 601             };
 602             var theImage = function (vml, src, x, y, w, h) {
 603                 var g = document.createElement("rvml:group");
 604                 var o = document.createElement("rvml:image");
 605                 o.src = src;
 606                 g.appendChild(o);
 607                 vml.canvas.appendChild(g);
 608                 var res = new Element(o, g, vml);
 609                 res.type = "image";
 610                 res.setBox({x: x, y: y, w: w, h: h});
 611                 res.attrs.x = x;
 612                 res.attrs.y = y;
 613                 res.attrs.w = w;
 614                 res.attrs.h = h;
 615                 return res;
 616             };
 617             var theText = function (vml, x, y, text) {
 618                 // @TODO: setTheBox
 619                 var g = document.createElement("rvml:group"), gs = g.style;
 620                 var el = document.createElement("rvml:shape"), ol = el.style;
 621                 var path = document.createElement("rvml:path"), ps = path.style;
 622                 path.v = ["m", Math.round(x), ", ", Math.round(y - 2), "l", Math.round(x) + 1, ", ", Math.round(y - 2)].join("");
 623                 path.textpathok = true;
 624                 ol.width = vml.width;
 625                 ol.height = vml.height;
 626                 gs.position = "absolute";
 627                 gs.left = 0;
 628                 gs.top = 0;
 629                 gs.width = vml.width;
 630                 gs.height = vml.height;
 631                 var o = document.createElement("rvml:textpath");
 632                 o.string = text;
 633                 o.on = true;
 634                 o.coordsize = vml.coordsize;
 635                 o.coordorigin = vml.coordorigin;
 636                 el.appendChild(o);
 637                 el.appendChild(path);
 638                 g.appendChild(el);
 639                 vml.canvas.appendChild(g);
 640                 var res = new Element(o, g, vml);
 641                 res.shape = el;
 642                 res.textpath = path;
 643                 res.type = "text";
 644                 res.attrs.x = x;
 645                 res.attrs.y = y;
 646                 res.attrs.w = 1;
 647                 res.attrs.h = 1;
 648                 return res;
 649             };
 650             var theGroup = function (vml) {
 651                 var el = document.createElement("rvml:group"), els = el.style;
 652                 els.position = "absolute";
 653                 els.left = 0;
 654                 els.top = 0;
 655                 els.width = vml.width;
 656                 els.height = vml.height;
 657                 if (vml.canvas) {
 658                     vml.canvas.appendChild(el);
 659                 }
 660                 var res = new Element(el, el, vml);
 661                 for (var f in vml) {
 662                     if (f.charAt(0) != "_" && typeof vml[f] == "function") {
 663                         res[f] = (function (f) {
 664                             return function () {
 665                                 var e = vml[f].apply(vml, arguments);
 666                                 el.appendChild(e[0].parentNode);
 667                                 return e;
 668                             };
 669                         })(f);
 670                     }
 671                 }
 672                 res.type = "group";
 673                 return res;
 674             };
 675             r._create = function () {
 676                 // container, width, height
 677                 // x, y, width, height
 678                 var container, width, height;
 679                 if (typeof arguments[0] == "string") {
 680                     container = document.getElementById(arguments[0]);
 681                     width = arguments[1];
 682                     height = arguments[2];
 683                 }
 684                 if (typeof arguments[0] == "object") {
 685                     container = arguments[0];
 686                     width = arguments[1];
 687                     height = arguments[2];
 688                 }
 689                 if (typeof arguments[0] == "number") {
 690                     container = 1;
 691                     x = arguments[0];
 692                     y = arguments[1];
 693                     width = arguments[2];
 694                     height = arguments[3];
 695                 }
 696                 if (!container) {
 697                     throw new Error("VML container not found.");
 698                 }
 699                 if (!document.namespaces["rvml"]) {
 700                     document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
 701                     document.createStyleSheet().addRule("rvml\\:*", "behavior:url(#default#VML)");
 702                 }
 703                 var c = document.createElement("div"),
 704                     r = C.canvas = document.createElement("rvml:group"),
 705                     cs = c.style, rs = r.style;
 706                 C.width = width;
 707                 C.height = height;
 708                 width = width || "320px";
 709                 height = height || "200px";
 710                 cs.clip = "rect(0 " + width + " " + height + " 0)";
 711                 cs.position = "absolute";
 712                 rs.width  = width;
 713                 rs.height = height;
 714                 r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " + (height == "100%" ? height : parseFloat(height));
 715                 r.coordorigin = "0 0";
 716
 717                 var b = document.createElement("rvml:rect"), bs = b.style;
 718                 bs.left = bs.top = 0;
 719                 bs.width  = rs.width;
 720                 bs.height = rs.height;
 721                 b.filled = b.stroked = "f";
 722
 723                 r.appendChild(b);
 724                 c.appendChild(r);
 725                 if (container == 1) {
 726                     document.body.appendChild(c);
 727                     cs.position = "absolute";
 728                     cs.left = x + "px";
 729                     cs.top = y + "px";
 730                     cs.width = width;
 731                     cs.height = height;
 732                     container = {
 733                         style: {
 734                             width: width,
 735                             height: height
 736                         }
 737                     };
 738                 } else {
 739                     cs.width = container.style.width = width;
 740                     cs.height = container.style.height = height;
 741                     if (container.firstChild) {
 742                         container.insertBefore(c, container.firstChild);
 743                     } else {
 744                         container.appendChild(c);
 745                     }
 746                 }
 747                 for (var prop in C) {
 748                     container[prop] = C[prop];
 749                 }
 750                 container.clear = function () {
 751                     var todel = [];
 752                     for (var i = 0, ii = r.childNodes.length; i < ii; i++) {
 753                         if (r.childNodes[i] != b) {
 754                             todel.push(r.childNodes[i]);
 755                         }
 756                     }
 757                     for (i = 0, ii = todel.length; i < ii; i++) {
 758                         r.removeChild(todel[i]);
 759                     }
 760                 };
 761                 return container;
 762             };
 763             C.remove = function () {
 764                 C.canvas.parentNode.parentNode.removeChild(C.canvas.parentNode);
 765             };
 766         }
 767         if (type == "SVG") {
 768             Matrix.prototype.toString = function () {
 769                 return "matrix(" + this.m[0][0] +
 770                     ", " + this.m[1][0] + ", " + this.m[0][1] + ", " + this.m[1][1] +
 771                     ", " + this.m[2][0] + ", " + this.m[2][1] + ")";
 772             };
 773             var thePath = function (params, pathString, SVG) {
 774                 var el = document.createElementNS(SVG.svgns, "path");
 775                 el.setAttribute("fill", "none");
 776                 if (SVG.canvas) {
 777                     SVG.canvas.appendChild(el);
 778                 }
 779                 var p = new Element(el, SVG);
 780                 if (params) {
 781                     setFillAndStroke(p, params);
 782                 }
 783                 p.isAbsolute = true;
 784                 p.path = [];
 785                 p.last = {x: 0, y: 0, bx: 0, by: 0};
 786                 p.absolutely = function () {
 787                     this.isAbsolute = true;
 788                     return this;
 789                 };
 790                 p.relatively = function () {
 791                     this.isAbsolute = false;
 792                     return this;
 793                 };
 794                 p.redraw = function () {
 795                     this[0].setAttribute("d", "M0 0");
 796                     var oldPath = this.path;
 797                     this.path = [];
 798                     for (var i = 0, ii = oldPath.length; i < ii; i++) {
 799                         if (oldPath[i].type != "end") {
 800                             this[oldPath[i].type + "To"].apply(this, oldPath[i].arg);
 801                         } else {
 802                             this.andClose();
 803                         }
 804                     }
 805                     return this;
 806                 };
 807                 p.moveTo = function (x, y) {
 808                     var d = this.isAbsolute?"M":"m";
 809                     var _getX = this.isAbsolute ? SVG._getX : SVG._getW;
 810                     var _getY = this.isAbsolute ? SVG._getY : SVG._getH;
 811                     d += _getX(parseFloat(x, 10)) + " " + _getY(parseFloat(y, 10)) + " ";
 812                     var oldD = this[0].getAttribute("d") || "";
 813                     this[0].setAttribute("d", oldD + d);
 814                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + SVG._getX(parseFloat(x, 10));
 815                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + SVG._getY(parseFloat(y, 10));
 816                     this.path.push({type: "move", arg: arguments, pos: this.isAbsolute});
 817                     return this;
 818                 };
 819                 p.lineTo = function (x, y) {
 820                     this.last.x = (this.isAbsolute ? 0 : this.last.x) + SVG._getX(parseFloat(x, 10));
 821                     this.last.y = (this.isAbsolute ? 0 : this.last.y) + SVG._getY(parseFloat(y, 10));
 822                     var d = this.isAbsolute?"L":"l";
 823                     var _getX = this.isAbsolute ? SVG._getX : SVG._getW;
 824                     var _getY = this.isAbsolute ? SVG._getY : SVG._getH;
 825                     d += _getX(parseFloat(x, 10)) + " " + _getY(parseFloat(y, 10)) + " ";
 826                     var oldD = this[0].getAttribute("d") || "";
 827                     this[0].setAttribute("d", oldD + d);
 828                     this.path.push({type: "line", arg: arguments, pos: this.isAbsolute});
 829                     return this;
 830                 };
 831                 p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x, y) {
 832                     var d = this.isAbsolute ? "A" : "a";
 833                     var _getX = this.isAbsolute ? SVG._getX : SVG._getW;
 834                     var _getY = this.isAbsolute ? SVG._getY : SVG._getH;
 835                     d += [SVG._getW(parseFloat(rx, 10)), SVG._getH(parseFloat(ry, 10)), 0, large_arc_flag, sweep_flag, _getX(parseFloat(x, 10)), _getY(parseFloat(y, 10))].join(" ");
 836                     var oldD = this[0].getAttribute("d") || "";
 837                     this[0].setAttribute("d", oldD + d);
 838                     this.last.x = SVG._getX(parseFloat(x, 10));
 839                     this.last.y = SVG._getY(parseFloat(y, 10));
 840                     this.path.push({type: "arc", arg: arguments, pos: this.isAbsolute});
 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                         p._getX = this.isAbsolute ? SVG._getX : SVG._getW;
 849                         p._getY = this.isAbsolute ? SVG._getY : SVG._getH;
 850                         var x = p._getX(Math.round(parseFloat(x1, 10) * 100) / 100);
 851                         var y = p._getY(Math.round(parseFloat(y1, 10) * 100) / 100);
 852                         var w = SVG._getW(Math.round(parseFloat(w1, 10) * 100) / 100);
 853                         var d = this.isAbsolute?"C":"c";
 854                         var attr = [this.last.x + w, this.last.y, x - w, y, x, y];
 855                         for (var i = 0, ii = attr.length; i < ii; i++) {
 856                             d += attr[i] + " ";
 857                         }
 858                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 859                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 860                         this.last.bx = attr[2];
 861                         this.last.by = attr[3];
 862                         var oldD = this[0].getAttribute("d") || "";
 863                         this[0].setAttribute("d", oldD + d);
 864                         this.path.push({type: "cpline", arg: arguments, pos: this.isAbsolute});
 865                         return this;
 866                     }
 867                 };
 868                 p.curveTo = function () {
 869                     var p = {};
 870                     p._getX = this.isAbsolute ? SVG._getX : SVG._getW;
 871                     p._getY = this.isAbsolute ? SVG._getY : SVG._getH;
 872                     if (arguments.length == 6) {
 873                         var d = this.isAbsolute?"C":"c";
 874                         for (var i = 0, ii = arguments.length; i < ii; i++) {
 875                             d += p[(i % 2 == 0) ? "_getX" : "_getY"](Math.round(parseFloat(arguments[i], 10) * 100) / 100) + " ";
 876                         }
 877                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + p._getX((parseFloat(arguments[4], 10) * 100) / 100);
 878                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + p._getY((parseFloat(arguments[5], 10) * 100) / 100);
 879                         this.last.bx = p._getX((parseFloat(arguments[2], 10) * 100) / 100);
 880                         this.last.by = p._getY((parseFloat(arguments[3], 10) * 100) / 100);
 881                     } else {
 882                         if (arguments.length == 4) {
 883                             var d = this.isAbsolute?"S":"s";
 884                             for (var i = 0, ii = arguments.length; i < ii; i++) {
 885                                 d += p[i % 2 == 0 ? "_getX" : "_getY"]((parseFloat(arguments[i], 10) * 100) / 100) + " ";
 886                             }
 887                         }
 888                         this.last.x = (this.isAbsolute ? 0 : this.last.x) + p._getX((parseFloat(arguments[2], 10) * 100) / 100);
 889                         this.last.y = (this.isAbsolute ? 0 : this.last.y) + p._getY((parseFloat(arguments[3], 10) * 100) / 100);
 890                         this.last.bx = p._getX((parseFloat(arguments[0], 10) * 100) / 100);
 891                         this.last.by = p._getY((parseFloat(arguments[1], 10) * 100) / 100);
 892                     }
 893                     var oldD = this[0].getAttribute("d") || "";
 894                     this[0].setAttribute("d", oldD + d);
 895                     this.path.push({type: "curve", arg: arguments, pos: this.isAbsolute});
 896                     return this;
 897                 };
 898                 p.addRoundedCorner = function (r, dir) {
 899                     var R = .5522 * r, rollback = this.isAbsolute, o = this;
 900                     if (rollback) {
 901                         this.relatively();
 902                         rollback = function () {
 903                             o.absolutely();
 904                         };
 905                     } else {
 906                         rollback = function () {};
 907                     }
 908                     var actions = {
 909                         l: function () {
 910                             return {
 911                                 u: function () {
 912                                     o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 913                                 },
 914                                 d: function () {
 915                                     o.curveTo(-R, 0, -r, r - R, -r, r);
 916                                 }
 917                             };
 918                         },
 919                         r: 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                         u: function () {
 930                             return {
 931                                 r: function () {
 932                                     o.curveTo(0, -R, -(R - r), -r, r, -r);
 933                                 },
 934                                 l: function () {
 935                                     o.curveTo(0, -R, R - r, -r, -r, -r);
 936                                 }
 937                             };
 938                         },
 939                         d: 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                     };
 950                     actions[dir[0]]()[dir[1]]();
 951                     rollback();
 952                     return o;
 953                 };
 954                 p.andClose = function () {
 955                     var oldD = this[0].getAttribute("d") || "";
 956                     this[0].setAttribute("d", oldD + "Z ");
 957                     this.path.push({type: "end"});
 958                     return this;
 959                 };
 960                 if (typeof pathString == "string") {
 961                     p.absolutely();
 962                     C.pathfinder(p, pathString);
 963                 }
 964                 return p;
 965             };
 966             var addGrdientFill = function (o, gradient, SVG) {
 967                 var el = document.createElementNS(SVG.svgns, gradient.type + "Gradient");
 968                 el.id = "raphael-gradient-" + SVG.gradients++;
 969                 if (gradient.vector && gradient.vector.length) {
 970                     el.setAttribute("x1", gradient.vector[0]);
 971                     el.setAttribute("y1", gradient.vector[1]);
 972                     el.setAttribute("x2", gradient.vector[2]);
 973                     el.setAttribute("y2", gradient.vector[3]);
 974                 }
 975                 SVG.defs.appendChild(el);
 976                 for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
 977                     var stop = document.createElementNS(SVG.svgns, "stop");
 978                     stop.setAttribute("offset", gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%");
 979                     stop.setAttribute("stop-color", gradient.dots[i].color || "#fff");
 980                     if (typeof gradient.dots[i].opacity != "undefined") {
 981                         stop.setAttribute("stop-opacity", gradient.dots[i].opacity);
 982                     }
 983                     el.appendChild(stop);
 984                 };
 985                 o.setAttribute("fill", "url(#" + el.id + ")");
 986             };
 987             var setFillAndStroke = function (o, params) {
 988                 var dasharray = {
 989                     "-": [3, 1],
 990                     ".": [1, 1],
 991                     "-.": [3, 1, 1, 1],
 992                     "-..": [3, 1, 1, 1, 1, 1],
 993                     ". ": [1, 3],
 994                     "- ": [4, 3],
 995                     "--": [8, 3],
 996                     "- .": [4, 3, 1, 3],
 997                     "--.": [8, 3, 1, 3],
 998                     "--..": [8, 3, 1, 3, 1, 3]
 999                 };
1000                 for (var att in params) {
1001                     var value = params[att];
1002                     o.attrs[att] = value;
1003                     switch (att) {
1004                         case "rx":
1005                         case "cx":
1006                         case "x":
1007                             o[0].setAttribute(att, o.svg._getX(value));
1008                             break;
1009                         case "ry":
1010                         case "cy":
1011                         case "y":
1012                             o[0].setAttribute(att, o.svg._getY(value));
1013                             break;
1014                         case "width":
1015                             o[0].setAttribute(att, o.svg._getW(value));
1016                             break;
1017                         case "height":
1018                             o[0].setAttribute(att, o.svg._getH(value));
1019                             break;
1020                         case "gradient":
1021                             addGrdientFill(o[0], value, o.svg);
1022                             break;
1023                         case "stroke-dasharray":
1024                             value = dasharray[value.toLowerCase()];
1025                             if (value) {
1026                                 var width = params["stroke-width"] || o.attr("stroke-width") || "1",
1027                                     butt = {round: width, square: width, butt: 0}[o.attr("stroke-linecap")] || 0,
1028                                     dashes = [];
1029                                 for (var i = 0, ii = value.length; i < ii; i++) {
1030                                     dashes.push(value[i] * width + ((i % 2) ? 1 : -1) * butt);
1031                                 }
1032                                 value = dashes.join(",");
1033                                 o[0].setAttribute(att, value);
1034                             }
1035                             break;
1036                         case "text":
1037                             if (o.type == "text") {
1038                                 o[0].childNodes.length && o[0].removeChild(o[0].firstChild);
1039                                 o[0].appendChild(document.createTextNode(value));
1040                             }
1041                             break;
1042                         case "fill":
1043                             var isURL = value.match(/^url\(([^\)]+)\)$/i);
1044                             if (isURL) {
1045                                 var el = document.createElementNS(o.svg.svgns, "pattern");
1046                                 var ig = document.createElementNS(o.svg.svgns, "image");
1047                                 console.log(isURL);
1048                                 el.id = "raphael-pattern-" + o.svg.gradients++;
1049                                 el.setAttribute("x", 0);
1050                                 el.setAttribute("y", 0);
1051                                 el.setAttribute("patternUnits", "userSpaceOnUse");
1052                                 ig.setAttribute("x", 0);
1053                                 ig.setAttribute("y", 0);
1054                                 ig.setAttributeNS(o.svg.xlink, "href", isURL[1]);
1055                                 el.appendChild(ig);
1056                                 var img = document.createElement("img");
1057                                 img.src = isURL[1];
1058                                 img.style.position = "absolute";
1059                                 img.style.top = "-9999em";
1060                                 img.style.left = "-9999em";
1061                                 img.onload = function () {
1062                                     el.setAttribute("width", this.offsetWidth);
1063                                     el.setAttribute("height", this.offsetHeight);
1064                                     ig.setAttribute("width", this.offsetWidth);
1065                                     ig.setAttribute("height", this.offsetHeight);
1066                                     document.body.removeChild(this);
1067                                 };
1068                                 document.body.appendChild(img);
1069                                 o.svg.defs.appendChild(el);
1070                                 o[0].style.fill = "url(#" + el.id + ")";
1071                                 o[0].setAttribute("fill", "url(#" + el.id + ")");
1072                                 break;
1073                             }
1074                         default :
1075                             var cssrule = att.replace(/(\-.)/g, function (w) {
1076                                 return w.substring(1).toUpperCase();
1077                             });
1078                             o[0].style[cssrule] = value;
1079                             // Need following line for Firefox
1080                             o[0].setAttribute(att, value);
1081                             break;
1082                     }
1083                 }
1084             };
1085             var Element = function (node, svg) {
1086                 var X = 0,
1087                     Y = 0,
1088                     Rotation = {deg: 0, x: 0, y: 0},
1089                     ScaleX = 1,
1090                     ScaleY = 1,
1091                     tMatrix = null;
1092                 this[0] = node;
1093                 this.node = node;
1094                 this.svg = svg;
1095                 this.attrs = this.attrs || {};
1096                 this.transformations = []; // rotate, translate, scale, matrix
1097                 this.rotate = function (deg) {
1098                     if (deg == undefined) {
1099                         return Rotation.deg;
1100                     }
1101                     var bbox = this.getBBox();
1102                     Rotation.deg += deg;
1103                     if (Rotation.deg) {
1104                         this.transformations[0] = ("rotate(" + Rotation.deg + " " + (bbox.x + bbox.width / 2) + " " + (bbox.y + bbox.height / 2) + ")");
1105                     } else {
1106                         this.transformations[0] = "";
1107                     }
1108                     this[0].setAttribute("transform", this.transformations.join(" "));
1109                     return this;
1110                 };
1111                 this.translate = function (x, y) {
1112                     if (x == undefined && y == undefined) {
1113                         return {x: X, y: Y};
1114                     }
1115                     X += x;
1116                     Y += y;
1117                     if (X || Y) {
1118                         this.transformations[1] = "translate(" + X + "," + Y + ")";
1119                     } else {
1120                         this.transformations[1] = "";
1121                     }
1122                     this[0].setAttribute("transform", this.transformations.join(" "));
1123                     return this;
1124                 };
1125                 this.scale = function (x, y) {
1126                     if (x == undefined && y == undefined) {
1127                         return {x: ScaleX, y: ScaleY};
1128                     }
1129                     y = y || x;
1130                     if (x != 0 && !(x == 1 && y == 1)) {
1131                         ScaleX *= x;
1132                         ScaleY *= y;
1133                         if (!(ScaleX == 1 && ScaleY == 1)) {
1134                             var bbox = this.getBBox(),
1135                                 dx = bbox.x * (1 - ScaleX) + (bbox.width / 2 - bbox.width * ScaleX / 2),
1136                                 dy = bbox.y * (1 - ScaleY) + (bbox.height / 2 - bbox.height * ScaleY / 2);
1137                             this.transformations[2] = new Matrix(ScaleX, 0, 0, ScaleY, dx, dy);
1138                         } else {
1139                             this.transformations[2] = "";
1140                         }
1141                         this[0].setAttribute("transform", this.transformations.join(" "));
1142                     }
1143                     return this;
1144                 };
1145             };
1146             Element.prototype.hide = function () {
1147                 this[0].style.display = "none";
1148                 return this;
1149             };
1150             Element.prototype.show = function () {
1151                 this[0].style.display = "block";
1152                 return this;
1153             };
1154             // depricated
1155             Element.prototype.matrix = function (xx, xy, yx, yy, dx, dy) {
1156                 this.transformations[3] = new Matrix(xx, xy, yx, yy, dx, dy);
1157                 this[0].setAttribute("transform", this.transformations.join(" "));
1158                 return this;
1159             };
1160             Element.prototype.remove = function () {
1161                 this[0].parentNode.removeChild(this[0]);
1162             };
1163             Element.prototype.getBBox = function () {
1164                 return this[0].getBBox();
1165             };
1166             Element.prototype.attr = function () {
1167                 if (arguments.length == 1 && typeof arguments[0] == "string") {
1168                     return this[0].getAttribute(arguments[0]);
1169                 }
1170                 if (arguments.length == 1 && arguments[0] instanceof Array) {
1171                     var values = {};
1172                     for (var j in arguments[0]) {
1173                         values[arguments[0][j]] = this.attrs[arguments[0][j]];
1174                     }
1175                     return values;
1176                 }
1177                 if (arguments.length == 2) {
1178                     var params = {};
1179                     params[arguments[0]] = arguments[1];
1180                     setFillAndStroke(this, params);
1181                 } else if (arguments.length == 1 && typeof arguments[0] == "object") {
1182                     setFillAndStroke(this, arguments[0]);
1183                 }
1184                 return this;
1185             };
1186             Element.prototype.toFront = function () {
1187                 this[0].parentNode.appendChild(this[0]);
1188                 return this;
1189             };
1190             Element.prototype.toBack = function () {
1191                 if (this[0].parentNode.firstChild != this[0]) {
1192                     this[0].parentNode.insertBefore(this[0], this[0].parentNode.firstChild);
1193                 }
1194                 return this;
1195             };
1196             var theCircle = function (svg, x, y, r) {
1197                 var el = document.createElementNS(svg.svgns, "circle");
1198                 el.setAttribute("cx", svg._getX(x));
1199                 el.setAttribute("cy", svg._getY(y));
1200                 el.setAttribute("r", r);
1201                 el.setAttribute("fill", "none");
1202                 el.setAttribute("stroke", "#000");
1203                 if (svg.canvas) {
1204                     svg.canvas.appendChild(el);
1205                 }
1206                 var res = new Element(el, svg);
1207                 res.attrs = res.attrs || {};
1208                 res.attrs.cx = x;
1209                 res.attrs.cy = y;
1210                 res.attrs.r = r;
1211                 res.attrs.stroke = "#000";
1212                 res.type = "circle";
1213                 return res;
1214             };
1215             var theRect = function (svg, x, y, w, h, r) {
1216                 var el = document.createElementNS(svg.svgns, "rect");
1217                 el.setAttribute("x", svg._getX(x));
1218                 el.setAttribute("y", svg._getY(y));
1219                 el.setAttribute("width", svg._getW(w));
1220                 el.setAttribute("height", svg._getH(h));
1221                 if (r) {
1222                     el.setAttribute("rx", r);
1223                     el.setAttribute("ry", r);
1224                 }
1225                 el.setAttribute("fill", "none");
1226                 el.setAttribute("stroke", "#000");
1227                 if (svg.canvas) {
1228                     svg.canvas.appendChild(el);
1229                 }
1230                 var res = new Element(el, svg);
1231                 res.attrs = res.attrs || {};
1232                 res.attrs.x = x;
1233                 res.attrs.y = y;
1234                 res.attrs.width = w;
1235                 res.attrs.height = h;
1236                 res.attrs.stroke = "#000";
1237                 if (r) {
1238                     res.attrs.rx = res.attrs.ry = r;
1239                 }
1240                 res.type = "rect";
1241                 return res;
1242             };
1243             var theEllipse = function (svg, x, y, rx, ry) {
1244                 var el = document.createElementNS(svg.svgns, "ellipse");
1245                 el.setAttribute("cx", svg._getX(x));
1246                 el.setAttribute("cy", svg._getY(y));
1247                 el.setAttribute("rx", svg._getW(rx));
1248                 el.setAttribute("ry", svg._getH(ry));
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.rx = rx;
1259                 res.attrs.ry = ry;
1260                 res.attrs.stroke = "#000";
1261                 res.type = "ellipse";
1262                 return res;
1263             };
1264             var theImage = function (svg, src, x, y, w, h) {
1265                 var el = document.createElementNS(svg.svgns, "image");
1266                 el.setAttribute("x", svg._getX(x));
1267                 el.setAttribute("y", svg._getY(y));
1268                 el.setAttribute("width", svg._getW(w));
1269                 el.setAttribute("height", svg._getH(h));
1270                 el.setAttributeNS(svg.xlink, "href", src);
1271                 if (svg.canvas) {
1272                     svg.canvas.appendChild(el);
1273                 }
1274                 var res = new Element(el, svg);
1275                 res.attrs = res.attrs || {};
1276                 res.attrs.x = x;
1277                 res.attrs.y = y;
1278                 res.attrs.width = w;
1279                 res.attrs.height = h;
1280                 res.type = "image";
1281                 return res;
1282             };
1283             var theText = function (svg, x, y, text) {
1284                 var el = document.createElementNS(svg.svgns, "text");
1285                 el.setAttribute("x", x);
1286                 el.setAttribute("y", y);
1287                 el.setAttribute("text-anchor", "middle");
1288                 el.setAttribute("fill", "#000");
1289                 if (text) {
1290                     el.appendChild(document.createTextNode(text));
1291                 }
1292                 if (svg.canvas) {
1293                     svg.canvas.appendChild(el);
1294                 }
1295                 var res = new Element(el, svg);
1296                 res.attrs = res.attrs || {};
1297                 res.attrs.x = x;
1298                 res.attrs.y = y;
1299                 res.attrs.fill = "#000";
1300                 res.type = "text";
1301                 return res;
1302             };
1303             var theGroup = function (svg) {
1304                 var el = document.createElementNS(svg.svgns, "g");
1305                 if (svg.canvas) {
1306                     svg.canvas.appendChild(el);
1307                 }
1308                 var i = new Element(el, svg);
1309                 for (var f in svg) {
1310                     if (f[0] != "_" && typeof svg[f] == "function") {
1311                         i[f] = (function (f) {
1312                             return function () {
1313                                 var e = svg[f].apply(svg, arguments);
1314                                 el.appendChild(e[0]);
1315                                 return e;
1316                             };
1317                         })(f);
1318                     }
1319                 }
1320                 i.type = "group";
1321                 return i;
1322             };
1323             r._create = function () {
1324                 // container, width, height
1325                 // x, y, width, height
1326                 if (typeof arguments[0] == "string") {
1327                     var container = document.getElementById(arguments[0]);
1328                     var width = arguments[1];
1329                     var height = arguments[2];
1330                 }
1331                 if (typeof arguments[0] == "object") {
1332                     var container = arguments[0];
1333                     var width = arguments[1];
1334                     var height = arguments[2];
1335                 }
1336                 if (typeof arguments[0] == "number") {
1337                     var container = 1,
1338                         x = arguments[0],
1339                         y = arguments[1],
1340                         width = arguments[2],
1341                         height = arguments[3];
1342                 }
1343                 if (!container) {
1344                     throw new Error("SVG container not found.");
1345                 }
1346                 C.canvas = document.createElementNS(C.svgns, "svg");
1347                 C.canvas.setAttribute("width", width || 320);
1348                 C.width = width || 320;
1349                 C.canvas.setAttribute("height", height || 200);
1350                 C.height = height || 200;
1351                 if (container == 1) {
1352                     document.body.appendChild(C.canvas);
1353                     C.canvas.style.position = "absolute";
1354                     C.canvas.style.left = x + "px";
1355                     C.canvas.style.top = y + "px";
1356                 } else {
1357                     if (container.firstChild) {
1358                         container.insertBefore(C.canvas, container.firstChild);
1359                     } else {
1360                         container.appendChild(C.canvas);
1361                     }
1362                 }
1363                 container = {
1364                     canvas: C.canvas,
1365                     clear: function () {
1366                         while (this.canvas.firstChild) {
1367                             this.canvas.removeChild(this.canvas.firstChild);
1368                         }
1369                         this.defs = document.createElementNS(C.svgns, "defs");
1370                         this.gradients = 0;
1371                         this.canvas.appendChild(this.defs);
1372                     }
1373                 };
1374                 for (var prop in C) {
1375                     if (prop != "create") {
1376                         container[prop] = C[prop];
1377                     }
1378                 }
1379                 container.clear();
1380                 return container;
1381             };
1382             C.remove = function () {
1383                 C.canvas.parentNode.removeChild(C.canvas);
1384             };
1385             C.svgns = "http://www.w3.org/2000/svg";
1386             C.xlink = "http://www.w3.org/1999/xlink";
1387         }
1388         if (type == "VML" || type == "SVG") {
1389             C.circle = function (x, y, r) {
1390                 return theCircle(this, x, y, r);
1391             };
1392             C.rect = function (x, y, w, h, r) {
1393                 return theRect(this, x, y, w, h, r);
1394             };
1395             C.ellipse = function (x, y, rx, ry) {
1396                 return theEllipse(this, x, y, rx, ry);
1397             };
1398             C.path = function (params, pathString) {
1399                 return thePath(params, pathString, this);
1400             };
1401             C.image = function (src, x, y, w, h) {
1402                 return theImage(this, src, x, y, w, h);
1403             };
1404             C.text = function (x, y, text) {
1405                 return theText(this, x, y, text);
1406             };
1407             C.group = function () {
1408                 return theGroup(this);
1409             };
1410             C.linerect = function (x, y, w, h, r) {
1411                 if (r && parseInt(r, 10)) {
1412                     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();
1413                 }
1414                 return this.path({stroke: "#000"}).moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h).lineTo(x, y + h).andClose();
1415             };
1416             C.drawGrid = function (x, y, w, h, wv, hv, color) {
1417                 color = color || "#000";
1418                 var p = this.path({stroke: color, "stroke-width": 1})
1419                         .moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h).lineTo(x, y + h).lineTo(x, y),
1420                     rowHeight = h / hv,
1421                     columnWidth = w / wv;
1422                 for (var i = 1; i < hv; i++) {
1423                     p.moveTo(x, y + i * rowHeight).lineTo(x + w, y + i * rowHeight);
1424                 }
1425                 for (var i = 1; i < wv; i++) {
1426                     p.moveTo(x + i * columnWidth, y).lineTo(x + i * columnWidth, y + h);
1427                 }
1428                 return p;
1429             };
1430             C.setGrid = function (xmin, ymin, xmax, ymax, w, h) {
1431                 var xc = (xmax - xmin) / w;
1432                 var yc = (ymax - ymin) / h;
1433                 this._getX = function (x) {
1434                     return xmin + x * xc;
1435                 };
1436                 this._getY = function (y) {
1437                     return ymin + y * yc;
1438                 };
1439                 this._getW = function (w) {
1440                     return w * xc;
1441                 };
1442                 this._getH = function (h) {
1443                     return h * yc;
1444                 };
1445             };
1446             C.clearGrid = function () {
1447                 this._getX = this._getY = this._getW = this._getH = function (x) { return x; };
1448             };
1449             C.safari = function () {
1450                 if (r.type == "SVG") {
1451                     var rect = C.rect(-C.width, -C.height, C.width * 3, C.height * 3).attr({stroke: "none"});
1452                     setTimeout(function () {rect.remove();}, 0);
1453                 }
1454             };
1455             Element.prototype.animateTo = function (x, y, ms, callback) {
1456                 clearTimeout(this.animation_in_progress);
1457                 if ("cx" in this.attrs || "x" in this.attrs) {
1458                     var is_round = ("cx" in this.attrs),
1459                         X = this.attrs.cx || this.attrs.x,
1460                         Y = this.attrs.cy || this.attrs.y;
1461                     if (x == X && y == Y) {
1462                         return this;
1463                     }
1464                     var dy = y - Y,
1465                         dx = x - X,
1466                         coeff = dy / dx,
1467                         plus = Y - coeff * X,
1468                         alpha = Math.atan(this.coeff);
1469                     this.xs = this.step * Math.cos(alpha);
1470                     if (x < X) {
1471                         this.xs = -this.xs;
1472                     }
1473                     var start = new Date(),
1474                         that = this;
1475                     (function () {
1476                         var time = (new Date()).getTime() - start.getTime();
1477                         if (time < ms) {
1478                             var x1 = X + time * dx / ms;
1479                             var y1 = x1 * coeff + plus;
1480                             that.attr(is_round ? {cx: x1, cy: y1} : {x: x1, y: y1});
1481                             that.animation_in_progress = setTimeout(arguments.callee, 1);
1482                             C.safari();
1483                         } else {
1484                             that.attr(is_round ? {cx: x, cy: y} : {x: x, y: y});
1485                             C.safari();
1486                             callback && callback.call(that);
1487                         }
1488                     })();
1489                 }
1490                 return this;
1491             };
1492             C.pathfinder = function (p, path) {
1493                 var commands = {
1494                     M: function (x, y) {
1495                         this.moveTo(x, y);
1496                     },
1497                     m: function (x, y) {
1498                         this.moveTo(this.last.x + x, this.last.y + y);
1499                     },
1500                     C: function (x1, y1, x2, y2, x3, y3) {
1501                         this.curveTo(x1, y1, x2, y2, x3, y3);
1502                     },
1503                     c: function (x1, y1, x2, y2, x3, y3) {
1504                         this.curveTo(this.last.x + x1, this.last.y + y1, this.last.x + x2, this.last.y + y2, this.last.x + x3, this.last.y + y3);
1505                     },
1506                     S: function (x1, y1, x2, y2) {
1507                         p.curveTo(x1, y1, x2, y2);
1508                     },
1509                     s: function (x1, y1, x2, y2) {
1510                         this.curveTo(this.last.x + x1, this.last.y + y1, this.last.x + x2, this.last.y + y2);
1511                     },
1512                     L: function (x, y) {
1513                         p.lineTo(x, y);
1514                     },
1515                     l: function (x, y) {
1516                         this.lineTo(this.last.x + x, this.last.y + y);
1517                     },
1518                     H: function (x) {
1519                         this.lineTo(x, this.last.y);
1520                     },
1521                     h: function (x) {
1522                         this.lineTo(this.last.x + x, this.last.y);
1523                     },
1524                     V: function (y) {
1525                         this.lineTo(this.last.x, y);
1526                     },
1527                     v: function (y) {
1528                         this.lineTo(this.last.x, this.last.y + y);
1529                     },
1530                     A: function (rx, ry, xaxisrotation, largearcflag, sweepflag, x, y) {
1531                         this.arcTo(rx, ry, largearcflag, sweepflag, x, y);
1532                     },
1533                     a: function (rx, ry, xaxisrotation, largearcflag, sweepflag, x, y) {
1534                         this.arcTo(this.last.x + rx, this.last.y + ry, largearcflag, sweethisflag, this.last.x + x, this.last.y + y);
1535                     },
1536                     z: function () {
1537                         this.andClose();
1538                     }
1539                 };
1540                 path.replace(/([mzlhvcsqta])\s*((-?\d*\.?\d*\s*,?\s*)+)/ig, function (a, b, c) {
1541                     var params = [];
1542                     c.replace(/(-?\d*\.?\d*)\s*,?\s*/ig, function (a, b) {
1543                         b && params.push(+b);
1544                     });
1545                     while (params.length >= commands[b].length) {
1546                         commands[b].apply(p, params.splice(0, commands[b].length));
1547                         if (!commands[b].length) {
1548                             break;
1549                         };
1550                     }
1551                 });
1552             };
1553             return r;
1554         } else {
1555             return function () {};
1556         }
1557     })((!(window.SVGPreserveAspectRatio && window.SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMINYMIN == 2)) ? "VML" : "SVG");
1558
1559
1560 Raphael.vml = !(Raphael.svg = (Raphael.type == "SVG"));
1561 if (Raphael.vml && window.CanvasRenderingContext2D) {
1562     Raphael.type = "Canvas only";
1563     Raphael.vml = Raphael.svg = false;
1564 }
1565 Raphael.toString = function () {
1566     return "Your browser supports " + this.type + ".\nYou are running " + unescape("Rapha%EBl%20") + this.version;
1567 };
1568 // generic utilities
1569 Raphael.hsb2rgb = function (hue, saturation, brightness) {
1570     if (typeof hue == "object" && "h" in hue && "s" in hue && "b" in hue) {
1571         brightness = hue.b;
1572         saturation = hue.s;
1573         hue = hue.h;
1574     }
1575     var red,
1576         green,
1577         blue;
1578     if (brightness == 0) {
1579         return {r: 0, g: 0, b: 0, hex: "#000"};
1580     } else {
1581         var i = Math.floor(hue * 6),
1582             f = (hue * 6) - i,
1583             p = brightness * (1 - saturation),
1584             q = brightness * (1 - (saturation * f)),
1585             t = brightness * (1 - (saturation * (1 - f)));
1586         [
1587             function () {red = brightness; green = t; blue = p;},
1588             function () {red = q; green = brightness; blue = p;},
1589             function () {red = p; green = brightness; blue = t;},
1590             function () {red = p; green = q; blue = brightness;},
1591             function () {red = t; green = p; blue = brightness;},
1592             function () {red = brightness; green = p; blue = q;},
1593             function () {red = brightness; green = t; blue = p;}
1594         ][i]();
1595     }
1596     var rgb = {r: red, g: green, b: blue};
1597     red *= 255;
1598     green *= 255;
1599     blue *= 255;
1600     var r = Math.round(red).toString(16);
1601     if (r.length == 1) {
1602         r = "0" + r;
1603     }
1604     var g = Math.round(green).toString(16);
1605     if (g.length == 1) {
1606         g = "0" + g;
1607     }
1608     var b = Math.round(blue).toString(16);
1609     if (b.length == 1) {
1610         b = "0" + b;
1611     }
1612     rgb.hex = "#" + r + g + b;
1613     return rgb;
1614 };
1615 Raphael.rgb2hsb = function (red, green, blue) {
1616     if (typeof red == "object" && "r" in red && "g" in red && "b" in red) {
1617         blue = red.b;
1618         green = red.g;
1619         red = red.r;
1620     }
1621     if (typeof red == "string" && red.charAt(0) == "#") {
1622         if (red.length == 4) {
1623             blue = parseInt(red.substring(3), 16);
1624             green = parseInt(red.substring(2, 3), 16);
1625             red = parseInt(red.substring(1, 2), 16);
1626         } else {
1627             blue = parseInt(red.substring(5), 16);
1628             green = parseInt(red.substring(3, 5), 16);
1629             red = parseInt(red.substring(1, 3), 16);
1630         }
1631     }
1632     if (red > 1 || green > 1 || blue > 1) {
1633         red /= 255;
1634         green /= 255;
1635         blue /= 255;
1636     }
1637     var max = Math.max(red, green, blue),
1638         min = Math.min(red, green, blue),
1639         hue,
1640         saturation,
1641         brightness = max;
1642     if (min == max) {
1643         return {h: 0, s: 0, b: max};
1644     } else {
1645         var delta = (max - min);
1646         saturation = delta / max;
1647         if (red == max) {
1648             hue = (green - blue) / delta;
1649         } else if (green == max) {
1650             hue = 2 + ((blue - red) / delta);
1651         } else {
1652             hue = 4 + ((red - green) / delta);
1653         }
1654         hue /= 6;
1655         if (hue < 0) {
1656             hue += 1;
1657         }
1658         if (hue > 1) {
1659             hue -= 1;
1660         }
1661     }
1662     return {h: hue, s: saturation, b: brightness};
1663 };
1664 Raphael.getColor = function (value) {
1665     var start = arguments.callee.start = arguments.callee.start || {h: 0, s: 1, b: value || .75};
1666     var rgb = this.hsb2rgb(start.h, start.s, start.b);
1667     start.h += .075;
1668     if (start.h > 1) {
1669         start.h = 0;
1670         start.s -= .2;
1671         if (start.s <= 0) {
1672             arguments.callee.start = {h: 0, s: 1, b: start.b};
1673         }
1674     }
1675     return rgb.hex;
1676 };
1677 Raphael.getColor.reset = function () {
1678     this.start = undefined;
1679 };