1.0 RC 1.5 Add limited support for radial gradients (only for circles and ellipses...
[raphael] / raphael.js
index 32c9091..637e170 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Raphael 1.0 RC1.2 - JavaScript Vector Library
+ * Raphael 1.0 RC1.5 - JavaScript Vector Library
  *
  * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -18,16 +18,23 @@ window.Raphael = (function () {
             return create.apply(R, arguments);
         },
         paper = {},
-        availableAttrs = {"clip-rect": "0 0 0 0", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
-        availableAnimAttrs = {cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
+        availableAttrs = {"clip-rect": "0 0 10e9 10e9", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
+        availableAnimAttrs = {"clip-rect": "csv", cx: "number", cy: "number", fill: "colour", "fill-opacity": "number", "font-size": "number", height: "number", opacity: "number", path: "path", r: "number", rotation: "csv", rx: "number", ry: "number", scale: "csv", stroke: "colour", "stroke-opacity": "number", "stroke-width": "number", translation: "csv", width: "number", x: "number", y: "number"},
         events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
-    R.version = "1.0 RC1.2";
+    R.version = "1.0 RC1.5";
     R.type = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
     R.svg = !(R.vml = R.type == "VML");
     R.idGenerator = 0;
     R.fn = {};
-    R.isArray = function (arr) {
-        return Object.prototype.toString.call(arr) == "[object Array]";
+    R.is = function (o, type) {
+        type = (type + "").toLowerCase();
+        if ((type == "object" || type == "undefined") && typeof o == type) {
+            return true;
+        }
+        if (o == null && type == "null") {
+            return true;
+        }
+        return Object.prototype.toString.call(o).replace(/^\[object\s+|\]$/gi, "").toLowerCase() == type;
     };
     R.setWindow = function (newwin) {
         win = newwin;
@@ -35,7 +42,7 @@ window.Raphael = (function () {
     };
     // colour utilities
     R.hsb2rgb = cacher(function (hue, saturation, brightness) {
-        if (typeof hue == "object" && "h" in hue && "s" in hue && "b" in hue) {
+        if (R.is(hue, "object") && "h" in hue && "s" in hue && "b" in hue) {
             brightness = hue.b;
             saturation = hue.s;
             hue = hue.h;
@@ -79,12 +86,12 @@ window.Raphael = (function () {
         return rgb;
     }, R);
     R.rgb2hsb = cacher(function (red, green, blue) {
-        if (typeof red == "object" && "r" in red && "g" in red && "b" in red) {
+        if (R.is(red, "object") && "r" in red && "g" in red && "b" in red) {
             blue = red.b;
             green = red.g;
             red = red.r;
         }
-        if (typeof red == "string") {
+        if (R.is(red, "string")) {
             var clr = R.getRGB(red);
             red = clr.r;
             green = clr.g;
@@ -157,7 +164,7 @@ window.Raphael = (function () {
         var htmlcolors = {aliceblue: "#f0f8ff", amethyst: "#96c", antiquewhite: "#faebd7", aqua: "#0ff", aquamarine: "#7fffd4", azure: "#f0ffff", beige: "#f5f5dc", bisque: "#ffe4c4", black: "#000", blanchedalmond: "#ffebcd", blue: "#00f", blueviolet: "#8a2be2", brown: "#a52a2a", burlywood: "#deb887", cadetblue: "#5f9ea0", chartreuse: "#7fff00", chocolate: "#d2691e", coral: "#ff7f50", cornflowerblue: "#6495ed", cornsilk: "#fff8dc", crimson: "#dc143c", cyan: "#0ff", darkblue: "#00008b", darkcyan: "#008b8b", darkgoldenrod: "#b8860b", darkgray: "#a9a9a9", darkgreen: "#006400", darkkhaki: "#bdb76b", darkmagenta: "#8b008b", darkolivegreen: "#556b2f", darkorange: "#ff8c00", darkorchid: "#9932cc", darkred: "#8b0000", darksalmon: "#e9967a", darkseagreen: "#8fbc8f", darkslateblue: "#483d8b", darkslategray: "#2f4f4f", darkturquoise: "#00ced1", darkviolet: "#9400d3", deeppink: "#ff1493", deepskyblue: "#00bfff", dimgray: "#696969", dodgerblue: "#1e90ff", firebrick: "#b22222", floralwhite: "#fffaf0", forestgreen: "#228b22", fuchsia: "#f0f", gainsboro: "#dcdcdc", ghostwhite: "#f8f8ff", gold: "#ffd700", goldenrod: "#daa520", gray: "#808080", green: "#008000", greenyellow: "#adff2f", honeydew: "#f0fff0", hotpink: "#ff69b4", indianred: "#cd5c5c", indigo: "#4b0082", ivory: "#fffff0", khaki: "#f0e68c", lavender: "#e6e6fa", lavenderblush: "#fff0f5", lawngreen: "#7cfc00", lemonchiffon: "#fffacd", lightblue: "#add8e6", lightcoral: "#f08080", lightcyan: "#e0ffff", lightgoldenrodyellow: "#fafad2", lightgreen: "#90ee90", lightgrey: "#d3d3d3", lightpink: "#ffb6c1", lightsalmon: "#ffa07a", lightsalmon: "#ffa07a", lightseagreen: "#20b2aa", lightskyblue: "#87cefa", lightslategray: "#789", lightsteelblue: "#b0c4de", lightyellow: "#ffffe0", lime: "#0f0", limegreen: "#32cd32", linen: "#faf0e6", magenta: "#f0f", maroon: "#800000", mediumaquamarine: "#66cdaa", mediumblue: "#0000cd", mediumorchid: "#ba55d3", mediumpurple: "#9370db", mediumseagreen: "#3cb371", mediumslateblue: "#7b68ee", mediumslateblue: "#7b68ee", mediumspringgreen: "#00fa9a", mediumturquoise: "#48d1cc", mediumvioletred: "#c71585", midnightblue: "#191970", mintcream: "#f5fffa", mistyrose: "#ffe4e1", moccasin: "#ffe4b5", navajowhite: "#ffdead", navy: "#000080", oldlace: "#fdf5e6", olive: "#808000", olivedrab: "#6b8e23", orange: "#ffa500", orangered: "#ff4500", orchid: "#da70d6", palegoldenrod: "#eee8aa", palegreen: "#98fb98", paleturquoise: "#afeeee", palevioletred: "#db7093", papayawhip: "#ffefd5", peachpuff: "#ffdab9", peru: "#cd853f", pink: "#ffc0cb", plum: "#dda0dd", powderblue: "#b0e0e6", purple: "#800080", red: "#f00", rosybrown: "#bc8f8f", royalblue: "#4169e1", saddlebrown: "#8b4513", salmon: "#fa8072", sandybrown: "#f4a460", seagreen: "#2e8b57", seashell: "#fff5ee", sienna: "#a0522d", silver: "#c0c0c0", skyblue: "#87ceeb", slateblue: "#6a5acd", slategray: "#708090", snow: "#fffafa", springgreen: "#00ff7f", steelblue: "#4682b4", tan: "#d2b48c", teal: "#008080", thistle: "#d8bfd8", tomato: "#ff6347", turquoise: "#40e0d0", violet: "#ee82ee", wheat: "#f5deb3", white: "#fff", whitesmoke: "#f5f5f5", yellow: "#ff0", yellowgreen: "#9acd32"},
         res;
         if ((colour + "").toLowerCase() in htmlcolors) {
-            colour = htmlcolors[colour.toString().toLowerCase()];
+            colour = htmlcolors[(colour + "").toLowerCase()];
         }
         if (!colour) {
             return {r: 0, g: 0, b: 0, hex: "#000"};
@@ -206,8 +213,8 @@ window.Raphael = (function () {
                 blue = parseFloat(rgb[2]) * 2.55;
                 return R.hsb2rgb(red, green, blue);
             }
-            var rgb = {r: red, g: green, b: blue},
-                r = Math.round(red).toString(16),
+            rgb = {r: red, g: green, b: blue};
+            var r = Math.round(red).toString(16),
                 g = Math.round(green).toString(16),
                 b = Math.round(blue).toString(16);
             (r.length == 1) && (r = "0" + r);
@@ -216,7 +223,7 @@ window.Raphael = (function () {
             rgb.hex = "#" + r + g + b;
             res = rgb;
         } else {
-            res = {r: -1, g: -1, b: -1, hex: "none"};
+            res = {r: -1, g: -1, b: -1, hex: "none", error: 1};
         }
         return res;
     }, R);
@@ -243,7 +250,7 @@ window.Raphael = (function () {
         }
         var paramCounts = {a: 7, c: 6, h: 1, l: 2, m: 2, q: 4, s: 4, t: 2, v: 1, z: 0},
             data = [];
-        if (R.isArray(pathString) && R.isArray(pathString[0])) { // rough assumption
+        if (R.is(pathString, "array") && R.is(pathString[0], "array")) { // rough assumption
             data = pathClone(pathString);
         }
         if (!data.length) {
@@ -296,7 +303,7 @@ window.Raphael = (function () {
     }),
         pathClone = function (pathArray) {
             var res = [];
-            if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
+            if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
                 pathArray = R.parsePathString(pathArray);
             }
             for (var i = 0, ii = pathArray.length; i < ii; i++) {
@@ -309,7 +316,7 @@ window.Raphael = (function () {
             return res;
         },
         pathToRelative = cacher(function (pathArray) {
-            if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
+            if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
                 pathArray = R.parsePathString(pathArray);
             }
             var res = [],
@@ -383,7 +390,7 @@ window.Raphael = (function () {
             return res;
         }, 0, pathClone),
         pathToAbsolute = cacher(function (pathArray) {
-            if (!R.isArray(pathArray) || !R.isArray(pathArray && pathArray[0])) { // rough assumption
+            if (!R.is(pathArray, "array") || !R.is(pathArray && pathArray[0], "array")) { // rough assumption
                 pathArray = R.parsePathString(pathArray);
             }
             var res = [],
@@ -457,11 +464,13 @@ window.Raphael = (function () {
             return [x1, y1, x2, y2, x2, y2];
         },
         q2c = function (x1, y1, ax, ay, x2, y2) {
+            var _13 = 1 / 3,
+                _23 = 2 / 3;
             return [
-                    2 / 3 * x1 + 1 / 3 * ax,
-                    2 / 3 * y1 + 1 / 3 * ay,
-                    2 / 3 * x1 + 1 / 3 * x2,
-                    2 / 3 * y1 + 1 / 3 * y2,
+                    _13 * x1 + _23 * ax,
+                    _13 * y1 + _23 * ay,
+                    _13 * x2 + _23 * ax,
+                    _13 * y2 + _23 * ay,
                     x2,
                     y2
                 ];
@@ -526,11 +535,11 @@ window.Raphael = (function () {
                 y2 = cy + ry * Math.sin(f2);
                 res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [f2, f2old, cx, cy]);
             }
+            df = f2 - f1;
             var c1 = Math.cos(f1),
                 s1 = Math.sin(f1),
                 c2 = Math.cos(f2),
                 s2 = Math.sin(f2),
-                df = f2 - f1,
                 t = Math.tan(df / 4),
                 hx = 4 / 3 * rx * t,
                 hy = 4 / 3 * ry * t,
@@ -593,31 +602,35 @@ window.Raphael = (function () {
         path2curve = cacher(function (path, path2) {
             var p = pathToAbsolute(path),
                 p2 = path2 && pathToAbsolute(path2),
-                attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0},
-                attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0},
+                attrs = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
+                attrs2 = {x: 0, y: 0, bx: 0, by: 0, X: 0, Y: 0, qx: null, qy: null},
                 processPath = function (path, d) {
+                    var nx, ny;
                     if (!path) {
                         return ["C", d.x, d.y, d.x, d.y, d.x, d.y];
                     }
+                    !(path[0] in {T:1, Q:1}) && (d.qx = d.qy = null);
                     switch (path[0]) {
                         case "M":
                             d.X = path[1];
                             d.Y = path[2];
                             break;
                         case "A":
-                            path = ["C"].concat(a2c(d.x, d.y, path[1], path[2], path[3], path[4], path[5], path[6], path[7]));
+                            path = ["C"].concat(a2c.apply(0, [d.x, d.y].concat(path.slice(1))));
                             break;
                         case "S":
-                            var nx = d.x + (d.x - (d.bx || d.x)),
-                                ny = d.y + (d.y - (d.by || d.y));
-                            path = ["C", nx, ny, path[1], path[2], path[3], path[4]];
+                            nx = d.x + (d.x - (d.bx || d.x));
+                            ny = d.y + (d.y - (d.by || d.y));
+                            path = ["C", nx, ny].concat(path.slice(1));
                             break;
                         case "T":
-                            var nx = d.x + (d.x - (d.bx || d.x)),
-                                ny = d.y + (d.y - (d.by || d.y));
-                            path = ["C"].concat(q2c(d.x, d.y, nx, ny, path[1], path[2]));
+                            d.qx = d.x + (d.x - (d.qx || d.x));
+                            d.qy = d.y + (d.y - (d.qy || d.y));
+                            path = ["C"].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
                             break;
                         case "Q":
+                            d.qx = path[1];
+                            d.qy = path[2];
                             path = ["C"].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
                             break;
                         case "L":
@@ -667,78 +680,53 @@ window.Raphael = (function () {
                     seg2 = p2 && p2[i],
                     seglen = seg.length,
                     seg2len = p2 && seg2.length;
-                attrs.bx = seg[seglen - 4] || 0;
-                attrs.by = seg[seglen - 3] || 0;
                 attrs.x = seg[seglen - 2];
                 attrs.y = seg[seglen - 1];
-                attrs2.bx = p2 && (seg2[seg2len - 4] || 0);
-                attrs2.by = p2 && (seg2[seg2len - 3] || 0);
+                attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
+                attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
+                attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
+                attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
                 attrs2.x = p2 && seg2[seg2len - 2];
                 attrs2.y = p2 && seg2[seg2len - 1];
             }
             return p2 ? [p, p2] : p;
         }, null, pathClone),
-        toGradient = cacher(function (gradient) {
-            if (typeof gradient == "string") {
-                gradient = gradient.split(/\s*\-\s*/);
-                var angle = gradient.shift();
-                if (angle.toLowerCase() == "v") {
-                    angle = 90;
-                } else if (angle.toLowerCase() == "h") {
-                    angle = 0;
-                } else {
-                    angle = parseFloat(angle);
-                }
-                angle = -angle;
-                var grobj = {angle: angle, type: "linear", dots: [], vector: [0, 0, Math.cos(angle * Math.PI / 180).toFixed(3), Math.sin(angle * Math.PI / 180).toFixed(3)]},
-                    max = 1 / (Math.max(Math.abs(grobj.vector[2]), Math.abs(grobj.vector[3])) || 1);
-                grobj.vector[2] *= max;
-                grobj.vector[3] *= max;
-                if (grobj.vector[2] < 0) {
-                    grobj.vector[0] = -grobj.vector[2];
-                    grobj.vector[2] = 0;
-                }
-                if (grobj.vector[3] < 0) {
-                    grobj.vector[1] = -grobj.vector[3];
-                    grobj.vector[3] = 0;
-                }
-                grobj.vector[0] = grobj.vector[0];
-                grobj.vector[1] = grobj.vector[1];
-                grobj.vector[2] = grobj.vector[2];
-                grobj.vector[3] = grobj.vector[3];
-                for (var i = 0, ii = gradient.length; i < ii; i++) {
-                    var dot = {},
-                        par = gradient[i].match(/^([^:]*):?([\d\.]*)/);
-                    dot.color = R.getRGB(par[1]).hex;
-                    par[2] && (dot.offset = par[2] + "%");
-                    grobj.dots.push(dot);
-                }
-                for (var i = 1, ii = grobj.dots.length - 1; i < ii; i++) {
-                    if (!grobj.dots[i].offset) {
-                        var start = parseFloat(grobj.dots[i - 1].offset || 0),
-                            end = false;
-                        for (var j = i + 1; j < ii; j++) {
-                            if (grobj.dots[j].offset) {
-                                end = grobj.dots[j].offset;
-                                break;
-                            }
-                        }
-                        if (!end) {
-                            end = 100;
-                            j = ii;
-                        }
-                        end = parseFloat(end);
-                        var d = (end - start) / (j - i + 1);
-                        for (; i < j; i++) {
-                            start += d;
-                            grobj.dots[i].offset = start + "%";
+        parseDots = cacher(function (gradient) {
+            var dots = [];
+            for (var i = 0, ii = gradient.length; i < ii; i++) {
+                var dot = {},
+                    par = gradient[i].match(/^([^:]*):?([\d\.]*)/);
+                dot.color = R.getRGB(par[1]);
+                if (dot.color.error) {
+                    return null;
+                }
+                dot.color = dot.color.hex;
+                par[2] && (dot.offset = par[2] + "%");
+                dots.push(dot);
+            }
+            for (var i = 1, ii = dots.length - 1; i < ii; i++) {
+                if (!dots[i].offset) {
+                    var start = parseFloat(dots[i - 1].offset || 0),
+                        end = false;
+                    for (var j = i + 1; j < ii; j++) {
+                        if (dots[j].offset) {
+                            end = dots[j].offset;
+                            break;
                         }
                     }
+                    if (!end) {
+                        end = 100;
+                        j = ii;
+                    }
+                    end = parseFloat(end);
+                    var d = (end - start) / (j - i + 1);
+                    for (; i < j; i++) {
+                        start += d;
+                        dots[i].offset = start + "%";
+                    }
                 }
-                return grobj;
-            } else {
-                return gradient;
             }
+            return dots;
         }),
         getContainer = function () {
             var container,
@@ -746,8 +734,8 @@ window.Raphael = (function () {
                 y,
                 width,
                 height;
-            if (typeof arguments[0] == "string" || typeof arguments[0] == "object") {
-                if (typeof arguments[0] == "string") {
+            if (R.is(arguments[0], "string") || R.is(arguments[0], "object")) {
+                if (R.is(arguments[0], "string")) {
                     container = doc.getElementById(arguments[0]);
                 } else {
                     container = arguments[0];
@@ -763,7 +751,7 @@ window.Raphael = (function () {
                         return {container: container, width: arguments[1], height: arguments[2]};
                     }
                 }
-            } else if (typeof arguments[0] == "number" && arguments.length > 3) {
+            } else if (R.is(arguments[0], "number") && arguments.length > 3) {
                 return {container: 1, x: arguments[0], y: arguments[1], width: arguments[2], height: arguments[3]};
             }
         },
@@ -789,6 +777,8 @@ window.Raphael = (function () {
 
     // SVG
     if (R.svg) {
+        paper.svgns = "http://www.w3.org/2000/svg";
+        paper.xlink = "http://www.w3.org/1999/xlink";
         var round = function (num) {
             return +num + (Math.floor(num) == num) * .5;
         };
@@ -806,15 +796,19 @@ window.Raphael = (function () {
             return path;
         };
         var $ = function (el, attr) {
-            for (var key in attr) if (attr.hasOwnProperty(key)) {
-                el.setAttribute(key, attr[key]);
+            if (attr) {
+                for (var key in attr) if (attr.hasOwnProperty(key)) {
+                    el.setAttribute(key, attr[key]);
+                }
+            } else {
+                return doc.createElementNS(paper.svgns, el);
             }
         };
         R.toString = function () {
             return  "Your browser supports SVG.\nYou are running Rapha\u00ebl " + this.version;
         };
         var thePath = function (pathString, SVG) {
-            var el = doc.createElementNS(SVG.svgns, "path");
+            var el = $("path");
             SVG.canvas && SVG.canvas.appendChild(el);
             var p = new Element(el, SVG);
             p.type = "path";
@@ -822,42 +816,65 @@ window.Raphael = (function () {
             return p;
         };
         var addGradientFill = function (o, gradient, SVG) {
-            gradient = toGradient(gradient);
-            var el = doc.createElementNS(SVG.svgns, (gradient.type || "linear") + "Gradient");
-            el.id = "r" + (R.idGenerator++).toString(36);
-            if (gradient.vector && gradient.vector.length) {
-                $(el, {
-                    x1: gradient.vector[0],
-                    y1: gradient.vector[1],
-                    x2: gradient.vector[2],
-                    y2: gradient.vector[3]
-                });
+            var type = "linear",
+                fx = .5, fy = .5,
+                s = o.style;
+            gradient = (gradient + "").replace(/^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/, function (all, _fx, _fy) {
+                type = "radial";
+                if (_fx && _fy) {
+                    fx = parseFloat(_fx);
+                    fy = parseFloat(_fy);
+                    if (Math.pow(fx - .5, 2) + Math.pow(fy - .5, 2) > .25) {
+                        fy = Math.sqrt(.25 - Math.pow(fx - .5, 2)) + .5;
+                    }
+                }
+                return "";
+            });
+            gradient = gradient.split(/\s*\-\s*/);
+            if (type == "linear") {
+                var angle = gradient.shift();
+                angle = -parseFloat(angle);
+                if (isNaN(angle)) {
+                    return null;
+                }
+                var vector = [0, 0, Math.cos(angle * Math.PI / 180), Math.sin(angle * Math.PI / 180)],
+                    max = 1 / (Math.max(Math.abs(vector[2]), Math.abs(vector[3])) || 1);
+                vector[2] *= max;
+                vector[3] *= max;
+                if (vector[2] < 0) {
+                    vector[0] = -vector[2];
+                    vector[2] = 0;
+                }
+                if (vector[3] < 0) {
+                    vector[1] = -vector[3];
+                    vector[3] = 0;
+                }
             }
+            var dots = parseDots(gradient);
+            if (!dots) {
+                return null;
+            }
+            var el = $(type + "Gradient");
+            el.id = "r" + (R.idGenerator++).toString(36);
+            type == "radial" ? $(el, {fx: fx, fy: fy}) : $(el, {x1: vector[0], y1: vector[1], x2: vector[2], y2: vector[3]});
             SVG.defs.appendChild(el);
-            var isopacity = true;
-            for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
-                var stop = doc.createElementNS(SVG.svgns, "stop");
-                if (gradient.dots[i].offset) {
-                    isopacity = false;
-                }
+            for (var i = 0, ii = dots.length; i < ii; i++) {
+                var stop = $("stop");
                 $(stop, {
-                    offset: gradient.dots[i].offset ? gradient.dots[i].offset : (i == 0) ? "0%" : "100%",
-                    "stop-color": R.getRGB(gradient.dots[i].color).hex || "#fff"
+                    offset: dots[i].offset ? dots[i].offset : !i ? "0%" : "100%",
+                    "stop-color": dots[i].color || "#fff"
                 });
-                // ignoring opacity for internal points, because VML doesn't support it
                 el.appendChild(stop);
             };
-            if (isopacity && typeof gradient.dots[ii - 1].opacity != "undefined") {
-                $(stop, {"stop-opacity": gradient.dots[ii - 1].opacity});
-            }
             $(o, {
                 fill: "url(#" + el.id + ")",
                 opacity: 1,
                 "fill-opacity": 1
             });
-            o.style.fill = "";
-            o.style.opacity = 1;
-            o.style.fillOpacity = 1;
+            s.fill = "";
+            s.opacity = 1;
+            s.fillOpacity = 1;
+            return 1;
         };
         var updatePosition = function (o) {
             var bbox = o.getBBox();
@@ -887,15 +904,15 @@ window.Raphael = (function () {
                         var width = o.attrs["stroke-width"] || "1",
                             butt = {round: width, square: width, butt: 0}[o.attrs["stroke-linecap"] || params["stroke-linecap"]] || 0,
                             dashes = [];
-                        for (var i = 0, ii = value.length; i < ii; i++) {
-                            dashes.push(value[i] * width + ((i % 2) ? 1 : -1) * butt);
+                        var i = value.length;
+                        while (i--) {
+                            dashes[i] = value[i] * width + ((i % 2) ? 1 : -1) * butt;
                         }
-                        value = dashes.join(",");
-                        node.setAttribute("stroke-dasharray", value);
+                        $(node, {"stroke-dasharray": dashes.join(",")});
                     }
                 };
-            parseInt(rot, 10) && o.rotate(0, true);
-            for (var att in params) {
+            parseFloat(rot) && o.rotate(0, true);
+            for (var att in params) if (params.hasOwnProperty(att)) {
                 if (!(att in availableAttrs)) {
                     continue;
                 }
@@ -908,7 +925,7 @@ window.Raphael = (function () {
                     case "target":
                         var pn = node.parentNode;
                         if (pn.tagName.toLowerCase() != "a") {
-                            var hl = doc.createElementNS(o.paper.svgns, "a");
+                            var hl = $("a");
                             pn.insertBefore(hl, node);
                             hl.appendChild(node);
                             pn = hl;
@@ -916,11 +933,11 @@ window.Raphael = (function () {
                         pn.setAttributeNS(o.paper.xlink, att, value);
                       break;
                     case "clip-rect":
-                        var rect = value.split(separator);
+                        var rect = (value + "").split(separator);
                         if (rect.length == 4) {
-                            o.clip && o.clip.parentNode.parentNode.removeChild(clip.parentNode);
-                            var el = doc.createElementNS(o.paper.svgns, "clipPath"),
-                                rc = doc.createElementNS(o.paper.svgns, "rect");
+                            o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);
+                            var el = $("clipPath"),
+                                rc = $("rect");
                             el.id = "r" + (R.idGenerator++).toString(36);
                             $(rc, {
                                 x: rect[0],
@@ -945,6 +962,7 @@ window.Raphael = (function () {
                             attrs.path = roundPath(pathToAbsolute(value));
                             $(node, {d: attrs.path});
                         }
+                        break;
                     case "width":
                         node.setAttribute(att, value);
                         if (attrs.fx) {
@@ -958,6 +976,9 @@ window.Raphael = (function () {
                             value = -attrs.x - (attrs.width || 0);
                         }
                     case "rx":
+                        if (att == "rx" && o.type == "rect") {
+                            break;
+                        }
                     case "cx":
                         node.setAttribute(att, value);
                         o.pattern && updatePosition(o);
@@ -975,6 +996,9 @@ window.Raphael = (function () {
                             value = -attrs.y - (attrs.height || 0);
                         }
                     case "ry":
+                        if (att == "ry" && o.type == "rect") {
+                            break;
+                        }
                     case "cy":
                         node.setAttribute(att, value);
                         o.pattern && updatePosition(o);
@@ -1017,8 +1041,8 @@ window.Raphael = (function () {
                     case "fill":
                         var isURL = (value + "").match(/^url\(['"]?([^\)]+)['"]?\)$/i);
                         if (isURL) {
-                            var el = doc.createElementNS(o.paper.svgns, "pattern"),
-                                ig = doc.createElementNS(o.paper.svgns, "image");
+                            var el = $("pattern"),
+                                ig = $("image");
                             el.id = "r" + (R.idGenerator++).toString(36);
                             $(el, {x: 0, y: 0, patternUnits: "userSpaceOnUse"});
                             $(ig, {x: 0, y:0});
@@ -1044,17 +1068,23 @@ window.Raphael = (function () {
                             o.pattern && updatePosition(o);
                             break;
                         }
-                        delete params.gradient;
-                        delete attrs.gradient;
-                        if (typeof attrs.opacity != "undefined" && typeof params.opacity == "undefined" ) {
-                            node.style.opacity = attrs.opacity;
-                            // Need following line for Firefox
-                            $(node, {opacity: attrs.opacity});
-                        }
-                        if (typeof attrs["fill-opacity"] != "undefined" && typeof params["fill-opacity"] == "undefined" ) {
-                            node.style.fillOpacity = attrs["fill-opacity"];
-                            // Need following line for Firefox
-                            $(node, {"fill-opacity": attrs["fill-opacity"]});
+                        if (!R.getRGB(value).error) {
+                            delete params.gradient;
+                            delete attrs.gradient;
+                            if (!R.is(attrs.opacity, "undefined") && R.is(params.opacity, "undefined") ) {
+                                node.style.opacity = attrs.opacity;
+                                // Need following line for Firefox
+                                $(node, {opacity: attrs.opacity});
+                            }
+                            if (!R.is(attrs["fill-opacity"], "undefined") && R.is(params["fill-opacity"], "undefined") ) {
+                                node.style.fillOpacity = attrs["fill-opacity"];
+                                // Need following line for Firefox
+                                $(node, {"fill-opacity": attrs["fill-opacity"]});
+                            }
+                        } else if ((o.type in {circle: 1, ellipse: 1} || (value + "").charAt(0) != "r") && addGradientFill(node, value, o.paper)) {
+                            attrs.gradient = value;
+                            attrs.fill = "none";
+                            break;
                         }
                     case "stroke":
                         node.style[att] = R.getRGB(value).hex;
@@ -1062,7 +1092,7 @@ window.Raphael = (function () {
                         node.setAttribute(att, R.getRGB(value).hex);
                         break;
                     case "gradient":
-                        addGradientFill(node, value, o.paper);
+                        (o.type in {circle: 1, ellipse: 1} || (value + "").charAt(0) != "r") && addGradientFill(node, value, o.paper);
                         break;
                     case "opacity":
                     case "fill-opacity":
@@ -1104,7 +1134,7 @@ window.Raphael = (function () {
                 }
                 var texts = (params.text + "").split("\n");
                 for (var i = 0, ii = texts.length; i < ii; i++) {
-                    var tspan = doc.createElementNS(el.paper.svgns, "tspan");
+                    var tspan = $("tspan");
                     i && $(tspan, {dy: fontSize * leading, x: a.x});
                     tspan.appendChild(doc.createTextNode(texts[i]));
                     node.appendChild(tspan);
@@ -1125,6 +1155,7 @@ window.Raphael = (function () {
                 Y = 0;
             this[0] = node;
             this.node = node;
+            node.raphael = this;
             this.paper = svg;
             this.attrs = this.attrs || {};
             this.transformations = []; // rotate, translate, scale
@@ -1209,7 +1240,7 @@ window.Raphael = (function () {
             return bbox;
         };
         Element.prototype.attr = function () {
-            if (arguments.length == 1 && typeof arguments[0] == "string") {
+            if (arguments.length == 1 && R.is(arguments[0], "string")) {
                 if (arguments[0] == "translation") {
                     return this.translate();
                 }
@@ -1221,9 +1252,9 @@ window.Raphael = (function () {
                 }
                 return this.attrs[arguments[0]];
             }
-            if (arguments.length == 1 && R.isArray(arguments[0])) {
+            if (arguments.length == 1 && R.is(arguments[0], "array")) {
                 var values = {};
-                for (var j in arguments[0]) {
+                for (var j in arguments[0]) if (arguments[0].hasOwnProperty(j)) {
                     values[arguments[0][j]] = this.attrs[arguments[0][j]];
                 }
                 return values;
@@ -1232,7 +1263,7 @@ window.Raphael = (function () {
                 var params = {};
                 params[arguments[0]] = arguments[1];
                 setFillAndStroke(this, params);
-            } else if (arguments.length == 1 && typeof arguments[0] == "object") {
+            } else if (arguments.length == 1 && R.is(arguments[0], "object")) {
                 setFillAndStroke(this, arguments[0]);
             }
             return this;
@@ -1260,10 +1291,11 @@ window.Raphael = (function () {
             node.parentNode.insertBefore(this.node, node);
             return this;
         };
+        
         var theCircle = function (svg, x, y, r) {
             x = round(x);
             y = round(y);
-            var el = doc.createElementNS(svg.svgns, "circle");
+            var el = $("circle");
             svg.canvas && svg.canvas.appendChild(el);
             var res = new Element(el, svg);
             res.attrs = {cx: x, cy: y, r: r, fill: "none", stroke: "#000"};
@@ -1274,7 +1306,7 @@ window.Raphael = (function () {
         var theRect = function (svg, x, y, w, h, r) {
             x = round(x);
             y = round(y);
-            var el = doc.createElementNS(svg.svgns, "rect");
+            var el = $("rect");
             svg.canvas && svg.canvas.appendChild(el);
             var res = new Element(el, svg);
             res.attrs = {x: x, y: y, width: w, height: h, r: r || 0, rx: r || 0, ry: r || 0, fill: "none", stroke: "#000"};
@@ -1285,7 +1317,7 @@ window.Raphael = (function () {
         var theEllipse = function (svg, x, y, rx, ry) {
             x = round(x);
             y = round(y);
-            var el = doc.createElementNS(svg.svgns, "ellipse");
+            var el = $("ellipse");
             svg.canvas && svg.canvas.appendChild(el);
             var res = new Element(el, svg);
             res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: "none", stroke: "#000"};
@@ -1294,7 +1326,7 @@ window.Raphael = (function () {
             return res;
         };
         var theImage = function (svg, src, x, y, w, h) {
-            var el = doc.createElementNS(svg.svgns, "image");
+            var el = $("image");
             $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: "none"});
             el.setAttributeNS(svg.xlink, "href", src);
             svg.canvas && svg.canvas.appendChild(el);
@@ -1304,7 +1336,7 @@ window.Raphael = (function () {
             return res;
         };
         var theText = function (svg, x, y, text) {
-            var el = doc.createElementNS(svg.svgns, "text");
+            var el = $("text");
             $(el, {x: x, y: y, "text-anchor": "middle"});
             svg.canvas && svg.canvas.appendChild(el);
             var res = new Element(el, svg);
@@ -1322,7 +1354,7 @@ window.Raphael = (function () {
         };
         var create = function () {
             var con = getContainer.apply(null, arguments),
-                container = con.container,
+                container = con && con.container,
                 x = con.x,
                 y = con.y,
                 width = con.width,
@@ -1330,34 +1362,39 @@ window.Raphael = (function () {
             if (!container) {
                 throw new Error("SVG container not found.");
             }
-            paper.canvas = doc.createElementNS(paper.svgns, "svg");
-            paper.canvas.setAttribute("width", width || 512);
+            paper.canvas = $("svg");
+            var cnvs = paper.canvas,
+                stl = cnvs.style;
+            cnvs.setAttribute("width", width || 512);
             paper.width = width || 512;
-            paper.canvas.setAttribute("height", height || 342);
+            cnvs.setAttribute("height", height || 342);
             paper.height = height || 342;
             if (container == 1) {
-                doc.body.appendChild(paper.canvas);
-                paper.canvas.style.position = "absolute";
-                paper.canvas.style.left = x + "px";
-                paper.canvas.style.top = y + "px";
+                doc.body.appendChild(cnvs);
+                stl.position = "absolute";
+                stl.left = x + "px";
+                stl.top = y + "px";
             } else {
                 if (container.firstChild) {
-                    container.insertBefore(paper.canvas, container.firstChild);
+                    container.insertBefore(cnvs, container.firstChild);
                 } else {
-                    container.appendChild(paper.canvas);
+                    container.appendChild(cnvs);
                 }
             }
             container = {
-                canvas: paper.canvas,
+                canvas: cnvs,
                 clear: function () {
                     while (this.canvas.firstChild) {
                         this.canvas.removeChild(this.canvas.firstChild);
                     }
-                    this.defs = doc.createElementNS(paper.svgns, "defs");
+                    this.desc = $("desc");
+                    this.defs = $("defs");
+                    this.desc.appendChild(doc.createTextNode("Created with Rapha\u00ebl"));
+                    this.canvas.appendChild(this.desc);
                     this.canvas.appendChild(this.defs);
                 }
             };
-            for (var prop in paper) {
+            for (var prop in paper) if (paper.hasOwnProperty(prop)) {
                 if (prop != "create") {
                     container[prop] = paper[prop];
                 }
@@ -1370,14 +1407,6 @@ window.Raphael = (function () {
         paper.remove = function () {
             this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);
         };
-        paper.svgns = "http://www.w3.org/2000/svg";
-        paper.xlink = "http://www.w3.org/1999/xlink";
-        paper.safari = function () {
-            if ({"Apple Computer, Inc.": 1, "Google Inc.": 1}[navigator.vendor]) {
-                var rect = this.rect(-this.width, -this.height, this.width * 3, this.height * 3).attr({stroke: "none"});
-                setTimeout(function () {rect.remove();});
-            }
-        };
     }
 
     // VML
@@ -1416,7 +1445,6 @@ window.Raphael = (function () {
             p.isAbsolute = true;
             p.type = "path";
             p.path = [];
-            // p.last = {x: 0, y: 0, bx: 0, by: 0, isAbsolute: true};
             p.Path = "";
             if (pathString) {
                 p.attrs.path = R.parsePathString(pathString);
@@ -1434,7 +1462,7 @@ window.Raphael = (function () {
                 s = node.style,
                 xy,
                 res = o;
-            for (var par in params) {
+            for (var par in params) if (params.hasOwnProperty(par)) {
                 a[par] = params[par];
             }
             params.href && (node.href = params.href);
@@ -1458,12 +1486,12 @@ window.Raphael = (function () {
             if ("clip-rect" in params) {
                 var rect = (params["clip-rect"] + "").split(separator);
                 if (rect.length == 4) {
-                    rect[2] += rect[0];
-                    rect[3] += rect[1];
+                    rect[2] = +rect[2] + (+rect[0]);
+                    rect[3] = +rect[3] + (+rect[1]);
                     var div = node.clipRect || doc.createElement("div"),
                         dstyle = div.style,
                         group = node.parentNode;
-                    dstyle.clip = R.format("rect({0}px {2}px {3}px {1}px)", rect);
+                    dstyle.clip = R.format("rect({1}px {2}px {3}px {0}px)", rect);
                     if (!node.clipRect) {
                         dstyle.position = "absolute";
                         dstyle.top = 0;
@@ -1525,6 +1553,10 @@ window.Raphael = (function () {
                         fill.color = R.getRGB(params.fill).hex;
                         fill.src = "";
                         fill.type = "solid";
+                        if (R.getRGB(params.fill).error && (res.type in {circle: 1, ellipse: 1} || (params.fill + "").charAt(0) != "r") && addGradientFill(res, params.fill)) {
+                            a.fill = "none";
+                            a.gradient = params.fill;
+                        }
                     }
                 }
                 newfill && node.appendChild(fill);
@@ -1574,7 +1606,7 @@ window.Raphael = (function () {
                 a["font-size"] && (s.fontSize = a["font-size"]);
                 a["font-weight"] && (s.fontWeight = a["font-weight"]);
                 a["font-style"] && (s.fontStyle = a["font-style"]);
-                paper.span.innerHTML = res.node.string.replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>");
+                res.node.string && (paper.span.innerHTML = res.node.string.replace(/</g, "&#60;").replace(/&/g, "&#38;").replace(/\n/g, "<br>"));
                 res.W = a.w = paper.span.offsetWidth;
                 res.H = a.h = paper.span.offsetHeight;
                 res.X = a.x;
@@ -1596,63 +1628,63 @@ window.Raphael = (function () {
                 }
             }
         };
-        var getAngle = function (a, b, c, d) {
-            var angle = Math.round(Math.atan((parseFloat(c) - parseFloat(a)) / (parseFloat(d) - parseFloat(b))) * 57.29) || 0;
-            if (!angle && parseFloat(a) < parseFloat(b)) {
-                angle = 180;
-            }
-            angle -= 180;
-            if (angle < 0) {
-                angle += 360;
-            }
-            return angle;
-        };
         var addGradientFill = function (o, gradient) {
-            gradient = toGradient(gradient);
             o.attrs = o.attrs || {};
             var attrs = o.attrs,
-                fill = o.node.getElementsByTagName("fill");
+                fill = o.node.getElementsByTagName("fill"),
+                type = "linear",
+                fxfy = ".5 .5";
             o.attrs.gradient = gradient;
-            o = o.shape || o.node;
-            if (fill.length) {
-                fill = fill[0];
-            } else {
-                fill = createNode("fill");
+            gradient = (gradient + "").replace(/^r(?:\(([^,]+?)\s*,\s*([^\)]+?)\))?/, function (all, fx, fy) {
+                type = "radial";
+                if (fx && fy) {
+                    fx = parseFloat(fx);
+                    fy = parseFloat(fy);
+                    if (Math.pow(fx - .5, 2) + Math.pow(fy - .5, 2) > .25) {
+                        fy = Math.sqrt(.25 - Math.pow(fx - .5, 2)) + .5;
+                    }
+                    fxfy = fx + " " + fy;
+                }
+                return "";
+            });
+            gradient = gradient.split(/\s*\-\s*/);
+            if (type == "linear") {
+                var angle = gradient.shift();
+                angle = -parseFloat(angle);
+                if (isNaN(angle)) {
+                    return null;
+                }
             }
-            if (gradient.dots.length) {
+            var dots = parseDots(gradient);
+            if (!dots) {
+                return null;
+            }
+            o = o.shape || o.node;
+            fill = fill[0] || createNode("fill");
+            if (dots.length) {
                 fill.on = true;
                 fill.method = "none";
-                fill.type = ((gradient.type + "").toLowerCase() == "radial") ? "gradientTitle" : "gradient";
-                if (typeof gradient.dots[0].color != "undefined") {
-                    fill.color = R.getRGB(gradient.dots[0].color).hex;
-                }
-                if (typeof gradient.dots[gradient.dots.length - 1].color != "undefined") {
-                    fill.color2 = R.getRGB(gradient.dots[gradient.dots.length - 1].color).hex;
-                }
+                fill.type = (type == "radial") ? "gradientradial" : "gradient";
+                fill.color = dots[0].color;
+                fill.color2 = dots[dots.length - 1].color;
                 var clrs = [];
-                for (var i = 0, ii = gradient.dots.length; i < ii; i++) {
-                    if (gradient.dots[i].offset) {
-                        clrs.push(gradient.dots[i].offset + " " + R.getRGB(gradient.dots[i].color).hex);
-                    }
-                };
-                var fillOpacity = typeof gradient.dots[gradient.dots.length - 1].opacity == "undefined" ? (typeof attrs.opacity == "undefined" ? 1 : attrs.opacity) : gradient.dots[gradient.dots.length - 1].opacity;
+                for (var i = 0, ii = dots.length; i < ii; i++) {
+                    dots[i].offset && clrs.push(dots[i].offset + " " + dots[i].color);
+                }
                 if (clrs.length) {
                     fill.colors.value = clrs.join(",");
-                    fillOpacity = typeof attrs.opacity == "undefined" ? 1 : attrs.opacity;
                 } else {
                     fill.colors && (fill.colors.value = "0% " + fill.color);
                 }
-                fill.opacity = fillOpacity;
-                if (typeof gradient.angle != "undefined") {
-                    fill.angle = (-gradient.angle + 270) % 360;
-                } else if (gradient.vector) {
-                    fill.angle = getAngle.apply(null, gradient.vector);
-                }
-                if ((gradient.type + "").toLowerCase() == "radial") {
+                if (type == "radial") {
                     fill.focus = "100%";
-                    fill.focusposition = "0.5 0.5";
+                    fill.focussize = fxfy;
+                    fill.focusposition = fxfy;
+                } else {
+                    fill.angle = (270 - angle) % 360;
                 }
             }
+            return 1;
         };
         var Element = function (node, group, vml) {
             var Rotation = 0,
@@ -1661,6 +1693,7 @@ window.Raphael = (function () {
                 Scale = 1;
             this[0] = node;
             this.node = node;
+            node.raphael = this;
             this.X = 0;
             this.Y = 0;
             this.attrs = {};
@@ -1692,7 +1725,7 @@ window.Raphael = (function () {
             } else {
                 this._.rt.deg += deg;
             }
-            (cy == null) && (cx = null);
+            cy == null && (cx = null);
             this._.rt.cx = cx;
             this._.rt.cy = cy;
             this.setBox(this.attrs, cx, cy);
@@ -1701,14 +1734,14 @@ window.Raphael = (function () {
             // var fill = (this.shape || this.node).getElementsByTagName("fill");
             // fill = fill[0] || {};
             // var b = ((360 - this._.rt.deg) - 270) % 360;
-            // typeof fill.angle != "undefined" && (fill.angle = b);
+            // !R.is(fill.angle, "undefined") && (fill.angle = b);
             return this;
         };
         Element.prototype.setBox = function (params, cx, cy) {
             var gs = this.Group.style,
                 os = (this.shape && this.shape.style) || this.node.style;
             params = params || {};
-            for (var i in params) {
+            for (var i in params) if (params.hasOwnProperty(i)) {
                 this.attrs[i] = params[i];
             }
             cx = cx || this._.rt.cx;
@@ -1830,7 +1863,7 @@ window.Raphael = (function () {
             this.shape && this.shape.parentNode.removeChild(this.shape);
         };
         Element.prototype.attr = function () {
-            if (arguments.length == 1 && typeof arguments[0] == "string") {
+            if (arguments.length == 1 && R.is(arguments[0], "string")) {
                 if (arguments[0] == "translation") {
                     return this.translate();
                 }
@@ -1842,7 +1875,7 @@ window.Raphael = (function () {
                 }
                 return this.attrs[arguments[0]];
             }
-            if (this.attrs && arguments.length == 1 && R.isArray(arguments[0])) {
+            if (this.attrs && arguments.length == 1 && R.is(arguments[0], "array")) {
                 var values = {};
                 for (var i = 0, ii = arguments[0].length; i < ii; i++) {
                     values[arguments[0][i]] = this.attrs[arguments[0][i]];
@@ -1854,11 +1887,11 @@ window.Raphael = (function () {
                 params = {};
                 params[arguments[0]] = arguments[1];
             }
-            if (arguments.length == 1 && typeof arguments[0] == "object") {
+            if (arguments.length == 1 && R.is(arguments[0], "object")) {
                 params = arguments[0];
             }
             if (params) {
-                if (params.gradient) {
+                if (params.gradient && (this.type in {circle: 1, ellipse: 1} || (params.gradient + "").charAt(0) != "r")) {
                     addGradientFill(this, params.gradient);
                 }
                 if (params.text && this.type == "text") {
@@ -1891,6 +1924,7 @@ window.Raphael = (function () {
             element.Group.parentNode.insertBefore(this.Group, element.Group);
             return this;
         };
+        
         var theCircle = function (vml, x, y, r) {
             var g = createNode("group"),
                 gl = g.style,
@@ -2030,12 +2064,12 @@ window.Raphael = (function () {
         };
         var setSize = function (width, height) {
             var cs = this.canvas.style;
-            this.width = width || this.width;
-            this.height = height || this.height;
+            this.width = parseFloat(width || this.width);
+            this.height = parseFloat(height || this.height);
             cs.width = this.width + "px";
             cs.height = this.height + "px";
             cs.clip = "rect(0 " + this.width + "px " + this.height + "px 0)";
-            this.canvas.coordsize = this.width + " " + this.height;
+            this.coordsize = this.width + " " + this.height;
             return this;
         };
         doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
@@ -2062,8 +2096,8 @@ window.Raphael = (function () {
             }
             var c = paper.canvas = doc.createElement("div"),
                 cs = c.style;
-            width = parseFloat(width) || "512px";
-            height = parseFloat(height) || "342px";
+            width = parseFloat(width) || 512;
+            height = parseFloat(height) || 342;
             paper.width = width;
             paper.height = height;
             paper.coordsize = width + " " + height;
@@ -2101,7 +2135,7 @@ window.Raphael = (function () {
                     container.appendChild(c);
                 }
             }
-            for (var prop in paper) {
+            for (var prop in paper) if (paper.hasOwnProperty(prop)) {
                 container[prop] = paper[prop];
             }
             plugins.call(container, container, R.fn);
@@ -2116,10 +2150,18 @@ window.Raphael = (function () {
         paper.remove = function () {
             this.canvas.parentNode.removeChild(this.canvas);
         };
-        paper.safari = function () {};
     }
 
     // rest
+    // Safari or Chrome (WebKit)
+    if ({"Apple Computer, Inc.": 1, "Google Inc.": 1}[navigator.vendor]) {
+        paper.safari = function () {
+            var rect = this.rect(-99, -99, this.width + 99, this.height + 99);
+            setTimeout(function () {rect.remove();});
+        };
+    } else {
+        paper.safari = function () {};
+    }
 
     // Events
     var addEvent = (function () {
@@ -2164,7 +2206,7 @@ window.Raphael = (function () {
     for (var i = events.length; i--;) {
         (function (eventName) {
             Element.prototype[eventName] = function (fn) {
-                if (typeof fn == "function") {
+                if (R.is(fn, "function")) {
                     this.events = this.events || {};
                     this.events[eventName] = this.events[eventName] || {};
                     this.events[eventName][fn] = this.events[eventName][fn] || [];
@@ -2194,6 +2236,7 @@ window.Raphael = (function () {
         return theEllipse(this, x, y, rx, ry);
     };
     paper.path = function (pathString) {
+        pathString && !R.is(pathString, "string") && !R.is(pathString[0], "array") && (pathString += "");
         return thePath(R.format.apply(R, arguments), this);
     };
     paper.image = function (src, x, y, w, h) {
@@ -2213,7 +2256,7 @@ window.Raphael = (function () {
     };
     Element.prototype.scale = function (x, y, cx, cy) {
         if (x == null && y == null) {
-            return {x: this._.sx, y: this._.sy, toString: function () { return +this.x.toFixed(3) + " " + (+this.y.toFixed(3)); }};
+            return {x: this._.sx, y: this._.sy, toString: function () { return this.x + " " + this.y; }};
         }
         y = y || x;
         !+y && (y = x);
@@ -2240,13 +2283,15 @@ window.Raphael = (function () {
                 case "image":
                     var neww = a.width * dirx * kx,
                         newh = a.height * diry * ky,
+                        newr = a.r * Math.min(kx, ky),
                         newx = ncx - neww / 2,
                         newy = ncy - newh / 2;
                     this.attr({
                         width: neww,
                         height: newh,
                         x: newx,
-                        y: newy
+                        y: newy,
+                        r: newr
                     });
                     break;
                 case "circle":
@@ -2254,7 +2299,7 @@ window.Raphael = (function () {
                     this.attr({
                         rx: a.rx * kx,
                         ry: a.ry * ky,
-                        r: a.r * kx,
+                        r: a.r * Math.min(kx, ky),
                         cx: ncx,
                         cy: ncy
                     });
@@ -2284,11 +2329,10 @@ window.Raphael = (function () {
                     var dim2 = pathDimensions(path),
                         dx = ncx - dim2.x - dim2.width / 2,
                         dy = ncy - dim2.y - dim2.height / 2;
-                    path = pathToRelative(path);
                     path[0][1] += dx;
                     path[0][2] += dy;
-                    
-                    this.attr({path: path.join(" ")});
+
+                    this.attr({path: path});
                 break;
             }
             if (this.type in {text: 1, image:1} && (dirx != 1 || diry != 1)) {
@@ -2386,17 +2430,17 @@ window.Raphael = (function () {
 
     Element.prototype.animate = function (params, ms, easing, callback) {
         clearTimeout(this.animation_in_progress);
-        if (typeof easing == "function" || !easing) {
+        if (R.is(easing, "function") || !easing) {
             callback = easing || null;
         }
         var from = {},
             to = {},
             diff = {},
             t = {x: 0, y: 0};
-        for (var attr in params) {
+        for (var attr in params) if (params.hasOwnProperty(attr)) {
             if (attr in availableAnimAttrs) {
                 from[attr] = this.attr(attr);
-                (typeof from[attr] == "undefined") && (from[attr] = availableAttrs[attr]);
+                (from[attr] == null) && (from[attr] = availableAttrs[attr]);
                 to[attr] = params[attr];
                 switch (availableAnimAttrs[attr]) {
                     case "number":
@@ -2439,6 +2483,15 @@ window.Raphael = (function () {
                                 params[attr] = values;
                                 from[attr] = (from[attr] + "").split(separator);
                                 diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][1]) / ms, 0, 0];
+                            break;
+                            case "clip-rect":
+                                from[attr] = (from[attr] + "").split(separator);
+                                diff[attr] = [];
+                                var i = 4;
+                                while (i--) {
+                                    diff[attr][i] = (values[i] - from[attr][i]) / ms;
+                                }
+                            break;
                         }
                         to[attr] = values;
                 }
@@ -2456,7 +2509,7 @@ window.Raphael = (function () {
                 now;
             if (time < ms) {
                 var pos = R.easing_formulas[easing] ? R.easing_formulas[easing](time / ms) : time / ms;
-                for (var attr in from) {
+                for (var attr in from) if (from.hasOwnProperty(attr)) {
                     switch (availableAnimAttrs[attr]) {
                         case "number":
                             now = +from[attr] + pos * ms * diff[attr];
@@ -2494,6 +2547,14 @@ window.Raphael = (function () {
                                 break;
                                 case "scale":
                                     now = [+from[attr][0] + pos * ms * diff[attr][0], +from[attr][1] + pos * ms * diff[attr][1], (2 in params[attr] ? params[attr][2] : ""), (3 in params[attr] ? params[attr][3] : "")].join(" ");
+                                break;
+                                case "clip-rect":
+                                    now = [];
+                                    var i = 4;
+                                    while (i--) {
+                                        now[i] = +from[attr][i] + pos * ms * diff[attr][i];
+                                    }
+                                break;
                             }
                             break;
                     }
@@ -2507,7 +2568,7 @@ window.Raphael = (function () {
                 that.attr(params);
                 clearTimeout(that.animation_in_progress);
                 R.svg && paper.safari();
-                (typeof callback == "function") && callback.call(that);
+                (R.is(callback, "function")) && callback.call(that);
             }
             prev = time;
         })();
@@ -2538,6 +2599,10 @@ window.Raphael = (function () {
         }
         return this;
     };
+    Element.prototype.toString = function () {
+        return "Rapha\u00ebl\u2019s object";
+    };
+    
 
     // Set
     var Set = function (items) {
@@ -2569,7 +2634,7 @@ window.Raphael = (function () {
         delete this[this.length--];
         return this.items.pop();
     };
-    for (var method in Element.prototype) {
+    for (var method in Element.prototype) if (Element.prototype.hasOwnProperty(method)) {
         Set.prototype[method] = (function (methodname) {
             return function () {
                 for (var i = 0, ii = this.items.length; i < ii; i++) {
@@ -2580,7 +2645,7 @@ window.Raphael = (function () {
         })(method);
     }
     Set.prototype.attr = function (name, value) {
-        if (name && R.isArray(name) && typeof name[0] == "object") {
+        if (name && R.is(name, "array") && R.is(name[0], "object")) {
             for (var j = 0, jj = name.length; j < jj; j++) {
                 this.items[j].attr(name[j]);
             }
@@ -2625,7 +2690,7 @@ window.Raphael = (function () {
                 glyphs: {}
             },
             family = font.face["font-family"];
-        for (var prop in font.face) {
+        for (var prop in font.face) if (font.face.hasOwnProperty(prop)) {
             fontcopy.face[prop] = font.face[prop];
         }
         if (this.fonts[family]) {
@@ -2635,7 +2700,7 @@ window.Raphael = (function () {
         }
         if (!font.svg) {
             fontcopy.face["units-per-em"] = parseInt(font.face["units-per-em"], 10);
-            for (var glyph in font.glyphs) {
+            for (var glyph in font.glyphs) if (font.glyphs.hasOwnProperty(glyph)) {
                 var path = font.glyphs[glyph];
                 fontcopy.glyphs[glyph] = {
                     w: path.w,
@@ -2645,7 +2710,7 @@ window.Raphael = (function () {
                         }) + "z"
                 };
                 if (path.k) {
-                    for (var k in path.k) {
+                    for (var k in path.k) if (path.hasOwnProperty(k)) {
                         fontcopy.glyphs[glyph].k[k] = path.k[k];
                     }
                 }
@@ -2660,7 +2725,7 @@ window.Raphael = (function () {
         var font = R.fonts[family];
         if (!font) {
             var name = new RegExp("(^|\\s)" + family.replace(/[^\w\d\s+!~.:_-]/g, "") + "(\\s|$)", "i");
-            for (var fontName in R.fonts) {
+            for (var fontName in R.fonts) if (R.fonts.hasOwnProperty(fontName)) {
                 if (name.test(fontName)) {
                     font = R.fonts[fontName];
                     break;
@@ -2684,7 +2749,7 @@ window.Raphael = (function () {
             shift = 0,
             path = "",
             scale;
-        typeof font == "string" && (font = this.getFont(font));
+        R.is(font, "string") && (font = this.getFont(font));
         if (font) {
             scale = (size || 16) / font.face["units-per-em"];
             for (var i = 0, ii = letters.length; i < ii; i++) {
@@ -2699,21 +2764,21 @@ window.Raphael = (function () {
     };
 
     R.format = function (token) {
-        var args = R.isArray(arguments[1]) ? [0].concat(arguments[1]) : arguments;
-        token && typeof token == "string" && args.length - 1 && (token = token.replace(/\{(\d+)\}/g, function (str, i) {
-            return args[++i] || "";
+        var args = R.is(arguments[1], "array") ? [0].concat(arguments[1]) : arguments;
+        token && R.is(token, "string") && args.length - 1 && (token = token.replace(/\{(\d+)\}/g, function (str, i) {
+            return args[++i] == null ? "" : args[i];
         }));
         return token;
     };
     R.ninja = function () {
-        var r = window.Raphael;
+        var r = window.Raphael, u;
         if (oldRaphael.was) {
             window.Raphael = oldRaphael.is;
         } else {
             try {
                 delete window.Raphael;
             } catch (e) {
-                window.Raphael = void(0);
+                window.Raphael = u;
             }
         }
         return r;