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

   1 /*
   2  * Raphael 0.7 - JavaScript Vector Library
   3  *
   4  * Copyright (c) 2008 – 2009 Dmitry Baranovskiy (http://raphaeljs.com)
   5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   6  */
   7 (function (R) {
   8     if (R == null) {
   9         throw new Error("raphael-vml.js should not be included into HTML. It has to be loaded with raphael.js");
  10     }
  11     R.type = "VML";
  12     R.vml = !(R.svg = false);
  13     R._.thePath = function (params, pathString, VML) {
  14         var g = document.createElement("rvml:group"), gl = g.style;
  15         gl.position = "absolute";
  16         gl.left = 0;
  17         gl.top = 0;
  18         gl.width = VML.width + "px";
  19         gl.height = VML.height + "px";
  20         var el = document.createElement("rvml:shape"), ol = el.style;
  21         ol.width = VML.width + "px";
  22         ol.height = VML.height + "px";
  23         el.path = "";
  24         if (params["class"]) {
  25             el.className = params["class"];
  26         }
  27         el.coordsize = this.coordsize;
  28         el.coordorigin = this.coordorigin;
  29         g.appendChild(el);
  30         VML.canvas.appendChild(g);
  31         var p = new Element(el, g, VML);
  32         p.isAbsolute = true;
  33         p.type = "path";
  34         p.path = [];
  35         p.last = {x: 0, y: 0, bx: 0, by: 0, isAbsolute: true};
  36         p.Path = "";
  37         p.absolutely = function () {
  38             this.isAbsolute = true;
  39             return this;
  40         };
  41         p.relatively = function () {
  42             this.isAbsolute = false;
  43             return this;
  44         };
  45         p.moveTo = function (x, y) {
  46             var d = this.isAbsolute?"m":"t";
  47             d += Math.round(parseFloat(x, 10)) + " " + Math.round(parseFloat(y, 10));
  48             this.node.path = this.Path += d;
  49             this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
  50             this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
  51             this.last.isAbsolute = this.isAbsolute;
  52             this.attrs.path += (this.isAbsolute ? "M" : "m") + [x, y];
  53             return this;
  54         };
  55         p.lineTo = function (x, y) {
  56             var d = this.isAbsolute?"l":"r";
  57             d += Math.round(parseFloat(x, 10)) + " " + Math.round(parseFloat(y, 10));
  58             this[0].path = this.Path += d;
  59             this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x, 10);
  60             this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y, 10);
  61             this.last.isAbsolute = this.isAbsolute;
  62             this.attrs.path += (this.isAbsolute ? "L" : "l") + [x, y];
  63             return this;
  64         };
  65         p.arcTo = function (rx, ry, large_arc_flag, sweep_flag, x2, y2) {
  66             // for more information of where this math came from visit:
  67             // http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
  68             x2 = (this.isAbsolute ? 0 : this.last.x) + x2;
  69             y2 = (this.isAbsolute ? 0 : this.last.y) + y2;
  70             var x1 = this.last.x,
  71                 y1 = this.last.y,
  72                 x = (x1 - x2) / 2,
  73                 y = (y1 - y2) / 2,
  74                 k = (large_arc_flag == sweep_flag ? -1 : 1) *
  75                     Math.sqrt(Math.abs(rx * rx * ry * ry - rx * rx * y * y - ry * ry * x * x) / (rx * rx * y * y + ry * ry * x * x)),
  76                 cx = k * rx * y / ry + (x1 + x2) / 2,
  77                 cy = k * -ry * x / rx + (y1 + y2) / 2,
  78                 d = sweep_flag ? (this.isAbsolute ? "wa" : "wr") : (this.isAbsolute ? "at" : "ar"),
  79                 left = Math.round(cx - rx),
  80                 top = Math.round(cy - ry);
  81             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(", ");
  82             this.node.path = this.Path += d;
  83             this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(x2, 10);
  84             this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(y2, 10);
  85             this.last.isAbsolute = this.isAbsolute;
  86             this.attrs.path += (this.isAbsolute ? "A" : "a") + [rx, ry, 0, large_arc_flag, sweep_flag, x2, y2];
  87             return this;
  88         };
  89         p.cplineTo = function (x1, y1, w1) {
  90             if (!w1) {
  91                 return this.lineTo(x1, y1);
  92             } else {
  93                 var x = Math.round(Math.round(parseFloat(x1, 10) * 100) / 100),
  94                     y = Math.round(Math.round(parseFloat(y1, 10) * 100) / 100),
  95                     w = Math.round(Math.round(parseFloat(w1, 10) * 100) / 100),
  96                     d = this.isAbsolute ? "c" : "v",
  97                     attr = [Math.round(this.last.x) + w, Math.round(this.last.y), x - w, y, x, y],
  98                     svgattr = [this.last.x + w1, this.last.y, x1 - w1, y1, x1, y1];
  99                 d += attr.join(" ") + " ";
 100                 this.last.x = (this.isAbsolute ? 0 : this.last.x) + attr[4];
 101                 this.last.y = (this.isAbsolute ? 0 : this.last.y) + attr[5];
 102                 this.last.bx = attr[2];
 103                 this.last.by = attr[3];
 104                 this.node.path = this.Path += d;
 105                 this.attrs.path += (this.isAbsolute ? "C" : "c") + svgattr;
 106                 return this;
 107             }
 108         };
 109         p.curveTo = function () {
 110             var d = this.isAbsolute ? "c" : "v";
 111             if (arguments.length == 6) {
 112                 this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 113                 this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 114                 this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[4], 10);
 115                 this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[5], 10);
 116                 d += [Math.round(parseFloat(arguments[0], 10)),
 117                      Math.round(parseFloat(arguments[1], 10)),
 118                      Math.round(parseFloat(arguments[2], 10)),
 119                      Math.round(parseFloat(arguments[3], 10)),
 120                      Math.round(parseFloat(arguments[4], 10)),
 121                      Math.round(parseFloat(arguments[5], 10))].join(" ") + " ";
 122                 this.last.isAbsolute = this.isAbsolute;
 123                 this.attrs.path += (this.isAbsolute ? "C" : "c") + Array.prototype.splice.call(arguments, 0, arguments.length);
 124             }
 125             if (arguments.length == 4) {
 126                 var bx = this.last.x * 2 - this.last.bx;
 127                 var by = this.last.y * 2 - this.last.by;
 128                 this.last.bx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0], 10);
 129                 this.last.by = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1], 10);
 130                 this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 131                 this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 132                 d += [Math.round(bx), Math.round(by),
 133                      Math.round(parseFloat(arguments[0], 10)),
 134                      Math.round(parseFloat(arguments[1], 10)),
 135                      Math.round(parseFloat(arguments[2], 10)),
 136                      Math.round(parseFloat(arguments[3], 10))].join(" ") + " ";
 137                  this.attrs.path += (this.isAbsolute ? "S" : "s") + Array.prototype.splice.call(arguments, 0, arguments.length);
 138             }
 139             this.node.path = this.Path += d;
 140             return this;
 141         };
 142         p.qcurveTo = function () {
 143             var d = "qb";
 144             if (arguments.length == 4) {
 145                 this.last.qx = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[0], 10);
 146                 this.last.qy = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[1], 10);
 147                 this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 148                 this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 149                 d += [Math.round(this.last.qx),
 150                      Math.round(this.last.qy),
 151                      Math.round(this.last.x),
 152                      Math.round(this.last.y)].join(" ") + " ";
 153                 this.last.isAbsolute = this.isAbsolute;
 154                 this.attrs.path += (this.isAbsolute ? "Q" : "q") + Array.prototype.splice.call(arguments, 0, arguments.length);
 155             }
 156             if (arguments.length == 2) {
 157                 this.last.qx = this.last.x * 2 - this.last.qx;
 158                 this.last.qy = this.last.y * 2 - this.last.qy;
 159                 this.last.x = (this.isAbsolute ? 0 : this.last.x) + parseFloat(arguments[2], 10);
 160                 this.last.y = (this.isAbsolute ? 0 : this.last.y) + parseFloat(arguments[3], 10);
 161                 d += [Math.round(this.last.qx),
 162                      Math.round(this.last.qy),
 163                      Math.round(this.last.x),
 164                      Math.round(this.last.y)].join(" ") + " ";
 165                  this.attrs.path += (this.isAbsolute ? "T" : "t") + Array.prototype.splice.call(arguments, 0, arguments.length);
 166             }
 167             this.node.path = this.Path += d;
 168             this.path.push({type: "qcurve", arg: [].slice.call(arguments, 0), pos: this.isAbsolute});
 169             return this;
 170         };
 171         p.addRoundedCorner = function (r, dir) {
 172             var R = .5522 * r, rollback = this.isAbsolute, o = this;
 173             if (rollback) {
 174                 this.relatively();
 175                 rollback = function () {
 176                     o.absolutely();
 177                 };
 178             } else {
 179                 rollback = function () {};
 180             }
 181             var actions = {
 182                 l: function () {
 183                     return {
 184                         u: function () {
 185                             o.curveTo(-R, 0, -r, -(r - R), -r, -r);
 186                         },
 187                         d: function () {
 188                             o.curveTo(-R, 0, -r, r - R, -r, r);
 189                         }
 190                     };
 191                 },
 192                 r: function () {
 193                     return {
 194                         u: function () {
 195                             o.curveTo(R, 0, r, -(r - R), r, -r);
 196                         },
 197                         d: function () {
 198                             o.curveTo(R, 0, r, r - R, r, r);
 199                         }
 200                     };
 201                 },
 202                 u: function () {
 203                     return {
 204                         r: function () {
 205                             o.curveTo(0, -R, -(R - r), -r, r, -r);
 206                         },
 207                         l: function () {
 208                             o.curveTo(0, -R, R - r, -r, -r, -r);
 209                         }
 210                     };
 211                 },
 212                 d: function () {
 213                     return {
 214                         r: function () {
 215                             o.curveTo(0, R, -(R - r), r, r, r);
 216                         },
 217                         l: function () {
 218                             o.curveTo(0, R, R - r, r, -r, r);
 219                         }
 220                     };
 221                 }
 222             };
 223             actions[dir.charAt(0)]()[dir.charAt(1)]();
 224             rollback();
 225             return o;
 226         };
 227         p.andClose = function () {
 228             this.node.path = (this.Path += "x e");
 229             this.attrs.path += "z";
 230             return this;
 231         };
 232         if (pathString) {
 233             p.absolutely();
 234             p.attrs.path = "";
 235             R._.paper.pathfinder(p, "" + pathString);
 236         }
 237         p.setBox();
 238         R._.setFillAndStroke(p, params);
 239         if (params.gradient) {
 240             R._.addGrdientFill(p, params.gradient);
 241         }
 242         return p;
 243     };
 244     R._.setFillAndStroke = function (o, params) {
 245         var s = o[0].style;
 246         o.attrs = o.attrs || {};
 247         for (var par in params) {
 248             o.attrs[par] = params[par];
 249         }
 250         if (params.path && o.type == "path") {
 251             o.Path = "";
 252             o.path = [];
 253             R._.paper.pathfinder(o, params.path);
 254         }
 255         if (params.rotation != null) {
 256             o.Group.style.rotation = params.rotation;
 257         }
 258         if (params.translation) {
 259             var xy = params.translation.split(/[, ]+/);
 260             o.translate(xy[0], xy[1]);
 261         }
 262         if (params.scale) {
 263             var xy = params.scale.split(/[, ]+/);
 264             o.scale(xy[0], xy[1]);
 265         }
 266         if (o.type == "image" && params.opacity) {
 267             o.node.filterOpacity = " progid:DXImageTransform.Microsoft.Alpha(opacity=" + (params.opacity * 100) + ")";
 268             o.node.style.filter = (o.node.filterMatrix || "") + (o.node.filterOpacity || "");
 269         }
 270         params["font-family"] && (s.fontFamily = params["font-family"]);
 271         params["font-size"] && (s.fontSize = params["font-size"]);
 272         params["font"] && (s.font = params["font"]);
 273         params["font-weight"] && (s.fontWeight = params["font-weight"]);
 274         if (typeof params.opacity != "undefined" || typeof params["stroke-width"] != "undefined" || typeof params.fill != "undefined" || typeof params.stroke != "undefined") {
 275             o = o.shape || o.node;
 276             var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || document.createElement("rvml:fill");
 277             if ("fill-opacity" in params || "opacity" in params) {
 278                 fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 279             }
 280             if (params.fill) {
 281                 fill.on = true;
 282             }
 283             if (fill.on == undefined || params.fill == "none") {
 284                 fill.on = false;
 285             }
 286             if (fill.on && params.fill) {
 287                 var isURL = params.fill.match(/^url\(([^\)]+)\)$/i);
 288                 if (isURL) {
 289                     fill.src = isURL[1];
 290                     fill.type = "tile";
 291                 } else {
 292                     fill.color = params.fill;
 293                     fill.src = "";
 294                     fill.type = "solid";
 295                 }
 296             }
 297             o.appendChild(fill);
 298             var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || document.createElement("rvml:stroke");
 299             if ((params.stroke && params.stroke != "none") || params["stroke-width"] || params["stroke-opacity"] || params["stroke-dasharray"]) {
 300                 stroke.on = true;
 301             }
 302             if (params.stroke == "none" || typeof stroke.on == "undefined") {
 303                 stroke.on = false;
 304             }
 305             if (stroke.on && params.stroke) {
 306                 stroke.color = params.stroke;
 307             }
 308             stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
 309             params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
 310             stroke.miterlimit = params["stroke-miterlimit"] || 8;
 311             params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
 312             params["stroke-width"] && (stroke.weight = (parseFloat(params["stroke-width"], 10) || 1) * 12 / 16);
 313             if (params["stroke-dasharray"]) {
 314                 var dasharray = {
 315                     "-": "shortdash",
 316                     ".": "shortdot",
 317                     "-.": "shortdashdot",
 318                     "-..": "shortdashdotdot",
 319                     ". ": "dot",
 320                     "- ": "dash",
 321                     "--": "longdash",
 322                     "- .": "dashdot",
 323                     "--.": "longdashdot",
 324                     "--..": "longdashdotdot"
 325                 };
 326                 stroke.dashstyle = dasharray[params["stroke-dasharray"]] || "";
 327             }
 328             o.appendChild(stroke);
 329         }
 330     };
 331     R._.addGrdientFill = function (o, gradient) {
 332         o.attrs = o.attrs || {};
 333         o.attrs.gradient = gradient;
 334         o = o.shape || o[0];
 335         var fill = o.getElementsByTagName("fill");
 336         if (fill.length) {
 337             fill = fill[0];
 338         } else {
 339             fill = document.createElement("rvml:fill");
 340         }
 341         if (gradient.dots.length) {
 342             fill.on = true;
 343             fill.method = "none";
 344             fill.type = (gradient.type.toLowerCase() == "linear") ? "gradient" : "gradientTitle";
 345             if (typeof gradient.dots[0].color != "undefined") {
 346                 fill.color = gradient.dots[0].color || "#000";
 347             }
 348             if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") {
 349                 fill.color2 = gradient.dots[gradient.dots.length - 1].color || "#000";
 350             }
 351             var colors = [];
 352             for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
 353                 if (gradient.dots[i].offset) {
 354                     colors.push(gradient.dots[i].offset + " " + gradient.dots[i].color);
 355                 }
 356             };
 357             var fillOpacity = gradient.dots[0].opacity || 1;
 358             var fillOpacity2 = gradient.dots[gradient.dots.length - 1].opacity || 1;
 359             if (colors) {
 360                 fill.colors.value = colors.join(",");
 361                 fillOpacity2 += fillOpacity;
 362                 fillOpacity = fillOpacity2 - fillOpacity;
 363                 fillOpacity2 -= fillOpacity;
 364             }
 365             fill.setAttribute("opacity", fillOpacity);
 366             fill.setAttribute("opacity2", fillOpacity2);
 367             if (gradient.vector) {
 368                 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;
 369                 fill.angle = 270 - angle;
 370             }
 371             if (gradient.type.toLowerCase() == "radial") {
 372                 fill.focus = "100%";
 373                 fill.focusposition = "0.5 0.5";
 374             }
 375         }
 376     };
 377     var Element = function (node, group, vml) {
 378         var Rotation = 0,
 379             RotX = 0,
 380             RotY = 0,
 381             Scale = 1;
 382         this[0] = node;
 383         this.node = node;
 384         this.X = 0;
 385         this.Y = 0;
 386         this.attrs = {};
 387         this.Group = group;
 388         this.vml = vml;
 389         this._ = {
 390             tx: 0,
 391             ty: 0,
 392             rt: 0,
 393             sx: 1,
 394             sy: 1
 395         };
 396     };
 397     Element.prototype.rotate = function (deg, isAbsolute) {
 398         if (deg == undefined) {
 399             return this._.rt;
 400         }
 401         if (isAbsolute) {
 402             this._.rt = deg;
 403         } else {
 404             this._.rt += deg;
 405         }
 406         this.Group.style.rotation = this._.rt;
 407         return this;
 408     };
 409     Element.prototype.setBox = function (params) {
 410         var gs = this.Group.style,
 411             os = this[0].style;
 412         for (var i in params) {
 413             this.attrs[i] = params[i];
 414         }
 415         var attr = this.attrs, x, y, w, h;
 416         switch (this.type) {
 417             case "circle":
 418                 x = attr.cx - attr.r;
 419                 y = attr.cy - attr.r;
 420                 w = h = attr.r * 2;
 421                 break;
 422             case "ellipse":
 423                 x = attr.cx - attr.rx;
 424                 y = attr.cy - attr.ry;
 425                 w = attr.rx * 2;
 426                 h = attr.ry * 2;
 427                 break;
 428             case "rect":
 429             case "image":
 430                 x = attr.x;
 431                 y = attr.y;
 432                 w = attr.width || 0;
 433                 h = attr.height || 0;
 434                 break;
 435             case "text":
 436                 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("");
 437                 return;
 438             case "path":
 439                 if (!this.attrs.path) {
 440                     x = 0;
 441                     y = 0;
 442                     w = this.vml.width;
 443                     h = this.vml.height;
 444                 } else {
 445                     var dim = Raphael.pathDimensions(this.attrs.path),
 446                     x = dim.x;
 447                     y = dim.y;
 448                     w = dim.width;
 449                     h = dim.height;
 450                 }
 451                 break;
 452             default:
 453                 x = 0;
 454                 y = 0;
 455                 w = this.vml.width;
 456                 h = this.vml.height;
 457                 break;
 458         }
 459         if (this.type == "path") {
 460             var left = Math.round(this.vml.width / 2 - w / 2 - x),
 461                 top = Math.round(this.vml.height / 2 - h / 2 - y);
 462             gs.left = - left + "px";
 463             gs.top = - top + "px";
 464             this.X = left;
 465             this.Y = top;
 466             this.W = w;
 467             this.H = h;
 468             os.top = top + "px";
 469             os.left = left + "px";
 470         } else {
 471             var left = this.vml.width / 2 - w / 2,
 472                 top = this.vml.height / 2 - h / 2;
 473             gs.position = "absolute";
 474             gs.left = x - left + "px";
 475             gs.top = y - top + "px";
 476             this.X = x - left;
 477             this.Y = y - top;
 478             this.W = w;
 479             this.H = h;
 480             gs.width = this.vml.width + "px";
 481             gs.height = this.vml.height + "px";
 482             os.position = "absolute";
 483             os.top = top + "px";
 484             os.left = left + "px";
 485             os.width = w + "px";
 486             os.height = h + "px";
 487         }
 488     };
 489     Element.prototype.hide = function () {
 490         this.Group.style.display = "none";
 491         return this;
 492     };
 493     Element.prototype.show = function () {
 494         this.Group.style.display = "block";
 495         return this;
 496     };
 497     Element.prototype.translate = function (x, y) {
 498         if (x == undefined && y == undefined) {
 499             return {x: this._.tx, y: this._.ty};
 500         }
 501         this._.tx += +x;
 502         this._.ty += +y;
 503         if (this.type == "path") {
 504             var path = this.attrs.path;
 505             path = Raphael.pathToRelative(path);
 506             path[0][1] += +x;
 507             path[0][2] += +y;
 508             this.attr({path: path.join(" ")});
 509         }
 510         this.setBox({x: this._.tx, y: this._.ty});
 511         return this;
 512     };
 513     Element.prototype.getBBox = function () {
 514         return {
 515             x: this.X,
 516             y: this.Y,
 517             width: this.W,
 518             height: this.H
 519         };
 520     };
 521     Element.prototype.remove = function () {
 522         this[0].parentNode.removeChild(this[0]);
 523         this.Group.parentNode.removeChild(this.Group);
 524         this.shape && this.shape.parentNode.removeChild(this.shape);
 525     };
 526     Element.prototype.attr = function () {
 527         if (arguments.length == 1 && typeof arguments[0] == "string") {
 528             if (arguments[0] == "translation") {
 529                 return this.translate();
 530             }
 531             return this.attrs[arguments[0]];
 532         }
 533         if (this.attrs && arguments.length == 1 && arguments[0] instanceof Array) {
 534             var values = {};
 535             for (var i = 0, ii = arguments[0].length; i < ii; i++) {
 536                 values[arguments[0][i]] = this.attrs[arguments[0][i]];
 537             };
 538             return values;
 539         }
 540         if (this[0].tagName.toLowerCase() == "group") {
 541             var children = this[0].childNodes;
 542             this.attrs = this.attrs || {};
 543             if (arguments.length == 2) {
 544                 this.attrs[arguments[0]] = arguments[1];
 545             } else if (arguments.length == 1 || typeof arguments[0] == "object") {
 546                 for (var j in arguments[0]) {
 547                     this.attrs[j] = arguments[0][j];
 548                 }
 549             }
 550             for (var i = 0, ii = children.length; i < ii; i++) {
 551                 this.attr.apply(new item(children[i], this[0], this.vml), arguments);
 552             }
 553         } else {
 554             var params;
 555             if (arguments.length == 2) {
 556                 params = {};
 557                 params[arguments[0]] = arguments[1];
 558             }
 559             if (arguments.length == 1 && typeof arguments[0] == "object") {
 560                 params = arguments[0];
 561             }
 562             if (params) {
 563                 R._.setFillAndStroke(this, params);
 564                 this.setBox(params);
 565                 if (params.gradient) {
 566                     R._.addGrdientFill(this, params.gradient);
 567                 }
 568                 if (params.text && this.type == "text") {
 569                     this[0].string = params.text;
 570                 }
 571                 if (params.id) {
 572                     this[0].id = params.id;
 573                 }
 574             }
 575         }
 576         return this;
 577     };
 578     Element.prototype.toFront = function () {
 579         this.Group.parentNode.appendChild(this.Group);
 580         return this;
 581     };
 582     Element.prototype.toBack = function () {
 583         if (this.Group.parentNode.firstChild != this.Group) {
 584             this.Group.parentNode.insertBefore(this.Group, this.Group.parentNode.firstChild);
 585         }
 586         return this;
 587     };
 588     Element.prototype.insertAfter = function (element) {
 589         if (element.Group.nextSibling) {
 590             element.Group.parentNode.insertBefore(this.Group, element.Group.nextSibling);
 591         } else {
 592             element.Group.parentNode.appendChild(this.Group);
 593         }
 594         return this;
 595     };
 596     Element.prototype.insertBefore = function (element) {
 597         element.Group.parentNode.insertBefore(this.Group, element.Group);
 598         return this;
 599     };
 600     for (var method in R._.element) {
 601         Element.prototype[method] = R._.element[method];
 602     }
 603     R._.theCircle = function (vml, x, y, r) {
 604         var g = document.createElement("rvml:group");
 605         var o = document.createElement("rvml:oval");
 606         g.appendChild(o);
 607         vml.canvas.appendChild(g);
 608         var res = new Element(o, g, vml);
 609         R._.setFillAndStroke(res, {stroke: "#000", fill: "none"});
 610         res.setBox({x: x - r, y: y - r, width: r * 2, height: r * 2});
 611         res.attrs.cx = x;
 612         res.attrs.cy = y;
 613         res.attrs.r = r;
 614         res.type = "circle";
 615         return res;
 616     };
 617     R._.theRect = function (vml, x, y, w, h, r) {
 618         var g = document.createElement("rvml:group");
 619         var o = document.createElement(r ? "rvml:roundrect" : "rvml:rect");
 620         if (r) {
 621             o.arcsize = r / (Math.min(w, h));
 622         }
 623         g.appendChild(o);
 624         vml.canvas.appendChild(g);
 625         var res = new Element(o, g, vml);
 626         R._.setFillAndStroke(res, {stroke: "#000"});
 627         res.setBox({x: x, y: y, width: w, height: h});
 628         res.attrs.x = x;
 629         res.attrs.y = y;
 630         res.attrs.w = w;
 631         res.attrs.h = h;
 632         res.attrs.r = r;
 633         res.type = "rect";
 634         return res;
 635     };
 636     R._.theEllipse = function (vml, x, y, rx, ry) {
 637         var g = document.createElement("rvml:group");
 638         var o = document.createElement("rvml:oval");
 639         g.appendChild(o);
 640         vml.canvas.appendChild(g);
 641         var res = new Element(o, g, vml);
 642         R._.setFillAndStroke(res, {stroke: "#000"});
 643         res.setBox({x: x - rx, y: y - ry, width: rx * 2, height: ry * 2});
 644         res.attrs.cx = x;
 645         res.attrs.cy = y;
 646         res.attrs.rx = rx;
 647         res.attrs.ry = ry;
 648         res.type = "ellipse";
 649         return res;
 650     };
 651     R._.theImage = function (vml, src, x, y, w, h) {
 652         var g = document.createElement("rvml:group");
 653         var o = document.createElement("rvml:image");
 654         o.src = src;
 655         g.appendChild(o);
 656         vml.canvas.appendChild(g);
 657         var res = new Element(o, g, vml);
 658         res.type = "image";
 659         res.setBox({x: x, y: y, width: w, height: h});
 660         res.attrs.x = x;
 661         res.attrs.y = y;
 662         res.attrs.w = w;
 663         res.attrs.h = h;
 664         return res;
 665     };
 666     R._.theText = function (vml, x, y, text) {
 667         // @TODO: setTheBox
 668         var g = document.createElement("rvml:group"), gs = g.style;
 669         var el = document.createElement("rvml:shape"), ol = el.style;
 670         var path = document.createElement("rvml:path"), ps = path.style;
 671         path.v = ["m", Math.round(x), ", ", Math.round(y - 2), "l", Math.round(x) + 1, ", ", Math.round(y - 2)].join("");
 672         path.textpathok = true;
 673         ol.width = vml.width;
 674         ol.height = vml.height;
 675         gs.position = "absolute";
 676         gs.left = 0;
 677         gs.top = 0;
 678         gs.width = vml.width;
 679         gs.height = vml.height;
 680         var o = document.createElement("rvml:textpath");
 681         o.string = text;
 682         o.on = true;
 683         o.coordsize = vml.coordsize;
 684         o.coordorigin = vml.coordorigin;
 685         el.appendChild(o);
 686         el.appendChild(path);
 687         g.appendChild(el);
 688         vml.canvas.appendChild(g);
 689         var res = new Element(o, g, vml);
 690         res.shape = el;
 691         res.textpath = path;
 692         res.type = "text";
 693         res.attrs.x = x;
 694         res.attrs.y = y;
 695         res.attrs.w = 1;
 696         res.attrs.h = 1;
 697         R._.setFillAndStroke(res, {stroke: "none", fill: "#000"});
 698         return res;
 699     };
 700     R._.theGroup = function (vml) {
 701         var el = document.createElement("rvml:group"), els = el.style;
 702         els.position = "absolute";
 703         els.left = 0;
 704         els.top = 0;
 705         els.width = vml.width;
 706         els.height = vml.height;
 707         if (vml.canvas) {
 708             vml.canvas.appendChild(el);
 709         }
 710         var res = new Element(el, el, vml);
 711         for (var f in vml) {
 712             if (f.charAt(0) != "_" && typeof vml[f] == "function") {
 713                 res[f] = (function (f) {
 714                     return function () {
 715                         var e = vml[f].apply(vml, arguments);
 716                         el.appendChild(e[0].parentNode);
 717                         return e;
 718                     };
 719                 })(f);
 720             }
 721         }
 722         res.type = "group";
 723         return res;
 724     };
 725     R._create = function () {
 726         // container, width, height
 727         // x, y, width, height
 728         var container, width, height;
 729         if (typeof arguments[0] == "string") {
 730             container = document.getElementById(arguments[0]);
 731             width = arguments[1];
 732             height = arguments[2];
 733         }
 734         if (typeof arguments[0] == "object") {
 735             container = arguments[0];
 736             width = arguments[1];
 737             height = arguments[2];
 738         }
 739         if (typeof arguments[0] == "number") {
 740             container = 1;
 741             x = arguments[0];
 742             y = arguments[1];
 743             width = arguments[2];
 744             height = arguments[3];
 745         }
 746         if (!container) {
 747             throw new Error("VML container not found.");
 748         }
 749         if (!document.namespaces["rvml"]) {
 750             document.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
 751             document.createStyleSheet().addRule("rvml\\:*", "behavior:url(#default#VML)");
 752         }
 753         var c = document.createElement("div"),
 754             d = document.createElement("div"),
 755             r = R._.paper.canvas = document.createElement("rvml:group"),
 756             cs = c.style, rs = r.style;
 757         R._.paper.width = width;
 758         R._.paper.height = height;
 759         width = width || "320px";
 760         height = height || "200px";
 761         cs.clip = "rect(0 " + width + " " + height + " 0)";
 762         cs.top = "-2px";
 763         cs.left = "-2px";
 764         cs.position = "absolute";
 765         rs.position = "absolute";
 766         d.style.position = "relative";
 767         rs.width  = width;
 768         rs.height = height;
 769         r.coordsize = (width == "100%" ? width : parseFloat(width)) + " " + (height == "100%" ? height : parseFloat(height));
 770         r.coordorigin = "0 0";
 771
 772         var b = document.createElement("rvml:rect"), bs = b.style;
 773         bs.left = bs.top = 0;
 774         bs.width  = rs.width;
 775         bs.height = rs.height;
 776         b.filled = b.stroked = "f";
 777
 778         r.appendChild(b);
 779         c.appendChild(r);
 780         d.appendChild(c);
 781         if (container == 1) {
 782             document.body.appendChild(d);
 783             cs.position = "absolute";
 784             cs.left = x + "px";
 785             cs.top = y + "px";
 786             cs.width = width;
 787             cs.height = height;
 788             container = {
 789                 style: {
 790                     width: width,
 791                     height: height
 792                 }
 793             };
 794         } else {
 795             cs.width = container.style.width = width;
 796             cs.height = container.style.height = height;
 797             if (container.firstChild) {
 798                 container.insertBefore(d, container.firstChild);
 799             } else {
 800                 container.appendChild(d);
 801             }
 802         }
 803         for (var prop in R._.paper) {
 804             container[prop] = R._.paper[prop];
 805         }
 806         container.clear = function () {
 807             var todel = [];
 808             for (var i = 0, ii = r.childNodes.length; i < ii; i++) {
 809                 if (r.childNodes[i] != b) {
 810                     todel.push(r.childNodes[i]);
 811                 }
 812             }
 813             for (i = 0, ii = todel.length; i < ii; i++) {
 814                 r.removeChild(todel[i]);
 815             }
 816         };
 817         return container;
 818     };
 819     R._.paper.remove = function () {
 820         this.canvas.parentNode.parentNode.parentNode.removeChild(this.canvas.parentNode.parentNode);
 821     };
 822     R._.paper.safari = function () {};
 823 })(window.Raphael);