` event, where id is id of the element (see @Element.id).\n > Parameters\n - f (function) handler for event, first argument would be the element you are dragging over\n \\*/\n elproto.onDragOver = function (f) {\n f ? eve.on(\"raphael.drag.over.\" + this.id, f) : eve.unbind(\"raphael.drag.over.\" + this.id);\n };\n /*\\\n * Element.undrag\n [ method ]\n **\n * Removes all drag event handlers from given element.\n \\*/\n elproto.undrag = function () {\n var i = draggable.length;\n while (i--) if (draggable[i].el == this) {\n this.unmousedown(draggable[i].start);\n draggable.splice(i, 1);\n eve.unbind(\"raphael.drag.*.\" + this.id);\n }\n !draggable.length && R.unmousemove(dragMove).unmouseup(dragUp);\n drag = [];\n };\n /*\\\n * Paper.circle\n [ method ]\n **\n * Draws a circle.\n **\n > Parameters\n **\n - x (number) x coordinate of the centre\n - y (number) y coordinate of the centre\n - r (number) radius\n = (object) Raphaël element object with type “circle”\n **\n > Usage\n | var c = paper.circle(50, 50, 40);\n \\*/\n paperproto.circle = function (x, y, r) {\n var out = R._engine.circle(this, x || 0, y || 0, r || 0);\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.rect\n [ method ]\n *\n * Draws a rectangle.\n **\n > Parameters\n **\n - x (number) x coordinate of the top left corner\n - y (number) y coordinate of the top left corner\n - width (number) width\n - height (number) height\n - r (number) #optional radius for rounded corners, default is 0\n = (object) Raphaël element object with type “rect”\n **\n > Usage\n | // regular rectangle\n | var c = paper.rect(10, 10, 50, 50);\n | // rectangle with rounded corners\n | var c = paper.rect(40, 40, 50, 50, 10);\n \\*/\n paperproto.rect = function (x, y, w, h, r) {\n var out = R._engine.rect(this, x || 0, y || 0, w || 0, h || 0, r || 0);\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.ellipse\n [ method ]\n **\n * Draws an ellipse.\n **\n > Parameters\n **\n - x (number) x coordinate of the centre\n - y (number) y coordinate of the centre\n - rx (number) horizontal radius\n - ry (number) vertical radius\n = (object) Raphaël element object with type “ellipse”\n **\n > Usage\n | var c = paper.ellipse(50, 50, 40, 20);\n \\*/\n paperproto.ellipse = function (x, y, rx, ry) {\n var out = R._engine.ellipse(this, x || 0, y || 0, rx || 0, ry || 0);\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.path\n [ method ]\n **\n * Creates a path element by given path data string.\n > Parameters\n - pathString (string) #optional path string in SVG format.\n * Path string consists of one-letter commands, followed by comma seprarated arguments in numercal form. Example:\n | \"M10,20L30,40\"\n * Here we can see two commands: “M”, with arguments `(10, 20)` and “L” with arguments `(30, 40)`. Upper case letter mean command is absolute, lower case—relative.\n *\n # Here is short list of commands available, for more details see SVG path string format.
\n # | Command | Name | Parameters |
|---|
\n # | M | moveto | (x y)+ |
\n # | Z | closepath | (none) |
\n # | L | lineto | (x y)+ |
\n # | H | horizontal lineto | x+ |
\n # | V | vertical lineto | y+ |
\n # | C | curveto | (x1 y1 x2 y2 x y)+ |
\n # | S | smooth curveto | (x2 y2 x y)+ |
\n # | Q | quadratic Bézier curveto | (x1 y1 x y)+ |
\n # | T | smooth quadratic Bézier curveto | (x y)+ |
\n # | A | elliptical arc | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
\n # | R | Catmull-Rom curveto* | x1 y1 (x y)+ |
\n * * “Catmull-Rom curveto” is a not standard SVG command and added in 2.0 to make life easier.\n * Note: there is a special case when path consist of just three commands: “M10,10R…z”. In this case path will smoothly connects to its beginning.\n > Usage\n | var c = paper.path(\"M10 10L90 90\");\n | // draw a diagonal line:\n | // move to 10,10, line to 90,90\n * For example of path strings, check out these icons: http://raphaeljs.com/icons/\n \\*/\n paperproto.path = function (pathString) {\n pathString && !R.is(pathString, string) && !R.is(pathString[0], array) && (pathString += E);\n var out = R._engine.path(R.format[apply](R, arguments), this);\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.image\n [ method ]\n **\n * Embeds an image into the surface.\n **\n > Parameters\n **\n - src (string) URI of the source image\n - x (number) x coordinate position\n - y (number) y coordinate position\n - width (number) width of the image\n - height (number) height of the image\n = (object) Raphaël element object with type “image”\n **\n > Usage\n | var c = paper.image(\"apple.png\", 10, 10, 80, 80);\n \\*/\n paperproto.image = function (src, x, y, w, h) {\n var out = R._engine.image(this, src || \"about:blank\", x || 0, y || 0, w || 0, h || 0);\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.text\n [ method ]\n **\n * Draws a text string. If you need line breaks, put “\\n” in the string.\n **\n > Parameters\n **\n - x (number) x coordinate position\n - y (number) y coordinate position\n - text (string) The text string to draw\n = (object) Raphaël element object with type “text”\n **\n > Usage\n | var t = paper.text(50, 50, \"Raphaël\\nkicks\\nbutt!\");\n \\*/\n paperproto.text = function (x, y, text) {\n var out = R._engine.text(this, x || 0, y || 0, Str(text));\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Paper.set\n [ method ]\n **\n * Creates array-like object to keep and operate several elements at once.\n * Warning: it doesn’t create any elements for itself in the page, it just groups existing elements.\n * Sets act as pseudo elements — all methods available to an element can be used on a set.\n = (object) array-like object that represents set of elements\n **\n > Usage\n | var st = paper.set();\n | st.push(\n | paper.circle(10, 10, 5),\n | paper.circle(30, 10, 5)\n | );\n | st.attr({fill: \"red\"}); // changes the fill of both circles\n \\*/\n paperproto.set = function (itemsArray) {\n !R.is(itemsArray, \"array\") && (itemsArray = Array.prototype.splice.call(arguments, 0, arguments.length));\n var out = new Set(itemsArray);\n this.__set__ && this.__set__.push(out);\n out[\"paper\"] = this;\n out[\"type\"] = \"set\";\n return out;\n };\n /*\\\n * Paper.setStart\n [ method ]\n **\n * Creates @Paper.set. All elements that will be created after calling this method and before calling\n * @Paper.setFinish will be added to the set.\n **\n > Usage\n | paper.setStart();\n | paper.circle(10, 10, 5),\n | paper.circle(30, 10, 5)\n | var st = paper.setFinish();\n | st.attr({fill: \"red\"}); // changes the fill of both circles\n \\*/\n paperproto.setStart = function (set) {\n this.__set__ = set || this.set();\n };\n /*\\\n * Paper.setFinish\n [ method ]\n **\n * See @Paper.setStart. This method finishes catching and returns resulting set.\n **\n = (object) set\n \\*/\n paperproto.setFinish = function (set) {\n var out = this.__set__;\n delete this.__set__;\n return out;\n };\n /*\\\n * Paper.getSize\n [ method ]\n **\n * Obtains current paper actual size.\n **\n = (object)\n \\*/\n paperproto.getSize = function () {\n var container = this.canvas.parentNode;\n return {\n width: container.offsetWidth,\n height: container.offsetHeight\n };\n };\n /*\\\n * Paper.setSize\n [ method ]\n **\n * If you need to change dimensions of the canvas call this method\n **\n > Parameters\n **\n - width (number) new width of the canvas\n - height (number) new height of the canvas\n \\*/\n paperproto.setSize = function (width, height) {\n return R._engine.setSize.call(this, width, height);\n };\n /*\\\n * Paper.setViewBox\n [ method ]\n **\n * Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by\n * specifying new boundaries.\n **\n > Parameters\n **\n - x (number) new x position, default is `0`\n - y (number) new y position, default is `0`\n - w (number) new width of the canvas\n - h (number) new height of the canvas\n - fit (boolean) `true` if you want graphics to fit into new boundary box\n \\*/\n paperproto.setViewBox = function (x, y, w, h, fit) {\n return R._engine.setViewBox.call(this, x, y, w, h, fit);\n };\n /*\\\n * Paper.top\n [ property ]\n **\n * Points to the topmost element on the paper\n \\*/\n /*\\\n * Paper.bottom\n [ property ]\n **\n * Points to the bottom element on the paper\n \\*/\n paperproto.top = paperproto.bottom = null;\n /*\\\n * Paper.raphael\n [ property ]\n **\n * Points to the @Raphael object/function\n \\*/\n paperproto.raphael = R;\n var getOffset = function (elem) {\n var box = elem.getBoundingClientRect(),\n doc = elem.ownerDocument,\n body = doc.body,\n docElem = doc.documentElement,\n clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0,\n top = box.top + (g.win.pageYOffset || docElem.scrollTop || body.scrollTop ) - clientTop,\n left = box.left + (g.win.pageXOffset || docElem.scrollLeft || body.scrollLeft) - clientLeft;\n return {\n y: top,\n x: left\n };\n };\n /*\\\n * Paper.getElementByPoint\n [ method ]\n **\n * Returns you topmost element under given point.\n **\n = (object) Raphaël element object\n > Parameters\n **\n - x (number) x coordinate from the top left corner of the window\n - y (number) y coordinate from the top left corner of the window\n > Usage\n | paper.getElementByPoint(mouseX, mouseY).attr({stroke: \"#f00\"});\n \\*/\n paperproto.getElementByPoint = function (x, y) {\n var paper = this,\n svg = paper.canvas,\n target = g.doc.elementFromPoint(x, y);\n if (g.win.opera && target.tagName == \"svg\") {\n var so = getOffset(svg),\n sr = svg.createSVGRect();\n sr.x = x - so.x;\n sr.y = y - so.y;\n sr.width = sr.height = 1;\n var hits = svg.getIntersectionList(sr, null);\n if (hits.length) {\n target = hits[hits.length - 1];\n }\n }\n if (!target) {\n return null;\n }\n while (target.parentNode && target != svg.parentNode && !target.raphael) {\n target = target.parentNode;\n }\n target == paper.canvas.parentNode && (target = svg);\n target = target && target.raphael ? paper.getById(target.raphaelid) : null;\n return target;\n };\n\n /*\\\n * Paper.getElementsByBBox\n [ method ]\n **\n * Returns set of elements that have an intersecting bounding box\n **\n > Parameters\n **\n - bbox (object) bbox to check with\n = (object) @Set\n \\*/\n paperproto.getElementsByBBox = function (bbox) {\n var set = this.set();\n this.forEach(function (el) {\n if (R.isBBoxIntersect(el.getBBox(), bbox)) {\n set.push(el);\n }\n });\n return set;\n };\n\n /*\\\n * Paper.getById\n [ method ]\n **\n * Returns you element by its internal ID.\n **\n > Parameters\n **\n - id (number) id\n = (object) Raphaël element object\n \\*/\n paperproto.getById = function (id) {\n var bot = this.bottom;\n while (bot) {\n if (bot.id == id) {\n return bot;\n }\n bot = bot.next;\n }\n return null;\n };\n /*\\\n * Paper.forEach\n [ method ]\n **\n * Executes given function for each element on the paper\n *\n * If callback function returns `false` it will stop loop running.\n **\n > Parameters\n **\n - callback (function) function to run\n - thisArg (object) context object for the callback\n = (object) Paper object\n > Usage\n | paper.forEach(function (el) {\n | el.attr({ stroke: \"blue\" });\n | });\n \\*/\n paperproto.forEach = function (callback, thisArg) {\n var bot = this.bottom;\n while (bot) {\n if (callback.call(thisArg, bot) === false) {\n return this;\n }\n bot = bot.next;\n }\n return this;\n };\n /*\\\n * Paper.getElementsByPoint\n [ method ]\n **\n * Returns set of elements that have common point inside\n **\n > Parameters\n **\n - x (number) x coordinate of the point\n - y (number) y coordinate of the point\n = (object) @Set\n \\*/\n paperproto.getElementsByPoint = function (x, y) {\n var set = this.set();\n this.forEach(function (el) {\n if (el.isPointInside(x, y)) {\n set.push(el);\n }\n });\n return set;\n };\n function x_y() {\n return this.x + S + this.y;\n }\n function x_y_w_h() {\n return this.x + S + this.y + S + this.width + \" \\xd7 \" + this.height;\n }\n /*\\\n * Element.isPointInside\n [ method ]\n **\n * Determine if given point is inside this element’s shape\n **\n > Parameters\n **\n - x (number) x coordinate of the point\n - y (number) y coordinate of the point\n = (boolean) `true` if point inside the shape\n \\*/\n elproto.isPointInside = function (x, y) {\n var rp = this.realPath = getPath[this.type](this);\n if (this.attr('transform') && this.attr('transform').length) {\n rp = R.transformPath(rp, this.attr('transform'));\n }\n return R.isPointInsidePath(rp, x, y);\n };\n /*\\\n * Element.getBBox\n [ method ]\n **\n * Return bounding box for a given element\n **\n > Parameters\n **\n - isWithoutTransform (boolean) flag, `true` if you want to have bounding box before transformations. Default is `false`.\n = (object) Bounding box object:\n o {\n o x: (number) top left corner x\n o y: (number) top left corner y\n o x2: (number) bottom right corner x\n o y2: (number) bottom right corner y\n o width: (number) width\n o height: (number) height\n o }\n \\*/\n elproto.getBBox = function (isWithoutTransform) {\n if (this.removed) {\n return {};\n }\n var _ = this._;\n if (isWithoutTransform) {\n if (_.dirty || !_.bboxwt) {\n this.realPath = getPath[this.type](this);\n _.bboxwt = pathDimensions(this.realPath);\n _.bboxwt.toString = x_y_w_h;\n _.dirty = 0;\n }\n return _.bboxwt;\n }\n if (_.dirty || _.dirtyT || !_.bbox) {\n if (_.dirty || !this.realPath) {\n _.bboxwt = 0;\n this.realPath = getPath[this.type](this);\n }\n _.bbox = pathDimensions(mapPath(this.realPath, this.matrix));\n _.bbox.toString = x_y_w_h;\n _.dirty = _.dirtyT = 0;\n }\n return _.bbox;\n };\n /*\\\n * Element.clone\n [ method ]\n **\n = (object) clone of a given element\n **\n \\*/\n elproto.clone = function () {\n if (this.removed) {\n return null;\n }\n var out = this.paper[this.type]().attr(this.attr());\n this.__set__ && this.__set__.push(out);\n return out;\n };\n /*\\\n * Element.glow\n [ method ]\n **\n * Return set of elements that create glow-like effect around given element. See @Paper.set.\n *\n * Note: Glow is not connected to the element. If you change element attributes it won’t adjust itself.\n **\n > Parameters\n **\n - glow (object) #optional parameters object with all properties optional:\n o {\n o width (number) size of the glow, default is `10`\n o fill (boolean) will it be filled, default is `false`\n o opacity (number) opacity, default is `0.5`\n o offsetx (number) horizontal offset, default is `0`\n o offsety (number) vertical offset, default is `0`\n o color (string) glow colour, default is `black`\n o }\n = (object) @Paper.set of elements that represents glow\n \\*/\n elproto.glow = function (glow) {\n if (this.type == \"text\") {\n return null;\n }\n glow = glow || {};\n var s = {\n width: (glow.width || 10) + (+this.attr(\"stroke-width\") || 1),\n fill: glow.fill || false,\n opacity: glow.opacity || .5,\n offsetx: glow.offsetx || 0,\n offsety: glow.offsety || 0,\n color: glow.color || \"#000\"\n },\n c = s.width / 2,\n r = this.paper,\n out = r.set(),\n path = this.realPath || getPath[this.type](this);\n path = this.matrix ? mapPath(path, this.matrix) : path;\n for (var i = 1; i < c + 1; i++) {\n out.push(r.path(path).attr({\n stroke: s.color,\n fill: s.fill ? s.color : \"none\",\n \"stroke-linejoin\": \"round\",\n \"stroke-linecap\": \"round\",\n \"stroke-width\": +(s.width / c * i).toFixed(3),\n opacity: +(s.opacity / c).toFixed(3)\n }));\n }\n return out.insertBefore(this).translate(s.offsetx, s.offsety);\n };\n var curveslengths = {},\n getPointAtSegmentLength = function (p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length) {\n if (length == null) {\n return bezlen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y);\n } else {\n return R.findDotsAtSegment(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, getTatLen(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, length));\n }\n },\n getLengthFactory = function (istotal, subpath) {\n return function (path, length, onlystart) {\n path = path2curve(path);\n var x, y, p, l, sp = \"\", subpaths = {}, point,\n len = 0;\n for (var i = 0, ii = path.length; i < ii; i++) {\n p = path[i];\n if (p[0] == \"M\") {\n x = +p[1];\n y = +p[2];\n } else {\n l = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6]);\n if (len + l > length) {\n if (subpath && !subpaths.start) {\n point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);\n sp += [\"C\" + point.start.x, point.start.y, point.m.x, point.m.y, point.x, point.y];\n if (onlystart) {return sp;}\n subpaths.start = sp;\n sp = [\"M\" + point.x, point.y + \"C\" + point.n.x, point.n.y, point.end.x, point.end.y, p[5], p[6]].join();\n len += l;\n x = +p[5];\n y = +p[6];\n continue;\n }\n if (!istotal && !subpath) {\n point = getPointAtSegmentLength(x, y, p[1], p[2], p[3], p[4], p[5], p[6], length - len);\n return {x: point.x, y: point.y, alpha: point.alpha};\n }\n }\n len += l;\n x = +p[5];\n y = +p[6];\n }\n sp += p.shift() + p;\n }\n subpaths.end = sp;\n point = istotal ? len : subpath ? subpaths : R.findDotsAtSegment(x, y, p[0], p[1], p[2], p[3], p[4], p[5], 1);\n point.alpha && (point = {x: point.x, y: point.y, alpha: point.alpha});\n return point;\n };\n };\n var getTotalLength = getLengthFactory(1),\n getPointAtLength = getLengthFactory(),\n getSubpathsAtLength = getLengthFactory(0, 1);\n /*\\\n * Raphael.getTotalLength\n [ method ]\n **\n * Returns length of the given path in pixels.\n **\n > Parameters\n **\n - path (string) SVG path string.\n **\n = (number) length.\n \\*/\n R.getTotalLength = getTotalLength;\n /*\\\n * Raphael.getPointAtLength\n [ method ]\n **\n * Return coordinates of the point located at the given length on the given path.\n **\n > Parameters\n **\n - path (string) SVG path string\n - length (number)\n **\n = (object) representation of the point:\n o {\n o x: (number) x coordinate\n o y: (number) y coordinate\n o alpha: (number) angle of derivative\n o }\n \\*/\n R.getPointAtLength = getPointAtLength;\n /*\\\n * Raphael.getSubpath\n [ method ]\n **\n * Return subpath of a given path from given length to given length.\n **\n > Parameters\n **\n - path (string) SVG path string\n - from (number) position of the start of the segment\n - to (number) position of the end of the segment\n **\n = (string) pathstring for the segment\n \\*/\n R.getSubpath = function (path, from, to) {\n if (this.getTotalLength(path) - to < 1e-6) {\n return getSubpathsAtLength(path, from).end;\n }\n var a = getSubpathsAtLength(path, to, 1);\n return from ? getSubpathsAtLength(a, from).end : a;\n };\n /*\\\n * Element.getTotalLength\n [ method ]\n **\n * Returns length of the path in pixels. Only works for element of “path” type.\n = (number) length.\n \\*/\n elproto.getTotalLength = function () {\n var path = this.getPath();\n if (!path) {\n return;\n }\n\n if (this.node.getTotalLength) {\n return this.node.getTotalLength();\n }\n\n return getTotalLength(path);\n };\n /*\\\n * Element.getPointAtLength\n [ method ]\n **\n * Return coordinates of the point located at the given length on the given path. Only works for element of “path” type.\n **\n > Parameters\n **\n - length (number)\n **\n = (object) representation of the point:\n o {\n o x: (number) x coordinate\n o y: (number) y coordinate\n o alpha: (number) angle of derivative\n o }\n \\*/\n elproto.getPointAtLength = function (length) {\n var path = this.getPath();\n if (!path) {\n return;\n }\n\n return getPointAtLength(path, length);\n };\n /*\\\n * Element.getPath\n [ method ]\n **\n * Returns path of the element. Only works for elements of “path” type and simple elements like circle.\n = (object) path\n **\n \\*/\n elproto.getPath = function () {\n var path,\n getPath = R._getPath[this.type];\n\n if (this.type == \"text\" || this.type == \"set\") {\n return;\n }\n\n if (getPath) {\n path = getPath(this);\n }\n\n return path;\n };\n /*\\\n * Element.getSubpath\n [ method ]\n **\n * Return subpath of a given element from given length to given length. Only works for element of “path” type.\n **\n > Parameters\n **\n - from (number) position of the start of the segment\n - to (number) position of the end of the segment\n **\n = (string) pathstring for the segment\n \\*/\n elproto.getSubpath = function (from, to) {\n var path = this.getPath();\n if (!path) {\n return;\n }\n\n return R.getSubpath(path, from, to);\n };\n /*\\\n * Raphael.easing_formulas\n [ property ]\n **\n * Object that contains easing formulas for animation. You could extend it with your own. By default it has following list of easing:\n # \n # - “linear”
\n # - “<” or “easeIn” or “ease-in”
\n # - “>” or “easeOut” or “ease-out”
\n # - “<>” or “easeInOut” or “ease-in-out”
\n # - “backIn” or “back-in”
\n # - “backOut” or “back-out”
\n # - “elastic”
\n # - “bounce”
\n #
\n # See also Easing demo.
\n \\*/\n var ef = R.easing_formulas = {\n linear: function (n) {\n return n;\n },\n \"<\": function (n) {\n return pow(n, 1.7);\n },\n \">\": function (n) {\n return pow(n, .48);\n },\n \"<>\": function (n) {\n var q = .48 - n / 1.04,\n Q = math.sqrt(.1734 + q * q),\n x = Q - q,\n X = pow(abs(x), 1 / 3) * (x < 0 ? -1 : 1),\n y = -Q - q,\n Y = pow(abs(y), 1 / 3) * (y < 0 ? -1 : 1),\n t = X + Y + .5;\n return (1 - t) * 3 * t * t + t * t * t;\n },\n backIn: function (n) {\n var s = 1.70158;\n return n * n * ((s + 1) * n - s);\n },\n backOut: function (n) {\n n = n - 1;\n var s = 1.70158;\n return n * n * ((s + 1) * n + s) + 1;\n },\n elastic: function (n) {\n if (n == !!n) {\n return n;\n }\n return pow(2, -10 * n) * math.sin((n - .075) * (2 * PI) / .3) + 1;\n },\n bounce: function (n) {\n var s = 7.5625,\n p = 2.75,\n l;\n if (n < (1 / p)) {\n l = s * n * n;\n } else {\n if (n < (2 / p)) {\n n -= (1.5 / p);\n l = s * n * n + .75;\n } else {\n if (n < (2.5 / p)) {\n n -= (2.25 / p);\n l = s * n * n + .9375;\n } else {\n n -= (2.625 / p);\n l = s * n * n + .984375;\n }\n }\n }\n return l;\n }\n };\n ef.easeIn = ef[\"ease-in\"] = ef[\"<\"];\n ef.easeOut = ef[\"ease-out\"] = ef[\">\"];\n ef.easeInOut = ef[\"ease-in-out\"] = ef[\"<>\"];\n ef[\"back-in\"] = ef.backIn;\n ef[\"back-out\"] = ef.backOut;\n\n var animationElements = [],\n requestAnimFrame = window.requestAnimationFrame ||\n window.webkitRequestAnimationFrame ||\n window.mozRequestAnimationFrame ||\n window.oRequestAnimationFrame ||\n window.msRequestAnimationFrame ||\n function (callback) {\n setTimeout(callback, 16);\n },\n animation = function () {\n var Now = +new Date,\n l = 0;\n for (; l < animationElements.length; l++) {\n var e = animationElements[l];\n if (e.el.removed || e.paused) {\n continue;\n }\n var time = Now - e.start,\n ms = e.ms,\n easing = e.easing,\n from = e.from,\n diff = e.diff,\n to = e.to,\n t = e.t,\n that = e.el,\n set = {},\n now,\n init = {},\n key;\n if (e.initstatus) {\n time = (e.initstatus * e.anim.top - e.prev) / (e.percent - e.prev) * ms;\n e.status = e.initstatus;\n delete e.initstatus;\n e.stop && animationElements.splice(l--, 1);\n } else {\n e.status = (e.prev + (e.percent - e.prev) * (time / ms)) / e.anim.top;\n }\n if (time < 0) {\n continue;\n }\n if (time < ms) {\n var pos = easing(time / ms);\n for (var attr in from) if (from[has](attr)) {\n switch (availableAnimAttrs[attr]) {\n case nu:\n now = +from[attr] + pos * ms * diff[attr];\n break;\n case \"colour\":\n now = \"rgb(\" + [\n upto255(round(from[attr].r + pos * ms * diff[attr].r)),\n upto255(round(from[attr].g + pos * ms * diff[attr].g)),\n upto255(round(from[attr].b + pos * ms * diff[attr].b))\n ].join(\",\") + \")\";\n break;\n case \"path\":\n now = [];\n for (var i = 0, ii = from[attr].length; i < ii; i++) {\n now[i] = [from[attr][i][0]];\n for (var j = 1, jj = from[attr][i].length; j < jj; j++) {\n now[i][j] = +from[attr][i][j] + pos * ms * diff[attr][i][j];\n }\n now[i] = now[i].join(S);\n }\n now = now.join(S);\n break;\n case \"transform\":\n if (diff[attr].real) {\n now = [];\n for (i = 0, ii = from[attr].length; i < ii; i++) {\n now[i] = [from[attr][i][0]];\n for (j = 1, jj = from[attr][i].length; j < jj; j++) {\n now[i][j] = from[attr][i][j] + pos * ms * diff[attr][i][j];\n }\n }\n } else {\n var get = function (i) {\n return +from[attr][i] + pos * ms * diff[attr][i];\n };\n // now = [[\"r\", get(2), 0, 0], [\"t\", get(3), get(4)], [\"s\", get(0), get(1), 0, 0]];\n now = [[\"m\", get(0), get(1), get(2), get(3), get(4), get(5)]];\n }\n break;\n case \"csv\":\n if (attr == \"clip-rect\") {\n now = [];\n i = 4;\n while (i--) {\n now[i] = +from[attr][i] + pos * ms * diff[attr][i];\n }\n }\n break;\n default:\n var from2 = [][concat](from[attr]);\n now = [];\n i = that.paper.customAttributes[attr].length;\n while (i--) {\n now[i] = +from2[i] + pos * ms * diff[attr][i];\n }\n break;\n }\n set[attr] = now;\n }\n that.attr(set);\n (function (id, that, anim) {\n setTimeout(function () {\n eve(\"raphael.anim.frame.\" + id, that, anim);\n });\n })(that.id, that, e.anim);\n } else {\n (function(f, el, a) {\n setTimeout(function() {\n eve(\"raphael.anim.frame.\" + el.id, el, a);\n eve(\"raphael.anim.finish.\" + el.id, el, a);\n R.is(f, \"function\") && f.call(el);\n });\n })(e.callback, that, e.anim);\n that.attr(to);\n animationElements.splice(l--, 1);\n if (e.repeat > 1 && !e.next) {\n for (key in to) if (to[has](key)) {\n init[key] = e.totalOrigin[key];\n }\n e.el.attr(init);\n runAnimation(e.anim, e.el, e.anim.percents[0], null, e.totalOrigin, e.repeat - 1);\n }\n if (e.next && !e.stop) {\n runAnimation(e.anim, e.el, e.next, null, e.totalOrigin, e.repeat);\n }\n }\n }\n R.svg && that && that.paper && that.paper.safari();\n animationElements.length && requestAnimFrame(animation);\n },\n upto255 = function (color) {\n return color > 255 ? 255 : color < 0 ? 0 : color;\n };\n /*\\\n * Element.animateWith\n [ method ]\n **\n * Acts similar to @Element.animate, but ensure that given animation runs in sync with another given element.\n **\n > Parameters\n **\n - el (object) element to sync with\n - anim (object) animation to sync with\n - params (object) #optional final attributes for the element, see also @Element.attr\n - ms (number) #optional number of milliseconds for animation to run\n - easing (string) #optional easing type. Accept on of @Raphael.easing_formulas or CSS format: `cubic‐bezier(XX, XX, XX, XX)`\n - callback (function) #optional callback function. Will be called at the end of animation.\n * or\n - element (object) element to sync with\n - anim (object) animation to sync with\n - animation (object) #optional animation object, see @Raphael.animation\n **\n = (object) original element\n \\*/\n elproto.animateWith = function (el, anim, params, ms, easing, callback) {\n var element = this;\n if (element.removed) {\n callback && callback.call(element);\n return element;\n }\n var a = params instanceof Animation ? params : R.animation(params, ms, easing, callback),\n x, y;\n runAnimation(a, element, a.percents[0], null, element.attr());\n for (var i = 0, ii = animationElements.length; i < ii; i++) {\n if (animationElements[i].anim == anim && animationElements[i].el == el) {\n animationElements[ii - 1].start = animationElements[i].start;\n break;\n }\n }\n return element;\n //\n //\n // var a = params ? R.animation(params, ms, easing, callback) : anim,\n // status = element.status(anim);\n // return this.animate(a).status(a, status * anim.ms / a.ms);\n };\n function CubicBezierAtTime(t, p1x, p1y, p2x, p2y, duration) {\n var cx = 3 * p1x,\n bx = 3 * (p2x - p1x) - cx,\n ax = 1 - cx - bx,\n cy = 3 * p1y,\n by = 3 * (p2y - p1y) - cy,\n ay = 1 - cy - by;\n function sampleCurveX(t) {\n return ((ax * t + bx) * t + cx) * t;\n }\n function solve(x, epsilon) {\n var t = solveCurveX(x, epsilon);\n return ((ay * t + by) * t + cy) * t;\n }\n function solveCurveX(x, epsilon) {\n var t0, t1, t2, x2, d2, i;\n for(t2 = x, i = 0; i < 8; i++) {\n x2 = sampleCurveX(t2) - x;\n if (abs(x2) < epsilon) {\n return t2;\n }\n d2 = (3 * ax * t2 + 2 * bx) * t2 + cx;\n if (abs(d2) < 1e-6) {\n break;\n }\n t2 = t2 - x2 / d2;\n }\n t0 = 0;\n t1 = 1;\n t2 = x;\n if (t2 < t0) {\n return t0;\n }\n if (t2 > t1) {\n return t1;\n }\n while (t0 < t1) {\n x2 = sampleCurveX(t2);\n if (abs(x2 - x) < epsilon) {\n return t2;\n }\n if (x > x2) {\n t0 = t2;\n } else {\n t1 = t2;\n }\n t2 = (t1 - t0) / 2 + t0;\n }\n return t2;\n }\n return solve(t, 1 / (200 * duration));\n }\n elproto.onAnimation = function (f) {\n f ? eve.on(\"raphael.anim.frame.\" + this.id, f) : eve.unbind(\"raphael.anim.frame.\" + this.id);\n return this;\n };\n function Animation(anim, ms) {\n var percents = [],\n newAnim = {};\n this.ms = ms;\n this.times = 1;\n if (anim) {\n for (var attr in anim) if (anim[has](attr)) {\n newAnim[toFloat(attr)] = anim[attr];\n percents.push(toFloat(attr));\n }\n percents.sort(sortByNumber);\n }\n this.anim = newAnim;\n this.top = percents[percents.length - 1];\n this.percents = percents;\n }\n /*\\\n * Animation.delay\n [ method ]\n **\n * Creates a copy of existing animation object with given delay.\n **\n > Parameters\n **\n - delay (number) number of ms to pass between animation start and actual animation\n **\n = (object) new altered Animation object\n | var anim = Raphael.animation({cx: 10, cy: 20}, 2e3);\n | circle1.animate(anim); // run the given animation immediately\n | circle2.animate(anim.delay(500)); // run the given animation after 500 ms\n \\*/\n Animation.prototype.delay = function (delay) {\n var a = new Animation(this.anim, this.ms);\n a.times = this.times;\n a.del = +delay || 0;\n return a;\n };\n /*\\\n * Animation.repeat\n [ method ]\n **\n * Creates a copy of existing animation object with given repetition.\n **\n > Parameters\n **\n - repeat (number) number iterations of animation. For infinite animation pass `Infinity`\n **\n = (object) new altered Animation object\n \\*/\n Animation.prototype.repeat = function (times) {\n var a = new Animation(this.anim, this.ms);\n a.del = this.del;\n a.times = math.floor(mmax(times, 0)) || 1;\n return a;\n };\n function runAnimation(anim, element, percent, status, totalOrigin, times) {\n percent = toFloat(percent);\n var params,\n isInAnim,\n isInAnimSet,\n percents = [],\n next,\n prev,\n timestamp,\n ms = anim.ms,\n from = {},\n to = {},\n diff = {};\n if (status) {\n for (i = 0, ii = animationElements.length; i < ii; i++) {\n var e = animationElements[i];\n if (e.el.id == element.id && e.anim == anim) {\n if (e.percent != percent) {\n animationElements.splice(i, 1);\n isInAnimSet = 1;\n } else {\n isInAnim = e;\n }\n element.attr(e.totalOrigin);\n break;\n }\n }\n } else {\n status = +to; // NaN\n }\n for (var i = 0, ii = anim.percents.length; i < ii; i++) {\n if (anim.percents[i] == percent || anim.percents[i] > status * anim.top) {\n percent = anim.percents[i];\n prev = anim.percents[i - 1] || 0;\n ms = ms / anim.top * (percent - prev);\n next = anim.percents[i + 1];\n params = anim.anim[percent];\n break;\n } else if (status) {\n element.attr(anim.anim[anim.percents[i]]);\n }\n }\n if (!params) {\n return;\n }\n if (!isInAnim) {\n for (var attr in params) if (params[has](attr)) {\n if (availableAnimAttrs[has](attr) || element.paper.customAttributes[has](attr)) {\n from[attr] = element.attr(attr);\n (from[attr] == null) && (from[attr] = availableAttrs[attr]);\n to[attr] = params[attr];\n switch (availableAnimAttrs[attr]) {\n case nu:\n diff[attr] = (to[attr] - from[attr]) / ms;\n break;\n case \"colour\":\n from[attr] = R.getRGB(from[attr]);\n var toColour = R.getRGB(to[attr]);\n diff[attr] = {\n r: (toColour.r - from[attr].r) / ms,\n g: (toColour.g - from[attr].g) / ms,\n b: (toColour.b - from[attr].b) / ms\n };\n break;\n case \"path\":\n var pathes = path2curve(from[attr], to[attr]),\n toPath = pathes[1];\n from[attr] = pathes[0];\n diff[attr] = [];\n for (i = 0, ii = from[attr].length; i < ii; i++) {\n diff[attr][i] = [0];\n for (var j = 1, jj = from[attr][i].length; j < jj; j++) {\n diff[attr][i][j] = (toPath[i][j] - from[attr][i][j]) / ms;\n }\n }\n break;\n case \"transform\":\n var _ = element._,\n eq = equaliseTransform(_[attr], to[attr]);\n if (eq) {\n from[attr] = eq.from;\n to[attr] = eq.to;\n diff[attr] = [];\n diff[attr].real = true;\n for (i = 0, ii = from[attr].length; i < ii; i++) {\n diff[attr][i] = [from[attr][i][0]];\n for (j = 1, jj = from[attr][i].length; j < jj; j++) {\n diff[attr][i][j] = (to[attr][i][j] - from[attr][i][j]) / ms;\n }\n }\n } else {\n var m = (element.matrix || new Matrix),\n to2 = {\n _: {transform: _.transform},\n getBBox: function () {\n return element.getBBox(1);\n }\n };\n from[attr] = [\n m.a,\n m.b,\n m.c,\n m.d,\n m.e,\n m.f\n ];\n extractTransform(to2, to[attr]);\n to[attr] = to2._.transform;\n diff[attr] = [\n (to2.matrix.a - m.a) / ms,\n (to2.matrix.b - m.b) / ms,\n (to2.matrix.c - m.c) / ms,\n (to2.matrix.d - m.d) / ms,\n (to2.matrix.e - m.e) / ms,\n (to2.matrix.f - m.f) / ms\n ];\n // from[attr] = [_.sx, _.sy, _.deg, _.dx, _.dy];\n // var to2 = {_:{}, getBBox: function () { return element.getBBox(); }};\n // extractTransform(to2, to[attr]);\n // diff[attr] = [\n // (to2._.sx - _.sx) / ms,\n // (to2._.sy - _.sy) / ms,\n // (to2._.deg - _.deg) / ms,\n // (to2._.dx - _.dx) / ms,\n // (to2._.dy - _.dy) / ms\n // ];\n }\n break;\n case \"csv\":\n var values = Str(params[attr])[split](separator),\n from2 = Str(from[attr])[split](separator);\n if (attr == \"clip-rect\") {\n from[attr] = from2;\n diff[attr] = [];\n i = from2.length;\n while (i--) {\n diff[attr][i] = (values[i] - from[attr][i]) / ms;\n }\n }\n to[attr] = values;\n break;\n default:\n values = [][concat](params[attr]);\n from2 = [][concat](from[attr]);\n diff[attr] = [];\n i = element.paper.customAttributes[attr].length;\n while (i--) {\n diff[attr][i] = ((values[i] || 0) - (from2[i] || 0)) / ms;\n }\n break;\n }\n }\n }\n var easing = params.easing,\n easyeasy = R.easing_formulas[easing];\n if (!easyeasy) {\n easyeasy = Str(easing).match(bezierrg);\n if (easyeasy && easyeasy.length == 5) {\n var curve = easyeasy;\n easyeasy = function (t) {\n return CubicBezierAtTime(t, +curve[1], +curve[2], +curve[3], +curve[4], ms);\n };\n } else {\n easyeasy = pipe;\n }\n }\n timestamp = params.start || anim.start || +new Date;\n e = {\n anim: anim,\n percent: percent,\n timestamp: timestamp,\n start: timestamp + (anim.del || 0),\n status: 0,\n initstatus: status || 0,\n stop: false,\n ms: ms,\n easing: easyeasy,\n from: from,\n diff: diff,\n to: to,\n el: element,\n callback: params.callback,\n prev: prev,\n next: next,\n repeat: times || anim.times,\n origin: element.attr(),\n totalOrigin: totalOrigin\n };\n animationElements.push(e);\n if (status && !isInAnim && !isInAnimSet) {\n e.stop = true;\n e.start = new Date - ms * status;\n if (animationElements.length == 1) {\n return animation();\n }\n }\n if (isInAnimSet) {\n e.start = new Date - e.ms * status;\n }\n animationElements.length == 1 && requestAnimFrame(animation);\n } else {\n isInAnim.initstatus = status;\n isInAnim.start = new Date - isInAnim.ms * status;\n }\n eve(\"raphael.anim.start.\" + element.id, element, anim);\n }\n /*\\\n * Raphael.animation\n [ method ]\n **\n * Creates an animation object that can be passed to the @Element.animate or @Element.animateWith methods.\n * See also @Animation.delay and @Animation.repeat methods.\n **\n > Parameters\n **\n - params (object) final attributes for the element, see also @Element.attr\n - ms (number) number of milliseconds for animation to run\n - easing (string) #optional easing type. Accept one of @Raphael.easing_formulas or CSS format: `cubic‐bezier(XX, XX, XX, XX)`\n - callback (function) #optional callback function. Will be called at the end of animation.\n **\n = (object) @Animation\n \\*/\n R.animation = function (params, ms, easing, callback) {\n if (params instanceof Animation) {\n return params;\n }\n if (R.is(easing, \"function\") || !easing) {\n callback = callback || easing || null;\n easing = null;\n }\n params = Object(params);\n ms = +ms || 0;\n var p = {},\n json,\n attr;\n for (attr in params) if (params[has](attr) && toFloat(attr) != attr && toFloat(attr) + \"%\" != attr) {\n json = true;\n p[attr] = params[attr];\n }\n if (!json) {\n // if percent-like syntax is used and end-of-all animation callback used\n if(callback){\n // find the last one\n var lastKey = 0;\n for(var i in params){\n var percent = toInt(i);\n if(params[has](i) && percent > lastKey){\n lastKey = percent;\n }\n }\n lastKey += '%';\n // if already defined callback in the last keyframe, skip\n !params[lastKey].callback && (params[lastKey].callback = callback);\n }\n return new Animation(params, ms);\n } else {\n easing && (p.easing = easing);\n callback && (p.callback = callback);\n return new Animation({100: p}, ms);\n }\n };\n /*\\\n * Element.animate\n [ method ]\n **\n * Creates and starts animation for given element.\n **\n > Parameters\n **\n - params (object) final attributes for the element, see also @Element.attr\n - ms (number) number of milliseconds for animation to run\n - easing (string) #optional easing type. Accept one of @Raphael.easing_formulas or CSS format: `cubic‐bezier(XX, XX, XX, XX)`\n - callback (function) #optional callback function. Will be called at the end of animation.\n * or\n - animation (object) animation object, see @Raphael.animation\n **\n = (object) original element\n \\*/\n elproto.animate = function (params, ms, easing, callback) {\n var element = this;\n if (element.removed) {\n callback && callback.call(element);\n return element;\n }\n var anim = params instanceof Animation ? params : R.animation(params, ms, easing, callback);\n runAnimation(anim, element, anim.percents[0], null, element.attr());\n return element;\n };\n /*\\\n * Element.setTime\n [ method ]\n **\n * Sets the status of animation of the element in milliseconds. Similar to @Element.status method.\n **\n > Parameters\n **\n - anim (object) animation object\n - value (number) number of milliseconds from the beginning of the animation\n **\n = (object) original element if `value` is specified\n * Note, that during animation following events are triggered:\n *\n * On each animation frame event `anim.frame.`, on start `anim.start.` and on end `anim.finish.`.\n \\*/\n elproto.setTime = function (anim, value) {\n if (anim && value != null) {\n this.status(anim, mmin(value, anim.ms) / anim.ms);\n }\n return this;\n };\n /*\\\n * Element.status\n [ method ]\n **\n * Gets or sets the status of animation of the element.\n **\n > Parameters\n **\n - anim (object) #optional animation object\n - value (number) #optional 0 – 1. If specified, method works like a setter and sets the status of a given animation to the value. This will cause animation to jump to the given position.\n **\n = (number) status\n * or\n = (array) status if `anim` is not specified. Array of objects in format:\n o {\n o anim: (object) animation object\n o status: (number) status\n o }\n * or\n = (object) original element if `value` is specified\n \\*/\n elproto.status = function (anim, value) {\n var out = [],\n i = 0,\n len,\n e;\n if (value != null) {\n runAnimation(anim, this, -1, mmin(value, 1));\n return this;\n } else {\n len = animationElements.length;\n for (; i < len; i++) {\n e = animationElements[i];\n if (e.el.id == this.id && (!anim || e.anim == anim)) {\n if (anim) {\n return e.status;\n }\n out.push({\n anim: e.anim,\n status: e.status\n });\n }\n }\n if (anim) {\n return 0;\n }\n return out;\n }\n };\n /*\\\n * Element.pause\n [ method ]\n **\n * Stops animation of the element with ability to resume it later on.\n **\n > Parameters\n **\n - anim (object) #optional animation object\n **\n = (object) original element\n \\*/\n elproto.pause = function (anim) {\n for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {\n if (eve(\"raphael.anim.pause.\" + this.id, this, animationElements[i].anim) !== false) {\n animationElements[i].paused = true;\n }\n }\n return this;\n };\n /*\\\n * Element.resume\n [ method ]\n **\n * Resumes animation if it was paused with @Element.pause method.\n **\n > Parameters\n **\n - anim (object) #optional animation object\n **\n = (object) original element\n \\*/\n elproto.resume = function (anim) {\n for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {\n var e = animationElements[i];\n if (eve(\"raphael.anim.resume.\" + this.id, this, e.anim) !== false) {\n delete e.paused;\n this.status(e.anim, e.status);\n }\n }\n return this;\n };\n /*\\\n * Element.stop\n [ method ]\n **\n * Stops animation of the element.\n **\n > Parameters\n **\n - anim (object) #optional animation object\n **\n = (object) original element\n \\*/\n elproto.stop = function (anim) {\n for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.id == this.id && (!anim || animationElements[i].anim == anim)) {\n if (eve(\"raphael.anim.stop.\" + this.id, this, animationElements[i].anim) !== false) {\n animationElements.splice(i--, 1);\n }\n }\n return this;\n };\n function stopAnimation(paper) {\n for (var i = 0; i < animationElements.length; i++) if (animationElements[i].el.paper == paper) {\n animationElements.splice(i--, 1);\n }\n }\n eve.on(\"raphael.remove\", stopAnimation);\n eve.on(\"raphael.clear\", stopAnimation);\n elproto.toString = function () {\n return \"Rapha\\xebl\\u2019s object\";\n };\n\n // Set\n var Set = function (items) {\n this.items = [];\n this.length = 0;\n this.type = \"set\";\n if (items) {\n for (var i = 0, ii = items.length; i < ii; i++) {\n if (items[i] && (items[i].constructor == elproto.constructor || items[i].constructor == Set)) {\n this[this.items.length] = this.items[this.items.length] = items[i];\n this.length++;\n }\n }\n }\n },\n setproto = Set.prototype;\n /*\\\n * Set.push\n [ method ]\n **\n * Adds each argument to the current set.\n = (object) original element\n \\*/\n setproto.push = function () {\n var item,\n len;\n for (var i = 0, ii = arguments.length; i < ii; i++) {\n item = arguments[i];\n if (item && (item.constructor == elproto.constructor || item.constructor == Set)) {\n len = this.items.length;\n this[len] = this.items[len] = item;\n this.length++;\n }\n }\n return this;\n };\n /*\\\n * Set.pop\n [ method ]\n **\n * Removes last element and returns it.\n = (object) element\n \\*/\n setproto.pop = function () {\n this.length && delete this[this.length--];\n return this.items.pop();\n };\n /*\\\n * Set.forEach\n [ method ]\n **\n * Executes given function for each element in the set.\n *\n * If function returns `false` it will stop loop running.\n **\n > Parameters\n **\n - callback (function) function to run\n - thisArg (object) context object for the callback\n = (object) Set object\n \\*/\n setproto.forEach = function (callback, thisArg) {\n for (var i = 0, ii = this.items.length; i < ii; i++) {\n if (callback.call(thisArg, this.items[i], i) === false) {\n return this;\n }\n }\n return this;\n };\n for (var method in elproto) if (elproto[has](method)) {\n setproto[method] = (function (methodname) {\n return function () {\n var arg = arguments;\n return this.forEach(function (el) {\n el[methodname][apply](el, arg);\n });\n };\n })(method);\n }\n setproto.attr = function (name, value) {\n if (name && R.is(name, array) && R.is(name[0], \"object\")) {\n for (var j = 0, jj = name.length; j < jj; j++) {\n this.items[j].attr(name[j]);\n }\n } else {\n for (var i = 0, ii = this.items.length; i < ii; i++) {\n this.items[i].attr(name, value);\n }\n }\n return this;\n };\n /*\\\n * Set.clear\n [ method ]\n **\n * Removes all elements from the set\n \\*/\n setproto.clear = function () {\n while (this.length) {\n this.pop();\n }\n };\n /*\\\n * Set.splice\n [ method ]\n **\n * Removes given element from the set\n **\n > Parameters\n **\n - index (number) position of the deletion\n - count (number) number of element to remove\n - insertion… (object) #optional elements to insert\n = (object) set elements that were deleted\n \\*/\n setproto.splice = function (index, count, insertion) {\n index = index < 0 ? mmax(this.length + index, 0) : index;\n count = mmax(0, mmin(this.length - index, count));\n var tail = [],\n todel = [],\n args = [],\n i;\n for (i = 2; i < arguments.length; i++) {\n args.push(arguments[i]);\n }\n for (i = 0; i < count; i++) {\n todel.push(this[index + i]);\n }\n for (; i < this.length - index; i++) {\n tail.push(this[index + i]);\n }\n var arglen = args.length;\n for (i = 0; i < arglen + tail.length; i++) {\n this.items[index + i] = this[index + i] = i < arglen ? args[i] : tail[i - arglen];\n }\n i = this.items.length = this.length -= count - arglen;\n while (this[i]) {\n delete this[i++];\n }\n return new Set(todel);\n };\n /*\\\n * Set.exclude\n [ method ]\n **\n * Removes given element from the set\n **\n > Parameters\n **\n - element (object) element to remove\n = (boolean) `true` if object was found & removed from the set\n \\*/\n setproto.exclude = function (el) {\n for (var i = 0, ii = this.length; i < ii; i++) if (this[i] == el) {\n this.splice(i, 1);\n return true;\n }\n };\n setproto.animate = function (params, ms, easing, callback) {\n (R.is(easing, \"function\") || !easing) && (callback = easing || null);\n var len = this.items.length,\n i = len,\n item,\n set = this,\n collector;\n if (!len) {\n return this;\n }\n callback && (collector = function () {\n !--len && callback.call(set);\n });\n easing = R.is(easing, string) ? easing : collector;\n var anim = R.animation(params, ms, easing, collector);\n item = this.items[--i].animate(anim);\n while (i--) {\n this.items[i] && !this.items[i].removed && this.items[i].animateWith(item, anim, anim);\n (this.items[i] && !this.items[i].removed) || len--;\n }\n return this;\n };\n setproto.insertAfter = function (el) {\n var i = this.items.length;\n while (i--) {\n this.items[i].insertAfter(el);\n }\n return this;\n };\n setproto.getBBox = function () {\n var x = [],\n y = [],\n x2 = [],\n y2 = [];\n for (var i = this.items.length; i--;) if (!this.items[i].removed) {\n var box = this.items[i].getBBox();\n x.push(box.x);\n y.push(box.y);\n x2.push(box.x + box.width);\n y2.push(box.y + box.height);\n }\n x = mmin[apply](0, x);\n y = mmin[apply](0, y);\n x2 = mmax[apply](0, x2);\n y2 = mmax[apply](0, y2);\n return {\n x: x,\n y: y,\n x2: x2,\n y2: y2,\n width: x2 - x,\n height: y2 - y\n };\n };\n setproto.clone = function (s) {\n s = this.paper.set();\n for (var i = 0, ii = this.items.length; i < ii; i++) {\n s.push(this.items[i].clone());\n }\n return s;\n };\n setproto.toString = function () {\n return \"Rapha\\xebl\\u2018s set\";\n };\n\n setproto.glow = function(glowConfig) {\n var ret = this.paper.set();\n this.forEach(function(shape, index){\n var g = shape.glow(glowConfig);\n if(g != null){\n g.forEach(function(shape2, index2){\n ret.push(shape2);\n });\n }\n });\n return ret;\n };\n\n\n /*\\\n * Set.isPointInside\n [ method ]\n **\n * Determine if given point is inside this set’s elements\n **\n > Parameters\n **\n - x (number) x coordinate of the point\n - y (number) y coordinate of the point\n = (boolean) `true` if point is inside any of the set's elements\n \\*/\n setproto.isPointInside = function (x, y) {\n var isPointInside = false;\n this.forEach(function (el) {\n if (el.isPointInside(x, y)) {\n isPointInside = true;\n return false; // stop loop\n }\n });\n return isPointInside;\n };\n\n /*\\\n * Raphael.registerFont\n [ method ]\n **\n * Adds given font to the registered set of fonts for Raphaël. Should be used as an internal call from within Cufón’s font file.\n * Returns original parameter, so it could be used with chaining.\n # More about Cufón and how to convert your font form TTF, OTF, etc to JavaScript file.\n **\n > Parameters\n **\n - font (object) the font to register\n = (object) the font you passed in\n > Usage\n | Cufon.registerFont(Raphael.registerFont({…}));\n \\*/\n R.registerFont = function (font) {\n if (!font.face) {\n return font;\n }\n this.fonts = this.fonts || {};\n var fontcopy = {\n w: font.w,\n face: {},\n glyphs: {}\n },\n family = font.face[\"font-family\"];\n for (var prop in font.face) if (font.face[has](prop)) {\n fontcopy.face[prop] = font.face[prop];\n }\n if (this.fonts[family]) {\n this.fonts[family].push(fontcopy);\n } else {\n this.fonts[family] = [fontcopy];\n }\n if (!font.svg) {\n fontcopy.face[\"units-per-em\"] = toInt(font.face[\"units-per-em\"], 10);\n for (var glyph in font.glyphs) if (font.glyphs[has](glyph)) {\n var path = font.glyphs[glyph];\n fontcopy.glyphs[glyph] = {\n w: path.w,\n k: {},\n d: path.d && \"M\" + path.d.replace(/[mlcxtrv]/g, function (command) {\n return {l: \"L\", c: \"C\", x: \"z\", t: \"m\", r: \"l\", v: \"c\"}[command] || \"M\";\n }) + \"z\"\n };\n if (path.k) {\n for (var k in path.k) if (path[has](k)) {\n fontcopy.glyphs[glyph].k[k] = path.k[k];\n }\n }\n }\n }\n return font;\n };\n /*\\\n * Paper.getFont\n [ method ]\n **\n * Finds font object in the registered fonts by given parameters. You could specify only one word from the font name, like “Myriad” for “Myriad Pro”.\n **\n > Parameters\n **\n - family (string) font family name or any word from it\n - weight (string) #optional font weight\n - style (string) #optional font style\n - stretch (string) #optional font stretch\n = (object) the font object\n > Usage\n | paper.print(100, 100, \"Test string\", paper.getFont(\"Times\", 800), 30);\n \\*/\n paperproto.getFont = function (family, weight, style, stretch) {\n stretch = stretch || \"normal\";\n style = style || \"normal\";\n weight = +weight || {normal: 400, bold: 700, lighter: 300, bolder: 800}[weight] || 400;\n if (!R.fonts) {\n return;\n }\n var font = R.fonts[family];\n if (!font) {\n var name = new RegExp(\"(^|\\\\s)\" + family.replace(/[^\\w\\d\\s+!~.:_-]/g, E) + \"(\\\\s|$)\", \"i\");\n for (var fontName in R.fonts) if (R.fonts[has](fontName)) {\n if (name.test(fontName)) {\n font = R.fonts[fontName];\n break;\n }\n }\n }\n var thefont;\n if (font) {\n for (var i = 0, ii = font.length; i < ii; i++) {\n thefont = font[i];\n if (thefont.face[\"font-weight\"] == weight && (thefont.face[\"font-style\"] == style || !thefont.face[\"font-style\"]) && thefont.face[\"font-stretch\"] == stretch) {\n break;\n }\n }\n }\n return thefont;\n };\n /*\\\n * Paper.print\n [ method ]\n **\n * Creates path that represent given text written using given font at given position with given size.\n * Result of the method is path element that contains whole text as a separate path.\n **\n > Parameters\n **\n - x (number) x position of the text\n - y (number) y position of the text\n - string (string) text to print\n - font (object) font object, see @Paper.getFont\n - size (number) #optional size of the font, default is `16`\n - origin (string) #optional could be `\"baseline\"` or `\"middle\"`, default is `\"middle\"`\n - letter_spacing (number) #optional number in range `-1..1`, default is `0`\n - line_spacing (number) #optional number in range `1..3`, default is `1`\n = (object) resulting path element, which consist of all letters\n > Usage\n | var txt = r.print(10, 50, \"print\", r.getFont(\"Museo\"), 30).attr({fill: \"#fff\"});\n \\*/\n paperproto.print = function (x, y, string, font, size, origin, letter_spacing, line_spacing) {\n origin = origin || \"middle\"; // baseline|middle\n letter_spacing = mmax(mmin(letter_spacing || 0, 1), -1);\n line_spacing = mmax(mmin(line_spacing || 1, 3), 1);\n var letters = Str(string)[split](E),\n shift = 0,\n notfirst = 0,\n path = E,\n scale;\n R.is(font, \"string\") && (font = this.getFont(font));\n if (font) {\n scale = (size || 16) / font.face[\"units-per-em\"];\n var bb = font.face.bbox[split](separator),\n top = +bb[0],\n lineHeight = bb[3] - bb[1],\n shifty = 0,\n height = +bb[1] + (origin == \"baseline\" ? lineHeight + (+font.face.descent) : lineHeight / 2);\n for (var i = 0, ii = letters.length; i < ii; i++) {\n if (letters[i] == \"\\n\") {\n shift = 0;\n curr = 0;\n notfirst = 0;\n shifty += lineHeight * line_spacing;\n } else {\n var prev = notfirst && font.glyphs[letters[i - 1]] || {},\n curr = font.glyphs[letters[i]];\n shift += notfirst ? (prev.w || font.w) + (prev.k && prev.k[letters[i]] || 0) + (font.w * letter_spacing) : 0;\n notfirst = 1;\n }\n if (curr && curr.d) {\n path += R.transformPath(curr.d, [\"t\", shift * scale, shifty * scale, \"s\", scale, scale, top, height, \"t\", (x - top) / scale, (y - height) / scale]);\n }\n }\n }\n return this.path(path).attr({\n fill: \"#000\",\n stroke: \"none\"\n });\n };\n\n /*\\\n * Paper.add\n [ method ]\n **\n * Imports elements in JSON array in format `{type: type, }`\n **\n > Parameters\n **\n - json (array)\n = (object) resulting set of imported elements\n > Usage\n | paper.add([\n | {\n | type: \"circle\",\n | cx: 10,\n | cy: 10,\n | r: 5\n | },\n | {\n | type: \"rect\",\n | x: 10,\n | y: 10,\n | width: 10,\n | height: 10,\n | fill: \"#fc0\"\n | }\n | ]);\n \\*/\n paperproto.add = function (json) {\n if (R.is(json, \"array\")) {\n var res = this.set(),\n i = 0,\n ii = json.length,\n j;\n for (; i < ii; i++) {\n j = json[i] || {};\n elements[has](j.type) && res.push(this[j.type]().attr(j));\n }\n }\n return res;\n };\n\n /*\\\n * Raphael.format\n [ method ]\n **\n * Simple format function. Replaces construction of type “`{}`” to the corresponding argument.\n **\n > Parameters\n **\n - token (string) string to format\n - … (string) rest of arguments will be treated as parameters for replacement\n = (string) formated string\n > Usage\n | var x = 10,\n | y = 20,\n | width = 40,\n | height = 50;\n | // this will draw a rectangular shape equivalent to \"M10,20h40v50h-40z\"\n | paper.path(Raphael.format(\"M{0},{1}h{2}v{3}h{4}z\", x, y, width, height, -width));\n \\*/\n R.format = function (token, params) {\n var args = R.is(params, array) ? [0][concat](params) : arguments;\n token && R.is(token, string) && args.length - 1 && (token = token.replace(formatrg, function (str, i) {\n return args[++i] == null ? E : args[i];\n }));\n return token || E;\n };\n /*\\\n * Raphael.fullfill\n [ method ]\n **\n * A little bit more advanced format function than @Raphael.format. Replaces construction of type “`{}`” to the corresponding argument.\n **\n > Parameters\n **\n - token (string) string to format\n - json (object) object which properties will be used as a replacement\n = (string) formated string\n > Usage\n | // this will draw a rectangular shape equivalent to \"M10,20h40v50h-40z\"\n | paper.path(Raphael.fullfill(\"M{x},{y}h{dim.width}v{dim.height}h{dim['negative width']}z\", {\n | x: 10,\n | y: 20,\n | dim: {\n | width: 40,\n | height: 50,\n | \"negative width\": -40\n | }\n | }));\n \\*/\n R.fullfill = (function () {\n var tokenRegex = /\\{([^\\}]+)\\}/g,\n objNotationRegex = /(?:(?:^|\\.)(.+?)(?=\\[|\\.|$|\\()|\\[('|\")(.+?)\\2\\])(\\(\\))?/g, // matches .xxxxx or [\"xxxxx\"] to run over object properties\n replacer = function (all, key, obj) {\n var res = obj;\n key.replace(objNotationRegex, function (all, name, quote, quotedName, isFunc) {\n name = name || quotedName;\n if (res) {\n if (name in res) {\n res = res[name];\n }\n typeof res == \"function\" && isFunc && (res = res());\n }\n });\n res = (res == null || res == obj ? all : res) + \"\";\n return res;\n };\n return function (str, obj) {\n return String(str).replace(tokenRegex, function (all, key) {\n return replacer(all, key, obj);\n });\n };\n })();\n /*\\\n * Raphael.ninja\n [ method ]\n **\n * If you want to leave no trace of Raphaël (Well, Raphaël creates only one global variable `Raphael`, but anyway.) You can use `ninja` method.\n * Beware, that in this case plugins could stop working, because they are depending on global variable existance.\n **\n = (object) Raphael object\n > Usage\n | (function (local_raphael) {\n | var paper = local_raphael(10, 10, 320, 200);\n | …\n | })(Raphael.ninja());\n \\*/\n R.ninja = function () {\n oldRaphael.was ? (g.win.Raphael = oldRaphael.is) : delete Raphael;\n return R;\n };\n /*\\\n * Raphael.st\n [ property (object) ]\n **\n * You can add your own method to elements and sets. It is wise to add a set method for each element method\n * you added, so you will be able to call the same method on sets too.\n **\n * See also @Raphael.el.\n > Usage\n | Raphael.el.red = function () {\n | this.attr({fill: \"#f00\"});\n | };\n | Raphael.st.red = function () {\n | this.forEach(function (el) {\n | el.red();\n | });\n | };\n | // then use it\n | paper.set(paper.circle(100, 100, 20), paper.circle(110, 100, 20)).red();\n \\*/\n R.st = setproto;\n\n eve.on(\"raphael.DOMload\", function () {\n loaded = true;\n });\n\n // Firefox <3.6 fix: http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html\n (function (doc, loaded, f) {\n if (doc.readyState == null && doc.addEventListener){\n doc.addEventListener(loaded, f = function () {\n doc.removeEventListener(loaded, f, false);\n doc.readyState = \"complete\";\n }, false);\n doc.readyState = \"loading\";\n }\n function isLoaded() {\n (/in/).test(doc.readyState) ? setTimeout(isLoaded, 9) : R.eve(\"raphael.DOMload\");\n }\n isLoaded();\n })(document, \"DOMContentLoaded\");\n\n// ┌─────────────────────────────────────────────────────────────────────┐ \\\\\n// │ Raphaël - JavaScript Vector Library │ \\\\\n// ├─────────────────────────────────────────────────────────────────────┤ \\\\\n// │ SVG Module │ \\\\\n// ├─────────────────────────────────────────────────────────────────────┤ \\\\\n// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://raphaeljs.com) │ \\\\\n// │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\\\\n// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\\\\n// └─────────────────────────────────────────────────────────────────────┘ \\\\\n\n(function(){\n if (!R.svg) {\n return;\n }\n var has = \"hasOwnProperty\",\n Str = String,\n toFloat = parseFloat,\n toInt = parseInt,\n math = Math,\n mmax = math.max,\n abs = math.abs,\n pow = math.pow,\n separator = /[, ]+/,\n eve = R.eve,\n E = \"\",\n S = \" \";\n var xlink = \"http://www.w3.org/1999/xlink\",\n markers = {\n block: \"M5,0 0,2.5 5,5z\",\n classic: \"M5,0 0,2.5 5,5 3.5,3 3.5,2z\",\n diamond: \"M2.5,0 5,2.5 2.5,5 0,2.5z\",\n open: \"M6,1 1,3.5 6,6\",\n oval: \"M2.5,0A2.5,2.5,0,0,1,2.5,5 2.5,2.5,0,0,1,2.5,0z\"\n },\n markerCounter = {};\n R.toString = function () {\n return \"Your browser supports SVG.\\nYou are running Rapha\\xebl \" + this.version;\n };\n var $ = function (el, attr) {\n if (attr) {\n if (typeof el == \"string\") {\n el = $(el);\n }\n for (var key in attr) if (attr[has](key)) {\n if (key.substring(0, 6) == \"xlink:\") {\n el.setAttributeNS(xlink, key.substring(6), Str(attr[key]));\n } else {\n el.setAttribute(key, Str(attr[key]));\n }\n }\n } else {\n el = R._g.doc.createElementNS(\"http://www.w3.org/2000/svg\", el);\n el.style && (el.style.webkitTapHighlightColor = \"rgba(0,0,0,0)\");\n }\n return el;\n },\n addGradientFill = function (element, gradient) {\n var type = \"linear\",\n id = element.id + gradient,\n fx = .5, fy = .5,\n o = element.node,\n SVG = element.paper,\n s = o.style,\n el = R._g.doc.getElementById(id);\n if (!el) {\n gradient = Str(gradient).replace(R._radial_gradient, function (all, _fx, _fy) {\n type = \"radial\";\n if (_fx && _fy) {\n fx = toFloat(_fx);\n fy = toFloat(_fy);\n var dir = ((fy > .5) * 2 - 1);\n pow(fx - .5, 2) + pow(fy - .5, 2) > .25 &&\n (fy = math.sqrt(.25 - pow(fx - .5, 2)) * dir + .5) &&\n fy != .5 &&\n (fy = fy.toFixed(5) - 1e-5 * dir);\n }\n return E;\n });\n gradient = gradient.split(/\\s*\\-\\s*/);\n if (type == \"linear\") {\n var angle = gradient.shift();\n angle = -toFloat(angle);\n if (isNaN(angle)) {\n return null;\n }\n var vector = [0, 0, math.cos(R.rad(angle)), math.sin(R.rad(angle))],\n max = 1 / (mmax(abs(vector[2]), abs(vector[3])) || 1);\n vector[2] *= max;\n vector[3] *= max;\n if (vector[2] < 0) {\n vector[0] = -vector[2];\n vector[2] = 0;\n }\n if (vector[3] < 0) {\n vector[1] = -vector[3];\n vector[3] = 0;\n }\n }\n var dots = R._parseDots(gradient);\n if (!dots) {\n return null;\n }\n id = id.replace(/[\\(\\)\\s,\\xb0#]/g, \"_\");\n\n if (element.gradient && id != element.gradient.id) {\n SVG.defs.removeChild(element.gradient);\n delete element.gradient;\n }\n\n if (!element.gradient) {\n el = $(type + \"Gradient\", {id: id});\n element.gradient = el;\n $(el, type == \"radial\" ? {\n fx: fx,\n fy: fy\n } : {\n x1: vector[0],\n y1: vector[1],\n x2: vector[2],\n y2: vector[3],\n gradientTransform: element.matrix.invert()\n });\n SVG.defs.appendChild(el);\n for (var i = 0, ii = dots.length; i < ii; i++) {\n el.appendChild($(\"stop\", {\n offset: dots[i].offset ? dots[i].offset : i ? \"100%\" : \"0%\",\n \"stop-color\": dots[i].color || \"#fff\"\n }));\n }\n }\n }\n $(o, {\n fill: \"url('\" + document.location + \"#\" + id + \"')\",\n opacity: 1,\n \"fill-opacity\": 1\n });\n s.fill = E;\n s.opacity = 1;\n s.fillOpacity = 1;\n return 1;\n },\n updatePosition = function (o) {\n var bbox = o.getBBox(1);\n $(o.pattern, {patternTransform: o.matrix.invert() + \" translate(\" + bbox.x + \",\" + bbox.y + \")\"});\n },\n addArrow = function (o, value, isEnd) {\n if (o.type == \"path\") {\n var values = Str(value).toLowerCase().split(\"-\"),\n p = o.paper,\n se = isEnd ? \"end\" : \"start\",\n node = o.node,\n attrs = o.attrs,\n stroke = attrs[\"stroke-width\"],\n i = values.length,\n type = \"classic\",\n from,\n to,\n dx,\n refX,\n attr,\n w = 3,\n h = 3,\n t = 5;\n while (i--) {\n switch (values[i]) {\n case \"block\":\n case \"classic\":\n case \"oval\":\n case \"diamond\":\n case \"open\":\n case \"none\":\n type = values[i];\n break;\n case \"wide\": h = 5; break;\n case \"narrow\": h = 2; break;\n case \"long\": w = 5; break;\n case \"short\": w = 2; break;\n }\n }\n if (type == \"open\") {\n w += 2;\n h += 2;\n t += 2;\n dx = 1;\n refX = isEnd ? 4 : 1;\n attr = {\n fill: \"none\",\n stroke: attrs.stroke\n };\n } else {\n refX = dx = w / 2;\n attr = {\n fill: attrs.stroke,\n stroke: \"none\"\n };\n }\n if (o._.arrows) {\n if (isEnd) {\n o._.arrows.endPath && markerCounter[o._.arrows.endPath]--;\n o._.arrows.endMarker && markerCounter[o._.arrows.endMarker]--;\n } else {\n o._.arrows.startPath && markerCounter[o._.arrows.startPath]--;\n o._.arrows.startMarker && markerCounter[o._.arrows.startMarker]--;\n }\n } else {\n o._.arrows = {};\n }\n if (type != \"none\") {\n var pathId = \"raphael-marker-\" + type,\n markerId = \"raphael-marker-\" + se + type + w + h + \"-obj\" + o.id;\n if (!R._g.doc.getElementById(pathId)) {\n p.defs.appendChild($($(\"path\"), {\n \"stroke-linecap\": \"round\",\n d: markers[type],\n id: pathId\n }));\n markerCounter[pathId] = 1;\n } else {\n markerCounter[pathId]++;\n }\n var marker = R._g.doc.getElementById(markerId),\n use;\n if (!marker) {\n marker = $($(\"marker\"), {\n id: markerId,\n markerHeight: h,\n markerWidth: w,\n orient: \"auto\",\n refX: refX,\n refY: h / 2\n });\n use = $($(\"use\"), {\n \"xlink:href\": \"#\" + pathId,\n transform: (isEnd ? \"rotate(180 \" + w / 2 + \" \" + h / 2 + \") \" : E) + \"scale(\" + w / t + \",\" + h / t + \")\",\n \"stroke-width\": (1 / ((w / t + h / t) / 2)).toFixed(4)\n });\n marker.appendChild(use);\n p.defs.appendChild(marker);\n markerCounter[markerId] = 1;\n } else {\n markerCounter[markerId]++;\n use = marker.getElementsByTagName(\"use\")[0];\n }\n $(use, attr);\n var delta = dx * (type != \"diamond\" && type != \"oval\");\n if (isEnd) {\n from = o._.arrows.startdx * stroke || 0;\n to = R.getTotalLength(attrs.path) - delta * stroke;\n } else {\n from = delta * stroke;\n to = R.getTotalLength(attrs.path) - (o._.arrows.enddx * stroke || 0);\n }\n attr = {};\n attr[\"marker-\" + se] = \"url(#\" + markerId + \")\";\n if (to || from) {\n attr.d = R.getSubpath(attrs.path, from, to);\n }\n $(node, attr);\n o._.arrows[se + \"Path\"] = pathId;\n o._.arrows[se + \"Marker\"] = markerId;\n o._.arrows[se + \"dx\"] = delta;\n o._.arrows[se + \"Type\"] = type;\n o._.arrows[se + \"String\"] = value;\n } else {\n if (isEnd) {\n from = o._.arrows.startdx * stroke || 0;\n to = R.getTotalLength(attrs.path) - from;\n } else {\n from = 0;\n to = R.getTotalLength(attrs.path) - (o._.arrows.enddx * stroke || 0);\n }\n o._.arrows[se + \"Path\"] && $(node, {d: R.getSubpath(attrs.path, from, to)});\n delete o._.arrows[se + \"Path\"];\n delete o._.arrows[se + \"Marker\"];\n delete o._.arrows[se + \"dx\"];\n delete o._.arrows[se + \"Type\"];\n delete o._.arrows[se + \"String\"];\n }\n for (attr in markerCounter) if (markerCounter[has](attr) && !markerCounter[attr]) {\n var item = R._g.doc.getElementById(attr);\n item && item.parentNode.removeChild(item);\n }\n }\n },\n dasharray = {\n \"\": [0],\n \"none\": [0],\n \"-\": [3, 1],\n \".\": [1, 1],\n \"-.\": [3, 1, 1, 1],\n \"-..\": [3, 1, 1, 1, 1, 1],\n \". \": [1, 3],\n \"- \": [4, 3],\n \"--\": [8, 3],\n \"- .\": [4, 3, 1, 3],\n \"--.\": [8, 3, 1, 3],\n \"--..\": [8, 3, 1, 3, 1, 3]\n },\n addDashes = function (o, value, params) {\n value = dasharray[Str(value).toLowerCase()];\n if (value) {\n var width = o.attrs[\"stroke-width\"] || \"1\",\n butt = {round: width, square: width, butt: 0}[o.attrs[\"stroke-linecap\"] || params[\"stroke-linecap\"]] || 0,\n dashes = [],\n i = value.length;\n while (i--) {\n dashes[i] = value[i] * width + ((i % 2) ? 1 : -1) * butt;\n }\n $(o.node, {\"stroke-dasharray\": dashes.join(\",\")});\n }\n },\n setFillAndStroke = function (o, params) {\n var node = o.node,\n attrs = o.attrs,\n vis = node.style.visibility;\n node.style.visibility = \"hidden\";\n for (var att in params) {\n if (params[has](att)) {\n if (!R._availableAttrs[has](att)) {\n continue;\n }\n var value = params[att];\n attrs[att] = value;\n switch (att) {\n case \"blur\":\n o.blur(value);\n break;\n case \"title\":\n var title = node.getElementsByTagName(\"title\");\n\n // Use the existing .\n if (title.length && (title = title[0])) {\n title.firstChild.nodeValue = value;\n } else {\n title = $(\"title\");\n var val = R._g.doc.createTextNode(value);\n title.appendChild(val);\n node.appendChild(title);\n }\n break;\n case \"href\":\n case \"target\":\n var pn = node.parentNode;\n if (pn.tagName.toLowerCase() != \"a\") {\n var hl = $(\"a\");\n pn.insertBefore(hl, node);\n hl.appendChild(node);\n pn = hl;\n }\n if (att == \"target\") {\n pn.setAttributeNS(xlink, \"show\", value == \"blank\" ? \"new\" : value);\n } else {\n pn.setAttributeNS(xlink, att, value);\n }\n break;\n case \"cursor\":\n node.style.cursor = value;\n break;\n case \"transform\":\n o.transform(value);\n break;\n case \"arrow-start\":\n addArrow(o, value);\n break;\n case \"arrow-end\":\n addArrow(o, value, 1);\n break;\n case \"clip-rect\":\n var rect = Str(value).split(separator);\n if (rect.length == 4) {\n o.clip && o.clip.parentNode.parentNode.removeChild(o.clip.parentNode);\n var el = $(\"clipPath\"),\n rc = $(\"rect\");\n el.id = R.createUUID();\n $(rc, {\n x: rect[0],\n y: rect[1],\n width: rect[2],\n height: rect[3]\n });\n el.appendChild(rc);\n o.paper.defs.appendChild(el);\n $(node, {\"clip-path\": \"url(#\" + el.id + \")\"});\n o.clip = rc;\n }\n if (!value) {\n var path = node.getAttribute(\"clip-path\");\n if (path) {\n var clip = R._g.doc.getElementById(path.replace(/(^url\\(#|\\)$)/g, E));\n clip && clip.parentNode.removeChild(clip);\n $(node, {\"clip-path\": E});\n delete o.clip;\n }\n }\n break;\n case \"path\":\n if (o.type == \"path\") {\n $(node, {d: value ? attrs.path = R._pathToAbsolute(value) : \"M0,0\"});\n o._.dirty = 1;\n if (o._.arrows) {\n \"startString\" in o._.arrows && addArrow(o, o._.arrows.startString);\n \"endString\" in o._.arrows && addArrow(o, o._.arrows.endString, 1);\n }\n }\n break;\n case \"width\":\n node.setAttribute(att, value);\n o._.dirty = 1;\n if (attrs.fx) {\n att = \"x\";\n value = attrs.x;\n } else {\n break;\n }\n case \"x\":\n if (attrs.fx) {\n value = -attrs.x - (attrs.width || 0);\n }\n case \"rx\":\n if (att == \"rx\" && o.type == \"rect\") {\n break;\n }\n case \"cx\":\n node.setAttribute(att, value);\n o.pattern && updatePosition(o);\n o._.dirty = 1;\n break;\n case \"height\":\n node.setAttribute(att, value);\n o._.dirty = 1;\n if (attrs.fy) {\n att = \"y\";\n value = attrs.y;\n } else {\n break;\n }\n case \"y\":\n if (attrs.fy) {\n value = -attrs.y - (attrs.height || 0);\n }\n case \"ry\":\n if (att == \"ry\" && o.type == \"rect\") {\n break;\n }\n case \"cy\":\n node.setAttribute(att, value);\n o.pattern && updatePosition(o);\n o._.dirty = 1;\n break;\n case \"r\":\n if (o.type == \"rect\") {\n $(node, {rx: value, ry: value});\n } else {\n node.setAttribute(att, value);\n }\n o._.dirty = 1;\n break;\n case \"src\":\n if (o.type == \"image\") {\n node.setAttributeNS(xlink, \"href\", value);\n }\n break;\n case \"stroke-width\":\n if (o._.sx != 1 || o._.sy != 1) {\n value /= mmax(abs(o._.sx), abs(o._.sy)) || 1;\n }\n node.setAttribute(att, value);\n if (attrs[\"stroke-dasharray\"]) {\n addDashes(o, attrs[\"stroke-dasharray\"], params);\n }\n if (o._.arrows) {\n \"startString\" in o._.arrows && addArrow(o, o._.arrows.startString);\n \"endString\" in o._.arrows && addArrow(o, o._.arrows.endString, 1);\n }\n break;\n case \"stroke-dasharray\":\n addDashes(o, value, params);\n break;\n case \"fill\":\n var isURL = Str(value).match(R._ISURL);\n if (isURL) {\n el = $(\"pattern\");\n var ig = $(\"image\");\n el.id = R.createUUID();\n $(el, {x: 0, y: 0, patternUnits: \"userSpaceOnUse\", height: 1, width: 1});\n $(ig, {x: 0, y: 0, \"xlink:href\": isURL[1]});\n el.appendChild(ig);\n\n (function (el) {\n R._preload(isURL[1], function () {\n var w = this.offsetWidth,\n h = this.offsetHeight;\n $(el, {width: w, height: h});\n $(ig, {width: w, height: h});\n o.paper.safari();\n });\n })(el);\n o.paper.defs.appendChild(el);\n $(node, {fill: \"url(#\" + el.id + \")\"});\n o.pattern = el;\n o.pattern && updatePosition(o);\n break;\n }\n var clr = R.getRGB(value);\n if (!clr.error) {\n delete params.gradient;\n delete attrs.gradient;\n !R.is(attrs.opacity, \"undefined\") &&\n R.is(params.opacity, \"undefined\") &&\n $(node, {opacity: attrs.opacity});\n !R.is(attrs[\"fill-opacity\"], \"undefined\") &&\n R.is(params[\"fill-opacity\"], \"undefined\") &&\n $(node, {\"fill-opacity\": attrs[\"fill-opacity\"]});\n } else if ((o.type == \"circle\" || o.type == \"ellipse\" || Str(value).charAt() != \"r\") && addGradientFill(o, value)) {\n if (\"opacity\" in attrs || \"fill-opacity\" in attrs) {\n var gradient = R._g.doc.getElementById(node.getAttribute(\"fill\").replace(/^url\\(#|\\)$/g, E));\n if (gradient) {\n var stops = gradient.getElementsByTagName(\"stop\");\n $(stops[stops.length - 1], {\"stop-opacity\": (\"opacity\" in attrs ? attrs.opacity : 1) * (\"fill-opacity\" in attrs ? attrs[\"fill-opacity\"] : 1)});\n }\n }\n attrs.gradient = value;\n attrs.fill = \"none\";\n break;\n }\n clr[has](\"opacity\") && $(node, {\"fill-opacity\": clr.opacity > 1 ? clr.opacity / 100 : clr.opacity});\n case \"stroke\":\n clr = R.getRGB(value);\n node.setAttribute(att, clr.hex);\n att == \"stroke\" && clr[has](\"opacity\") && $(node, {\"stroke-opacity\": clr.opacity > 1 ? clr.opacity / 100 : clr.opacity});\n if (att == \"stroke\" && o._.arrows) {\n \"startString\" in o._.arrows && addArrow(o, o._.arrows.startString);\n \"endString\" in o._.arrows && addArrow(o, o._.arrows.endString, 1);\n }\n break;\n case \"gradient\":\n (o.type == \"circle\" || o.type == \"ellipse\" || Str(value).charAt() != \"r\") && addGradientFill(o, value);\n break;\n case \"opacity\":\n if (attrs.gradient && !attrs[has](\"stroke-opacity\")) {\n $(node, {\"stroke-opacity\": value > 1 ? value / 100 : value});\n }\n // fall\n case \"fill-opacity\":\n if (attrs.gradient) {\n gradient = R._g.doc.getElementById(node.getAttribute(\"fill\").replace(/^url\\(#|\\)$/g, E));\n if (gradient) {\n stops = gradient.getElementsByTagName(\"stop\");\n $(stops[stops.length - 1], {\"stop-opacity\": value});\n }\n break;\n }\n default:\n att == \"font-size\" && (value = toInt(value, 10) + \"px\");\n var cssrule = att.replace(/(\\-.)/g, function (w) {\n return w.substring(1).toUpperCase();\n });\n node.style[cssrule] = value;\n o._.dirty = 1;\n node.setAttribute(att, value);\n break;\n }\n }\n }\n\n tuneText(o, params);\n node.style.visibility = vis;\n },\n leading = 1.2,\n tuneText = function (el, params) {\n if (el.type != \"text\" || !(params[has](\"text\") || params[has](\"font\") || params[has](\"font-size\") || params[has](\"x\") || params[has](\"y\"))) {\n return;\n }\n var a = el.attrs,\n node = el.node,\n fontSize = node.firstChild ? toInt(R._g.doc.defaultView.getComputedStyle(node.firstChild, E).getPropertyValue(\"font-size\"), 10) : 10;\n\n if (params[has](\"text\")) {\n a.text = params.text;\n while (node.firstChild) {\n node.removeChild(node.firstChild);\n }\n var texts = Str(params.text).split(\"\\n\"),\n tspans = [],\n tspan;\n for (var i = 0, ii = texts.length; i < ii; i++) {\n tspan = $(\"tspan\");\n i && $(tspan, {dy: fontSize * leading, x: a.x});\n tspan.appendChild(R._g.doc.createTextNode(texts[i]));\n node.appendChild(tspan);\n tspans[i] = tspan;\n }\n } else {\n tspans = node.getElementsByTagName(\"tspan\");\n for (i = 0, ii = tspans.length; i < ii; i++) if (i) {\n $(tspans[i], {dy: fontSize * leading, x: a.x});\n } else {\n $(tspans[0], {dy: 0});\n }\n }\n $(node, {x: a.x, y: a.y});\n el._.dirty = 1;\n var bb = el._getBBox(),\n dif = a.y - (bb.y + bb.height / 2);\n dif && R.is(dif, \"finite\") && $(tspans[0], {dy: dif});\n },\n getRealNode = function (node) {\n if (node.parentNode && node.parentNode.tagName.toLowerCase() === \"a\") {\n return node.parentNode;\n } else {\n return node;\n }\n },\n Element = function (node, svg) {\n var X = 0,\n Y = 0;\n /*\\\n * Element.node\n [ property (object) ]\n **\n * Gives you a reference to the DOM object, so you can assign event handlers or just mess around.\n **\n * Note: Don’t mess with it.\n > Usage\n | // draw a circle at coordinate 10,10 with radius of 10\n | var c = paper.circle(10, 10, 10);\n | c.node.onclick = function () {\n | c.attr(\"fill\", \"red\");\n | };\n \\*/\n this[0] = this.node = node;\n /*\\\n * Element.raphael\n [ property (object) ]\n **\n * Internal reference to @Raphael object. In case it is not available.\n > Usage\n | Raphael.el.red = function () {\n | var hsb = this.paper.raphael.rgb2hsb(this.attr(\"fill\"));\n | hsb.h = 1;\n | this.attr({fill: this.paper.raphael.hsb2rgb(hsb).hex});\n | }\n \\*/\n node.raphael = true;\n /*\\\n * Element.id\n [ property (number) ]\n **\n * Unique id of the element. Especially useful when you want to listen to events of the element,\n * because all events are fired in format `<module>.<action>.<id>`. Also useful for @Paper.getById method.\n \\*/\n this.id = R._oid++;\n node.raphaelid = this.id;\n this.matrix = R.matrix();\n this.realPath = null;\n /*\\\n * Element.paper\n [ property (object) ]\n **\n * Internal reference to “paper” where object drawn. Mainly for use in plugins and element extensions.\n > Usage\n | Raphael.el.cross = function () {\n | this.attr({fill: \"red\"});\n | this.paper.path(\"M10,10L50,50M50,10L10,50\")\n | .attr({stroke: \"red\"});\n | }\n \\*/\n this.paper = svg;\n this.attrs = this.attrs || {};\n this._ = {\n transform: [],\n sx: 1,\n sy: 1,\n deg: 0,\n dx: 0,\n dy: 0,\n dirty: 1\n };\n !svg.bottom && (svg.bottom = this);\n /*\\\n * Element.prev\n [ property (object) ]\n **\n * Reference to the previous element in the hierarchy.\n \\*/\n this.prev = svg.top;\n svg.top && (svg.top.next = this);\n svg.top = this;\n /*\\\n * Element.next\n [ property (object) ]\n **\n * Reference to the next element in the hierarchy.\n \\*/\n this.next = null;\n },\n elproto = R.el;\n\n Element.prototype = elproto;\n elproto.constructor = Element;\n\n R._engine.path = function (pathString, SVG) {\n var el = $(\"path\");\n SVG.canvas && SVG.canvas.appendChild(el);\n var p = new Element(el, SVG);\n p.type = \"path\";\n setFillAndStroke(p, {\n fill: \"none\",\n stroke: \"#000\",\n path: pathString\n });\n return p;\n };\n /*\\\n * Element.rotate\n [ method ]\n **\n * Deprecated! Use @Element.transform instead.\n * Adds rotation by given angle around given point to the list of\n * transformations of the element.\n > Parameters\n - deg (number) angle in degrees\n - cx (number) #optional x coordinate of the centre of rotation\n - cy (number) #optional y coordinate of the centre of rotation\n * If cx & cy aren’t specified centre of the shape is used as a point of rotation.\n = (object) @Element\n \\*/\n elproto.rotate = function (deg, cx, cy) {\n if (this.removed) {\n return this;\n }\n deg = Str(deg).split(separator);\n if (deg.length - 1) {\n cx = toFloat(deg[1]);\n cy = toFloat(deg[2]);\n }\n deg = toFloat(deg[0]);\n (cy == null) && (cx = cy);\n if (cx == null || cy == null) {\n var bbox = this.getBBox(1);\n cx = bbox.x + bbox.width / 2;\n cy = bbox.y + bbox.height / 2;\n }\n this.transform(this._.transform.concat([[\"r\", deg, cx, cy]]));\n return this;\n };\n /*\\\n * Element.scale\n [ method ]\n **\n * Deprecated! Use @Element.transform instead.\n * Adds scale by given amount relative to given point to the list of\n * transformations of the element.\n > Parameters\n - sx (number) horisontal scale amount\n - sy (number) vertical scale amount\n - cx (number) #optional x coordinate of the centre of scale\n - cy (number) #optional y coordinate of the centre of scale\n * If cx & cy aren’t specified centre of the shape is used instead.\n = (object) @Element\n \\*/\n elproto.scale = function (sx, sy, cx, cy) {\n if (this.removed) {\n return this;\n }\n sx = Str(sx).split(separator);\n if (sx.length - 1) {\n sy = toFloat(sx[1]);\n cx = toFloat(sx[2]);\n cy = toFloat(sx[3]);\n }\n sx = toFloat(sx[0]);\n (sy == null) && (sy = sx);\n (cy == null) && (cx = cy);\n if (cx == null || cy == null) {\n var bbox = this.getBBox(1);\n }\n cx = cx == null ? bbox.x + bbox.width / 2 : cx;\n cy = cy == null ? bbox.y + bbox.height / 2 : cy;\n this.transform(this._.transform.concat([[\"s\", sx, sy, cx, cy]]));\n return this;\n };\n /*\\\n * Element.translate\n [ method ]\n **\n * Deprecated! Use @Element.transform instead.\n * Adds translation by given amount to the list of transformations of the element.\n > Parameters\n - dx (number) horisontal shift\n - dy (number) vertical shift\n = (object) @Element\n \\*/\n elproto.translate = function (dx, dy) {\n if (this.removed) {\n return this;\n }\n dx = Str(dx).split(separator);\n if (dx.length - 1) {\n dy = toFloat(dx[1]);\n }\n dx = toFloat(dx[0]) || 0;\n dy = +dy || 0;\n this.transform(this._.transform.concat([[\"t\", dx, dy]]));\n return this;\n };\n /*\\\n * Element.transform\n [ method ]\n **\n * Adds transformation to the element which is separate to other attributes,\n * i.e. translation doesn’t change `x` or `y` of the rectange. The format\n * of transformation string is similar to the path string syntax:\n | \"t100,100r30,100,100s2,2,100,100r45s1.5\"\n * Each letter is a command. There are four commands: `t` is for translate, `r` is for rotate, `s` is for\n * scale and `m` is for matrix.\n *\n * There are also alternative “absolute” translation, rotation and scale: `T`, `R` and `S`. They will not take previous transformation into account. For example, `...T100,0` will always move element 100 px horisontally, while `...t100,0` could move it vertically if there is `r90` before. Just compare results of `r90t100,0` and `r90T100,0`.\n *\n * So, the example line above could be read like “translate by 100, 100; rotate 30° around 100, 100; scale twice around 100, 100;\n * rotate 45° around centre; scale 1.5 times relative to centre”. As you can see rotate and scale commands have origin\n * coordinates as optional parameters, the default is the centre point of the element.\n * Matrix accepts six parameters.\n > Usage\n | var el = paper.rect(10, 20, 300, 200);\n | // translate 100, 100, rotate 45°, translate -100, 0\n | el.transform(\"t100,100r45t-100,0\");\n | // if you want you can append or prepend transformations\n | el.transform(\"...t50,50\");\n | el.transform(\"s2...\");\n | // or even wrap\n | el.transform(\"t50,50...t-50-50\");\n | // to reset transformation call method with empty string\n | el.transform(\"\");\n | // to get current value call it without parameters\n | console.log(el.transform());\n > Parameters\n - tstr (string) #optional transformation string\n * If tstr isn’t specified\n = (string) current transformation string\n * else\n = (object) @Element\n \\*/\n elproto.transform = function (tstr) {\n var _ = this._;\n if (tstr == null) {\n return _.transform;\n }\n R._extractTransform(this, tstr);\n\n this.clip && $(this.clip, {transform: this.matrix.invert()});\n this.pattern && updatePosition(this);\n this.node && $(this.node, {transform: this.matrix});\n\n if (_.sx != 1 || _.sy != 1) {\n var sw = this.attrs[has](\"stroke-width\") ? this.attrs[\"stroke-width\"] : 1;\n this.attr({\"stroke-width\": sw});\n }\n\n return this;\n };\n /*\\\n * Element.hide\n [ method ]\n **\n * Makes element invisible. See @Element.show.\n = (object) @Element\n \\*/\n elproto.hide = function () {\n !this.removed && this.paper.safari(this.node.style.display = \"none\");\n return this;\n };\n /*\\\n * Element.show\n [ method ]\n **\n * Makes element visible. See @Element.hide.\n = (object) @Element\n \\*/\n elproto.show = function () {\n !this.removed && this.paper.safari(this.node.style.display = \"\");\n return this;\n };\n /*\\\n * Element.remove\n [ method ]\n **\n * Removes element from the paper.\n \\*/\n elproto.remove = function () {\n var node = getRealNode(this.node);\n if (this.removed || !node.parentNode) {\n return;\n }\n var paper = this.paper;\n paper.__set__ && paper.__set__.exclude(this);\n eve.unbind(\"raphael.*.*.\" + this.id);\n if (this.gradient) {\n paper.defs.removeChild(this.gradient);\n }\n R._tear(this, paper);\n\n node.parentNode.removeChild(node);\n\n // Remove custom data for element\n this.removeData();\n\n for (var i in this) {\n this[i] = typeof this[i] == \"function\" ? R._removedFactory(i) : null;\n }\n this.removed = true;\n };\n elproto._getBBox = function () {\n if (this.node.style.display == \"none\") {\n this.show();\n var hide = true;\n }\n var canvasHidden = false,\n containerStyle;\n if (this.paper.canvas.parentElement) {\n containerStyle = this.paper.canvas.parentElement.style;\n } //IE10+ can't find parentElement\n else if (this.paper.canvas.parentNode) {\n containerStyle = this.paper.canvas.parentNode.style;\n }\n\n if(containerStyle && containerStyle.display == \"none\") {\n canvasHidden = true;\n containerStyle.display = \"\";\n }\n var bbox = {};\n try {\n bbox = this.node.getBBox();\n } catch(e) {\n // Firefox 3.0.x, 25.0.1 (probably more versions affected) play badly here - possible fix\n bbox = {\n x: this.node.clientLeft,\n y: this.node.clientTop,\n width: this.node.clientWidth,\n height: this.node.clientHeight\n }\n } finally {\n bbox = bbox || {};\n if(canvasHidden){\n containerStyle.display = \"none\";\n }\n }\n hide && this.hide();\n return bbox;\n };\n /*\\\n * Element.attr\n [ method ]\n **\n * Sets the attributes of the element.\n > Parameters\n - attrName (string) attribute’s name\n - value (string) value\n * or\n - params (object) object of name/value pairs\n * or\n - attrName (string) attribute’s name\n * or\n - attrNames (array) in this case method returns array of current values for given attribute names\n = (object) @Element if attrsName & value or params are passed in.\n = (...) value of the attribute if only attrsName is passed in.\n = (array) array of values of the attribute if attrsNames is passed in.\n = (object) object of attributes if nothing is passed in.\n > Possible parameters\n # <p>Please refer to the <a href=\"http://www.w3.org/TR/SVG/\" title=\"The W3C Recommendation for the SVG language describes these properties in detail.\">SVG specification</a> for an explanation of these parameters.</p>\n o arrow-end (string) arrowhead on the end of the path. The format for string is `<type>[-<width>[-<length>]]`. Possible types: `classic`, `block`, `open`, `oval`, `diamond`, `none`, width: `wide`, `narrow`, `medium`, length: `long`, `short`, `midium`.\n o clip-rect (string) comma or space separated values: x, y, width and height\n o cursor (string) CSS type of the cursor\n o cx (number) the x-axis coordinate of the center of the circle, or ellipse\n o cy (number) the y-axis coordinate of the center of the circle, or ellipse\n o fill (string) colour, gradient or image\n o fill-opacity (number)\n o font (string)\n o font-family (string)\n o font-size (number) font size in pixels\n o font-weight (string)\n o height (number)\n o href (string) URL, if specified element behaves as hyperlink\n o opacity (number)\n o path (string) SVG path string format\n o r (number) radius of the circle, ellipse or rounded corner on the rect\n o rx (number) horisontal radius of the ellipse\n o ry (number) vertical radius of the ellipse\n o src (string) image URL, only works for @Element.image element\n o stroke (string) stroke colour\n o stroke-dasharray (string) [“”, “`-`”, “`.`”, “`-.`”, “`-..`”, “`. `”, “`- `”, “`--`”, “`- .`”, “`--.`”, “`--..`”]\n o stroke-linecap (string) [“`butt`”, “`square`”, “`round`”]\n o stroke-linejoin (string) [“`bevel`”, “`round`”, “`miter`”]\n o stroke-miterlimit (number)\n o stroke-opacity (number)\n o stroke-width (number) stroke width in pixels, default is '1'\n o target (string) used with href\n o text (string) contents of the text element. Use `\\n` for multiline text\n o text-anchor (string) [“`start`”, “`middle`”, “`end`”], default is “`middle`”\n o title (string) will create tooltip with a given text\n o transform (string) see @Element.transform\n o width (number)\n o x (number)\n o y (number)\n > Gradients\n * Linear gradient format: “`‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`90-#fff-#000`” – 90°\n * gradient from white to black or “`0-#fff-#f00:20-#000`” – 0° gradient from white via red (at 20%) to black.\n *\n * radial gradient: “`r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›`”, example: “`r#fff-#000`” –\n * gradient from white to black or “`r(0.25, 0.75)#fff-#000`” – gradient from white to black with focus point\n * at 0.25, 0.75. Focus point coordinates are in 0..1 range. Radial gradients can only be applied to circles and ellipses.\n > Path String\n # <p>Please refer to <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" title=\"Details of a path’s data attribute’s format are described in the SVG specification.\">SVG documentation regarding path string</a>. Raphaël fully supports it.</p>\n > Colour Parsing\n # <ul>\n # <li>Colour name (“<code>red</code>”, “<code>green</code>”, “<code>cornflowerblue</code>”, etc)</li>\n # <li>#••• — shortened HTML colour: (“<code>#000</code>”, “<code>#fc0</code>”, etc)</li>\n # <li>#•••••• — full length HTML colour: (“<code>#000000</code>”, “<code>#bd2300</code>”)</li>\n # <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<code>rgb(200, 100, 0)</code>”)</li>\n # <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<code>rgb(100%, 175%, 0%)</code>”)</li>\n # <li>rgba(•••, •••, •••, •••) — red, green and blue channels’ values: (“<code>rgba(200, 100, 0, .5)</code>”)</li>\n # <li>rgba(•••%, •••%, •••%, •••%) — same as above, but in %: (“<code>rgba(100%, 175%, 0%, 50%)</code>”)</li>\n # <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<code>hsb(0.5, 0.25, 1)</code>”)</li>\n # <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>\n # <li>hsba(•••, •••, •••, •••) — same as above, but with opacity</li>\n # <li>hsl(•••, •••, •••) — almost the same as hsb, see <a href=\"http://en.wikipedia.org/wiki/HSL_and_HSV\" title=\"HSL and HSV - Wikipedia, the free encyclopedia\">Wikipedia page</a></li>\n # <li>hsl(•••%, •••%, •••%) — same as above, but in %</li>\n # <li>hsla(•••, •••, •••, •••) — same as above, but with opacity</li>\n # <li>Optionally for hsb and hsl you could specify hue as a degree: “<code>hsl(240deg, 1, .5)</code>” or, if you want to go fancy, “<code>hsl(240°, 1, .5)</code>”</li>\n # </ul>\n \\*/\n elproto.attr = function (name, value) {\n if (this.removed) {\n return this;\n }\n if (name == null) {\n var res = {};\n for (var a in this.attrs) if (this.attrs[has](a)) {\n res[a] = this.attrs[a];\n }\n res.gradient && res.fill == \"none\" && (res.fill = res.gradient) && delete res.gradient;\n res.transform = this._.transform;\n return res;\n }\n if (value == null && R.is(name, \"string\")) {\n if (name == \"fill\" && this.attrs.fill == \"none\" && this.attrs.gradient) {\n return this.attrs.gradient;\n }\n if (name == \"transform\") {\n return this._.transform;\n }\n var names = name.split(separator),\n out = {};\n for (var i = 0, ii = names.length; i < ii; i++) {\n name = names[i];\n if (name in this.attrs) {\n out[name] = this.attrs[name];\n } else if (R.is(this.paper.customAttributes[name], \"function\")) {\n out[name] = this.paper.customAttributes[name].def;\n } else {\n out[name] = R._availableAttrs[name];\n }\n }\n return ii - 1 ? out : out[names[0]];\n }\n if (value == null && R.is(name, \"array\")) {\n out = {};\n for (i = 0, ii = name.length; i < ii; i++) {\n out[name[i]] = this.attr(name[i]);\n }\n return out;\n }\n if (value != null) {\n var params = {};\n params[name] = value;\n } else if (name != null && R.is(name, \"object\")) {\n params = name;\n }\n for (var key in params) {\n eve(\"raphael.attr.\" + key + \".\" + this.id, this, params[key]);\n }\n for (key in this.paper.customAttributes) if (this.paper.customAttributes[has](key) && params[has](key) && R.is(this.paper.customAttributes[key], \"function\")) {\n var par = this.paper.customAttributes[key].apply(this, [].concat(params[key]));\n this.attrs[key] = params[key];\n for (var subkey in par) if (par[has](subkey)) {\n params[subkey] = par[subkey];\n }\n }\n setFillAndStroke(this, params);\n return this;\n };\n /*\\\n * Element.toFront\n [ method ]\n **\n * Moves the element so it is the closest to the viewer’s eyes, on top of other elements.\n = (object) @Element\n \\*/\n elproto.toFront = function () {\n if (this.removed) {\n return this;\n }\n var node = getRealNode(this.node);\n node.parentNode.appendChild(node);\n var svg = this.paper;\n svg.top != this && R._tofront(this, svg);\n return this;\n };\n /*\\\n * Element.toBack\n [ method ]\n **\n * Moves the element so it is the furthest from the viewer’s eyes, behind other elements.\n = (object) @Element\n \\*/\n elproto.toBack = function () {\n if (this.removed) {\n return this;\n }\n var node = getRealNode(this.node);\n var parentNode = node.parentNode;\n parentNode.insertBefore(node, parentNode.firstChild);\n R._toback(this, this.paper);\n var svg = this.paper;\n return this;\n };\n /*\\\n * Element.insertAfter\n [ method ]\n **\n * Inserts current object after the given one.\n = (object) @Element\n \\*/\n elproto.insertAfter = function (element) {\n if (this.removed || !element) {\n return this;\n }\n\n var node = getRealNode(this.node);\n var afterNode = getRealNode(element.node || element[element.length - 1].node);\n if (afterNode.nextSibling) {\n afterNode.parentNode.insertBefore(node, afterNode.nextSibling);\n } else {\n afterNode.parentNode.appendChild(node);\n }\n R._insertafter(this, element, this.paper);\n return this;\n };\n /*\\\n * Element.insertBefore\n [ method ]\n **\n * Inserts current object before the given one.\n = (object) @Element\n \\*/\n elproto.insertBefore = function (element) {\n if (this.removed || !element) {\n return this;\n }\n\n var node = getRealNode(this.node);\n var beforeNode = getRealNode(element.node || element[0].node);\n beforeNode.parentNode.insertBefore(node, beforeNode);\n R._insertbefore(this, element, this.paper);\n return this;\n };\n elproto.blur = function (size) {\n // Experimental. No Safari support. Use it on your own risk.\n var t = this;\n if (+size !== 0) {\n var fltr = $(\"filter\"),\n blur = $(\"feGaussianBlur\");\n t.attrs.blur = size;\n fltr.id = R.createUUID();\n $(blur, {stdDeviation: +size || 1.5});\n fltr.appendChild(blur);\n t.paper.defs.appendChild(fltr);\n t._blur = fltr;\n $(t.node, {filter: \"url(#\" + fltr.id + \")\"});\n } else {\n if (t._blur) {\n t._blur.parentNode.removeChild(t._blur);\n delete t._blur;\n delete t.attrs.blur;\n }\n t.node.removeAttribute(\"filter\");\n }\n return t;\n };\n R._engine.circle = function (svg, x, y, r) {\n var el = $(\"circle\");\n svg.canvas && svg.canvas.appendChild(el);\n var res = new Element(el, svg);\n res.attrs = {cx: x, cy: y, r: r, fill: \"none\", stroke: \"#000\"};\n res.type = \"circle\";\n $(el, res.attrs);\n return res;\n };\n R._engine.rect = function (svg, x, y, w, h, r) {\n var el = $(\"rect\");\n svg.canvas && svg.canvas.appendChild(el);\n var res = new Element(el, svg);\n res.attrs = {x: x, y: y, width: w, height: h, rx: r || 0, ry: r || 0, fill: \"none\", stroke: \"#000\"};\n res.type = \"rect\";\n $(el, res.attrs);\n return res;\n };\n R._engine.ellipse = function (svg, x, y, rx, ry) {\n var el = $(\"ellipse\");\n svg.canvas && svg.canvas.appendChild(el);\n var res = new Element(el, svg);\n res.attrs = {cx: x, cy: y, rx: rx, ry: ry, fill: \"none\", stroke: \"#000\"};\n res.type = \"ellipse\";\n $(el, res.attrs);\n return res;\n };\n R._engine.image = function (svg, src, x, y, w, h) {\n var el = $(\"image\");\n $(el, {x: x, y: y, width: w, height: h, preserveAspectRatio: \"none\"});\n el.setAttributeNS(xlink, \"href\", src);\n svg.canvas && svg.canvas.appendChild(el);\n var res = new Element(el, svg);\n res.attrs = {x: x, y: y, width: w, height: h, src: src};\n res.type = \"image\";\n return res;\n };\n R._engine.text = function (svg, x, y, text) {\n var el = $(\"text\");\n svg.canvas && svg.canvas.appendChild(el);\n var res = new Element(el, svg);\n res.attrs = {\n x: x,\n y: y,\n \"text-anchor\": \"middle\",\n text: text,\n \"font-family\": R._availableAttrs[\"font-family\"],\n \"font-size\": R._availableAttrs[\"font-size\"],\n stroke: \"none\",\n fill: \"#000\"\n };\n res.type = \"text\";\n setFillAndStroke(res, res.attrs);\n return res;\n };\n R._engine.setSize = function (width, height) {\n this.width = width || this.width;\n this.height = height || this.height;\n this.canvas.setAttribute(\"width\", this.width);\n this.canvas.setAttribute(\"height\", this.height);\n if (this._viewBox) {\n this.setViewBox.apply(this, this._viewBox);\n }\n return this;\n };\n R._engine.create = function () {\n var con = R._getContainer.apply(0, arguments),\n container = con && con.container,\n x = con.x,\n y = con.y,\n width = con.width,\n height = con.height;\n if (!container) {\n throw new Error(\"SVG container not found.\");\n }\n var cnvs = $(\"svg\"),\n css = \"overflow:hidden;\",\n isFloating;\n x = x || 0;\n y = y || 0;\n width = width || 512;\n height = height || 342;\n $(cnvs, {\n height: height,\n version: 1.1,\n width: width,\n xmlns: \"http://www.w3.org/2000/svg\",\n \"xmlns:xlink\": \"http://www.w3.org/1999/xlink\"\n });\n if (container == 1) {\n cnvs.style.cssText = css + \"position:absolute;left:\" + x + \"px;top:\" + y + \"px\";\n R._g.doc.body.appendChild(cnvs);\n isFloating = 1;\n } else {\n cnvs.style.cssText = css + \"position:relative\";\n if (container.firstChild) {\n container.insertBefore(cnvs, container.firstChild);\n } else {\n container.appendChild(cnvs);\n }\n }\n container = new R._Paper;\n container.width = width;\n container.height = height;\n container.canvas = cnvs;\n container.clear();\n container._left = container._top = 0;\n isFloating && (container.renderfix = function () {});\n container.renderfix();\n return container;\n };\n R._engine.setViewBox = function (x, y, w, h, fit) {\n eve(\"raphael.setViewBox\", this, this._viewBox, [x, y, w, h, fit]);\n var paperSize = this.getSize(),\n size = mmax(w / paperSize.width, h / paperSize.height),\n top = this.top,\n aspectRatio = fit ? \"xMidYMid meet\" : \"xMinYMin\",\n vb,\n sw;\n if (x == null) {\n if (this._vbSize) {\n size = 1;\n }\n delete this._vbSize;\n vb = \"0 0 \" + this.width + S + this.height;\n } else {\n this._vbSize = size;\n vb = x + S + y + S + w + S + h;\n }\n $(this.canvas, {\n viewBox: vb,\n preserveAspectRatio: aspectRatio\n });\n while (size && top) {\n sw = \"stroke-width\" in top.attrs ? top.attrs[\"stroke-width\"] : 1;\n top.attr({\"stroke-width\": sw});\n top._.dirty = 1;\n top._.dirtyT = 1;\n top = top.prev;\n }\n this._viewBox = [x, y, w, h, !!fit];\n return this;\n };\n /*\\\n * Paper.renderfix\n [ method ]\n **\n * Fixes the issue of Firefox and IE9 regarding subpixel rendering. If paper is dependant\n * on other elements after reflow it could shift half pixel which cause for lines to lost their crispness.\n * This method fixes the issue.\n **\n Special thanks to Mariusz Nowak (http://www.medikoo.com/) for this method.\n \\*/\n R.prototype.renderfix = function () {\n var cnvs = this.canvas,\n s = cnvs.style,\n pos;\n try {\n pos = cnvs.getScreenCTM() || cnvs.createSVGMatrix();\n } catch (e) {\n pos = cnvs.createSVGMatrix();\n }\n var left = -pos.e % 1,\n top = -pos.f % 1;\n if (left || top) {\n if (left) {\n this._left = (this._left + left) % 1;\n s.left = this._left + \"px\";\n }\n if (top) {\n this._top = (this._top + top) % 1;\n s.top = this._top + \"px\";\n }\n }\n };\n /*\\\n * Paper.clear\n [ method ]\n **\n * Clears the paper, i.e. removes all the elements.\n \\*/\n R.prototype.clear = function () {\n R.eve(\"raphael.clear\", this);\n var c = this.canvas;\n while (c.firstChild) {\n c.removeChild(c.firstChild);\n }\n this.bottom = this.top = null;\n (this.desc = $(\"desc\")).appendChild(R._g.doc.createTextNode(\"Created with Rapha\\xebl \" + R.version));\n c.appendChild(this.desc);\n c.appendChild(this.defs = $(\"defs\"));\n };\n /*\\\n * Paper.remove\n [ method ]\n **\n * Removes the paper from the DOM.\n \\*/\n R.prototype.remove = function () {\n eve(\"raphael.remove\", this);\n this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas);\n for (var i in this) {\n this[i] = typeof this[i] == \"function\" ? R._removedFactory(i) : null;\n }\n };\n var setproto = R.st;\n for (var method in elproto) if (elproto[has](method) && !setproto[has](method)) {\n setproto[method] = (function (methodname) {\n return function () {\n var arg = arguments;\n return this.forEach(function (el) {\n el[methodname].apply(el, arg);\n });\n };\n })(method);\n }\n})();\n\n// ┌─────────────────────────────────────────────────────────────────────┐ \\\\\n// │ Raphaël - JavaScript Vector Library │ \\\\\n// ├─────────────────────────────────────────────────────────────────────┤ \\\\\n// │ VML Module │ \\\\\n// ├─────────────────────────────────────────────────────────────────────┤ \\\\\n// │ Copyright (c) 2008-2011 Dmitry Baranovskiy (http://raphaeljs.com) │ \\\\\n// │ Copyright (c) 2008-2011 Sencha Labs (http://sencha.com) │ \\\\\n// │ Licensed under the MIT (http://raphaeljs.com/license.html) license. │ \\\\\n// └─────────────────────────────────────────────────────────────────────┘ \\\\\n\n(function(){\n if (!R.vml) {\n return;\n }\n var has = \"hasOwnProperty\",\n Str = String,\n toFloat = parseFloat,\n math = Math,\n round = math.round,\n mmax = math.max,\n mmin = math.min,\n abs = math.abs,\n fillString = \"fill\",\n separator = /[, ]+/,\n eve = R.eve,\n ms = \" progid:DXImageTransform.Microsoft\",\n S = \" \",\n E = \"\",\n map = {M: \"m\", L: \"l\", C: \"c\", Z: \"x\", m: \"t\", l: \"r\", c: \"v\", z: \"x\"},\n bites = /([clmz]),?([^clmz]*)/gi,\n blurregexp = / progid:\\S+Blur\\([^\\)]+\\)/g,\n val = /-?[^,\\s-]+/g,\n cssDot = \"position:absolute;left:0;top:0;width:1px;height:1px;behavior:url(#default#VML)\",\n zoom = 21600,\n pathTypes = {path: 1, rect: 1, image: 1},\n ovalTypes = {circle: 1, ellipse: 1},\n path2vml = function (path) {\n var total = /[ahqstv]/ig,\n command = R._pathToAbsolute;\n Str(path).match(total) && (command = R._path2curve);\n total = /[clmz]/g;\n if (command == R._pathToAbsolute && !Str(path).match(total)) {\n var res = Str(path).replace(bites, function (all, command, args) {\n var vals = [],\n isMove = command.toLowerCase() == \"m\",\n res = map[command];\n args.replace(val, function (value) {\n if (isMove && vals.length == 2) {\n res += vals + map[command == \"m\" ? \"l\" : \"L\"];\n vals = [];\n }\n vals.push(round(value * zoom));\n });\n return res + vals;\n });\n return res;\n }\n var pa = command(path), p, r;\n res = [];\n for (var i = 0, ii = pa.length; i < ii; i++) {\n p = pa[i];\n r = pa[i][0].toLowerCase();\n r == \"z\" && (r = \"x\");\n for (var j = 1, jj = p.length; j < jj; j++) {\n r += round(p[j] * zoom) + (j != jj - 1 ? \",\" : E);\n }\n res.push(r);\n }\n return res.join(S);\n },\n compensation = function (deg, dx, dy) {\n var m = R.matrix();\n m.rotate(-deg, .5, .5);\n return {\n dx: m.x(dx, dy),\n dy: m.y(dx, dy)\n };\n },\n setCoords = function (p, sx, sy, dx, dy, deg) {\n var _ = p._,\n m = p.matrix,\n fillpos = _.fillpos,\n o = p.node,\n s = o.style,\n y = 1,\n flip = \"\",\n dxdy,\n kx = zoom / sx,\n ky = zoom / sy;\n s.visibility = \"hidden\";\n if (!sx || !sy) {\n return;\n }\n o.coordsize = abs(kx) + S + abs(ky);\n s.rotation = deg * (sx * sy < 0 ? -1 : 1);\n if (deg) {\n var c = compensation(deg, dx, dy);\n dx = c.dx;\n dy = c.dy;\n }\n sx < 0 && (flip += \"x\");\n sy < 0 && (flip += \" y\") && (y = -1);\n s.flip = flip;\n o.coordorigin = (dx * -kx) + S + (dy * -ky);\n if (fillpos || _.fillsize) {\n var fill = o.getElementsByTagName(fillString);\n fill = fill && fill[0];\n o.removeChild(fill);\n if (fillpos) {\n c = compensation(deg, m.x(fillpos[0], fillpos[1]), m.y(fillpos[0], fillpos[1]));\n fill.position = c.dx * y + S + c.dy * y;\n }\n if (_.fillsize) {\n fill.size = _.fillsize[0] * abs(sx) + S + _.fillsize[1] * abs(sy);\n }\n o.appendChild(fill);\n }\n s.visibility = \"visible\";\n };\n R.toString = function () {\n return \"Your browser doesn\\u2019t support SVG. Falling down to VML.\\nYou are running Rapha\\xebl \" + this.version;\n };\n var addArrow = function (o, value, isEnd) {\n var values = Str(value).toLowerCase().split(\"-\"),\n se = isEnd ? \"end\" : \"start\",\n i = values.length,\n type = \"classic\",\n w = \"medium\",\n h = \"medium\";\n while (i--) {\n switch (values[i]) {\n case \"block\":\n case \"classic\":\n case \"oval\":\n case \"diamond\":\n case \"open\":\n case \"none\":\n type = values[i];\n break;\n case \"wide\":\n case \"narrow\": h = values[i]; break;\n case \"long\":\n case \"short\": w = values[i]; break;\n }\n }\n var stroke = o.node.getElementsByTagName(\"stroke\")[0];\n stroke[se + \"arrow\"] = type;\n stroke[se + \"arrowlength\"] = w;\n stroke[se + \"arrowwidth\"] = h;\n },\n setFillAndStroke = function (o, params) {\n // o.paper.canvas.style.display = \"none\";\n o.attrs = o.attrs || {};\n var node = o.node,\n a = o.attrs,\n s = node.style,\n xy,\n newpath = pathTypes[o.type] && (params.x != a.x || params.y != a.y || params.width != a.width || params.height != a.height || params.cx != a.cx || params.cy != a.cy || params.rx != a.rx || params.ry != a.ry || params.r != a.r),\n isOval = ovalTypes[o.type] && (a.cx != params.cx || a.cy != params.cy || a.r != params.r || a.rx != params.rx || a.ry != params.ry),\n res = o;\n\n\n for (var par in params) if (params[has](par)) {\n a[par] = params[par];\n }\n if (newpath) {\n a.path = R._getPath[o.type](o);\n o._.dirty = 1;\n }\n params.href && (node.href = params.href);\n params.title && (node.title = params.title);\n params.target && (node.target = params.target);\n params.cursor && (s.cursor = params.cursor);\n \"blur\" in params && o.blur(params.blur);\n if (params.path && o.type == \"path\" || newpath) {\n node.path = path2vml(~Str(a.path).toLowerCase().indexOf(\"r\") ? R._pathToAbsolute(a.path) : a.path);\n o._.dirty = 1;\n if (o.type == \"image\") {\n o._.fillpos = [a.x, a.y];\n o._.fillsize = [a.width, a.height];\n setCoords(o, 1, 1, 0, 0, 0);\n }\n }\n \"transform\" in params && o.transform(params.transform);\n if (isOval) {\n var cx = +a.cx,\n cy = +a.cy,\n rx = +a.rx || +a.r || 0,\n ry = +a.ry || +a.r || 0;\n node.path = R.format(\"ar{0},{1},{2},{3},{4},{1},{4},{1}x\", round((cx - rx) * zoom), round((cy - ry) * zoom), round((cx + rx) * zoom), round((cy + ry) * zoom), round(cx * zoom));\n o._.dirty = 1;\n }\n if (\"clip-rect\" in params) {\n var rect = Str(params[\"clip-rect\"]).split(separator);\n if (rect.length == 4) {\n rect[2] = +rect[2] + (+rect[0]);\n rect[3] = +rect[3] + (+rect[1]);\n var div = node.clipRect || R._g.doc.createElement(\"div\"),\n dstyle = div.style;\n dstyle.clip = R.format(\"rect({1}px {2}px {3}px {0}px)\", rect);\n if (!node.clipRect) {\n dstyle.position = \"absolute\";\n dstyle.top = 0;\n dstyle.left = 0;\n dstyle.width = o.paper.width + \"px\";\n dstyle.height = o.paper.height + \"px\";\n node.parentNode.insertBefore(div, node);\n div.appendChild(node);\n node.clipRect = div;\n }\n }\n if (!params[\"clip-rect\"]) {\n node.clipRect && (node.clipRect.style.clip = \"auto\");\n }\n }\n if (o.textpath) {\n var textpathStyle = o.textpath.style;\n params.font && (textpathStyle.font = params.font);\n params[\"font-family\"] && (textpathStyle.fontFamily = '\"' + params[\"font-family\"].split(\",\")[0].replace(/^['\"]+|['\"]+$/g, E) + '\"');\n params[\"font-size\"] && (textpathStyle.fontSize = params[\"font-size\"]);\n params[\"font-weight\"] && (textpathStyle.fontWeight = params[\"font-weight\"]);\n params[\"font-style\"] && (textpathStyle.fontStyle = params[\"font-style\"]);\n }\n if (\"arrow-start\" in params) {\n addArrow(res, params[\"arrow-start\"]);\n }\n if (\"arrow-end\" in params) {\n addArrow(res, params[\"arrow-end\"], 1);\n }\n if (params.opacity != null || \n params[\"stroke-width\"] != null ||\n params.fill != null ||\n params.src != null ||\n params.stroke != null ||\n params[\"stroke-width\"] != null ||\n params[\"stroke-opacity\"] != null ||\n params[\"fill-opacity\"] != null ||\n params[\"stroke-dasharray\"] != null ||\n params[\"stroke-miterlimit\"] != null ||\n params[\"stroke-linejoin\"] != null ||\n params[\"stroke-linecap\"] != null) {\n var fill = node.getElementsByTagName(fillString),\n newfill = false;\n fill = fill && fill[0];\n !fill && (newfill = fill = createNode(fillString));\n if (o.type == \"image\" && params.src) {\n fill.src = params.src;\n }\n params.fill && (fill.on = true);\n if (fill.on == null || params.fill == \"none\" || params.fill === null) {\n fill.on = false;\n }\n if (fill.on && params.fill) {\n var isURL = Str(params.fill).match(R._ISURL);\n if (isURL) {\n fill.parentNode == node && node.removeChild(fill);\n fill.rotate = true;\n fill.src = isURL[1];\n fill.type = \"tile\";\n var bbox = o.getBBox(1);\n fill.position = bbox.x + S + bbox.y;\n o._.fillpos = [bbox.x, bbox.y];\n\n R._preload(isURL[1], function () {\n o._.fillsize = [this.offsetWidth, this.offsetHeight];\n });\n } else {\n fill.color = R.getRGB(params.fill).hex;\n fill.src = E;\n fill.type = \"solid\";\n if (R.getRGB(params.fill).error && (res.type in {circle: 1, ellipse: 1} || Str(params.fill).charAt() != \"r\") && addGradientFill(res, params.fill, fill)) {\n a.fill = \"none\";\n a.gradient = params.fill;\n fill.rotate = false;\n }\n }\n }\n if (\"fill-opacity\" in params || \"opacity\" in params) {\n var opacity = ((+a[\"fill-opacity\"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+R.getRGB(params.fill).o + 1 || 2) - 1);\n opacity = mmin(mmax(opacity, 0), 1);\n fill.opacity = opacity;\n if (fill.src) {\n fill.color = \"none\";\n }\n }\n node.appendChild(fill);\n var stroke = (node.getElementsByTagName(\"stroke\") && node.getElementsByTagName(\"stroke\")[0]),\n newstroke = false;\n !stroke && (newstroke = stroke = createNode(\"stroke\"));\n if ((params.stroke && params.stroke != \"none\") ||\n params[\"stroke-width\"] ||\n params[\"stroke-opacity\"] != null ||\n params[\"stroke-dasharray\"] ||\n params[\"stroke-miterlimit\"] ||\n params[\"stroke-linejoin\"] ||\n params[\"stroke-linecap\"]) {\n stroke.on = true;\n }\n (params.stroke == \"none\" || params.stroke === null || stroke.on == null || params.stroke == 0 || params[\"stroke-width\"] == 0) && (stroke.on = false);\n var strokeColor = R.getRGB(params.stroke);\n stroke.on && params.stroke && (stroke.color = strokeColor.hex);\n opacity = ((+a[\"stroke-opacity\"] + 1 || 2) - 1) * ((+a.opacity + 1 || 2) - 1) * ((+strokeColor.o + 1 || 2) - 1);\n var width = (toFloat(params[\"stroke-width\"]) || 1) * .75;\n opacity = mmin(mmax(opacity, 0), 1);\n params[\"stroke-width\"] == null && (width = a[\"stroke-width\"]);\n params[\"stroke-width\"] && (stroke.weight = width);\n width && width < 1 && (opacity *= width) && (stroke.weight = 1);\n stroke.opacity = opacity;\n \n params[\"stroke-linejoin\"] && (stroke.joinstyle = params[\"stroke-linejoin\"] || \"miter\");\n stroke.miterlimit = params[\"stroke-miterlimit\"] || 8;\n params[\"stroke-linecap\"] && (stroke.endcap = params[\"stroke-linecap\"] == \"butt\" ? \"flat\" : params[\"stroke-linecap\"] == \"square\" ? \"square\" : \"round\");\n if (\"stroke-dasharray\" in params) {\n var dasharray = {\n \"-\": \"shortdash\",\n \".\": \"shortdot\",\n \"-.\": \"shortdashdot\",\n \"-..\": \"shortdashdotdot\",\n \". \": \"dot\",\n \"- \": \"dash\",\n \"--\": \"longdash\",\n \"- .\": \"dashdot\",\n \"--.\": \"longdashdot\",\n \"--..\": \"longdashdotdot\"\n };\n stroke.dashstyle = dasharray[has](params[\"stroke-dasharray\"]) ? dasharray[params[\"stroke-dasharray\"]] : E;\n }\n newstroke && node.appendChild(stroke);\n }\n if (res.type == \"text\") {\n res.paper.canvas.style.display = E;\n var span = res.paper.span,\n m = 100,\n fontSize = a.font && a.font.match(/\\d+(?:\\.\\d*)?(?=px)/);\n s = span.style;\n a.font && (s.font = a.font);\n a[\"font-family\"] && (s.fontFamily = a[\"font-family\"]);\n a[\"font-weight\"] && (s.fontWeight = a[\"font-weight\"]);\n a[\"font-style\"] && (s.fontStyle = a[\"font-style\"]);\n fontSize = toFloat(a[\"font-size\"] || fontSize && fontSize[0]) || 10;\n s.fontSize = fontSize * m + \"px\";\n res.textpath.string && (span.innerHTML = Str(res.textpath.string).replace(/</g, \"<\").replace(/&/g, \"&\").replace(/\\n/g, \"<br>\"));\n var brect = span.getBoundingClientRect();\n res.W = a.w = (brect.right - brect.left) / m;\n res.H = a.h = (brect.bottom - brect.top) / m;\n // res.paper.canvas.style.display = \"none\";\n res.X = a.x;\n res.Y = a.y + res.H / 2;\n\n (\"x\" in params || \"y\" in params) && (res.path.v = R.format(\"m{0},{1}l{2},{1}\", round(a.x * zoom), round(a.y * zoom), round(a.x * zoom) + 1));\n var dirtyattrs = [\"x\", \"y\", \"text\", \"font\", \"font-family\", \"font-weight\", \"font-style\", \"font-size\"];\n for (var d = 0, dd = dirtyattrs.length; d < dd; d++) if (dirtyattrs[d] in params) {\n res._.dirty = 1;\n break;\n }\n \n // text-anchor emulation\n switch (a[\"text-anchor\"]) {\n case \"start\":\n res.textpath.style[\"v-text-align\"] = \"left\";\n res.bbx = res.W / 2;\n break;\n case \"end\":\n res.textpath.style[\"v-text-align\"] = \"right\";\n res.bbx = -res.W / 2;\n break;\n default:\n res.textpath.style[\"v-text-align\"] = \"center\";\n res.bbx = 0;\n break;\n }\n res.textpath.style[\"v-text-kern\"] = true;\n }\n // res.paper.canvas.style.display = E;\n },\n addGradientFill = function (o, gradient, fill) {\n o.attrs = o.attrs || {};\n var attrs = o.attrs,\n pow = Math.pow,\n opacity,\n oindex,\n type = \"linear\",\n fxfy = \".5 .5\";\n o.attrs.gradient = gradient;\n gradient = Str(gradient).replace(R._radial_gradient, function (all, fx, fy) {\n type = \"radial\";\n if (fx && fy) {\n fx = toFloat(fx);\n fy = toFloat(fy);\n pow(fx - .5, 2) + pow(fy - .5, 2) > .25 && (fy = math.sqrt(.25 - pow(fx - .5, 2)) * ((fy > .5) * 2 - 1) + .5);\n fxfy = fx + S + fy;\n }\n return E;\n });\n gradient = gradient.split(/\\s*\\-\\s*/);\n if (type == \"linear\") {\n var angle = gradient.shift();\n angle = -toFloat(angle);\n if (isNaN(angle)) {\n return null;\n }\n }\n var dots = R._parseDots(gradient);\n if (!dots) {\n return null;\n }\n o = o.shape || o.node;\n if (dots.length) {\n o.removeChild(fill);\n fill.on = true;\n fill.method = \"none\";\n fill.color = dots[0].color;\n fill.color2 = dots[dots.length - 1].color;\n var clrs = [];\n for (var i = 0, ii = dots.length; i < ii; i++) {\n dots[i].offset && clrs.push(dots[i].offset + S + dots[i].color);\n }\n fill.colors = clrs.length ? clrs.join() : \"0% \" + fill.color;\n if (type == \"radial\") {\n fill.type = \"gradientTitle\";\n fill.focus = \"100%\";\n fill.focussize = \"0 0\";\n fill.focusposition = fxfy;\n fill.angle = 0;\n } else {\n // fill.rotate= true;\n fill.type = \"gradient\";\n fill.angle = (270 - angle) % 360;\n }\n o.appendChild(fill);\n }\n return 1;\n },\n Element = function (node, vml) {\n this[0] = this.node = node;\n node.raphael = true;\n this.id = R._oid++;\n node.raphaelid = this.id;\n this.X = 0;\n this.Y = 0;\n this.attrs = {};\n this.paper = vml;\n this.matrix = R.matrix();\n this._ = {\n transform: [],\n sx: 1,\n sy: 1,\n dx: 0,\n dy: 0,\n deg: 0,\n dirty: 1,\n dirtyT: 1\n };\n !vml.bottom && (vml.bottom = this);\n this.prev = vml.top;\n vml.top && (vml.top.next = this);\n vml.top = this;\n this.next = null;\n };\n var elproto = R.el;\n\n Element.prototype = elproto;\n elproto.constructor = Element;\n elproto.transform = function (tstr) {\n if (tstr == null) {\n return this._.transform;\n }\n var vbs = this.paper._viewBoxShift,\n vbt = vbs ? \"s\" + [vbs.scale, vbs.scale] + \"-1-1t\" + [vbs.dx, vbs.dy] : E,\n oldt;\n if (vbs) {\n oldt = tstr = Str(tstr).replace(/\\.{3}|\\u2026/g, this._.transform || E);\n }\n R._extractTransform(this, vbt + tstr);\n var matrix = this.matrix.clone(),\n skew = this.skew,\n o = this.node,\n split,\n isGrad = ~Str(this.attrs.fill).indexOf(\"-\"),\n isPatt = !Str(this.attrs.fill).indexOf(\"url(\");\n matrix.translate(1, 1);\n if (isPatt || isGrad || this.type == \"image\") {\n skew.matrix = \"1 0 0 1\";\n skew.offset = \"0 0\";\n split = matrix.split();\n if ((isGrad && split.noRotation) || !split.isSimple) {\n o.style.filter = matrix.toFilter();\n var bb = this.getBBox(),\n bbt = this.getBBox(1),\n dx = bb.x - bbt.x,\n dy = bb.y - bbt.y;\n o.coordorigin = (dx * -zoom) + S + (dy * -zoom);\n setCoords(this, 1, 1, dx, dy, 0);\n } else {\n o.style.filter = E;\n setCoords(this, split.scalex, split.scaley, split.dx, split.dy, split.rotate);\n }\n } else {\n o.style.filter = E;\n skew.matrix = Str(matrix);\n skew.offset = matrix.offset();\n }\n if (oldt !== null) { // empty string value is true as well\n this._.transform = oldt;\n R._extractTransform(this, oldt);\n }\n return this;\n };\n elproto.rotate = function (deg, cx, cy) {\n if (this.removed) {\n return this;\n }\n if (deg == null) {\n return;\n }\n deg = Str(deg).split(separator);\n if (deg.length - 1) {\n cx = toFloat(deg[1]);\n cy = toFloat(deg[2]);\n }\n deg = toFloat(deg[0]);\n (cy == null) && (cx = cy);\n if (cx == null || cy == null) {\n var bbox = this.getBBox(1);\n cx = bbox.x + bbox.width / 2;\n cy = bbox.y + bbox.height / 2;\n }\n this._.dirtyT = 1;\n this.transform(this._.transform.concat([[\"r\", deg, cx, cy]]));\n return this;\n };\n elproto.translate = function (dx, dy) {\n if (this.removed) {\n return this;\n }\n dx = Str(dx).split(separator);\n if (dx.length - 1) {\n dy = toFloat(dx[1]);\n }\n dx = toFloat(dx[0]) || 0;\n dy = +dy || 0;\n if (this._.bbox) {\n this._.bbox.x += dx;\n this._.bbox.y += dy;\n }\n this.transform(this._.transform.concat([[\"t\", dx, dy]]));\n return this;\n };\n elproto.scale = function (sx, sy, cx, cy) {\n if (this.removed) {\n return this;\n }\n sx = Str(sx).split(separator);\n if (sx.length - 1) {\n sy = toFloat(sx[1]);\n cx = toFloat(sx[2]);\n cy = toFloat(sx[3]);\n isNaN(cx) && (cx = null);\n isNaN(cy) && (cy = null);\n }\n sx = toFloat(sx[0]);\n (sy == null) && (sy = sx);\n (cy == null) && (cx = cy);\n if (cx == null || cy == null) {\n var bbox = this.getBBox(1);\n }\n cx = cx == null ? bbox.x + bbox.width / 2 : cx;\n cy = cy == null ? bbox.y + bbox.height / 2 : cy;\n \n this.transform(this._.transform.concat([[\"s\", sx, sy, cx, cy]]));\n this._.dirtyT = 1;\n return this;\n };\n elproto.hide = function () {\n !this.removed && (this.node.style.display = \"none\");\n return this;\n };\n elproto.show = function () {\n !this.removed && (this.node.style.display = E);\n return this;\n };\n // Needed to fix the vml setViewBox issues\n elproto.auxGetBBox = R.el.getBBox;\n elproto.getBBox = function(){\n var b = this.auxGetBBox();\n if (this.paper && this.paper._viewBoxShift)\n {\n var c = {};\n var z = 1/this.paper._viewBoxShift.scale;\n c.x = b.x - this.paper._viewBoxShift.dx;\n c.x *= z;\n c.y = b.y - this.paper._viewBoxShift.dy;\n c.y *= z;\n c.width = b.width * z;\n c.height = b.height * z;\n c.x2 = c.x + c.width;\n c.y2 = c.y + c.height;\n return c;\n }\n return b;\n };\n elproto._getBBox = function () {\n if (this.removed) {\n return {};\n }\n return {\n x: this.X + (this.bbx || 0) - this.W / 2,\n y: this.Y - this.H,\n width: this.W,\n height: this.H\n };\n };\n elproto.remove = function () {\n if (this.removed || !this.node.parentNode) {\n return;\n }\n this.paper.__set__ && this.paper.__set__.exclude(this);\n R.eve.unbind(\"raphael.*.*.\" + this.id);\n R._tear(this, this.paper);\n this.node.parentNode.removeChild(this.node);\n this.shape && this.shape.parentNode.removeChild(this.shape);\n for (var i in this) {\n this[i] = typeof this[i] == \"function\" ? R._removedFactory(i) : null;\n }\n this.removed = true;\n };\n elproto.attr = function (name, value) {\n if (this.removed) {\n return this;\n }\n if (name == null) {\n var res = {};\n for (var a in this.attrs) if (this.attrs[has](a)) {\n res[a] = this.attrs[a];\n }\n res.gradient && res.fill == \"none\" && (res.fill = res.gradient) && delete res.gradient;\n res.transform = this._.transform;\n return res;\n }\n if (value == null && R.is(name, \"string\")) {\n if (name == fillString && this.attrs.fill == \"none\" && this.attrs.gradient) {\n return this.attrs.gradient;\n }\n var names = name.split(separator),\n out = {};\n for (var i = 0, ii = names.length; i < ii; i++) {\n name = names[i];\n if (name in this.attrs) {\n out[name] = this.attrs[name];\n } else if (R.is(this.paper.customAttributes[name], \"function\")) {\n out[name] = this.paper.customAttributes[name].def;\n } else {\n out[name] = R._availableAttrs[name];\n }\n }\n return ii - 1 ? out : out[names[0]];\n }\n if (this.attrs && value == null && R.is(name, \"array\")) {\n out = {};\n for (i = 0, ii = name.length; i < ii; i++) {\n out[name[i]] = this.attr(name[i]);\n }\n return out;\n }\n var params;\n if (value != null) {\n params = {};\n params[name] = value;\n }\n value == null && R.is(name, \"object\") && (params = name);\n for (var key in params) {\n eve(\"raphael.attr.\" + key + \".\" + this.id, this, params[key]);\n }\n if (params) {\n for (key in this.paper.customAttributes) if (this.paper.customAttributes[has](key) && params[has](key) && R.is(this.paper.customAttributes[key], \"function\")) {\n var par = this.paper.customAttributes[key].apply(this, [].concat(params[key]));\n this.attrs[key] = params[key];\n for (var subkey in par) if (par[has](subkey)) {\n params[subkey] = par[subkey];\n }\n }\n // this.paper.canvas.style.display = \"none\";\n if (params.text && this.type == \"text\") {\n this.textpath.string = params.text;\n }\n setFillAndStroke(this, params);\n // this.paper.canvas.style.display = E;\n }\n return this;\n };\n elproto.toFront = function () {\n !this.removed && this.node.parentNode.appendChild(this.node);\n this.paper && this.paper.top != this && R._tofront(this, this.paper);\n return this;\n };\n elproto.toBack = function () {\n if (this.removed) {\n return this;\n }\n if (this.node.parentNode.firstChild != this.node) {\n this.node.parentNode.insertBefore(this.node, this.node.parentNode.firstChild);\n R._toback(this, this.paper);\n }\n return this;\n };\n elproto.insertAfter = function (element) {\n if (this.removed) {\n return this;\n }\n if (element.constructor == R.st.constructor) {\n element = element[element.length - 1];\n }\n if (element.node.nextSibling) {\n element.node.parentNode.insertBefore(this.node, element.node.nextSibling);\n } else {\n element.node.parentNode.appendChild(this.node);\n }\n R._insertafter(this, element, this.paper);\n return this;\n };\n elproto.insertBefore = function (element) {\n if (this.removed) {\n return this;\n }\n if (element.constructor == R.st.constructor) {\n element = element[0];\n }\n element.node.parentNode.insertBefore(this.node, element.node);\n R._insertbefore(this, element, this.paper);\n return this;\n };\n elproto.blur = function (size) {\n var s = this.node.runtimeStyle,\n f = s.filter;\n f = f.replace(blurregexp, E);\n if (+size !== 0) {\n this.attrs.blur = size;\n s.filter = f + S + ms + \".Blur(pixelradius=\" + (+size || 1.5) + \")\";\n s.margin = R.format(\"-{0}px 0 0 -{0}px\", round(+size || 1.5));\n } else {\n s.filter = f;\n s.margin = 0;\n delete this.attrs.blur;\n }\n return this;\n };\n\n R._engine.path = function (pathString, vml) {\n var el = createNode(\"shape\");\n el.style.cssText = cssDot;\n el.coordsize = zoom + S + zoom;\n el.coordorigin = vml.coordorigin;\n var p = new Element(el, vml),\n attr = {fill: \"none\", stroke: \"#000\"};\n pathString && (attr.path = pathString);\n p.type = \"path\";\n p.path = [];\n p.Path = E;\n setFillAndStroke(p, attr);\n vml.canvas.appendChild(el);\n var skew = createNode(\"skew\");\n skew.on = true;\n el.appendChild(skew);\n p.skew = skew;\n p.transform(E);\n return p;\n };\n R._engine.rect = function (vml, x, y, w, h, r) {\n var path = R._rectPath(x, y, w, h, r),\n res = vml.path(path),\n a = res.attrs;\n res.X = a.x = x;\n res.Y = a.y = y;\n res.W = a.width = w;\n res.H = a.height = h;\n a.r = r;\n a.path = path;\n res.type = \"rect\";\n return res;\n };\n R._engine.ellipse = function (vml, x, y, rx, ry) {\n var res = vml.path(),\n a = res.attrs;\n res.X = x - rx;\n res.Y = y - ry;\n res.W = rx * 2;\n res.H = ry * 2;\n res.type = \"ellipse\";\n setFillAndStroke(res, {\n cx: x,\n cy: y,\n rx: rx,\n ry: ry\n });\n return res;\n };\n R._engine.circle = function (vml, x, y, r) {\n var res = vml.path(),\n a = res.attrs;\n res.X = x - r;\n res.Y = y - r;\n res.W = res.H = r * 2;\n res.type = \"circle\";\n setFillAndStroke(res, {\n cx: x,\n cy: y,\n r: r\n });\n return res;\n };\n R._engine.image = function (vml, src, x, y, w, h) {\n var path = R._rectPath(x, y, w, h),\n res = vml.path(path).attr({stroke: \"none\"}),\n a = res.attrs,\n node = res.node,\n fill = node.getElementsByTagName(fillString)[0];\n a.src = src;\n res.X = a.x = x;\n res.Y = a.y = y;\n res.W = a.width = w;\n res.H = a.height = h;\n a.path = path;\n res.type = \"image\";\n fill.parentNode == node && node.removeChild(fill);\n fill.rotate = true;\n fill.src = src;\n fill.type = \"tile\";\n res._.fillpos = [x, y];\n res._.fillsize = [w, h];\n node.appendChild(fill);\n setCoords(res, 1, 1, 0, 0, 0);\n return res;\n };\n R._engine.text = function (vml, x, y, text) {\n var el = createNode(\"shape\"),\n path = createNode(\"path\"),\n o = createNode(\"textpath\");\n x = x || 0;\n y = y || 0;\n text = text || \"\";\n path.v = R.format(\"m{0},{1}l{2},{1}\", round(x * zoom), round(y * zoom), round(x * zoom) + 1);\n path.textpathok = true;\n o.string = Str(text);\n o.on = true;\n el.style.cssText = cssDot;\n el.coordsize = zoom + S + zoom;\n el.coordorigin = \"0 0\";\n var p = new Element(el, vml),\n attr = {\n fill: \"#000\",\n stroke: \"none\",\n font: R._availableAttrs.font,\n text: text\n };\n p.shape = el;\n p.path = path;\n p.textpath = o;\n p.type = \"text\";\n p.attrs.text = Str(text);\n p.attrs.x = x;\n p.attrs.y = y;\n p.attrs.w = 1;\n p.attrs.h = 1;\n setFillAndStroke(p, attr);\n el.appendChild(o);\n el.appendChild(path);\n vml.canvas.appendChild(el);\n var skew = createNode(\"skew\");\n skew.on = true;\n el.appendChild(skew);\n p.skew = skew;\n p.transform(E);\n return p;\n };\n R._engine.setSize = function (width, height) {\n var cs = this.canvas.style;\n this.width = width;\n this.height = height;\n width == +width && (width += \"px\");\n height == +height && (height += \"px\");\n cs.width = width;\n cs.height = height;\n cs.clip = \"rect(0 \" + width + \" \" + height + \" 0)\";\n if (this._viewBox) {\n R._engine.setViewBox.apply(this, this._viewBox);\n }\n return this;\n };\n R._engine.setViewBox = function (x, y, w, h, fit) {\n R.eve(\"raphael.setViewBox\", this, this._viewBox, [x, y, w, h, fit]);\n var paperSize = this.getSize(),\n width = paperSize.width,\n height = paperSize.height,\n H, W;\n if (fit) {\n H = height / h;\n W = width / w;\n if (w * H < width) {\n x -= (width - w * H) / 2 / H;\n }\n if (h * W < height) {\n y -= (height - h * W) / 2 / W;\n }\n }\n this._viewBox = [x, y, w, h, !!fit];\n this._viewBoxShift = {\n dx: -x,\n dy: -y,\n scale: paperSize\n };\n this.forEach(function (el) {\n el.transform(\"...\");\n });\n return this;\n };\n var createNode;\n R._engine.initWin = function (win) {\n var doc = win.document;\n if (doc.styleSheets.length < 31) {\n doc.createStyleSheet().addRule(\".rvml\", \"behavior:url(#default#VML)\");\n } else {\n // no more room, add to the existing one\n // http://msdn.microsoft.com/en-us/library/ms531194%28VS.85%29.aspx\n doc.styleSheets[0].addRule(\".rvml\", \"behavior:url(#default#VML)\");\n }\n try {\n !doc.namespaces.rvml && doc.namespaces.add(\"rvml\", \"urn:schemas-microsoft-com:vml\");\n createNode = function (tagName) {\n return doc.createElement('<rvml:' + tagName + ' class=\"rvml\">');\n };\n } catch (e) {\n createNode = function (tagName) {\n return doc.createElement('<' + tagName + ' xmlns=\"urn:schemas-microsoft.com:vml\" class=\"rvml\">');\n };\n }\n };\n R._engine.initWin(R._g.win);\n R._engine.create = function () {\n var con = R._getContainer.apply(0, arguments),\n container = con.container,\n height = con.height,\n s,\n width = con.width,\n x = con.x,\n y = con.y;\n if (!container) {\n throw new Error(\"VML container not found.\");\n }\n var res = new R._Paper,\n c = res.canvas = R._g.doc.createElement(\"div\"),\n cs = c.style;\n x = x || 0;\n y = y || 0;\n width = width || 512;\n height = height || 342;\n res.width = width;\n res.height = height;\n width == +width && (width += \"px\");\n height == +height && (height += \"px\");\n res.coordsize = zoom * 1e3 + S + zoom * 1e3;\n res.coordorigin = \"0 0\";\n res.span = R._g.doc.createElement(\"span\");\n res.span.style.cssText = \"position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;\";\n c.appendChild(res.span);\n cs.cssText = R.format(\"top:0;left:0;width:{0};height:{1};display:inline-block;position:relative;clip:rect(0 {0} {1} 0);overflow:hidden\", width, height);\n if (container == 1) {\n R._g.doc.body.appendChild(c);\n cs.left = x + \"px\";\n cs.top = y + \"px\";\n cs.position = \"absolute\";\n } else {\n if (container.firstChild) {\n container.insertBefore(c, container.firstChild);\n } else {\n container.appendChild(c);\n }\n }\n res.renderfix = function () {};\n return res;\n };\n R.prototype.clear = function () {\n R.eve(\"raphael.clear\", this);\n this.canvas.innerHTML = E;\n this.span = R._g.doc.createElement(\"span\");\n this.span.style.cssText = \"position:absolute;left:-9999em;top:-9999em;padding:0;margin:0;line-height:1;display:inline;\";\n this.canvas.appendChild(this.span);\n this.bottom = this.top = null;\n };\n R.prototype.remove = function () {\n R.eve(\"raphael.remove\", this);\n this.canvas.parentNode.removeChild(this.canvas);\n for (var i in this) {\n this[i] = typeof this[i] == \"function\" ? R._removedFactory(i) : null;\n }\n return true;\n };\n\n var setproto = R.st;\n for (var method in elproto) if (elproto[has](method) && !setproto[has](method)) {\n setproto[method] = (function (methodname) {\n return function () {\n var arg = arguments;\n return this.forEach(function (el) {\n el[methodname].apply(el, arg);\n });\n };\n })(method);\n }\n})();\n\n // EXPOSE\n // SVG and VML are appended just before the EXPOSE line\n // Even with AMD, Raphael should be defined globally\n oldRaphael.was ? (g.win.Raphael = R) : (Raphael = R);\n\n if(typeof exports == \"object\"){\n module.exports = R;\n }\n return R;\n}));\n","Raphael(function () {\n \n // TOC\n (function (ol) {\n if (!ol) {\n return;\n }\n var li = document.createElement(\"li\"),\n isABBR = function (str, abbr) {\n var letters = abbr.toUpperCase().split(\"\"),\n first = letters.shift(),\n rg = new RegExp(\"^[\" + first.toLowerCase() + first + \"][a-z]*\" + letters.join(\"[a-z]*\") + \"[a-z]*$\");\n return !!String(str).match(rg);\n },\n score = function (me, search) {\n me = String(me);\n search = String(search);\n var score = 0,\n chunk;\n if (me == search) {\n return 1;\n }\n if (!me || !search) {\n return 0;\n }\n if (isABBR(me, search)) {\n return .9;\n }\n score = 0;\n chunk = me.toLowerCase();\n for (var j, i = 0, ii = search.length; i < ii; i++) {\n j = chunk.indexOf(search.charAt(i));\n if (~j) {\n chunk = chunk.substring(j + 1);\n score += 1 / (j + 1);\n }\n }\n score = Math.max(score / ii - Math.abs(me.length - ii) / me.length / 2, 0);\n return score;\n };\n li.innerHTML = '<input type=\"search\" id=\"dr-filter\" results=\"0\">';\n var lis = ol.getElementsByTagName(\"span\"),\n names = [],\n rgName = /[^\\.\\(]*(?=(\\(\\))?$)/;\n for (var i = 0, ii = lis.length; i < ii; i++) {\n names[i] = {\n li: lis[i].parentNode.parentNode,\n text: lis[i].innerHTML.match(rgName)[0]\n };\n }\n ol.insertBefore(li, ol.firstChild);\n var input = document.getElementById(\"dr-filter\");\n input.style.width = \"100%\";\n input.style.marginTop = \"10px\";\n input.onclick = input.onchange = input.onkeydown = input.onkeyup = function () {\n var v = input.value,\n res = [];\n if (v.length > 1) {\n for (var i = 0, ii = names.length; i < ii; i++) {\n res[i] = {\n li: names[i].li,\n weight: score(names[i].text, v)\n };\n }\n res.sort(function (a, b) {\n return b.weight - a.weight;\n });\n for (i = 0, ii = res.length; i < ii; i++) {\n ol.appendChild(res[i].li);\n }\n } else {\n for (i = 0, ii = names.length; i < ii; i++) {\n ol.appendChild(names[i].li);\n }\n }\n };\n })(document.getElementById(\"dr-toc\"));\n \n function prepare(id) {\n var div = document.getElementById(id);\n div.style.cssText = \"float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat\";\n return Raphael(div, 99, 99);\n }\n \n var line = {\n stroke: \"#fff\",\n \"stroke-width\": 2,\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\"\n },\n dots = {\n stroke: \"#fff\",\n \"stroke-width\": 2,\n \"stroke-dasharray\": \"- \",\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\"\n },\n fill = {\n stroke: \"#fff\",\n fill: \"#fff\",\n \"fill-opacity\": .5,\n \"stroke-width\": 2,\n \"stroke-linecap\": \"round\",\n \"stroke-linejoin\": \"round\"\n },\n none = {\n fill: \"#000\",\n opacity: 0\n };\n prepare(\"Paper.path-extra\").path(\"M10,10R90,50 10,90\").attr(line);\n \n (function (r) {\n var there;\n r.circle(15, 15, 10).attr(fill).click(function () {\n var clr = Raphael.hsb(Math.random(), .6, 1);\n this.animate(there ? {\n cx: 15,\n cy: 15,\n r: 10,\n stroke: \"#fff\",\n fill: \"#fff\"\n } : {\n cx: 80,\n cy: 80,\n r: 15,\n stroke: clr,\n fill: clr\n }, 600, [\"bounce\", \"<>\", \"elastic\", \"\"][Math.round(Math.random() * 3)]);\n there = !there;\n });\n })(prepare(\"Element.animate-extra\"));\n\n (function (r) {\n var x, y;\n r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {\n this.attr({\n cx: Math.min(Math.max(x + dx, 15), 85),\n cy: Math.min(Math.max(y + dy, 15), 85)\n });\n }, function () {\n x = this.attr(\"cx\");\n y = this.attr(\"cy\");\n });\n \n })(prepare(\"Element.drag-extra\"));\n\n (function (r) {\n var e = r.ellipse(50, 50, 40, 30).attr(fill).click(function () {\n this.animate({\n transform: \"r180\"\n }, 1000, function () {\n this.attr({\n transform: \"\"\n });\n });\n }),\n bb = r.rect().attr(e.getBBox()).attr(dots);\n eve.on(\"anim.frame.\" + e.id, function (anim) {\n bb.attr(e.getBBox());\n });\n })(prepare(\"Element.getBBox-extra\"));\n\n (function (r) {\n var e = r.path(\"M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90\").attr(line),\n l = e.getTotalLength(),\n to = 1;\n r.customAttributes.along = function (a) {\n var p = e.getPointAtLength(a * l);\n return {\n transform: \"t\" + [p.x, p.y] + \"r\" + p.alpha\n };\n };\n var c = r.ellipse(0, 0, 5, 2).attr({\n along: 0\n }).attr(line);\n r.rect(0, 0, 100, 100).attr(none).click(function () {\n c.stop().animate({\n along: to\n }, 5000);\n to = +!to;\n });\n })(prepare(\"Element.getPointAtLength-extra\"));\n\n (function (r) {\n var e = r.path(\"M10,10R20,70 30,40 40,80 50,10 60,50 70,20 80,30 90,90\").attr(line),\n l = e.getTotalLength() - 10,\n to = 1;\n r.customAttributes.along = function (a) {\n return {\n path: e.getSubpath(a * l, a * l + 11)\n };\n };\n var c = r.path().attr(line).attr({\n along: 0,\n stroke: \"#f00\",\n \"stroke-width\": 3\n });\n r.rect(0, 0, 100, 100).attr(none).click(function () {\n c.stop().animate({\n along: to\n }, 5000);\n to = +!to;\n });\n })(prepare(\"Element.getSubpath-extra\"));\n\n (function (r) {\n r.circle(50, 50, 40).attr(line).glow({color: \"#fff\"});\n })(prepare(\"Element.glow-extra\"));\n\n (function (r) {\n r.rect(10, 10, 40, 30).attr(dots);\n r.rect(10, 10, 40, 30).attr(line).transform(\"r-30, 50, 10t10, 20s1.5\");\n r.text(50, 90, \"r-30, 50, 10\\nt10, 20s1.5\").attr({fill: \"#fff\"});\n })(prepare(\"Element.transform-extra\"));\n\n (function (r) {\n r.circle(50, 50, 40).attr(line);\n })(prepare(\"Paper.circle-extra\"));\n\n (function (r) {\n r.ellipse(50, 50, 40, 30).attr(line);\n })(prepare(\"Paper.ellipse-extra\"));\n\n (function (r) {\n r.rect(10, 10, 50, 50).attr(line);\n r.rect(40, 40, 50, 50, 10).attr(line);\n })(prepare(\"Paper.rect-extra\"));\n\n (function (r) {\n var set = r.set(\n r.rect(10, 10, 50, 50).attr(fill),\n r.rect(40, 40, 50, 50, 10).attr(fill)\n ).hover(function () {\n set.stop().animate({stroke: \"#f00\"}, 600, \"<>\");\n }, function () {\n set.stop().animate({stroke: \"#fff\"}, 600, \"<>\");\n });\n })(prepare(\"Paper.set-extra\"));\n\n (function (r) {\n r.text(50, 50, \"Raphaël\\nkicks\\nbutt!\").attr({\n fill: \"#fff\",\n font: \"italic 20px Georgia\",\n transform: \"r-10\"\n });\n })(prepare(\"Paper.text-extra\"));\n\n});","// Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.\n// \n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n// \n// http://www.apache.org/licenses/LICENSE-2.0\n// \n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n// ┌────────────────────────────────────────────────────────────┐ \\\\\n// │ Eve 0.5.0 - JavaScript Events Library │ \\\\\n// ├────────────────────────────────────────────────────────────┤ \\\\\n// │ Author Dmitry Baranovskiy (http://dmitry.baranovskiy.com/) │ \\\\\n// └────────────────────────────────────────────────────────────┘ \\\\\n\n(function (glob) {\n var version = \"0.5.0\",\n has = \"hasOwnProperty\",\n separator = /[\\.\\/]/,\n comaseparator = /\\s*,\\s*/,\n wildcard = \"*\",\n fun = function () {},\n numsort = function (a, b) {\n return a - b;\n },\n current_event,\n stop,\n events = {n: {}},\n firstDefined = function () {\n for (var i = 0, ii = this.length; i < ii; i++) {\n if (typeof this[i] != \"undefined\") {\n return this[i];\n }\n }\n },\n lastDefined = function () {\n var i = this.length;\n while (--i) {\n if (typeof this[i] != \"undefined\") {\n return this[i];\n }\n }\n },\n objtos = Object.prototype.toString,\n Str = String,\n isArray = Array.isArray || function (ar) {\n return ar instanceof Array || objtos.call(ar) == \"[object Array]\";\n };\n /*\\\n * eve\n [ method ]\n\n * Fires event with given `name`, given scope and other parameters.\n\n > Arguments\n\n - name (string) name of the *event*, dot (`.`) or slash (`/`) separated\n - scope (object) context for the event handlers\n - varargs (...) the rest of arguments will be sent to event handlers\n\n = (object) array of returned values from the listeners. Array has two methods `.firstDefined()` and `.lastDefined()` to get first or last not `undefined` value.\n \\*/\n var eve = function (name, scope) {\n var e = events,\n oldstop = stop,\n args = Array.prototype.slice.call(arguments, 2),\n listeners = eve.listeners(name),\n z = 0,\n f = false,\n l,\n indexed = [],\n queue = {},\n out = [],\n ce = current_event,\n errors = [];\n out.firstDefined = firstDefined;\n out.lastDefined = lastDefined;\n current_event = name;\n stop = 0;\n for (var i = 0, ii = listeners.length; i < ii; i++) if (\"zIndex\" in listeners[i]) {\n indexed.push(listeners[i].zIndex);\n if (listeners[i].zIndex < 0) {\n queue[listeners[i].zIndex] = listeners[i];\n }\n }\n indexed.sort(numsort);\n while (indexed[z] < 0) {\n l = queue[indexed[z++]];\n out.push(l.apply(scope, args));\n if (stop) {\n stop = oldstop;\n return out;\n }\n }\n for (i = 0; i < ii; i++) {\n l = listeners[i];\n if (\"zIndex\" in l) {\n if (l.zIndex == indexed[z]) {\n out.push(l.apply(scope, args));\n if (stop) {\n break;\n }\n do {\n z++;\n l = queue[indexed[z]];\n l && out.push(l.apply(scope, args));\n if (stop) {\n break;\n }\n } while (l)\n } else {\n queue[l.zIndex] = l;\n }\n } else {\n out.push(l.apply(scope, args));\n if (stop) {\n break;\n }\n }\n }\n stop = oldstop;\n current_event = ce;\n return out;\n };\n // Undocumented. Debug only.\n eve._events = events;\n /*\\\n * eve.listeners\n [ method ]\n\n * Internal method which gives you array of all event handlers that will be triggered by the given `name`.\n\n > Arguments\n\n - name (string) name of the event, dot (`.`) or slash (`/`) separated\n\n = (array) array of event handlers\n \\*/\n eve.listeners = function (name) {\n var names = isArray(name) ? name : name.split(separator),\n e = events,\n item,\n items,\n k,\n i,\n ii,\n j,\n jj,\n nes,\n es = [e],\n out = [];\n for (i = 0, ii = names.length; i < ii; i++) {\n nes = [];\n for (j = 0, jj = es.length; j < jj; j++) {\n e = es[j].n;\n items = [e[names[i]], e[wildcard]];\n k = 2;\n while (k--) {\n item = items[k];\n if (item) {\n nes.push(item);\n out = out.concat(item.f || []);\n }\n }\n }\n es = nes;\n }\n return out;\n };\n /*\\\n * eve.separator\n [ method ]\n\n * If for some reasons you don’t like default separators (`.` or `/`) you can specify yours\n * here. Be aware that if you pass a string longer than one character it will be treated as\n * a list of characters.\n\n - separator (string) new separator. Empty string resets to default: `.` or `/`.\n \\*/\n eve.separator = function (sep) {\n if (sep) {\n sep = Str(sep).replace(/(?=[\\.\\^\\]\\[\\-])/g, \"\\\\\");\n sep = \"[\" + sep + \"]\";\n separator = new RegExp(sep);\n } else {\n separator = /[\\.\\/]/;\n }\n };\n /*\\\n * eve.on\n [ method ]\n **\n * Binds given event handler with a given name. You can use wildcards “`*`” for the names:\n | eve.on(\"*.under.*\", f);\n | eve(\"mouse.under.floor\"); // triggers f\n * Use @eve to trigger the listener.\n **\n - name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards\n - f (function) event handler function\n **\n - name (array) if you don’t want to use separators, you can use array of strings\n - f (function) event handler function\n **\n = (function) returned function accepts a single numeric parameter that represents z-index of the handler. It is an optional feature and only used when you need to ensure that some subset of handlers will be invoked in a given order, despite of the order of assignment. \n > Example:\n | eve.on(\"mouse\", eatIt)(2);\n | eve.on(\"mouse\", scream);\n | eve.on(\"mouse\", catchIt)(1);\n * This will ensure that `catchIt` function will be called before `eatIt`.\n *\n * If you want to put your handler before non-indexed handlers, specify a negative value.\n * Note: I assume most of the time you don’t need to worry about z-index, but it’s nice to have this feature “just in case”.\n \\*/\n eve.on = function (name, f) {\n if (typeof f != \"function\") {\n return function () {};\n }\n var names = isArray(name) ? (isArray(name[0]) ? name : [name]) : Str(name).split(comaseparator);\n for (var i = 0, ii = names.length; i < ii; i++) {\n (function (name) {\n var names = isArray(name) ? name : Str(name).split(separator),\n e = events,\n exist;\n for (var i = 0, ii = names.length; i < ii; i++) {\n e = e.n;\n e = e.hasOwnProperty(names[i]) && e[names[i]] || (e[names[i]] = {n: {}});\n }\n e.f = e.f || [];\n for (i = 0, ii = e.f.length; i < ii; i++) if (e.f[i] == f) {\n exist = true;\n break;\n }\n !exist && e.f.push(f);\n }(names[i]));\n }\n return function (zIndex) {\n if (+zIndex == +zIndex) {\n f.zIndex = +zIndex;\n }\n };\n };\n /*\\\n * eve.f\n [ method ]\n **\n * Returns function that will fire given event with optional arguments.\n * Arguments that will be passed to the result function will be also\n * concated to the list of final arguments.\n | el.onclick = eve.f(\"click\", 1, 2);\n | eve.on(\"click\", function (a, b, c) {\n | console.log(a, b, c); // 1, 2, [event object]\n | });\n > Arguments\n - event (string) event name\n - varargs (…) and any other arguments\n = (function) possible event handler function\n \\*/\n eve.f = function (event) {\n var attrs = [].slice.call(arguments, 1);\n return function () {\n eve.apply(null, [event, null].concat(attrs).concat([].slice.call(arguments, 0)));\n };\n };\n /*\\\n * eve.stop\n [ method ]\n **\n * Is used inside an event handler to stop the event, preventing any subsequent listeners from firing.\n \\*/\n eve.stop = function () {\n stop = 1;\n };\n /*\\\n * eve.nt\n [ method ]\n **\n * Could be used inside event handler to figure out actual name of the event.\n **\n > Arguments\n **\n - subname (string) #optional subname of the event\n **\n = (string) name of the event, if `subname` is not specified\n * or\n = (boolean) `true`, if current event’s name contains `subname`\n \\*/\n eve.nt = function (subname) {\n var cur = isArray(current_event) ? current_event.join(\".\") : current_event;\n if (subname) {\n return new RegExp(\"(?:\\\\.|\\\\/|^)\" + subname + \"(?:\\\\.|\\\\/|$)\").test(cur);\n }\n return cur;\n };\n /*\\\n * eve.nts\n [ method ]\n **\n * Could be used inside event handler to figure out actual name of the event.\n **\n **\n = (array) names of the event\n \\*/\n eve.nts = function () {\n return isArray(current_event) ? current_event : current_event.split(separator);\n };\n /*\\\n * eve.off\n [ method ]\n **\n * Removes given function from the list of event listeners assigned to given name.\n * If no arguments specified all the events will be cleared.\n **\n > Arguments\n **\n - name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards\n - f (function) event handler function\n \\*/\n /*\\\n * eve.unbind\n [ method ]\n **\n * See @eve.off\n \\*/\n eve.off = eve.unbind = function (name, f) {\n if (!name) {\n eve._events = events = {n: {}};\n return;\n }\n var names = isArray(name) ? (isArray(name[0]) ? name : [name]) : Str(name).split(comaseparator);\n if (names.length > 1) {\n for (var i = 0, ii = names.length; i < ii; i++) {\n eve.off(names[i], f);\n }\n return;\n }\n names = isArray(name) ? name : Str(name).split(separator);\n var e,\n key,\n splice,\n i, ii, j, jj,\n cur = [events];\n for (i = 0, ii = names.length; i < ii; i++) {\n for (j = 0; j < cur.length; j += splice.length - 2) {\n splice = [j, 1];\n e = cur[j].n;\n if (names[i] != wildcard) {\n if (e[names[i]]) {\n splice.push(e[names[i]]);\n }\n } else {\n for (key in e) if (e[has](key)) {\n splice.push(e[key]);\n }\n }\n cur.splice.apply(cur, splice);\n }\n }\n for (i = 0, ii = cur.length; i < ii; i++) {\n e = cur[i];\n while (e.n) {\n if (f) {\n if (e.f) {\n for (j = 0, jj = e.f.length; j < jj; j++) if (e.f[j] == f) {\n e.f.splice(j, 1);\n break;\n }\n !e.f.length && delete e.f;\n }\n for (key in e.n) if (e.n[has](key) && e.n[key].f) {\n var funcs = e.n[key].f;\n for (j = 0, jj = funcs.length; j < jj; j++) if (funcs[j] == f) {\n funcs.splice(j, 1);\n break;\n }\n !funcs.length && delete e.n[key].f;\n }\n } else {\n delete e.f;\n for (key in e.n) if (e.n[has](key) && e.n[key].f) {\n delete e.n[key].f;\n }\n }\n e = e.n;\n }\n }\n };\n /*\\\n * eve.once\n [ method ]\n **\n * Binds given event handler with a given name to only run once then unbind itself.\n | eve.once(\"login\", f);\n | eve(\"login\"); // triggers f\n | eve(\"login\"); // no listeners\n * Use @eve to trigger the listener.\n **\n > Arguments\n **\n - name (string) name of the event, dot (`.`) or slash (`/`) separated, with optional wildcards\n - f (function) event handler function\n **\n = (function) same return function as @eve.on\n \\*/\n eve.once = function (name, f) {\n var f2 = function () {\n eve.off(name, f2);\n return f.apply(this, arguments);\n };\n return eve.on(name, f2);\n };\n /*\\\n * eve.version\n [ property (string) ]\n **\n * Current version of the library.\n \\*/\n eve.version = version;\n eve.toString = function () {\n return \"You are running Eve \" + version;\n };\n (typeof module != \"undefined\" && module.exports) ? (module.exports = eve) : (typeof define === \"function\" && define.amd ? (define(\"eve\", [], function() { return eve; })) : (glob.eve = eve));\n})(this);\n","(function ($) {\r\n var elts = [];\r\n var items = [];\r\n var infobox;\r\n var rosace;\r\n var that;\r\n var settings;\r\n\r\n $.fn.euroviaRosace = function (options) {\r\n // Establish our default settings\r\n settings = $.extend({\r\n data: [],\r\n color: '#fff',\r\n pointFocus: 4,\r\n mode: \"ajax\",\r\n radius: 10,\r\n width: 500,\r\n height: 500,\r\n fontSize: 10,\r\n fontFamily: \"Arial, Helvetica, sans-serif\",\r\n pointRadius: 5,\r\n pointFillColor: '#fff',\r\n welcomeText: \"\",\r\n }, options);\r\n\r\n return this.each(function () {\r\n that = this;\r\n\r\n var id = $(that).attr('id');\r\n var nbPoints = settings.data.length;\r\n var step = 2 * Math.PI / nbPoints;\r\n\r\n if (settings.width == \"full\") {\r\n settings.width = $(that).width();\r\n settings.height = $(that).height();\r\n //console.log(settings.height);\r\n //console.log(settings.width);\r\n //console.log(settings.radius + \" // \" + (settings.radius * 2));\r\n }\r\n\r\n if (settings.data.length > 0) {\r\n var paper = Raphael(id, settings.width, settings.height);\r\n rosace = paper.circle(settings.width / 2, settings.height / 2, settings.radius).attr({ stroke: settings.color });\r\n infobox = new Infobox(paper, { x: settings.width / 2 - settings.radius, y: settings.height / 2 - settings.radius, width: settings.radius * 2, height: settings.radius * 2, rounding: 60, color: settings.color });\r\n infobox.div.addClass(\"infobox\");\r\n infobox.div.css(\"font-family\", settings.fontFamily);\r\n //infobox.div.css(\"position\", \"relative\");\r\n var top = $(\"#rosace\").height() / 2 - 10;\r\n\r\n infobox.div.css(\"top\", top + \"px\");\r\n //infobox.div.css(\"left\", ((settings.width - settings.radius) / 2) + \"px\");\r\n infobox.addHtml(settings.welcomeText);\r\n\r\n //Place points\r\n $.each(settings.data, function (idx, obj) {\r\n var width = 250;\r\n var angle = Math.PI - step * idx;\r\n var x = Math.round(settings.width / 2 + settings.radius * Math.cos(angle));\r\n var y = Math.round(settings.height / 2 + settings.radius * Math.sin(angle));\r\n\r\n //DRAWING...\r\n var circle = paper.circle(x, y, settings.pointRadius).attr({ fill: settings.pointFillColor, title: obj.title, stroke: settings.pointFillColor });\r\n circle.node.setAttribute(\"class\", \"Pointer\");\r\n //var t = paper.text(x, y, obj.title).attr({ \"font-size\": settings.fontSize, \"font-family\": settings.fontFamily, fill: settings.color });\r\n var t = new Infobox(paper, { x: x, y: y, width: width, height: 40, rounding: 0, color: settings.color });\r\n\r\n t.addHtml(obj.title);\r\n\r\n $(t.div).css({\r\n \"overflow\": \"hidden\",\r\n \"width\": \"auto\",\r\n \"font-size\": \"1.5em\"\r\n });\r\n\r\n $(t.div).css(\"top\", $(t.div).position().top - 143)\r\n\r\n var shown = $(t.div).children().first();\r\n shown.css({\r\n \"text-overflow\": \"ellipsis\",\r\n \"white-space\": \"nowrap\",\r\n \"overflow\": \"hidden\",\r\n \"width\": width + \"px\",\r\n \"display\": \"inline-block\"\r\n });\r\n\r\n $(t.div).attr(\"data-url\", obj.url);\r\n $(t.div).attr(\"data-idx\", idx);\r\n $(t.div).attr(\"id\", obj.id);\r\n $(t.div).attr(\"class\", \"rosaceLink node\");\r\n\r\n //COMPUTE OFFSET NEEDS\r\n var offsetX = offsetY = 0; var textWidth = $(t.div).children().first().textWidth();\r\n\r\n if (angle < Math.PI / 4 && angle >= 0) {\r\n offsetX = 25;\r\n } else if (angle < Math.PI / 2 && angle >= Math.PI / 4) {\r\n offsetX = 25; offsetY = 5;\r\n } else if (angle < 3 * Math.PI / 4 && angle >= Math.PI / 2) {\r\n offsetX = -width - 40; offsetY = 0;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < Math.PI && angle >= 3 * Math.PI / 4) {\r\n offsetX = -width - 35; offsetY = -8;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < 5 * Math.PI / 4 && angle >= Math.PI) {\r\n offsetX = -width - 40; offsetY = -8;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < 3 * Math.PI / 2 && angle >= 5 * Math.PI / 4) {\r\n offsetX = -width; offsetY = -5;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < 3 * Math.PI / 2 && angle >= 5 * Math.PI / 4) {\r\n console.log(\"5pi/4 modified !\");\r\n offsetX = -width - 5; offsetY = 5;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < 7 * Math.PI / 4 && angle >= 3 * Math.PI / 2) {\r\n offsetX = 5; offsetY = 10;\r\n } else if (angle < 2 * Math.PI / 4 && angle >= 7 * Math.PI / 4) {\r\n offsetX = 5; offsetY = 5;\r\n } else if (angle < 0 && angle >= -1) {\r\n offsetX = 25; offsetY = -8;\r\n } else if (angle < -1 && angle >= -1.5) {\r\n offsetX = 25; offsetY = -15;\r\n } else if (angle < -1.5 && angle >= -2) {\r\n offsetX = -width; offsetY = -30;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n } else if (angle < -2 && angle >= -3) {\r\n offsetX = -width - 45; offsetY = -8;\r\n $(t.div).attr(\"data-move\", \"true\").css(\"text-align\", \"right\");\r\n }\r\n\r\n if (angle <= -1.5 && angle >= -1.8) {\r\n offsetX = textWidth < width ? -textWidth / 2 : -width / 2;\r\n offsetY = -40;\r\n $(t.div).removeAttr(\"data-move\").css(\"text-align\", \"left\");\r\n }\r\n\r\n if (angle >= 1.5 && angle <= 1.8) {\r\n offsetX = textWidth < width ? -textWidth / 2 : -width / 2;\r\n offsetY = 30;\r\n $(t.div).removeAttr(\"data-move\").css(\"text-align\", \"left\");\r\n }\r\n\r\n //t.addHtml(\"angle = \" + angle);\r\n //t.addHtml(obj.title);\r\n $(t.div).css('transform', 'translate(' + offsetX + 'px, ' + offsetY + 'px)');\r\n\r\n var nWidth = 550;\r\n //PUSH TO STORE\r\n items[obj.id] = {\r\n id: obj.id,\r\n pLeft: parseInt($(t.div).css(\"left\").replace(\"px\", \"\")),\r\n needMove: $(t.div).children().first().textWidth() > $(t.div).width() && typeof $(t.div).attr(\"data-move\") != \"undefined\",\r\n width: $(t.div).width(),\r\n textWidth : $(t.div).children().first().textWidth(),\r\n delta: parseInt($(t.div).css(\"left\").replace(\"px\", \"\")) + $(t.div).children().first().width() - nWidth,\r\n needExpand: $(t.div).children().first().textWidth() > $(t.div).width(),\r\n click: function () {\r\n $(t.div).click();\r\n }\r\n };\r\n\r\n //EVENTS\r\n $(t.div).mouseover(function (e) {\r\n $(t.div).children().first().clearQueue();\r\n $(t.div).clearQueue();\r\n if (items[obj.id].needMove) {\r\n $(t.div).velocity({ \"left\": items[obj.id].delta + \"px\" });\r\n }\r\n if (items[obj.id].needExpand) {\r\n $(t.div).children().first().velocity({ \"width\": nWidth + \"px\" });\r\n }\r\n\r\n circle.animate({ r: settings.pointRadius + settings.pointFocus });\r\n });\r\n\r\n $(t.div).mouseout(function (e) {\r\n $(t.div).children().first().clearQueue();\r\n $(t.div).clearQueue();\r\n if (items[obj.id].needMove) {\r\n $(t.div).velocity({ \"left\": items[obj.id].pLeft + \"px\" });\r\n }\r\n\r\n if (items[obj.id].needExpand) {\r\n $(t.div).children().first().velocity({ \"width\": items[obj.id].width + \"px\" });\r\n }\r\n\r\n circle.animate({ r: settings.pointRadius });\r\n });\r\n\r\n circle.mouseover(function (e) {\r\n $(t.div).children().first().clearQueue();\r\n $(t.div).clearQueue();\r\n if (items[obj.id].needMove) {\r\n $(t.div).velocity({ \"left\": items[obj.id].delta + \"px\" });\r\n }\r\n if (items[obj.id].needExpand) {\r\n $(t.div).children().first().velocity({ \"width\": nWidth + \"px\" });\r\n }\r\n\r\n circle.animate({ r: settings.pointRadius + settings.pointFocus });\r\n });\r\n\r\n circle.mouseout(function (e) {\r\n $(t.div).children().first().clearQueue();\r\n $(t.div).clearQueue();\r\n if (items[obj.id].needMove) {\r\n $(t.div).velocity({ \"left\": items[obj.id].pLeft + \"px\" });\r\n }\r\n\r\n if (items[obj.id].needExpand) {\r\n $(t.div).children().first().velocity({ \"width\": items[obj.id].width + \"px\" });\r\n }\r\n\r\n circle.animate({ r: settings.pointRadius });\r\n });\r\n\r\n $(t.div).click(function (e) {\r\n FocusElt1(t.div);\r\n\r\n rosace.attr(\"fill\", \"rgba(255,255,255,0.2)\");\r\n\r\n if (settings.mode == \"ajax\") {\r\n ProcessAjax(this);\r\n } else if (settings.mode == \"json\") {\r\n ProcessJson(this);\r\n }\r\n });\r\n\r\n //circle.click(function (e) {\r\n // FocusElt1(t.node);\r\n // if (settings.mode == \"ajax\") {\r\n // ProcessAjax(t.node);\r\n // } else if (settings.mode == \"json\") {\r\n // ProcessJson(t.node);\r\n // }\r\n //});\r\n\r\n elts[\"#\" + obj.id] = t;\r\n });\r\n\r\n //GESTION URL HASH\r\n var hash = window.location.hash.replace(\"#\", \"\");\r\n\r\n if (hash != \"\") {\r\n console.log(\"hash = \" + hash);\r\n console.log(items[hash]);\r\n var obj = elts[\"#\" + hash];\r\n items[hash].click();\r\n }\r\n }\r\n });\r\n }\r\n\r\n function FocusElt1(obj) {\r\n $(\".node\").each(function (idx, node) {\r\n $(node).removeClass(\"currentRL\");\r\n });\r\n\r\n $(obj).addClass(\"rosaceLink node currentRL\");\r\n }\r\n\r\n function ProcessAjax(obj) {\r\n var url = $(obj).attr('data-url');\r\n\r\n $.ajax({\r\n url: url,\r\n success: function (data) {\r\n console.log(data);\r\n if (data == \"\") {\r\n infobox.addHtml(settings.welcomeText);\r\n } else {\r\n infobox.addHtml(data);\r\n }\r\n },\r\n error: function (data) {\r\n infobox.addHtml(\"ERROR CROSS DOMAIN\");\r\n //infobox.addHtml(\"<a href=''>toto</a><br /><a href=''>toto</a><br /><a href=''>toto</a><br /><a href=''>toto</a><br />\");\r\n }\r\n });\r\n }\r\n\r\n function ProcessJson(obj) {\r\n var idx = $(obj).attr('data-idx');\r\n if (settings.data[idx].externalLink != \"\") {\r\n window.open(settings.data[idx].externalLink);\r\n return false;\r\n } else {\r\n var data = settings.data[idx].children;\r\n if (data.length > 0) {\r\n var html = \"\";\r\n\r\n $(data).each(function (i, item) {\r\n html += \"<a href='\" + item.url + \"'>\" + item.title + \"</a><br />\";\r\n });\r\n if (html == \"\") {\r\n infobox.addHtml(settings.welcomeText);\r\n window.location.href = settings.data[idx].url;\r\n } else {\r\n infobox.addHtml(html);\r\n }\r\n } else {\r\n infobox.addHtml(settings.welcomeText);\r\n window.location.href = settings.data[idx].url;\r\n }\r\n }\r\n }\r\n\r\n /*function SetRosaceBg(img) {\r\n\t\tconsole.log(img);\r\n\t\tif(img) {\r\n\t\t\trosace.attr({'fill': 'url('+img+')'});\r\n\t\t} else {\r\n\t\t\trosace.attr({'fill': 'transparent'});\r\n\t\t}\r\n\t}*/\r\n\r\n $.fn.textWidth = function (text, font) {\r\n\t\tvar org = $(this)\r\n\t\tvar html = $('<span style=\"postion:absolute;width:auto;left:-9999px\">' + (text || org.html()) + '</span>');\r\n\t\tif (!text) {\r\n\t\t\thtml.css(\"font-family\", org.css(\"font-family\"));\r\n\t\t\thtml.css(\"font-size\", org.css(\"font-size\"));\r\n\t\t}\r\n\t\t$('body').append(html);\r\n\t\tvar width = html.width();\r\n\t\thtml.remove();\r\n\t\treturn width;\r\n };\r\n}(jQuery));"]}