0.7.2
[raphael] / raphael.js
index 654f6fa..6e56e0f 100644 (file)
@@ -1,5 +1,5 @@
 /*
- * Raphael 0.7.dev - JavaScript Vector Library
+ * Raphael 0.7.2 - 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.
@@ -14,15 +14,15 @@ var Raphael = (function () {
         R = function () {
             return create.apply(R, arguments);
         };
-    R.version = "0.7.dev";
+    R.version = "0.7.2";
     R.type = (win.SVGAngle ? "SVG" : "VML");
     R.svg = !(R.vml = R.type == "VML");
     R.idGenerator = 0;
     var paper = {};
     R.fn = {};
-    var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '16px "Arial"', "font-family": '"Arial"', "font-size": "16", gradient: 0, height: 0, opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, translation: "0 0", width: 0, x: 0, y: 0},
-        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"};
-
+    var availableAttrs = {cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", gradient: 0, height: 0, 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, 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"},
+        events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
     R.toString = function () {
         return  "Your browser " + (this.vml ? "doesn't ": "") + "support" + (this.svg ? "s": "") +
                 " SVG.\nYou are running " + unescape("Rapha%EBl%20") + this.version;
@@ -82,16 +82,11 @@ var Raphael = (function () {
             green = red.g;
             red = red.r;
         }
-        if (typeof red == "string" && red.charAt(0) == "#") {
-            if (red.length == 4) {
-                blue = parseInt(red.substring(3), 16);
-                green = parseInt(red.substring(2, 3), 16);
-                red = parseInt(red.substring(1, 2), 16);
-            } else {
-                blue = parseInt(red.substring(5), 16);
-                green = parseInt(red.substring(3, 5), 16);
-                red = parseInt(red.substring(1, 3), 16);
-            }
+        if (typeof red == "string") {
+            var clr = getRGB(red);
+            red = clr.r;
+            green = clr.g;
+            blue = clr.b;
         }
         if (red > 1 || green > 1 || blue > 1) {
             red /= 255;
@@ -218,9 +213,9 @@ var Raphael = (function () {
         if (pathString.toString.toString() == toString.toString()) {
             return pathString;
         }
-        pathString.replace(/([achlmqstvz])[\s,]*((-?\d*\.?\d*\s*,?\s*)+)/ig, function (a, b, c) {
+        pathString.replace(/([achlmqstvz])[\s,]*((-?\d*(?:e-?\d+|\.?\d*)\s*,?\s*)+)/ig, function (a, b, c) {
             var params = [], name = b.toLowerCase();
-            c.replace(/(-?\d*\.?\d*)\s*,?\s*/ig, function (a, b) {
+            c.replace(/(-?\d*(?:e-?\d+|\.?\d*))\s*,?\s*/ig, function (a, b) {
                 b && params.push(+b);
             });
             while (params.length >= paramCounts[name]) {
@@ -309,7 +304,7 @@ var Raphael = (function () {
             switch (res[i][0]) {
                 case "z":
                     break;
-                case "h": 
+                case "h":
                     x += res[i][res[i].length - 1];
                     break;
                 case "v":
@@ -328,7 +323,9 @@ var Raphael = (function () {
         if (typeof pathArray == "string") {
             pathArray = R.parsePathString(pathArray);
         }
-        var x = 0, y = 0, start = 0;
+        var x = 0,
+            y = 0,
+            start = 0;
         if (pathArray[0][0] == "M") {
             x = +pathArray[0][1];
             y = +pathArray[0][2];
@@ -337,8 +334,8 @@ var Raphael = (function () {
         }
         for (var i = start, ii = pathArray.length; i < ii; i++) {
             res[i] = [];
-            if (pathArray[i][0] != pathArray[i][0].toUpperCase()) {
-                res[i][0] = pathArray[i][0].toUpperCase();
+            if (pathArray[i][0] != (pathArray[i][0] + "").toUpperCase()) {
+                res[i][0] = (pathArray[i][0] + "").toUpperCase();
                 switch (res[i][0]) {
                     case "A":
                         res[i][1] = pathArray[i][1];
@@ -363,7 +360,7 @@ var Raphael = (function () {
             switch (res[i][0]) {
                 case "Z":
                     break;
-                case "H": 
+                case "H":
                     x = res[i][1];
                     break;
                 case "V":
@@ -472,7 +469,7 @@ var Raphael = (function () {
     };
     var toGradient = function (gradient) {
         if (typeof gradient == "string") {
-            gradient = gradient.split(/\s*\/\s*/);
+            gradient = gradient.split(/\s*\-\s*/);
             var angle = gradient.shift();
             if (angle.toLowerCase() == "v") {
                 angle = 90;
@@ -827,22 +824,16 @@ var Raphael = (function () {
                     case "stroke-dasharray":
                         addDashes(o, value);
                         break;
-                    // case "text":
-                    //     if (o.type == "text") {
-                    //         o.node.childNodes.length && o.node.removeChild(o.node.firstChild);
-                    //         o.node.appendChild(doc.createTextNode(value));
-                    //     }
-                    //     break;
                     case "rotation":
                         o.rotate(value, true);
                         break;
                     case "translation":
-                        var xy = value.split(separator);
-                        o.translate(xy[0], xy[1]);
+                        var xy = (value + "").split(separator);
+                        o.translate((+xy[0] + 1 || 2) - 1, (+xy[1] + 1 || 2) - 1);
                         break;
                     case "scale":
-                        var xy = value.split(separator);
-                        o.scale(xy[0], xy[1]);
+                        var xy = (value + "").split(separator);
+                        o.scale(+xy[0] || 1, +xy[1] || +xy[0] || 1);
                         break;
                     case "fill":
                         var isURL = value.match(/^url\(([^\)]+)\)$/i);
@@ -902,7 +893,7 @@ var Raphael = (function () {
                     case "opacity":
                     case "fill-opacity":
                         if (o.attrs.gradient) {
-                            var gradient = document.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
+                            var gradient = doc.getElementById(o.node.getAttribute("fill").replace(/^url\(#|\)$/g, ""));
                             if (gradient) {
                                 var stops = gradient.getElementsByTagName("stop");
                                 stops[stops.length - 1].setAttribute("stop-opacity", value);
@@ -921,6 +912,43 @@ var Raphael = (function () {
             }
             tuneText(o, params);
         };
+        var leading = 1.2;
+        var tuneText = function (element, params) {
+            if (element.type != "text" || !("text" in params || "font" in params || "font-size" in params || "x" in params)) {
+                return;
+            }
+            var fontSize = element.node.firstChild ? parseInt(doc.defaultView.getComputedStyle(element.node.firstChild, "").getPropertyValue("font-size"), 10) : 10;
+            var height = 0;
+
+            if ("text" in params) {
+                while (element.node.firstChild) {
+                    element.node.removeChild(element.node.firstChild);
+                }
+                var texts = (params.text + "").split("\n");
+                for (var i = 0, ii = texts.length; i < ii; i++) {
+                    var tspan = doc.createElementNS(element.svg.svgns, "tspan");
+                    i && tspan.setAttribute("dy", fontSize * leading);
+                    i && tspan.setAttribute("x", element.attrs.x);
+                    tspan.appendChild(doc.createTextNode(texts[i]));
+                    element.node.appendChild(tspan);
+                    height += fontSize * leading;
+                }
+            } else {
+                var texts = element.node.getElementsByTagName("tspan");
+                for (var i = 0, ii = texts.length; i < ii; i++) {
+                    i && texts[i].setAttribute("dy", fontSize * leading);
+                    i && texts[i].setAttribute("x", element.attrs.x);
+                    height += fontSize * leading;
+                }
+            }
+            height -= fontSize * (leading - 1);
+            var dif = height / 2 - fontSize;
+            if (dif) {
+                element.node.setAttribute("y", element.attrs.y - dif);
+            }
+            setTimeout(function () {
+            });
+        };
         var Element = function (node, svg) {
             var X = 0,
                 Y = 0;
@@ -937,31 +965,6 @@ var Raphael = (function () {
                 sy: 1
             };
         };
-        Element.prototype.translate = function (x, y) {
-            if (x == undefined && y == undefined) {
-                return {x: this._.tx, y: this._.ty};
-            }
-            this._.tx += +x;
-            this._.ty += +y;
-            switch (this.type) {
-                case "circle":
-                case "ellipse":
-                    this.attr({cx: this.attrs.cx + x, cy: this.attrs.cy + y});
-                    break;
-                case "rect":
-                case "image":
-                case "text":
-                    this.attr({x: this.attrs.x + +x, y: this.attrs.y + +y});
-                    break;
-                case "path":
-                    var path = pathToRelative(this.attrs.path);
-                    path[0][1] += +x;
-                    path[0][2] += +y;
-                    this.attr({path: path.join(" ")});
-                break;
-            }
-            return this;
-        };
         Element.prototype.rotate = function (deg, cx, cy) {
             if (deg == null) {
                 return this._.rt.deg;
@@ -1138,42 +1141,6 @@ var Raphael = (function () {
             res.type = "image";
             return res;
         };
-        var leading = 1.2;
-        var tuneText = function (element, params) {
-            if (element.type != "text") {
-                return;
-            }
-            var fontSize = element.node.firstChild ? parseInt(doc.defaultView.getComputedStyle(element.node.firstChild, "").getPropertyValue("font-size"), 10) : 10;
-            var height = 0;
-            
-            if ("text" in params) {
-                while (element.node.firstChild) {
-                    element.node.removeChild(element.node.firstChild);
-                }
-                var texts = (params.text + "").split("\n");
-                for (var i = 0, ii = texts.length; i < ii; i++) {
-                    var tspan = doc.createElementNS(element.svg.svgns, "tspan");
-                    i && tspan.setAttribute("dy", fontSize * leading);
-                    tspan.setAttribute("x", element.attrs.x);
-                    tspan.appendChild(doc.createTextNode(texts[i]));
-                    element.node.appendChild(tspan);
-                    height += fontSize * leading;
-                }
-            } else if ("font" in params || "font-size" in params) {
-                var texts = element.node.getElementsByTagName("tspan");
-                for (var i = 0, ii = texts.length; i < ii; i++) {
-                    i && texts[i].setAttribute("dy", fontSize * leading);
-                    height += fontSize * leading;
-                }
-            }
-            height -= fontSize * (leading - 1);
-            var dif = height / 2 - fontSize;
-            if (dif) {
-                element.node.setAttribute("y", element.attrs.y - dif);
-            }
-            setTimeout(function () {
-            });
-        };
         var theText = function (svg, x, y, text) {
             var el = doc.createElementNS(svg.svgns, "text");
             el.setAttribute("x", x);
@@ -1187,7 +1154,7 @@ var Raphael = (function () {
             res.attrs.x = x;
             res.attrs.y = y;
             res.type = "text";
-            setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000", text: text});
+            setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000", text: text});
             return res;
         };
         var theGroup = function (svg) {
@@ -1217,7 +1184,7 @@ var Raphael = (function () {
             this.canvas.setAttribute("height", this.height);
             return this;
         };
-        create = function () {
+        var create = function () {
             // container, width, height
             // x, y, width, height
             if (typeof arguments[0] == "string") {
@@ -1296,18 +1263,18 @@ var Raphael = (function () {
     // VML
     if (R.vml) {
         thePath = function (params, pathString, VML) {
-            var g = doc.createElement("rvml:group"), gl = g.style;
+            var g = createNode("group"), gl = g.style;
             gl.position = "absolute";
             gl.left = 0;
             gl.top = 0;
             gl.width = VML.width + "px";
             gl.height = VML.height + "px";
-            var el = doc.createElement("rvml:shape"), ol = el.style;
+            var el = createNode("shape"), ol = el.style;
             ol.width = VML.width + "px";
             ol.height = VML.height + "px";
             el.path = "";
             if (params["class"]) {
-                el.className = params["class"];
+                el.className = "rvml " + params["class"];
             }
             el.coordsize = this.coordsize;
             el.coordorigin = this.coordorigin;
@@ -1542,11 +1509,11 @@ var Raphael = (function () {
                 o.rotate(params.rotation, true);
             }
             if (params.translation) {
-                var xy = params.translation.split(separator);
+                var xy = (params.translation + "").split(separator);
                 o.translate(xy[0], xy[1]);
             }
             if (params.scale) {
-                var xy = params.scale.split(separator);
+                var xy = (params.scale + "").split(separator);
                 o.scale(xy[0], xy[1]);
             }
             if (o.type == "image" && params.src) {
@@ -1563,9 +1530,9 @@ var Raphael = (function () {
             params["font-style"] && (s.fontStyle = params["font-style"]);
             if (typeof params.opacity != "undefined" || typeof params["stroke-width"] != "undefined" || typeof params.fill != "undefined" || typeof params.stroke != "undefined" || params["stroke-width"] || params["stroke-opacity"] || params["stroke-dasharray"] || params["stroke-miterlimit"] || params["stroke-linejoin"] || params["stroke-linecap"]) {
                 o = o.shape || o.node;
-                var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || doc.createElement("rvml:fill");
+                var fill = (o.getElementsByTagName("fill") && o.getElementsByTagName("fill")[0]) || createNode("fill");
                 if ("fill-opacity" in params || "opacity" in params) {
-                    fill.opacity = ((params["fill-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
+                    fill.opacity = ((+params["fill-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
                 }
                 if (params.fill) {
                     fill.on = true;
@@ -1585,7 +1552,7 @@ var Raphael = (function () {
                     }
                 }
                 o.appendChild(fill);
-                var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || doc.createElement("rvml:stroke");
+                var stroke = (o.getElementsByTagName("stroke") && o.getElementsByTagName("stroke")[0]) || createNode("stroke");
                 if ((params.stroke && params.stroke != "none") || params["stroke-width"] || typeof params["stroke-opacity"] != "undefined" || params["stroke-dasharray"] || params["stroke-miterlimit"] || params["stroke-linejoin"] || params["stroke-linecap"]) {
                     stroke.on = true;
                 }
@@ -1595,7 +1562,7 @@ var Raphael = (function () {
                 if (stroke.on && params.stroke) {
                     stroke.color = getRGB(params.stroke).hex;
                 }
-                stroke.opacity = ((params["stroke-opacity"] + 1 || 2) - 1) * ((params.opacity + 1 || 2) - 1);
+                stroke.opacity = ((+params["stroke-opacity"] + 1 || 2) - 1) * ((+params.opacity + 1 || 2) - 1);
                 params["stroke-linejoin"] && (stroke.joinstyle = params["stroke-linejoin"] || "miter");
                 stroke.miterlimit = params["stroke-miterlimit"] || 8;
                 params["stroke-linecap"] && (stroke.endcap = {butt: "flat", square: "square", round: "round"}[params["stroke-linecap"]] || "miter");
@@ -1655,7 +1622,7 @@ var Raphael = (function () {
             if (fill.length) {
                 fill = fill[0];
             } else {
-                fill = doc.createElement("rvml:fill");
+                fill = createNode("fill");
             }
             if (gradient.dots.length) {
                 fill.on = true;
@@ -1746,7 +1713,7 @@ var Raphael = (function () {
             cy = cy || this._.rt.cy;
             var attr = this.attrs, x, y, w, h;
             switch (this.type) {
-                case "circle": 
+                case "circle":
                     x = attr.cx - attr.r;
                     y = attr.cy - attr.r;
                     w = h = attr.r * 2;
@@ -1828,22 +1795,6 @@ var Raphael = (function () {
             this.Group.style.display = "block";
             return this;
         };
-        Element.prototype.translate = function (x, y) {
-            if (x == undefined && y == undefined) {
-                return {x: this._.tx, y: this._.ty};
-            }
-            this._.tx += +x;
-            this._.ty += +y;
-            if (this.type == "path") {
-                var path = this.attrs.path;
-                path = pathToRelative(path);
-                path[0][1] += +x;
-                path[0][2] += +y;
-                this.attr({path: path.join(" ")});
-            }
-            this.setBox({x: this._.tx, y: this._.ty});
-            return this;
-        };
         Element.prototype.getBBox = function () {
             return {
                 x: this.X,
@@ -1917,8 +1868,8 @@ var Raphael = (function () {
             return this;
         };
         var theCircle = function (vml, x, y, r) {
-            var g = doc.createElement("rvml:group");
-            var o = doc.createElement("rvml:oval");
+            var g = createNode("group");
+            var o = createNode("oval");
             g.appendChild(o);
             vml.canvas.appendChild(g);
             var res = new Element(o, g, vml);
@@ -1931,8 +1882,8 @@ var Raphael = (function () {
             return res;
         };
         var theRect = function (vml, x, y, w, h, r) {
-            var g = doc.createElement("rvml:group");
-            var o = doc.createElement(r ? "rvml:roundrect" : "rvml:rect");
+            var g = createNode("group");
+            var o = createNode(r ? "roundrect" : "rect");
             if (r) {
                 o.arcsize = r / (Math.min(w, h));
             }
@@ -1950,8 +1901,8 @@ var Raphael = (function () {
             return res;
         };
         var theEllipse = function (vml, x, y, rx, ry) {
-            var g = doc.createElement("rvml:group");
-            var o = doc.createElement("rvml:oval");
+            var g = createNode("group");
+            var o = createNode("oval");
             g.appendChild(o);
             vml.canvas.appendChild(g);
             var res = new Element(o, g, vml);
@@ -1965,8 +1916,8 @@ var Raphael = (function () {
             return res;
         };
         var theImage = function (vml, src, x, y, w, h) {
-            var g = doc.createElement("rvml:group");
-            var o = doc.createElement("rvml:image");
+            var g = createNode("group");
+            var o = createNode("image");
             o.src = src;
             g.appendChild(o);
             vml.canvas.appendChild(g);
@@ -1980,9 +1931,9 @@ var Raphael = (function () {
             return res;
         };
         var theText = function (vml, x, y, text) {
-            var g = doc.createElement("rvml:group"), gs = g.style;
-            var el = doc.createElement("rvml:shape"), ol = el.style;
-            var path = doc.createElement("rvml:path"), ps = path.style;
+            var g = createNode("group"), gs = g.style;
+            var el = createNode("shape"), ol = el.style;
+            var path = createNode("path"), ps = path.style;
             path.v = ["m", Math.round(x), ", ", Math.round(y - 2), "l", Math.round(x) + 1, ", ", Math.round(y - 2)].join("");
             path.textpathok = true;
             ol.width = vml.width;
@@ -1992,7 +1943,7 @@ var Raphael = (function () {
             gs.top = 0;
             gs.width = vml.width;
             gs.height = vml.height;
-            var o = doc.createElement("rvml:textpath");
+            var o = createNode("textpath");
             o.string = text;
             o.on = true;
             o.coordsize = vml.coordsize;
@@ -2009,7 +1960,7 @@ var Raphael = (function () {
             res.attrs.y = y;
             res.attrs.w = 1;
             res.attrs.h = 1;
-            setFillAndStroke(res, {font: '10px "Arial"', stroke: "none", fill: "#000"});
+            setFillAndStroke(res, {font: availableAttrs.font, stroke: "none", fill: "#000"});
             return res;
         };
         var setSize = function (width, height) {
@@ -2021,7 +1972,20 @@ var Raphael = (function () {
             this.canvas.coordsize = this.width + " " + this.height;
             return this;
         };
-        create = function () {
+        doc.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
+        try {
+            if (!doc.namespaces.rvml) {
+                doc.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
+            }
+            var createNode = function (tagName) {
+                return doc.createElement('<rvml:' + tagName + ' class="rvml">');
+            };
+        } catch (e) {
+            var createNode = function (tagName) {
+                return doc.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
+            };
+        }
+        var create = function () {
             // container, width, height
             // x, y, width, height
             var container, width, height;
@@ -2045,19 +2009,15 @@ var Raphael = (function () {
             if (!container) {
                 throw new Error("VML container not found.");
             }
-            if (!doc.namespaces["rvml"]) {
-                doc.namespaces.add("rvml","urn:schemas-microsoft-com:vml");
-                doc.createStyleSheet().addRule("rvml\\:*", "behavior:url(#default#VML)");
-            }
             var c = doc.createElement("div"),
                 d = doc.createElement("div"),
-                r = paper.canvas = doc.createElement("rvml:group"),
+                r = paper.canvas = createNode("group"),
                 cs = c.style, rs = r.style;
             paper.width = width;
             paper.height = height;
             width = width || "320px";
             height = height || "200px";
-            cs.clip = "rect(0 " + width + " " + height + " 0)";
+            cs.clip = "rect(0 " + width + "px " + height + "px 0)";
             cs.top = "-2px";
             cs.left = "-2px";
             cs.position = "absolute";
@@ -2068,7 +2028,7 @@ var Raphael = (function () {
             r.coordsize = (/%$/.test(width) ? width : parseFloat(width, 10)) + " " + (/%$/.test(height) ? height : parseFloat(height, 10));
             r.coordorigin = "0 0";
 
-            var b = doc.createElement("rvml:rect"), bs = b.style;
+            var b = createNode("rect"), bs = b.style;
             bs.left = bs.top = 0;
             bs.width  = rs.width;
             bs.height = rs.height;
@@ -2132,25 +2092,63 @@ var Raphael = (function () {
     var addEvent = (function () {
         if (doc.addEventListener) {
             return function (obj, type, fn, element) {
-                obj.addEventListener(type, function (e) {
+                var f = function (e) {
                     return fn.call(element, e);
-                }, false);
+                };
+                obj.addEventListener(type, f, false);
+                return function () {
+                    obj.removeEventListener(type, f, false);
+                    return true;
+                };
             };
         } else if (doc.attachEvent) {
             return function (obj, type, fn, element) {
-                obj.attachEvent("on" + type, function (e) {
+                var f = function (e) {
                     return fn.call(element, e || win.event);
-                });
+                };
+                obj.attachEvent("on" + type, f);
+                var detacher = function () {
+                    obj.detachEvent("on" + type, f);
+                    return true;
+                };
+                if (type == "mouseover") {
+                    obj.attachEvent("onmouseenter", f);
+                    return function () {
+                        obj.detachEvent("onmouseenter", f);
+                        return detacher();
+                    };
+                } else if (type == "mouseout") {
+                    obj.attachEvent("onmouseleave", f);
+                    return function () {
+                        obj.detachEvent("onmouseleave", f);
+                        return detacher();
+                    };
+                }
+                return detacher;
             };
         }
     })();
-    var events = ["click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup"];
     for (var i = events.length; i--;) {
         (function (eventName) {
             Element.prototype[eventName] = function (fn) {
-                (typeof fn == "function") && addEvent(this.node, eventName, fn, this);
+                if (typeof fn == "function") {
+                    this.events = this.events || {};
+                    this.events[eventName] = this.events[eventName] || {};
+                    this.events[eventName][fn] = this.events[eventName][fn] || [];
+                    this.events[eventName][fn].push(addEvent(this.shape || this.node, eventName, fn, this));
+                }
                 return this;
             };
+            Element.prototype["un" + eventName] = function (fn) {
+                this.events &&
+                this.events[eventName] &&
+                this.events[eventName][fn] &&
+                this.events[eventName][fn].length &&
+                this.events[eventName][fn].shift()() &&
+                !this.events[eventName][fn].length &&
+                delete this.events[eventName][fn];
+            };
+
         })(events[i]);
     }
     paper.circle = function (x, y, r) {
@@ -2176,17 +2174,16 @@ var Raphael = (function () {
     };
     paper.drawGrid = function (x, y, w, h, wv, hv, color) {
         color = color || "#000";
-        var p = this.path({stroke: color, "stroke-width": 1})
-                .moveTo(x, y).lineTo(x + w, y).lineTo(x + w, y + h).lineTo(x, y + h).lineTo(x, y),
+        var path = ["M", x, y, "L", x + w, y, x + w, y + h, x, y + h, x, y],
             rowHeight = h / hv,
             columnWidth = w / wv;
         for (var i = 1; i < hv; i++) {
-            p.moveTo(x, y + i * rowHeight).lineTo(x + w, y + i * rowHeight);
+            path = path.concat(["M", x, y + i * rowHeight, "L", x + w, y + i * rowHeight]);
         }
         for (var i = 1; i < wv; i++) {
-            p.moveTo(x + i * columnWidth, y).lineTo(x + i * columnWidth, y + h);
+            path = path.concat(["M", x + i * columnWidth, y, "L", x + i * columnWidth, y + h]);
         }
-        return p;
+        return this.path({stroke: color, "stroke-width": 1}, path.join(","));
     };
     paper.pathfinder = function (p, path) {
         var commands = {
@@ -2240,6 +2237,8 @@ var Raphael = (function () {
             return {x: this._.sx, y: this._.sy};
         }
         y = y || x;
+        // following line is for IE, apparently NaN is not always falsy
+        isNaN(y) && (y = x);
         var dx, dy, cx, cy;
         if (x != 0) {
             var dirx = Math.round(x / Math.abs(x)),
@@ -2293,7 +2292,7 @@ var Raphael = (function () {
                     });
                     break;
                 case "path":
-                    var path = pathToRelative(Raphael.parsePathString(this.attr("path"))), 
+                    var path = pathToRelative(Raphael.parsePathString(this.attr("path"))),
                         skip = true,
                         dim = pathDimensions(this.attrs.path),
                         dx = -dim.width * (x - 1) / 2,
@@ -2319,7 +2318,7 @@ var Raphael = (function () {
                     path = pathToRelative(path);
                     path[0][1] += dx;
                     path[0][2] += dy;
-                    
+
                     this.attr({path: path.join(" ")});
             }
         }
@@ -2375,7 +2374,7 @@ var Raphael = (function () {
                             from[attr] = (from2[1] == values[1] && from2[2] == values[2]) ? from2 : [0, values[1], values[2]];
                             diff[attr] = [(values[0] - from[attr][0]) / ms, 0, 0];
                         } else {
-                            from[attr] = from[attr].split(separator);
+                            from[attr] = (from[attr] + "").split(separator);
                             diff[attr] = [(values[0] - from[attr][0]) / ms, (values[1] - from[attr][0]) / ms];
                         }
                         to[attr] = values;
@@ -2448,10 +2447,36 @@ var Raphael = (function () {
         })();
         return this;
     };
+    Element.prototype.translate = function (x, y) {
+        if (x == null) {
+            return {x: this._.tx, y: this._.ty};
+        }
+        this._.tx += +x;
+        this._.ty += +y;
+        switch (this.type) {
+            case "circle":
+            case "ellipse":
+                this.attr({cx: this.attrs.cx + x, cy: this.attrs.cy + y});
+                break;
+            case "rect":
+            case "image":
+            case "text":
+                this.attr({x: this.attrs.x + +x, y: this.attrs.y + +y});
+                break;
+            case "path":
+                var path = pathToRelative(this.attrs.path);
+                path[0][1] += +x;
+                path[0][2] += +y;
+                this.attr({path: path.join(" ")});
+            break;
+        }
+        return this;
+    };
 
     // Set
     var Set = function (itemsArray) {
         this.items = [];
+        this.length = (itemsArray && itemsArray.length) || 0;
         if (itemsArray && itemsArray.constructor == Array) {
             for (var i = itemsArray.length; i--;) {
                 if (itemsArray[i].constructor == Element) {
@@ -2465,6 +2490,7 @@ var Raphael = (function () {
             var len = this.items.length;
             this.items[len] = item;
             this[len] = item;
+            this.length++;
         }
         return this;
     };
@@ -2474,6 +2500,7 @@ var Raphael = (function () {
             this[j] = this[j + 1];
         }
         delete this[jj + 1];
+        this.length--;
         return res;
     };
     for (var method in Element.prototype) {