From 5894398c3609dfd795f714cc8cefb758d39656d4 Mon Sep 17 00:00:00 2001
From: Brett Zamir <brettz9@yahoo.com>
Date: Sun, 13 May 2018 18:47:00 +0800
Subject: [PATCH] - Linting: ESLint (or ignore) JavaScript files; unfinished:
 editor/jgraduate and editor/extensions folders, editor/ (root), test/ (root)
 HTML - Fix: An apparent bug in jquery.svgicons.js whereby a variable `holder`
 was declared in too nested of a scope - Fix: `addBezierCurve` in canvg.js had
 undeclared `i` - Fix: Undeclared variable in opera widget - Fix: Screencast
 `showNotes`

---
 .eslintignore                                 |   10 +
 editor/canvg/canvg.js                         | 5607 +++++++++--------
 editor/canvg/rgbcolor.js                      |  553 +-
 editor/contextmenu/jquery.contextMenu.js      |  326 +-
 editor/jgraduate/jpicker.js                   | 4016 ++++++------
 editor/jgraduate/jquery.jgraduate.js          | 1200 ++--
 editor/spinbtn/JQuerySpinBtn.js               |  300 +-
 editor/svgicons/jquery.svgicons.js            |  705 +--
 firefox-extension/content/svg-edit-overlay.js |    7 +-
 .../content/svg-edit-overlay.xul              |    6 +-
 firefox-extension/handlers.js                 |   79 +-
 opera-widget/handlers.js                      |   55 +-
 opera-widget/index.html                       |   14 +-
 screencasts/svgopen2010/index.html            |    4 +-
 screencasts/svgopen2010/script.js             |  705 +--
 wave/wave.js                                  |  255 +-
 16 files changed, 6846 insertions(+), 6996 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index c4cd4b21..4c9b7d6c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,13 @@
 node_modules
+
 editor/jspdf/jspdf.min.js
 editor/jspdf/underscore-min.js
+jgraduate/jpicker.min.js
+jgraduate/jquery.jgraduate.js
+jquery-ui
+jquerybbq
+js-hotkeys
+spinbtn/JQuerySpinBtn.min.js
+test/qunit
+test/sinon
+wave/json2.js
diff --git a/editor/canvg/canvg.js b/editor/canvg/canvg.js
index f0d6d98c..a125543f 100644
--- a/editor/canvg/canvg.js
+++ b/editor/canvg/canvg.js
@@ -1,2384 +1,2401 @@
+/* eslint-disable no-var, no-redeclare, new-cap */
+/* globals RGBColor, stackBlurCanvasRGBA, ActiveXObject */
 /*
  * canvg.js - Javascript SVG parser and renderer on Canvas
- * MIT Licensed 
+ * MIT Licensed
  * Gabe Lerner (gabelerner@gmail.com)
  * http://code.google.com/p/canvg/
  *
  * Requires: rgbcolor.js - http://www.phpied.com/rgb-color-parser-in-javascript/
  */
-(function(){
-	// canvg(target, s)
-	// empty parameters: replace all 'svg' elements on page with 'canvas' elements
-	// target: canvas element or the id of a canvas element
-	// s: svg string, url to svg file, or xml document
-	// opts: optional hash of options
-	//		 ignoreMouse: true => ignore mouse events
-	//		 ignoreAnimation: true => ignore animations
-	//		 ignoreDimensions: true => does not try to resize canvas
-	//		 ignoreClear: true => does not clear canvas
-	//		 offsetX: int => draws at a x offset
-	//		 offsetY: int => draws at a y offset
-	//		 scaleWidth: int => scales horizontally to width
-	//		 scaleHeight: int => scales vertically to height
-	//		 renderCallback: function => will call the function after the first render is completed
-	//		 forceRedraw: function => will call the function on every frame, if it returns true, will redraw
-	this.canvg = function (target, s, opts) {
-		// no parameters
-		if (target == null && s == null && opts == null) {
-			var svgTags = document.querySelectorAll('svg');
-			for (var i=0; i<svgTags.length; i++) {
-				var svgTag = svgTags[i];
-				var c = document.createElement('canvas');
-				c.width = svgTag.clientWidth;
-				c.height = svgTag.clientHeight;
-				svgTag.parentNode.insertBefore(c, svgTag);
-				svgTag.parentNode.removeChild(svgTag);
-				var div = document.createElement('div');
-				div.appendChild(svgTag);
-				canvg(c, div.innerHTML);
-			}
-			return;
-		}
-	
-		if (typeof target == 'string') {
-			target = document.getElementById(target);
-		}
-		
-		// store class on canvas
-		if (target.svg != null) target.svg.stop();
-		var svg = build(opts || {});
-		// on i.e. 8 for flash canvas, we can't assign the property so check for it
-		if (!(target.childNodes.length == 1 && target.childNodes[0].nodeName == 'OBJECT')) target.svg = svg;
-		
-		var ctx = target.getContext('2d');
-		if (typeof(s.documentElement) != 'undefined') {
-			// load from xml doc
-			svg.loadXmlDoc(ctx, s);
-		}
-		else if (s.substr(0,1) == '<') {
-			// load from xml string
-			svg.loadXml(ctx, s);
-		}
-		else {
-			// load from url
-			svg.load(ctx, s);
+var canvg;
+(function () {
+// canvg(target, s)
+// empty parameters: replace all 'svg' elements on page with 'canvas' elements
+// target: canvas element or the id of a canvas element
+// s: svg string, url to svg file, or xml document
+// opts: optional hash of options
+//		 ignoreMouse: true => ignore mouse events
+//		 ignoreAnimation: true => ignore animations
+//		 ignoreDimensions: true => does not try to resize canvas
+//		 ignoreClear: true => does not clear canvas
+//		 offsetX: int => draws at a x offset
+//		 offsetY: int => draws at a y offset
+//		 scaleWidth: int => scales horizontally to width
+//		 scaleHeight: int => scales vertically to height
+//		 renderCallback: function => will call the function after the first render is completed
+//		 forceRedraw: function => will call the function on every frame, if it returns true, will redraw
+canvg = function (target, s, opts) {
+	// no parameters
+	if (target == null && s == null && opts == null) {
+		var svgTags = document.querySelectorAll('svg');
+		for (var i = 0; i < svgTags.length; i++) {
+			var svgTag = svgTags[i];
+			var c = document.createElement('canvas');
+			c.width = svgTag.clientWidth;
+			c.height = svgTag.clientHeight;
+			svgTag.parentNode.insertBefore(c, svgTag);
+			svgTag.parentNode.removeChild(svgTag);
+			var div = document.createElement('div');
+			div.appendChild(svgTag);
+			canvg(c, div.innerHTML);
 		}
+		return;
 	}
 
-	function build(opts) {
-		var svg = { opts: opts };
-		
-		svg.FRAMERATE = 30;
-		svg.MAX_VIRTUAL_PIXELS = 30000;
-		
-		svg.log = function(msg) {};
-		if (svg.opts['log'] == true && typeof(console) != 'undefined') {
-			svg.log = function(msg) { console.log(msg); };
+	if (typeof target === 'string') {
+		target = document.getElementById(target);
+	}
+
+	// store class on canvas
+	if (target.svg != null) target.svg.stop();
+	var svg = build(opts || {});
+	// on i.e. 8 for flash canvas, we can't assign the property so check for it
+	if (!(target.childNodes.length === 1 && target.childNodes[0].nodeName === 'OBJECT')) {
+		target.svg = svg;
+	}
+
+	var ctx = target.getContext('2d');
+	if (typeof s.documentElement !== 'undefined') {
+		// load from xml doc
+		svg.loadXmlDoc(ctx, s);
+	} else if (s.substr(0, 1) === '<') {
+		// load from xml string
+		svg.loadXml(ctx, s);
+	} else {
+		// load from url
+		svg.load(ctx, s);
+	}
+};
+
+function build (opts) {
+	var svg = {opts: opts};
+
+	svg.FRAMERATE = 30;
+	svg.MAX_VIRTUAL_PIXELS = 30000;
+
+	svg.log = function (msg) {};
+	if (svg.opts.log === true && typeof console !== 'undefined') {
+		svg.log = function (msg) { console.log(msg); };
+	};
+
+	// globals
+	svg.init = function (ctx) {
+		var uniqueId = 0;
+		svg.UniqueId = function () { uniqueId++; return 'canvg' + uniqueId;	};
+		svg.Definitions = {};
+		svg.Styles = {};
+		svg.Animations = [];
+		svg.Images = [];
+		svg.ctx = ctx;
+		svg.ViewPort = new function () {
+			this.viewPorts = [];
+			this.Clear = function () { this.viewPorts = []; };
+			this.SetCurrent = function (width, height) { this.viewPorts.push({ width: width, height: height }); };
+			this.RemoveCurrent = function () { this.viewPorts.pop(); };
+			this.Current = function () { return this.viewPorts[this.viewPorts.length - 1]; };
+			this.width = function () { return this.Current().width; };
+			this.height = function () { return this.Current().height; };
+			this.ComputeSize = function (d) {
+				if (d != null && typeof d === 'number') return d;
+				if (d === 'x') return this.width();
+				if (d === 'y') return this.height();
+				return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);
+			};
+		}();
+	};
+	svg.init();
+
+	// images loaded
+	svg.ImagesLoaded = function () {
+		for (var i = 0; i < svg.Images.length; i++) {
+			if (!svg.Images[i].loaded) return false;
+		}
+		return true;
+	};
+
+	// trim
+	svg.trim = function (s) { return s.replace(/^\s+|\s+$/g, ''); };
+
+	// compress spaces
+	svg.compressSpaces = function (s) { return s.replace(/[\s\r\t\n]+/gm, ' '); };
+
+	// ajax
+	svg.ajax = function (url) {
+		var AJAX;
+		if (window.XMLHttpRequest) {
+			AJAX = new XMLHttpRequest();
+		} else {
+			AJAX = new ActiveXObject('Microsoft.XMLHTTP');
+		}
+		if (AJAX) {
+			AJAX.open('GET', url, false);
+			AJAX.send(null);
+			return AJAX.responseText;
+		}
+		return null;
+	};
+
+	// parse xml
+	svg.parseXml = function (xml) {
+		if (window.DOMParser) {
+			var parser = new DOMParser();
+			return parser.parseFromString(xml, 'text/xml');
+		} else {
+			xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
+			var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
+			xmlDoc.async = 'false';
+			xmlDoc.loadXML(xml);
+			return xmlDoc;
+		}
+	};
+
+	svg.Property = function (name, value) {
+		this.name = name;
+		this.value = value;
+	};
+	svg.Property.prototype.getValue = function () {
+		return this.value;
+	};
+
+	svg.Property.prototype.hasValue = function () {
+		return (this.value != null && this.value !== '');
+	};
+
+	// return the numerical value of the property
+	svg.Property.prototype.numValue = function () {
+		if (!this.hasValue()) return 0;
+
+		var n = parseFloat(this.value);
+		if ((this.value + '').match(/%$/)) {
+			n = n / 100.0;
+		}
+		return n;
+	};
+
+	svg.Property.prototype.valueOrDefault = function (def) {
+		if (this.hasValue()) return this.value;
+		return def;
+	};
+
+	svg.Property.prototype.numValueOrDefault = function (def) {
+		if (this.hasValue()) return this.numValue();
+		return def;
+	};
+
+	// color extensions
+	// augment the current color value with the opacity
+	svg.Property.prototype.addOpacity = function (opacityProp) {
+		var newValue = this.value;
+		if (opacityProp.value != null && opacityProp.value !== '' && typeof this.value === 'string') { // can only add opacity to colors, not patterns
+			var color = new RGBColor(this.value);
+			if (color.ok) {
+				newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')';
+			}
+		}
+		return new svg.Property(this.name, newValue);
+	};
+
+	// definition extensions
+	// get the definition from the definitions table
+	svg.Property.prototype.getDefinition = function () {
+		var name = this.value.match(/#([^)'"]+)/);
+		if (name) { name = name[1]; }
+		if (!name) { name = this.value; }
+		return svg.Definitions[name];
+	};
+
+	svg.Property.prototype.isUrlDefinition = function () {
+		return this.value.indexOf('url(') === 0;
+	};
+
+	svg.Property.prototype.getFillStyleDefinition = function (e, opacityProp) {
+		var def = this.getDefinition();
+
+		// gradient
+		if (def != null && def.createGradient) {
+			return def.createGradient(svg.ctx, e, opacityProp);
+		}
+
+		// pattern
+		if (def != null && def.createPattern) {
+			if (def.getHrefAttribute().hasValue()) {
+				var pt = def.attribute('patternTransform');
+				def = def.getHrefAttribute().getDefinition();
+				if (pt.hasValue()) { def.attribute('patternTransform', true).value = pt.value; }
+			}
+			return def.createPattern(svg.ctx, e);
+		}
+
+		return null;
+	};
+
+	// length extensions
+	svg.Property.prototype.getDPI = function (viewPort) {
+		return 96.0; // TODO: compute?
+	};
+
+	svg.Property.prototype.getEM = function (viewPort) {
+		var em = 12;
+
+		var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
+		if (fontSize.hasValue()) em = fontSize.toPixels(viewPort);
+
+		return em;
+	};
+
+	svg.Property.prototype.getUnits = function () {
+		var s = this.value + '';
+		return s.replace(/[0-9.-]/g, '');
+	};
+
+	// get the length as pixels
+	svg.Property.prototype.toPixels = function (viewPort, processPercent) {
+		if (!this.hasValue()) return 0;
+		var s = this.value + '';
+		if (s.match(/em$/)) return this.numValue() * this.getEM(viewPort);
+		if (s.match(/ex$/)) return this.numValue() * this.getEM(viewPort) / 2.0;
+		if (s.match(/px$/)) return this.numValue();
+		if (s.match(/pt$/)) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0);
+		if (s.match(/pc$/)) return this.numValue() * 15;
+		if (s.match(/cm$/)) return this.numValue() * this.getDPI(viewPort) / 2.54;
+		if (s.match(/mm$/)) return this.numValue() * this.getDPI(viewPort) / 25.4;
+		if (s.match(/in$/)) return this.numValue() * this.getDPI(viewPort);
+		if (s.match(/%$/)) return this.numValue() * svg.ViewPort.ComputeSize(viewPort);
+		var n = this.numValue();
+		if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort);
+		return n;
+	};
+
+	// time extensions
+	// get the time as milliseconds
+	svg.Property.prototype.toMilliseconds = function () {
+		if (!this.hasValue()) return 0;
+		var s = this.value + '';
+		if (s.match(/s$/)) return this.numValue() * 1000;
+		if (s.match(/ms$/)) return this.numValue();
+		return this.numValue();
+	};
+
+	// angle extensions
+	// get the angle as radians
+	svg.Property.prototype.toRadians = function () {
+		if (!this.hasValue()) return 0;
+		var s = this.value + '';
+		if (s.match(/deg$/)) return this.numValue() * (Math.PI / 180.0);
+		if (s.match(/grad$/)) return this.numValue() * (Math.PI / 200.0);
+		if (s.match(/rad$/)) return this.numValue();
+		return this.numValue() * (Math.PI / 180.0);
+	};
+
+	// text extensions
+	// get the text baseline
+	var textBaselineMapping = {
+		'baseline': 'alphabetic',
+		'before-edge': 'top',
+		'text-before-edge': 'top',
+		'middle': 'middle',
+		'central': 'middle',
+		'after-edge': 'bottom',
+		'text-after-edge': 'bottom',
+		'ideographic': 'ideographic',
+		'alphabetic': 'alphabetic',
+		'hanging': 'hanging',
+		'mathematical': 'alphabetic'
+	};
+	svg.Property.prototype.toTextBaseline = function () {
+		if (!this.hasValue()) return null;
+		return textBaselineMapping[this.value];
+	};
+
+	// fonts
+	svg.Font = new function () {
+		this.Styles = 'normal|italic|oblique|inherit';
+		this.Variants = 'normal|small-caps|inherit';
+		this.Weights = 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit';
+
+		this.CreateFont = function (fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
+			var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
+			return {
+				fontFamily: fontFamily || f.fontFamily,
+				fontSize: fontSize || f.fontSize,
+				fontStyle: fontStyle || f.fontStyle,
+				fontWeight: fontWeight || f.fontWeight,
+				fontVariant: fontVariant || f.fontVariant,
+				toString: function () {
+					return [
+						this.fontStyle, this.fontVariant, this.fontWeight,
+						this.fontSize, this.fontFamily
+					].join(' ');
+				}
+			};
 		};
-		
-		// globals
-		svg.init = function(ctx) {
-			var uniqueId = 0;
-			svg.UniqueId = function () { uniqueId++; return 'canvg' + uniqueId;	};
-			svg.Definitions = {};
-			svg.Styles = {};
-			svg.Animations = [];
-			svg.Images = [];
-			svg.ctx = ctx;
-			svg.ViewPort = new (function () {
-				this.viewPorts = [];
-				this.Clear = function() { this.viewPorts = []; }
-				this.SetCurrent = function(width, height) { this.viewPorts.push({ width: width, height: height }); }
-				this.RemoveCurrent = function() { this.viewPorts.pop(); }
-				this.Current = function() { return this.viewPorts[this.viewPorts.length - 1]; }
-				this.width = function() { return this.Current().width; }
-				this.height = function() { return this.Current().height; }
-				this.ComputeSize = function(d) {
-					if (d != null && typeof(d) == 'number') return d;
-					if (d == 'x') return this.width();
-					if (d == 'y') return this.height();
-					return Math.sqrt(Math.pow(this.width(), 2) + Math.pow(this.height(), 2)) / Math.sqrt(2);			
-				}
-			});
-		}
-		svg.init();
-		
-		// images loaded
-		svg.ImagesLoaded = function() { 
-			for (var i=0; i<svg.Images.length; i++) {
-				if (!svg.Images[i].loaded) return false;
-			}
-			return true;
-		}
 
-		// trim
-		svg.trim = function(s) { return s.replace(/^\s+|\s+$/g, ''); }
-		
-		// compress spaces
-		svg.compressSpaces = function(s) { return s.replace(/[\s\r\t\n]+/gm,' '); }
-		
-		// ajax
-		svg.ajax = function(url) {
-			var AJAX;
-			if(window.XMLHttpRequest){AJAX=new XMLHttpRequest();}
-			else{AJAX=new ActiveXObject('Microsoft.XMLHTTP');}
-			if(AJAX){
-			   AJAX.open('GET',url,false);
-			   AJAX.send(null);
-			   return AJAX.responseText;
+		var that = this;
+		this.Parse = function (s) {
+			var f = {};
+			var d = svg.trim(svg.compressSpaces(s || '')).split(' ');
+			var set = {fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false};
+			var ff = '';
+			for (var i = 0; i < d.length; i++) {
+				if (!set.fontStyle && that.Styles.indexOf(d[i]) > -1) {
+					if (d[i] !== 'inherit') f.fontStyle = d[i]; set.fontStyle = true;
+				} else if (!set.fontVariant && that.Variants.indexOf(d[i]) > -1) {
+					if (d[i] !== 'inherit') f.fontVariant = d[i]; set.fontStyle = set.fontVariant = true;
+				} else if (!set.fontWeight && that.Weights.indexOf(d[i]) > -1) {
+					if (d[i] !== 'inherit') f.fontWeight = d[i]; set.fontStyle = set.fontVariant = set.fontWeight = true;
+				} else if (!set.fontSize) {
+					if (d[i] !== 'inherit') f.fontSize = d[i].split('/')[0]; set.fontStyle = set.fontVariant = set.fontWeight = set.fontSize = true;
+				} else {
+					if (d[i] !== 'inherit') ff += d[i];
+				}
 			}
-			return null;
-		} 
-		
-		// parse xml
-		svg.parseXml = function(xml) {
-			if (window.DOMParser)
-			{
-				var parser = new DOMParser();
-				return parser.parseFromString(xml, 'text/xml');
-			}
-			else 
-			{
-				xml = xml.replace(/<!DOCTYPE svg[^>]*>/, '');
-				var xmlDoc = new ActiveXObject('Microsoft.XMLDOM');
-				xmlDoc.async = 'false';
-				xmlDoc.loadXML(xml); 
-				return xmlDoc;
-			}		
-		}
-		
-		svg.Property = function(name, value) {
-			this.name = name;
-			this.value = value;
-		}	
-			svg.Property.prototype.getValue = function() {
-				return this.value;
-			}
-		
-			svg.Property.prototype.hasValue = function() {
-				return (this.value != null && this.value !== '');
-			}
-							
-			// return the numerical value of the property
-			svg.Property.prototype.numValue = function() {
-				if (!this.hasValue()) return 0;
-				
-				var n = parseFloat(this.value);
-				if ((this.value + '').match(/%$/)) {
-					n = n / 100.0;
-				}
-				return n;
-			}
-			
-			svg.Property.prototype.valueOrDefault = function(def) {
-				if (this.hasValue()) return this.value;
-				return def;
-			}
-			
-			svg.Property.prototype.numValueOrDefault = function(def) {
-				if (this.hasValue()) return this.numValue();
-				return def;
-			}
-			
-			// color extensions
-				// augment the current color value with the opacity
-				svg.Property.prototype.addOpacity = function(opacityProp) {
-					var newValue = this.value;
-					if (opacityProp.value != null && opacityProp.value != '' && typeof(this.value)=='string') { // can only add opacity to colors, not patterns
-						var color = new RGBColor(this.value);
-						if (color.ok) {
-							newValue = 'rgba(' + color.r + ', ' + color.g + ', ' + color.b + ', ' + opacityProp.numValue() + ')';
-						}
-					}
-					return new svg.Property(this.name, newValue);
-				}
-			
-			// definition extensions
-				// get the definition from the definitions table
-				svg.Property.prototype.getDefinition = function() {
-					var name = this.value.match(/#([^\)'"]+)/);
-					if (name) { name = name[1]; }
-					if (!name) { name = this.value; }
-					return svg.Definitions[name];
-				}
-				
-				svg.Property.prototype.isUrlDefinition = function() {
-					return this.value.indexOf('url(') == 0
-				}
-				
-				svg.Property.prototype.getFillStyleDefinition = function(e, opacityProp) {
-					var def = this.getDefinition();
-					
-					// gradient
-					if (def != null && def.createGradient) {
-						return def.createGradient(svg.ctx, e, opacityProp);
-					}
-					
-					// pattern
-					if (def != null && def.createPattern) {
-						if (def.getHrefAttribute().hasValue()) {
-							var pt = def.attribute('patternTransform');
-							def = def.getHrefAttribute().getDefinition();
-							if (pt.hasValue()) { def.attribute('patternTransform', true).value = pt.value; }
-						}
-						return def.createPattern(svg.ctx, e);
-					}
-					
-					return null;
-				}
-			
-			// length extensions
-				svg.Property.prototype.getDPI = function(viewPort) {
-					return 96.0; // TODO: compute?
-				}
-				
-				svg.Property.prototype.getEM = function(viewPort) {
-					var em = 12;
-					
-					var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
-					if (fontSize.hasValue()) em = fontSize.toPixels(viewPort);
-					
-					return em;
-				}
-				
-				svg.Property.prototype.getUnits = function() {
-					var s = this.value+'';
-					return s.replace(/[0-9\.\-]/g,'');
-				}
-			
-				// get the length as pixels
-				svg.Property.prototype.toPixels = function(viewPort, processPercent) {
-					if (!this.hasValue()) return 0;
-					var s = this.value+'';
-					if (s.match(/em$/)) return this.numValue() * this.getEM(viewPort);
-					if (s.match(/ex$/)) return this.numValue() * this.getEM(viewPort) / 2.0;
-					if (s.match(/px$/)) return this.numValue();
-					if (s.match(/pt$/)) return this.numValue() * this.getDPI(viewPort) * (1.0 / 72.0);
-					if (s.match(/pc$/)) return this.numValue() * 15;
-					if (s.match(/cm$/)) return this.numValue() * this.getDPI(viewPort) / 2.54;
-					if (s.match(/mm$/)) return this.numValue() * this.getDPI(viewPort) / 25.4;
-					if (s.match(/in$/)) return this.numValue() * this.getDPI(viewPort);
-					if (s.match(/%$/)) return this.numValue() * svg.ViewPort.ComputeSize(viewPort);
-					var n = this.numValue();
-					if (processPercent && n < 1.0) return n * svg.ViewPort.ComputeSize(viewPort);
-					return n;
-				}
+			if (ff !== '') f.fontFamily = ff;
+			return f;
+		};
+	}();
 
-			// time extensions
-				// get the time as milliseconds
-				svg.Property.prototype.toMilliseconds = function() {
-					if (!this.hasValue()) return 0;
-					var s = this.value+'';
-					if (s.match(/s$/)) return this.numValue() * 1000;
-					if (s.match(/ms$/)) return this.numValue();
-					return this.numValue();
+	// points and paths
+	svg.ToNumberArray = function (s) {
+		var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
+		for (var i = 0; i < a.length; i++) {
+			a[i] = parseFloat(a[i]);
+		}
+		return a;
+	};
+	svg.Point = function (x, y) {
+		this.x = x;
+		this.y = y;
+	};
+	svg.Point.prototype.angleTo = function (p) {
+		return Math.atan2(p.y - this.y, p.x - this.x);
+	};
+
+	svg.Point.prototype.applyTransform = function (v) {
+		var xp = this.x * v[0] + this.y * v[2] + v[4];
+		var yp = this.x * v[1] + this.y * v[3] + v[5];
+		this.x = xp;
+		this.y = yp;
+	};
+
+	svg.CreatePoint = function (s) {
+		var a = svg.ToNumberArray(s);
+		return new svg.Point(a[0], a[1]);
+	};
+	svg.CreatePath = function (s) {
+		var a = svg.ToNumberArray(s);
+		var path = [];
+		for (var i = 0; i < a.length; i += 2) {
+			path.push(new svg.Point(a[i], a[i + 1]));
+		}
+		return path;
+	};
+
+	// bounding box
+	svg.BoundingBox = function (x1, y1, x2, y2) { // pass in initial points if you want
+		this.x1 = Number.NaN;
+		this.y1 = Number.NaN;
+		this.x2 = Number.NaN;
+		this.y2 = Number.NaN;
+
+		this.x = function () { return this.x1; };
+		this.y = function () { return this.y1; };
+		this.width = function () { return this.x2 - this.x1; };
+		this.height = function () { return this.y2 - this.y1; };
+
+		this.addPoint = function (x, y) {
+			if (x != null) {
+				if (isNaN(this.x1) || isNaN(this.x2)) {
+					this.x1 = x;
+					this.x2 = x;
 				}
-			
-			// angle extensions
-				// get the angle as radians
-				svg.Property.prototype.toRadians = function() {
-					if (!this.hasValue()) return 0;
-					var s = this.value+'';
-					if (s.match(/deg$/)) return this.numValue() * (Math.PI / 180.0);
-					if (s.match(/grad$/)) return this.numValue() * (Math.PI / 200.0);
-					if (s.match(/rad$/)) return this.numValue();
-					return this.numValue() * (Math.PI / 180.0);
+				if (x < this.x1) this.x1 = x;
+				if (x > this.x2) this.x2 = x;
+			}
+
+			if (y != null) {
+				if (isNaN(this.y1) || isNaN(this.y2)) {
+					this.y1 = y;
+					this.y2 = y;
 				}
-		
-			// text extensions
-				// get the text baseline
-				var textBaselineMapping = {
-					'baseline': 'alphabetic',
-					'before-edge': 'top',
-					'text-before-edge': 'top',
-					'middle': 'middle',
-					'central': 'middle',
-					'after-edge': 'bottom',
-					'text-after-edge': 'bottom',
-					'ideographic': 'ideographic',
-					'alphabetic': 'alphabetic',
-					'hanging': 'hanging',
-					'mathematical': 'alphabetic'
+				if (y < this.y1) this.y1 = y;
+				if (y > this.y2) this.y2 = y;
+			}
+		};
+		this.addX = function (x) { this.addPoint(x, null); };
+		this.addY = function (y) { this.addPoint(null, y); };
+
+		this.addBoundingBox = function (bb) {
+			this.addPoint(bb.x1, bb.y1);
+			this.addPoint(bb.x2, bb.y2);
+		};
+
+		this.addQuadraticCurve = function (p0x, p0y, p1x, p1y, p2x, p2y) {
+			var cp1x = p0x + 2 / 3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
+			var cp1y = p0y + 2 / 3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
+			var cp2x = cp1x + 1 / 3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0)
+			var cp2y = cp1y + 1 / 3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
+			this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y,	cp2y, p2x, p2y);
+		};
+
+		this.addBezierCurve = function (p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
+			// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
+			var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
+			this.addPoint(p0[0], p0[1]);
+			this.addPoint(p3[0], p3[1]);
+
+			for (var i = 0; i <= 1; i++) {
+				var f = function (t) {
+					return Math.pow(1 - t, 3) * p0[i] +
+					3 * Math.pow(1 - t, 2) * t * p1[i] +
+					3 * (1 - t) * Math.pow(t, 2) * p2[i] +
+					Math.pow(t, 3) * p3[i];
 				};
-				svg.Property.prototype.toTextBaseline = function () {
-					if (!this.hasValue()) return null;
-					return textBaselineMapping[this.value];
+
+				var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
+				var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
+				var c = 3 * p1[i] - 3 * p0[i];
+
+				if (a === 0) {
+					if (b === 0) continue;
+					var t = -c / b;
+					if (t > 0 && t < 1) {
+						if (i === 0) this.addX(f(t));
+						if (i === 1) this.addY(f(t));
+					}
+					continue;
+				}
+
+				var b2ac = Math.pow(b, 2) - 4 * c * a;
+				if (b2ac < 0) continue;
+				var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
+				if (t1 > 0 && t1 < 1) {
+					if (i === 0) this.addX(f(t1));
+					if (i === 1) this.addY(f(t1));
+				}
+				var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
+				if (t2 > 0 && t2 < 1) {
+					if (i === 0) this.addX(f(t2));
+					if (i === 1) this.addY(f(t2));
 				}
-				
-		// fonts
-		svg.Font = new (function() {
-			this.Styles = 'normal|italic|oblique|inherit';
-			this.Variants = 'normal|small-caps|inherit';
-			this.Weights = 'normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900|inherit';
-			
-			this.CreateFont = function(fontStyle, fontVariant, fontWeight, fontSize, fontFamily, inherit) {
-				var f = inherit != null ? this.Parse(inherit) : this.CreateFont('', '', '', '', '', svg.ctx.font);
-				return { 
-					fontFamily: fontFamily || f.fontFamily, 
-					fontSize: fontSize || f.fontSize, 
-					fontStyle: fontStyle || f.fontStyle, 
-					fontWeight: fontWeight || f.fontWeight, 
-					fontVariant: fontVariant || f.fontVariant,
-					toString: function () { return [this.fontStyle, this.fontVariant, this.fontWeight, this.fontSize, this.fontFamily].join(' ') } 
-				} 
 			}
-			
-			var that = this;
-			this.Parse = function(s) {
-				var f = {};
-				var d = svg.trim(svg.compressSpaces(s || '')).split(' ');
-				var set = { fontSize: false, fontStyle: false, fontWeight: false, fontVariant: false }
-				var ff = '';
-				for (var i=0; i<d.length; i++) {
-					if (!set.fontStyle && that.Styles.indexOf(d[i]) != -1) { if (d[i] != 'inherit') f.fontStyle = d[i]; set.fontStyle = true; }
-					else if (!set.fontVariant && that.Variants.indexOf(d[i]) != -1) { if (d[i] != 'inherit') f.fontVariant = d[i]; set.fontStyle = set.fontVariant = true;	}
-					else if (!set.fontWeight && that.Weights.indexOf(d[i]) != -1) {	if (d[i] != 'inherit') f.fontWeight = d[i]; set.fontStyle = set.fontVariant = set.fontWeight = true; }
-					else if (!set.fontSize) { if (d[i] != 'inherit') f.fontSize = d[i].split('/')[0]; set.fontStyle = set.fontVariant = set.fontWeight = set.fontSize = true; }
-					else { if (d[i] != 'inherit') ff += d[i]; }
-				} if (ff != '') f.fontFamily = ff;
-				return f;
+		};
+
+		this.isPointInBox = function (x, y) {
+			return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2);
+		};
+
+		this.addPoint(x1, y1);
+		this.addPoint(x2, y2);
+	};
+
+	// transforms
+	svg.Transform = function (v) {
+		var that = this;
+		this.Type = {};
+
+		// translate
+		this.Type.translate = function (s) {
+			this.p = svg.CreatePoint(s);
+			this.apply = function (ctx) {
+				ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
+			};
+			this.unapply = function (ctx) {
+				ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0);
+			};
+			this.applyToPoint = function (p) {
+				p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
+			};
+		};
+
+		// rotate
+		this.Type.rotate = function (s) {
+			var a = svg.ToNumberArray(s);
+			this.angle = new svg.Property('angle', a[0]);
+			this.cx = a[1] || 0;
+			this.cy = a[2] || 0;
+			this.apply = function (ctx) {
+				ctx.translate(this.cx, this.cy);
+				ctx.rotate(this.angle.toRadians());
+				ctx.translate(-this.cx, -this.cy);
+			};
+			this.unapply = function (ctx) {
+				ctx.translate(this.cx, this.cy);
+				ctx.rotate(-1.0 * this.angle.toRadians());
+				ctx.translate(-this.cx, -this.cy);
+			};
+			this.applyToPoint = function (p) {
+				var a = this.angle.toRadians();
+				p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
+				p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
+				p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
+			};
+		};
+
+		this.Type.scale = function (s) {
+			this.p = svg.CreatePoint(s);
+			this.apply = function (ctx) {
+				ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0);
+			};
+			this.unapply = function (ctx) {
+				ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0);
+			};
+			this.applyToPoint = function (p) {
+				p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
+			};
+		};
+
+		this.Type.matrix = function (s) {
+			this.m = svg.ToNumberArray(s);
+			this.apply = function (ctx) {
+				ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
+			};
+			this.applyToPoint = function (p) {
+				p.applyTransform(this.m);
+			};
+		};
+
+		this.Type.SkewBase = function (s) {
+			this.base = that.Type.matrix;
+			this.base(s);
+			this.angle = new svg.Property('angle', s);
+		};
+		this.Type.SkewBase.prototype = new this.Type.matrix();
+
+		this.Type.skewX = function (s) {
+			this.base = that.Type.SkewBase;
+			this.base(s);
+			this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
+		};
+		this.Type.skewX.prototype = new this.Type.SkewBase();
+
+		this.Type.skewY = function (s) {
+			this.base = that.Type.SkewBase;
+			this.base(s);
+			this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0];
+		};
+		this.Type.skewY.prototype = new this.Type.SkewBase();
+
+		this.transforms = [];
+
+		this.apply = function (ctx) {
+			for (var i = 0; i < this.transforms.length; i++) {
+				this.transforms[i].apply(ctx);
 			}
-		});
-		
-		// points and paths
-		svg.ToNumberArray = function(s) {
-			var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
-			for (var i=0; i<a.length; i++) {
-				a[i] = parseFloat(a[i]);
+		};
+
+		this.unapply = function (ctx) {
+			for (var i = this.transforms.length - 1; i >= 0; i--) {
+				this.transforms[i].unapply(ctx);
 			}
-			return a;
-		}		
-		svg.Point = function(x, y) {
-			this.x = x;
-			this.y = y;
-		}	
-			svg.Point.prototype.angleTo = function(p) {
-				return Math.atan2(p.y - this.y, p.x - this.x);
+		};
+
+		this.applyToPoint = function (p) {
+			for (var i = 0; i < this.transforms.length; i++) {
+				this.transforms[i].applyToPoint(p);
 			}
-			
-			svg.Point.prototype.applyTransform = function(v) {
-				var xp = this.x * v[0] + this.y * v[2] + v[4];
-				var yp = this.x * v[1] + this.y * v[3] + v[5];
-				this.x = xp;
-				this.y = yp;
+		};
+
+		var data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g, ') ').split(/\s(?=[a-z])/);
+		for (var i = 0; i < data.length; i++) {
+			var type = svg.trim(data[i].split('(')[0]);
+			var s = data[i].split('(')[1].replace(')', '');
+			var transform = new this.Type[type](s);
+			transform.type = type;
+			this.transforms.push(transform);
+		}
+	};
+
+	// aspect ratio
+	svg.AspectRatio = function (ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
+		// aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
+		aspectRatio = svg.compressSpaces(aspectRatio);
+		aspectRatio = aspectRatio.replace(/^defer\s/, ''); // ignore defer
+		var align = aspectRatio.split(' ')[0] || 'xMidYMid';
+		var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';
+
+		// calculate scale
+		var scaleX = width / desiredWidth;
+		var scaleY = height / desiredHeight;
+		var scaleMin = Math.min(scaleX, scaleY);
+		var scaleMax = Math.max(scaleX, scaleY);
+		if (meetOrSlice === 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; }
+		if (meetOrSlice === 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }
+
+		refX = new svg.Property('refX', refX);
+		refY = new svg.Property('refY', refY);
+		if (refX.hasValue() && refY.hasValue()) {
+			ctx.translate(-scaleMin * refX.toPixels('x'), -scaleMin * refY.toPixels('y'));
+		} else {
+			// align
+			if (align.match(/^xMid/) && ((meetOrSlice === 'meet' && scaleMin === scaleY) || (meetOrSlice === 'slice' && scaleMax === scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0);
+			if (align.match(/YMid$/) && ((meetOrSlice === 'meet' && scaleMin === scaleX) || (meetOrSlice === 'slice' && scaleMax === scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0);
+			if (align.match(/^xMax/) && ((meetOrSlice === 'meet' && scaleMin === scaleY) || (meetOrSlice === 'slice' && scaleMax === scaleY))) ctx.translate(width - desiredWidth, 0);
+			if (align.match(/YMax$/) && ((meetOrSlice === 'meet' && scaleMin === scaleX) || (meetOrSlice === 'slice' && scaleMax === scaleX))) ctx.translate(0, height - desiredHeight);
+		}
+
+		// scale
+		if (align === 'none') ctx.scale(scaleX, scaleY);
+		else if (meetOrSlice === 'meet') ctx.scale(scaleMin, scaleMin);
+		else if (meetOrSlice === 'slice') ctx.scale(scaleMax, scaleMax);
+
+		// translate
+		ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);
+	};
+
+	// elements
+	svg.Element = {};
+
+	svg.EmptyProperty = new svg.Property('EMPTY', '');
+
+	svg.Element.ElementBase = function (node) {
+		this.attributes = {};
+		this.styles = {};
+		this.children = [];
+
+		// get or create attribute
+		this.attribute = function (name, createIfNotExists) {
+			var a = this.attributes[name];
+			if (a != null) return a;
+
+			if (createIfNotExists === true) { a = new svg.Property(name, ''); this.attributes[name] = a; }
+			return a || svg.EmptyProperty;
+		};
+
+		this.getHrefAttribute = function () {
+			for (var a in this.attributes) {
+				if (a.match(/:href$/)) {
+					return this.attributes[a];
+				}
+			}
+			return svg.EmptyProperty;
+		};
+
+		// get or create style, crawls up node tree
+		this.style = function (name, createIfNotExists, skipAncestors) {
+			var s = this.styles[name];
+			if (s != null) return s;
+
+			var a = this.attribute(name);
+			if (a != null && a.hasValue()) {
+				this.styles[name] = a; // move up to me to cache
+				return a;
 			}
 
-		svg.CreatePoint = function(s) {
-			var a = svg.ToNumberArray(s);
-			return new svg.Point(a[0], a[1]);
-		}
-		svg.CreatePath = function(s) {
-			var a = svg.ToNumberArray(s);
-			var path = [];
-			for (var i=0; i<a.length; i+=2) {
-				path.push(new svg.Point(a[i], a[i+1]));
-			}
-			return path;
-		}
-		
-		// bounding box
-		svg.BoundingBox = function(x1, y1, x2, y2) { // pass in initial points if you want
-			this.x1 = Number.NaN;
-			this.y1 = Number.NaN;
-			this.x2 = Number.NaN;
-			this.y2 = Number.NaN;
-			
-			this.x = function() { return this.x1; }
-			this.y = function() { return this.y1; }
-			this.width = function() { return this.x2 - this.x1; }
-			this.height = function() { return this.y2 - this.y1; }
-			
-			this.addPoint = function(x, y) {	
-				if (x != null) {
-					if (isNaN(this.x1) || isNaN(this.x2)) {
-						this.x1 = x;
-						this.x2 = x;
-					}
-					if (x < this.x1) this.x1 = x;
-					if (x > this.x2) this.x2 = x;
-				}
-			
-				if (y != null) {
-					if (isNaN(this.y1) || isNaN(this.y2)) {
-						this.y1 = y;
-						this.y2 = y;
-					}
-					if (y < this.y1) this.y1 = y;
-					if (y > this.y2) this.y2 = y;
-				}
-			}			
-			this.addX = function(x) { this.addPoint(x, null); }
-			this.addY = function(y) { this.addPoint(null, y); }
-			
-			this.addBoundingBox = function(bb) {
-				this.addPoint(bb.x1, bb.y1);
-				this.addPoint(bb.x2, bb.y2);
-			}
-			
-			this.addQuadraticCurve = function(p0x, p0y, p1x, p1y, p2x, p2y) {
-				var cp1x = p0x + 2/3 * (p1x - p0x); // CP1 = QP0 + 2/3 *(QP1-QP0)
-				var cp1y = p0y + 2/3 * (p1y - p0y); // CP1 = QP0 + 2/3 *(QP1-QP0)
-				var cp2x = cp1x + 1/3 * (p2x - p0x); // CP2 = CP1 + 1/3 *(QP2-QP0)
-				var cp2y = cp1y + 1/3 * (p2y - p0y); // CP2 = CP1 + 1/3 *(QP2-QP0)
-				this.addBezierCurve(p0x, p0y, cp1x, cp2x, cp1y,	cp2y, p2x, p2y);
-			}
-			
-			this.addBezierCurve = function(p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y) {
-				// from http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
-				var p0 = [p0x, p0y], p1 = [p1x, p1y], p2 = [p2x, p2y], p3 = [p3x, p3y];
-				this.addPoint(p0[0], p0[1]);
-				this.addPoint(p3[0], p3[1]);
-				
-				for (i=0; i<=1; i++) {
-					var f = function(t) { 
-						return Math.pow(1-t, 3) * p0[i]
-						+ 3 * Math.pow(1-t, 2) * t * p1[i]
-						+ 3 * (1-t) * Math.pow(t, 2) * p2[i]
-						+ Math.pow(t, 3) * p3[i];
-					}
-					
-					var b = 6 * p0[i] - 12 * p1[i] + 6 * p2[i];
-					var a = -3 * p0[i] + 9 * p1[i] - 9 * p2[i] + 3 * p3[i];
-					var c = 3 * p1[i] - 3 * p0[i];
-					
-					if (a == 0) {
-						if (b == 0) continue;
-						var t = -c / b;
-						if (0 < t && t < 1) {
-							if (i == 0) this.addX(f(t));
-							if (i == 1) this.addY(f(t));
-						}
-						continue;
-					}
-					
-					var b2ac = Math.pow(b, 2) - 4 * c * a;
-					if (b2ac < 0) continue;
-					var t1 = (-b + Math.sqrt(b2ac)) / (2 * a);
-					if (0 < t1 && t1 < 1) {
-						if (i == 0) this.addX(f(t1));
-						if (i == 1) this.addY(f(t1));
-					}
-					var t2 = (-b - Math.sqrt(b2ac)) / (2 * a);
-					if (0 < t2 && t2 < 1) {
-						if (i == 0) this.addX(f(t2));
-						if (i == 1) this.addY(f(t2));
+			if (skipAncestors !== true) {
+				var p = this.parent;
+				if (p != null) {
+					var ps = p.style(name);
+					if (ps != null && ps.hasValue()) {
+						return ps;
 					}
 				}
 			}
-			
-			this.isPointInBox = function(x, y) {
-				return (this.x1 <= x && x <= this.x2 && this.y1 <= y && y <= this.y2);
+
+			if (createIfNotExists === true) { s = new svg.Property(name, ''); this.styles[name] = s; }
+			return s || svg.EmptyProperty;
+		};
+
+		// base render
+		this.render = function (ctx) {
+			// don't render display=none
+			if (this.style('display').value === 'none') return;
+
+			// don't render visibility=hidden
+			if (this.style('visibility').value === 'hidden') return;
+
+			ctx.save();
+			if (this.attribute('mask').hasValue()) { // mask
+				var mask = this.attribute('mask').getDefinition();
+				if (mask != null) mask.apply(ctx, this);
+			} else if (this.style('filter').hasValue()) { // filter
+				var filter = this.style('filter').getDefinition();
+				if (filter != null) filter.apply(ctx, this);
+			} else {
+				this.setContext(ctx);
+				this.renderChildren(ctx);
+				this.clearContext(ctx);
 			}
-			
-			this.addPoint(x1, y1);
-			this.addPoint(x2, y2);
-		}
-		
-		// transforms
-		svg.Transform = function(v) {	
-			var that = this;
-			this.Type = {}
-		
-			// translate
-			this.Type.translate = function(s) {
-				this.p = svg.CreatePoint(s);			
-				this.apply = function(ctx) {
-					ctx.translate(this.p.x || 0.0, this.p.y || 0.0);
-				}
-				this.unapply = function(ctx) {
-					ctx.translate(-1.0 * this.p.x || 0.0, -1.0 * this.p.y || 0.0);
-				}
-				this.applyToPoint = function(p) {
-					p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
+			ctx.restore();
+		};
+
+		// base set context
+		this.setContext = function (ctx) {
+			// OVERRIDE ME!
+		};
+
+		// base clear context
+		this.clearContext = function (ctx) {
+			// OVERRIDE ME!
+		};
+
+		// base render children
+		this.renderChildren = function (ctx) {
+			for (var i = 0; i < this.children.length; i++) {
+				this.children[i].render(ctx);
+			}
+		};
+
+		this.addChild = function (childNode, create) {
+			var child = childNode;
+			if (create) child = svg.CreateElement(childNode);
+			child.parent = this;
+			if (child.type !== 'title') { this.children.push(child);	}
+		};
+
+		if (node != null && node.nodeType === 1) { // ELEMENT_NODE
+			// add children
+			for (var i = 0; i < node.childNodes.length; i++) {
+				var childNode = node.childNodes[i];
+				if (childNode.nodeType === 1) this.addChild(childNode, true); // ELEMENT_NODE
+				if (this.captureTextNodes && (childNode.nodeType === 3 || childNode.nodeType === 4)) {
+					var text = childNode.nodeValue || childNode.text || '';
+					if (svg.trim(svg.compressSpaces(text)) !== '') {
+						this.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE
+					}
 				}
 			}
-			
-			// rotate
-			this.Type.rotate = function(s) {
-				var a = svg.ToNumberArray(s);
-				this.angle = new svg.Property('angle', a[0]);
-				this.cx = a[1] || 0;
-				this.cy = a[2] || 0;
-				this.apply = function(ctx) {
-					ctx.translate(this.cx, this.cy);
-					ctx.rotate(this.angle.toRadians());
-					ctx.translate(-this.cx, -this.cy);
-				}
-				this.unapply = function(ctx) {
-					ctx.translate(this.cx, this.cy);
-					ctx.rotate(-1.0 * this.angle.toRadians());
-					ctx.translate(-this.cx, -this.cy);
-				}
-				this.applyToPoint = function(p) {
-					var a = this.angle.toRadians();
-					p.applyTransform([1, 0, 0, 1, this.p.x || 0.0, this.p.y || 0.0]);
-					p.applyTransform([Math.cos(a), Math.sin(a), -Math.sin(a), Math.cos(a), 0, 0]);
-					p.applyTransform([1, 0, 0, 1, -this.p.x || 0.0, -this.p.y || 0.0]);
-				}			
+
+			// add attributes
+			for (var i = 0; i < node.attributes.length; i++) {
+				var attribute = node.attributes[i];
+				this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
 			}
-			
-			this.Type.scale = function(s) {
-				this.p = svg.CreatePoint(s);
-				this.apply = function(ctx) {
-					ctx.scale(this.p.x || 1.0, this.p.y || this.p.x || 1.0);
-				}
-				this.unapply = function(ctx) {
-					ctx.scale(1.0 / this.p.x || 1.0, 1.0 / this.p.y || this.p.x || 1.0);
-				}
-				this.applyToPoint = function(p) {
-					p.applyTransform([this.p.x || 0.0, 0, 0, this.p.y || 0.0, 0, 0]);
-				}				
-			}
-			
-			this.Type.matrix = function(s) {
-				this.m = svg.ToNumberArray(s);
-				this.apply = function(ctx) {
-					ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);
-				}
-				this.applyToPoint = function(p) {
-					p.applyTransform(this.m);
-				}					
-			}
-			
-			this.Type.SkewBase = function(s) {
-				this.base = that.Type.matrix;
-				this.base(s);
-				this.angle = new svg.Property('angle', s);
-			}
-			this.Type.SkewBase.prototype = new this.Type.matrix;
-			
-			this.Type.skewX = function(s) {
-				this.base = that.Type.SkewBase;
-				this.base(s);
-				this.m = [1, 0, Math.tan(this.angle.toRadians()), 1, 0, 0];
-			}
-			this.Type.skewX.prototype = new this.Type.SkewBase;
-			
-			this.Type.skewY = function(s) {
-				this.base = that.Type.SkewBase;
-				this.base(s);
-				this.m = [1, Math.tan(this.angle.toRadians()), 0, 1, 0, 0];
-			}
-			this.Type.skewY.prototype = new this.Type.SkewBase;
-		
-			this.transforms = [];
-			
-			this.apply = function(ctx) {
-				for (var i=0; i<this.transforms.length; i++) {
-					this.transforms[i].apply(ctx);
+
+			// add tag styles
+			var styles = svg.Styles[node.nodeName];
+			if (styles != null) {
+				for (var name in styles) {
+					this.styles[name] = styles[name];
 				}
 			}
-			
-			this.unapply = function(ctx) {
-				for (var i=this.transforms.length-1; i>=0; i--) {
-					this.transforms[i].unapply(ctx);
-				}
-			}
-			
-			this.applyToPoint = function(p) {
-				for (var i=0; i<this.transforms.length; i++) {
-					this.transforms[i].applyToPoint(p);
-				}
-			}
-			
-			var data = svg.trim(svg.compressSpaces(v)).replace(/\)([a-zA-Z])/g, ') $1').replace(/\)(\s?,\s?)/g,') ').split(/\s(?=[a-z])/);
-			for (var i=0; i<data.length; i++) {
-				var type = svg.trim(data[i].split('(')[0]);
-				var s = data[i].split('(')[1].replace(')','');
-				var transform = new this.Type[type](s);
-				transform.type = type;
-				this.transforms.push(transform);
-			}
-		}
-		
-		// aspect ratio
-		svg.AspectRatio = function(ctx, aspectRatio, width, desiredWidth, height, desiredHeight, minX, minY, refX, refY) {
-			// aspect ratio - http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute
-			aspectRatio = svg.compressSpaces(aspectRatio);
-			aspectRatio = aspectRatio.replace(/^defer\s/,''); // ignore defer
-			var align = aspectRatio.split(' ')[0] || 'xMidYMid';
-			var meetOrSlice = aspectRatio.split(' ')[1] || 'meet';					
-	
-			// calculate scale
-			var scaleX = width / desiredWidth;
-			var scaleY = height / desiredHeight;
-			var scaleMin = Math.min(scaleX, scaleY);
-			var scaleMax = Math.max(scaleX, scaleY);
-			if (meetOrSlice == 'meet') { desiredWidth *= scaleMin; desiredHeight *= scaleMin; }
-			if (meetOrSlice == 'slice') { desiredWidth *= scaleMax; desiredHeight *= scaleMax; }	
-			
-			refX = new svg.Property('refX', refX);
-			refY = new svg.Property('refY', refY);
-			if (refX.hasValue() && refY.hasValue()) {				
-				ctx.translate(-scaleMin * refX.toPixels('x'), -scaleMin * refY.toPixels('y'));
-			} 
-			else {					
-				// align
-				if (align.match(/^xMid/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width / 2.0 - desiredWidth / 2.0, 0); 
-				if (align.match(/YMid$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height / 2.0 - desiredHeight / 2.0); 
-				if (align.match(/^xMax/) && ((meetOrSlice == 'meet' && scaleMin == scaleY) || (meetOrSlice == 'slice' && scaleMax == scaleY))) ctx.translate(width - desiredWidth, 0); 
-				if (align.match(/YMax$/) && ((meetOrSlice == 'meet' && scaleMin == scaleX) || (meetOrSlice == 'slice' && scaleMax == scaleX))) ctx.translate(0, height - desiredHeight); 
-			}
-			
-			// scale
-			if (align == 'none') ctx.scale(scaleX, scaleY);
-			else if (meetOrSlice == 'meet') ctx.scale(scaleMin, scaleMin); 
-			else if (meetOrSlice == 'slice') ctx.scale(scaleMax, scaleMax); 	
-			
-			// translate
-			ctx.translate(minX == null ? 0 : -minX, minY == null ? 0 : -minY);			
-		}
-		
-		// elements
-		svg.Element = {}
-		
-		svg.EmptyProperty = new svg.Property('EMPTY', '');
-		
-		svg.Element.ElementBase = function(node) {	
-			this.attributes = {};
-			this.styles = {};
-			this.children = [];
-			
-			// get or create attribute
-			this.attribute = function(name, createIfNotExists) {
-				var a = this.attributes[name];
-				if (a != null) return a;
-							
-				if (createIfNotExists == true) { a = new svg.Property(name, ''); this.attributes[name] = a; }
-				return a || svg.EmptyProperty;
-			}
-			
-			this.getHrefAttribute = function() {
-				for (var a in this.attributes) { 
-					if (a.match(/:href$/)) { 
-						return this.attributes[a]; 
-					} 
-				}
-				return svg.EmptyProperty;
-			}
-			
-			// get or create style, crawls up node tree
-			this.style = function(name, createIfNotExists, skipAncestors) {
-				var s = this.styles[name];
-				if (s != null) return s;
-				
-				var a = this.attribute(name);
-				if (a != null && a.hasValue()) {
-					this.styles[name] = a; // move up to me to cache
-					return a;
-				}
-				
-				if (skipAncestors != true) {
-					var p = this.parent;
-					if (p != null) {
-						var ps = p.style(name);
-						if (ps != null && ps.hasValue()) {
-							return ps;
+
+			// add class styles
+			if (this.attribute('class').hasValue()) {
+				var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
+				for (var j = 0; j < classes.length; j++) {
+					styles = svg.Styles['.' + classes[j]];
+					if (styles != null) {
+						for (var name in styles) {
+							this.styles[name] = styles[name];
 						}
 					}
-				}
-					
-				if (createIfNotExists == true) { s = new svg.Property(name, ''); this.styles[name] = s; }
-				return s || svg.EmptyProperty;
-			}
-			
-			// base render
-			this.render = function(ctx) {
-				// don't render display=none
-				if (this.style('display').value == 'none') return;
-				
-				// don't render visibility=hidden
-				if (this.style('visibility').value == 'hidden') return;
-			
-				ctx.save();
-				if (this.attribute('mask').hasValue()) { // mask
-					var mask = this.attribute('mask').getDefinition();
-					if (mask != null) mask.apply(ctx, this);
-				}
-				else if (this.style('filter').hasValue()) { // filter
-					var filter = this.style('filter').getDefinition();
-					if (filter != null) filter.apply(ctx, this);
-				}
-				else {	
-					this.setContext(ctx);
-					this.renderChildren(ctx);	
-					this.clearContext(ctx);							
-				}
-				ctx.restore();
-			}
-			
-			// base set context
-			this.setContext = function(ctx) {
-				// OVERRIDE ME!
-			}
-			
-			// base clear context
-			this.clearContext = function(ctx) {
-				// OVERRIDE ME!
-			}			
-			
-			// base render children
-			this.renderChildren = function(ctx) {
-				for (var i=0; i<this.children.length; i++) {
-					this.children[i].render(ctx);
-				}
-			}
-			
-			this.addChild = function(childNode, create) {
-				var child = childNode;
-				if (create) child = svg.CreateElement(childNode);
-				child.parent = this;
-				if (child.type != 'title') { this.children.push(child);	}
-			}
-				
-			if (node != null && node.nodeType == 1) { //ELEMENT_NODE
-				// add children
-				for (var i=0; i<node.childNodes.length; i++) {
-					var childNode = node.childNodes[i];
-					if (childNode.nodeType == 1) this.addChild(childNode, true); //ELEMENT_NODE
-					if (this.captureTextNodes && (childNode.nodeType == 3 || childNode.nodeType == 4)) {
-						var text = childNode.nodeValue || childNode.text || '';
-						if (svg.trim(svg.compressSpaces(text)) != '') {
-							this.addChild(new svg.Element.tspan(childNode), false); // TEXT_NODE
-						}
-					}
-				}
-				
-				// add attributes
-				for (var i=0; i<node.attributes.length; i++) {
-					var attribute = node.attributes[i];
-					this.attributes[attribute.nodeName] = new svg.Property(attribute.nodeName, attribute.nodeValue);
-				}
-										
-				// add tag styles
-				var styles = svg.Styles[node.nodeName];
-				if (styles != null) {
-					for (var name in styles) {
-						this.styles[name] = styles[name];
-					}
-				}					
-				
-				// add class styles
-				if (this.attribute('class').hasValue()) {
-					var classes = svg.compressSpaces(this.attribute('class').value).split(' ');
-					for (var j=0; j<classes.length; j++) {
-						styles = svg.Styles['.'+classes[j]];
-						if (styles != null) {
-							for (var name in styles) {
-								this.styles[name] = styles[name];
-							}
-						}
-						styles = svg.Styles[node.nodeName+'.'+classes[j]];
-						if (styles != null) {
-							for (var name in styles) {
-								this.styles[name] = styles[name];
-							}
-						}
-					}
-				}
-				
-				// add id styles
-				if (this.attribute('id').hasValue()) {
-					var styles = svg.Styles['#' + this.attribute('id').value];
+					styles = svg.Styles[node.nodeName + '.' + classes[j]];
 					if (styles != null) {
 						for (var name in styles) {
 							this.styles[name] = styles[name];
 						}
 					}
 				}
-				
-				// add inline styles
-				if (this.attribute('style').hasValue()) {
-					var styles = this.attribute('style').value.split(';');
-					for (var i=0; i<styles.length; i++) {
-						if (svg.trim(styles[i]) != '') {
-							var style = styles[i].split(':');
-							var name = svg.trim(style[0]);
-							var value = svg.trim(style[1]);
-							this.styles[name] = new svg.Property(name, value);
-						}
-					}
-				}	
+			}
 
-				// add id
-				if (this.attribute('id').hasValue()) {
-					if (svg.Definitions[this.attribute('id').value] == null) {
-						svg.Definitions[this.attribute('id').value] = this;
+			// add id styles
+			if (this.attribute('id').hasValue()) {
+				var styles = svg.Styles['#' + this.attribute('id').value];
+				if (styles != null) {
+					for (var name in styles) {
+						this.styles[name] = styles[name];
 					}
 				}
 			}
+
+			// add inline styles
+			if (this.attribute('style').hasValue()) {
+				var styles = this.attribute('style').value.split(';');
+				for (var i = 0; i < styles.length; i++) {
+					if (svg.trim(styles[i]) !== '') {
+						var style = styles[i].split(':');
+						var name = svg.trim(style[0]);
+						var value = svg.trim(style[1]);
+						this.styles[name] = new svg.Property(name, value);
+					}
+				}
+			}
+
+			// add id
+			if (this.attribute('id').hasValue()) {
+				if (svg.Definitions[this.attribute('id').value] == null) {
+					svg.Definitions[this.attribute('id').value] = this;
+				}
+			}
 		}
-		
-		svg.Element.RenderedElementBase = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.setContext = function(ctx) {
-				// fill
-				if (this.style('fill').isUrlDefinition()) {
-					var fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity'));
-					if (fs != null) ctx.fillStyle = fs;
-				}
-				else if (this.style('fill').hasValue()) {
-					var fillStyle = this.style('fill');
-					if (fillStyle.value == 'currentColor') fillStyle.value = this.style('color').value;
-					ctx.fillStyle = (fillStyle.value == 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
-				}
-				if (this.style('fill-opacity').hasValue()) {
-					var fillStyle = new svg.Property('fill', ctx.fillStyle);
-					fillStyle = fillStyle.addOpacity(this.style('fill-opacity'));
-					ctx.fillStyle = fillStyle.value;
-				}
-									
-				// stroke
-				if (this.style('stroke').isUrlDefinition()) {
-					var fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity'));
-					if (fs != null) ctx.strokeStyle = fs;
-				}
-				else if (this.style('stroke').hasValue()) {
-					var strokeStyle = this.style('stroke');
-					if (strokeStyle.value == 'currentColor') strokeStyle.value = this.style('color').value;
-					ctx.strokeStyle = (strokeStyle.value == 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value);
-				}
-				if (this.style('stroke-opacity').hasValue()) {
-					var strokeStyle = new svg.Property('stroke', ctx.strokeStyle);
-					strokeStyle = strokeStyle.addOpacity(this.style('stroke-opacity'));
-					ctx.strokeStyle = strokeStyle.value;
-				}
-				if (this.style('stroke-width').hasValue()) {
-					var newLineWidth = this.style('stroke-width').toPixels();
-					ctx.lineWidth = newLineWidth == 0 ? 0.001 : newLineWidth; // browsers don't respect 0
-			    }
-				if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value;
-				if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value;
-				if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value;
-				if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value != 'none') {
-					var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value);
-					if (typeof(ctx.setLineDash) != 'undefined') { ctx.setLineDash(gaps); }
-					else if (typeof(ctx.webkitLineDash) != 'undefined') { ctx.webkitLineDash = gaps; }
-					else if (typeof(ctx.mozDash) != 'undefined' && !(gaps.length==1 && gaps[0]==0)) { ctx.mozDash = gaps; }
-					
-					var offset = this.style('stroke-dashoffset').numValueOrDefault(1);
-					if (typeof(ctx.lineDashOffset) != 'undefined') { ctx.lineDashOffset = offset; }
-					else if (typeof(ctx.webkitLineDashOffset) != 'undefined') { ctx.webkitLineDashOffset = offset; }
-					else if (typeof(ctx.mozDashOffset) != 'undefined') { ctx.mozDashOffset = offset; }
+	};
+
+	svg.Element.RenderedElementBase = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.setContext = function (ctx) {
+			// fill
+			if (this.style('fill').isUrlDefinition()) {
+				var fs = this.style('fill').getFillStyleDefinition(this, this.style('fill-opacity'));
+				if (fs != null) ctx.fillStyle = fs;
+			} else if (this.style('fill').hasValue()) {
+				var fillStyle = this.style('fill');
+				if (fillStyle.value === 'currentColor') fillStyle.value = this.style('color').value;
+				ctx.fillStyle = (fillStyle.value === 'none' ? 'rgba(0,0,0,0)' : fillStyle.value);
+			}
+			if (this.style('fill-opacity').hasValue()) {
+				var fillStyle = new svg.Property('fill', ctx.fillStyle);
+				fillStyle = fillStyle.addOpacity(this.style('fill-opacity'));
+				ctx.fillStyle = fillStyle.value;
+			}
+
+			// stroke
+			if (this.style('stroke').isUrlDefinition()) {
+				var fs = this.style('stroke').getFillStyleDefinition(this, this.style('stroke-opacity'));
+				if (fs != null) ctx.strokeStyle = fs;
+			} else if (this.style('stroke').hasValue()) {
+				var strokeStyle = this.style('stroke');
+				if (strokeStyle.value === 'currentColor') strokeStyle.value = this.style('color').value;
+				ctx.strokeStyle = (strokeStyle.value === 'none' ? 'rgba(0,0,0,0)' : strokeStyle.value);
+			}
+			if (this.style('stroke-opacity').hasValue()) {
+				var strokeStyle = new svg.Property('stroke', ctx.strokeStyle);
+				strokeStyle = strokeStyle.addOpacity(this.style('stroke-opacity'));
+				ctx.strokeStyle = strokeStyle.value;
+			}
+			if (this.style('stroke-width').hasValue()) {
+				var newLineWidth = this.style('stroke-width').toPixels();
+				ctx.lineWidth = newLineWidth === 0 ? 0.001 : newLineWidth; // browsers don't respect 0
+			}
+			if (this.style('stroke-linecap').hasValue()) ctx.lineCap = this.style('stroke-linecap').value;
+			if (this.style('stroke-linejoin').hasValue()) ctx.lineJoin = this.style('stroke-linejoin').value;
+			if (this.style('stroke-miterlimit').hasValue()) ctx.miterLimit = this.style('stroke-miterlimit').value;
+			if (this.style('stroke-dasharray').hasValue() && this.style('stroke-dasharray').value !== 'none') {
+				var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value);
+				if (typeof ctx.setLineDash !== 'undefined') {
+					ctx.setLineDash(gaps);
+				} else if (typeof ctx.webkitLineDash !== 'undefined') {
+					ctx.webkitLineDash = gaps;
+				} else if (typeof ctx.mozDash !== 'undefined' && !(gaps.length === 1 && gaps[0] === 0)) {
+					ctx.mozDash = gaps;
 				}
 
-				// font
-				if (typeof(ctx.font) != 'undefined') {
-					ctx.font = svg.Font.CreateFont( 
-						this.style('font-style').value, 
-						this.style('font-variant').value, 
-						this.style('font-weight').value, 
-						this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '', 
-						this.style('font-family').value).toString();
+				var offset = this.style('stroke-dashoffset').numValueOrDefault(1);
+				if (typeof ctx.lineDashOffset !== 'undefined') {
+					ctx.lineDashOffset = offset;
+				} else if (typeof ctx.webkitLineDashOffset !== 'undefined') {
+					ctx.webkitLineDashOffset = offset;
+				} else if (typeof ctx.mozDashOffset !== 'undefined') {
+					ctx.mozDashOffset = offset;
 				}
-				
-				// transform
-				if (this.attribute('transform').hasValue()) { 
-					var transform = new svg.Transform(this.attribute('transform').value);
-					transform.apply(ctx);
-				}
-				
-				// clip
-				if (this.style('clip-path', false, true).hasValue()) {
-					var clip = this.style('clip-path', false, true).getDefinition();
-					if (clip != null) clip.apply(ctx);
-				}
-				
-				// opacity
-				if (this.style('opacity').hasValue()) {
-					ctx.globalAlpha = this.style('opacity').numValue();
-				}
-			}		
-		}
-		svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase;
-		
-		svg.Element.PathElementBase = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.path = function(ctx) {
-				if (ctx != null) ctx.beginPath();
-				return new svg.BoundingBox();
 			}
-			
-			this.renderChildren = function(ctx) {
-				this.path(ctx);
-				svg.Mouse.checkPath(this, ctx);
-				if (ctx.fillStyle != '') {
-					if (this.style('fill-rule').valueOrDefault('inherit') != 'inherit') { ctx.fill(this.style('fill-rule').value); }
-					else { ctx.fill(); }
+
+			// font
+			if (typeof ctx.font !== 'undefined') {
+				ctx.font = svg.Font.CreateFont(
+					this.style('font-style').value,
+					this.style('font-variant').value,
+					this.style('font-weight').value,
+					this.style('font-size').hasValue() ? this.style('font-size').toPixels() + 'px' : '',
+					this.style('font-family').value).toString();
+			}
+
+			// transform
+			if (this.attribute('transform').hasValue()) {
+				var transform = new svg.Transform(this.attribute('transform').value);
+				transform.apply(ctx);
+			}
+
+			// clip
+			if (this.style('clip-path', false, true).hasValue()) {
+				var clip = this.style('clip-path', false, true).getDefinition();
+				if (clip != null) clip.apply(ctx);
+			}
+
+			// opacity
+			if (this.style('opacity').hasValue()) {
+				ctx.globalAlpha = this.style('opacity').numValue();
+			}
+		};
+	};
+	svg.Element.RenderedElementBase.prototype = new svg.Element.ElementBase();
+
+	svg.Element.PathElementBase = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.path = function (ctx) {
+			if (ctx != null) ctx.beginPath();
+			return new svg.BoundingBox();
+		};
+
+		this.renderChildren = function (ctx) {
+			this.path(ctx);
+			svg.Mouse.checkPath(this, ctx);
+			if (ctx.fillStyle !== '') {
+				if (this.style('fill-rule').valueOrDefault('inherit') !== 'inherit') {
+					ctx.fill(this.style('fill-rule').value);
+				} else {
+					ctx.fill();
 				}
-				if (ctx.strokeStyle != '') ctx.stroke();
-				
-				var markers = this.getMarkers();
-				if (markers != null) {
-					if (this.style('marker-start').isUrlDefinition()) {
-						var marker = this.style('marker-start').getDefinition();
-						marker.render(ctx, markers[0][0], markers[0][1]);
+			}
+			if (ctx.strokeStyle !== '') ctx.stroke();
+
+			var markers = this.getMarkers();
+			if (markers != null) {
+				if (this.style('marker-start').isUrlDefinition()) {
+					var marker = this.style('marker-start').getDefinition();
+					marker.render(ctx, markers[0][0], markers[0][1]);
+				}
+				if (this.style('marker-mid').isUrlDefinition()) {
+					var marker = this.style('marker-mid').getDefinition();
+					for (var i = 1; i < markers.length - 1; i++) {
+						marker.render(ctx, markers[i][0], markers[i][1]);
 					}
-					if (this.style('marker-mid').isUrlDefinition()) {
-						var marker = this.style('marker-mid').getDefinition();
-						for (var i=1;i<markers.length-1;i++) {
-							marker.render(ctx, markers[i][0], markers[i][1]);
-						}
-					}
-					if (this.style('marker-end').isUrlDefinition()) {
-						var marker = this.style('marker-end').getDefinition();
-						marker.render(ctx, markers[markers.length-1][0], markers[markers.length-1][1]);
-					}
-				}					
+				}
+				if (this.style('marker-end').isUrlDefinition()) {
+					var marker = this.style('marker-end').getDefinition();
+					marker.render(ctx, markers[markers.length - 1][0], markers[markers.length - 1][1]);
+				}
 			}
-			
-			this.getBoundingBox = function() {
-				return this.path();
+		};
+
+		this.getBoundingBox = function () {
+			return this.path();
+		};
+
+		this.getMarkers = function () {
+			return null;
+		};
+	};
+	svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase();
+
+	// svg element
+	svg.Element.svg = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.baseClearContext = this.clearContext;
+		this.clearContext = function (ctx) {
+			this.baseClearContext(ctx);
+			svg.ViewPort.RemoveCurrent();
+		};
+
+		this.baseSetContext = this.setContext;
+		this.setContext = function (ctx) {
+			// initial values and defaults
+			ctx.strokeStyle = 'rgba(0,0,0,0)';
+			ctx.lineCap = 'butt';
+			ctx.lineJoin = 'miter';
+			ctx.miterLimit = 4;
+			if (typeof ctx.font !== 'undefined' && typeof window.getComputedStyle !== 'undefined') {
+				ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font');
 			}
-			
-			this.getMarkers = function() {
-				return null;
+
+			this.baseSetContext(ctx);
+
+			// create new view port
+			if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0;
+			if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0;
+			ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y'));
+
+			var width = svg.ViewPort.width();
+			var height = svg.ViewPort.height();
+
+			if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%';
+			if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%';
+			if (typeof this.root === 'undefined') {
+				width = this.attribute('width').toPixels('x');
+				height = this.attribute('height').toPixels('y');
+
+				var x = 0;
+				var y = 0;
+				if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
+					x = -this.attribute('refX').toPixels('x');
+					y = -this.attribute('refY').toPixels('y');
+				}
+
+				if (this.attribute('overflow').valueOrDefault('hidden') !== 'visible') {
+					ctx.beginPath();
+					ctx.moveTo(x, y);
+					ctx.lineTo(width, y);
+					ctx.lineTo(width, height);
+					ctx.lineTo(x, height);
+					ctx.closePath();
+					ctx.clip();
+				}
 			}
-		}
-		svg.Element.PathElementBase.prototype = new svg.Element.RenderedElementBase;
-		
-		// svg element
-		svg.Element.svg = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.baseClearContext = this.clearContext;
-			this.clearContext = function(ctx) {
-				this.baseClearContext(ctx);
+			svg.ViewPort.SetCurrent(width, height);
+
+			// viewbox
+			if (this.attribute('viewBox').hasValue()) {
+				var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
+				var minX = viewBox[0];
+				var minY = viewBox[1];
+				width = viewBox[2];
+				height = viewBox[3];
+
+				svg.AspectRatio(
+					ctx,
+					this.attribute('preserveAspectRatio').value,
+					svg.ViewPort.width(),
+					width,
+					svg.ViewPort.height(),
+					height,
+					minX,
+					minY,
+					this.attribute('refX').value,
+					this.attribute('refY').value
+				);
+
 				svg.ViewPort.RemoveCurrent();
+				svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
 			}
-			
-			this.baseSetContext = this.setContext;
-			this.setContext = function(ctx) {
-				// initial values and defaults
-				ctx.strokeStyle = 'rgba(0,0,0,0)';
-				ctx.lineCap = 'butt';
-				ctx.lineJoin = 'miter';
-				ctx.miterLimit = 4;	
-				if (typeof(ctx.font) != 'undefined' && typeof(window.getComputedStyle) != 'undefined') {
-					ctx.font = window.getComputedStyle(ctx.canvas).getPropertyValue('font');
-				}
-			
-				this.baseSetContext(ctx);
-				
-				// create new view port
-				if (!this.attribute('x').hasValue()) this.attribute('x', true).value = 0;
-				if (!this.attribute('y').hasValue()) this.attribute('y', true).value = 0;
-				ctx.translate(this.attribute('x').toPixels('x'), this.attribute('y').toPixels('y'));
-				
-				var width = svg.ViewPort.width();
-				var height = svg.ViewPort.height();
-				
-				if (!this.attribute('width').hasValue()) this.attribute('width', true).value = '100%';
-				if (!this.attribute('height').hasValue()) this.attribute('height', true).value = '100%';
-				if (typeof(this.root) == 'undefined') {
-					width = this.attribute('width').toPixels('x');
-					height = this.attribute('height').toPixels('y');
-					
-					var x = 0;
-					var y = 0;
-					if (this.attribute('refX').hasValue() && this.attribute('refY').hasValue()) {
-						x = -this.attribute('refX').toPixels('x');
-						y = -this.attribute('refY').toPixels('y');
-					}
-					
-					if (this.attribute('overflow').valueOrDefault('hidden') != 'visible') {
-						ctx.beginPath();
-						ctx.moveTo(x, y);
-						ctx.lineTo(width, y);
-						ctx.lineTo(width, height);
-						ctx.lineTo(x, height);
-						ctx.closePath();
-						ctx.clip();
-					}
-				}
-				svg.ViewPort.SetCurrent(width, height);	
-						
-				// viewbox
-				if (this.attribute('viewBox').hasValue()) {				
-					var viewBox = svg.ToNumberArray(this.attribute('viewBox').value);
-					var minX = viewBox[0];
-					var minY = viewBox[1];
-					width = viewBox[2];
-					height = viewBox[3];
-					
-					svg.AspectRatio(ctx,
-									this.attribute('preserveAspectRatio').value, 
-									svg.ViewPort.width(), 
-									width,
-									svg.ViewPort.height(),
-									height,
-									minX,
-									minY,
-									this.attribute('refX').value,
-									this.attribute('refY').value);
-					
-					svg.ViewPort.RemoveCurrent();
-					svg.ViewPort.SetCurrent(viewBox[2], viewBox[3]);
-				}				
-			}
-		}
-		svg.Element.svg.prototype = new svg.Element.RenderedElementBase;
+		};
+	};
+	svg.Element.svg.prototype = new svg.Element.RenderedElementBase();
 
-		// rect element
-		svg.Element.rect = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-			
-			this.path = function(ctx) {
-				var x = this.attribute('x').toPixels('x');
-				var y = this.attribute('y').toPixels('y');
-				var width = this.attribute('width').toPixels('x');
-				var height = this.attribute('height').toPixels('y');
-				var rx = this.attribute('rx').toPixels('x');
-				var ry = this.attribute('ry').toPixels('y');
-				if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
-				if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
-				rx = Math.min(rx, width / 2.0);
-				ry = Math.min(ry, height / 2.0);
-				if (ctx != null) {
-					ctx.beginPath();
-					ctx.moveTo(x + rx, y);
-					ctx.lineTo(x + width - rx, y);
-					ctx.quadraticCurveTo(x + width, y, x + width, y + ry)
-					ctx.lineTo(x + width, y + height - ry);
-					ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height)
-					ctx.lineTo(x + rx, y + height);
-					ctx.quadraticCurveTo(x, y + height, x, y + height - ry)
-					ctx.lineTo(x, y + ry);
-					ctx.quadraticCurveTo(x, y, x + rx, y)
-					ctx.closePath();
-				}
-				
-				return new svg.BoundingBox(x, y, x + width, y + height);
-			}
-		}
-		svg.Element.rect.prototype = new svg.Element.PathElementBase;
-		
-		// circle element
-		svg.Element.circle = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-			
-			this.path = function(ctx) {
-				var cx = this.attribute('cx').toPixels('x');
-				var cy = this.attribute('cy').toPixels('y');
-				var r = this.attribute('r').toPixels();
-			
-				if (ctx != null) {
-					ctx.beginPath();
-					ctx.arc(cx, cy, r, 0, Math.PI * 2, true); 
-					ctx.closePath();
-				}
-				
-				return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
-			}
-		}
-		svg.Element.circle.prototype = new svg.Element.PathElementBase;	
+	// rect element
+	svg.Element.rect = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
 
-		// ellipse element
-		svg.Element.ellipse = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-			
-			this.path = function(ctx) {
-				var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
-				var rx = this.attribute('rx').toPixels('x');
-				var ry = this.attribute('ry').toPixels('y');
-				var cx = this.attribute('cx').toPixels('x');
-				var cy = this.attribute('cy').toPixels('y');
-				
-				if (ctx != null) {
-					ctx.beginPath();
-					ctx.moveTo(cx, cy - ry);
-					ctx.bezierCurveTo(cx + (KAPPA * rx), cy - ry,  cx + rx, cy - (KAPPA * ry), cx + rx, cy);
-					ctx.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
-					ctx.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
-					ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
-					ctx.closePath();
-				}
-				
-				return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
+		this.path = function (ctx) {
+			var x = this.attribute('x').toPixels('x');
+			var y = this.attribute('y').toPixels('y');
+			var width = this.attribute('width').toPixels('x');
+			var height = this.attribute('height').toPixels('y');
+			var rx = this.attribute('rx').toPixels('x');
+			var ry = this.attribute('ry').toPixels('y');
+			if (this.attribute('rx').hasValue() && !this.attribute('ry').hasValue()) ry = rx;
+			if (this.attribute('ry').hasValue() && !this.attribute('rx').hasValue()) rx = ry;
+			rx = Math.min(rx, width / 2.0);
+			ry = Math.min(ry, height / 2.0);
+			if (ctx != null) {
+				ctx.beginPath();
+				ctx.moveTo(x + rx, y);
+				ctx.lineTo(x + width - rx, y);
+				ctx.quadraticCurveTo(x + width, y, x + width, y + ry);
+				ctx.lineTo(x + width, y + height - ry);
+				ctx.quadraticCurveTo(x + width, y + height, x + width - rx, y + height);
+				ctx.lineTo(x + rx, y + height);
+				ctx.quadraticCurveTo(x, y + height, x, y + height - ry);
+				ctx.lineTo(x, y + ry);
+				ctx.quadraticCurveTo(x, y, x + rx, y);
+				ctx.closePath();
 			}
-		}
-		svg.Element.ellipse.prototype = new svg.Element.PathElementBase;			
-		
-		// line element
-		svg.Element.line = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-			
-			this.getPoints = function() {
-				return [
-					new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')),
-					new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))];
-			}
-								
-			this.path = function(ctx) {
-				var points = this.getPoints();
-				
-				if (ctx != null) {
-					ctx.beginPath();
-					ctx.moveTo(points[0].x, points[0].y);
-					ctx.lineTo(points[1].x, points[1].y);
-				}
-				
-				return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
-			}
-			
-			this.getMarkers = function() {
-				var points = this.getPoints();	
-				var a = points[0].angleTo(points[1]);
-				return [[points[0], a], [points[1], a]];
-			}
-		}
-		svg.Element.line.prototype = new svg.Element.PathElementBase;		
-				
-		// polyline element
-		svg.Element.polyline = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-			
-			this.points = svg.CreatePath(this.attribute('points').value);
-			this.path = function(ctx) {
-				var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
-				if (ctx != null) {
-					ctx.beginPath();
-					ctx.moveTo(this.points[0].x, this.points[0].y);
-				}
-				for (var i=1; i<this.points.length; i++) {
-					bb.addPoint(this.points[i].x, this.points[i].y);
-					if (ctx != null) ctx.lineTo(this.points[i].x, this.points[i].y);
-				}
-				return bb;
-			}
-			
-			this.getMarkers = function() {
-				var markers = [];
-				for (var i=0; i<this.points.length - 1; i++) {
-					markers.push([this.points[i], this.points[i].angleTo(this.points[i+1])]);
-				}
-				markers.push([this.points[this.points.length-1], markers[markers.length-1][1]]);
-				return markers;
-			}			
-		}
-		svg.Element.polyline.prototype = new svg.Element.PathElementBase;				
-				
-		// polygon element
-		svg.Element.polygon = function(node) {
-			this.base = svg.Element.polyline;
-			this.base(node);
-			
-			this.basePath = this.path;
-			this.path = function(ctx) {
-				var bb = this.basePath(ctx);
-				if (ctx != null) {
-					ctx.lineTo(this.points[0].x, this.points[0].y);
-					ctx.closePath();
-				}
-				return bb;
-			}
-		}
-		svg.Element.polygon.prototype = new svg.Element.polyline;
 
-		// path element
-		svg.Element.path = function(node) {
-			this.base = svg.Element.PathElementBase;
-			this.base(node);
-					
-			var d = this.attribute('d').value;
-			// TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
-			d = d.replace(/,/gm,' '); // get rid of all commas
-			d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from commands
-			d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from commands
-			d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([^\s])/gm,'$1 $2'); // separate commands from points
-			d = d.replace(/([^\s])([MmZzLlHhVvCcSsQqTtAa])/gm,'$1 $2'); // separate commands from points
-			d = d.replace(/([0-9])([+\-])/gm,'$1 $2'); // separate digits when no comma
-			d = d.replace(/(\.[0-9]*)(\.)/gm,'$1 $2'); // separate digits when no comma
-			d = d.replace(/([Aa](\s+[0-9]+){3})\s+([01])\s*([01])/gm,'$1 $3 $4 '); // shorthand elliptical arc path syntax
-			d = svg.compressSpaces(d); // compress multiple spaces
-			d = svg.trim(d);
-			this.PathParser = new (function(d) {
-				this.tokens = d.split(' ');
-				
-				this.reset = function() {
-					this.i = -1;
-					this.command = '';
-					this.previousCommand = '';
-					this.start = new svg.Point(0, 0);
-					this.control = new svg.Point(0, 0);
-					this.current = new svg.Point(0, 0);
-					this.points = [];
-					this.angles = [];
+			return new svg.BoundingBox(x, y, x + width, y + height);
+		};
+	};
+	svg.Element.rect.prototype = new svg.Element.PathElementBase();
+
+	// circle element
+	svg.Element.circle = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
+
+		this.path = function (ctx) {
+			var cx = this.attribute('cx').toPixels('x');
+			var cy = this.attribute('cy').toPixels('y');
+			var r = this.attribute('r').toPixels();
+
+			if (ctx != null) {
+				ctx.beginPath();
+				ctx.arc(cx, cy, r, 0, Math.PI * 2, true);
+				ctx.closePath();
+			}
+
+			return new svg.BoundingBox(cx - r, cy - r, cx + r, cy + r);
+		};
+	};
+	svg.Element.circle.prototype = new svg.Element.PathElementBase();
+
+	// ellipse element
+	svg.Element.ellipse = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
+
+		this.path = function (ctx) {
+			var KAPPA = 4 * ((Math.sqrt(2) - 1) / 3);
+			var rx = this.attribute('rx').toPixels('x');
+			var ry = this.attribute('ry').toPixels('y');
+			var cx = this.attribute('cx').toPixels('x');
+			var cy = this.attribute('cy').toPixels('y');
+
+			if (ctx != null) {
+				ctx.beginPath();
+				ctx.moveTo(cx, cy - ry);
+				ctx.bezierCurveTo(cx + (KAPPA * rx), cy - ry, cx + rx, cy - (KAPPA * ry), cx + rx, cy);
+				ctx.bezierCurveTo(cx + rx, cy + (KAPPA * ry), cx + (KAPPA * rx), cy + ry, cx, cy + ry);
+				ctx.bezierCurveTo(cx - (KAPPA * rx), cy + ry, cx - rx, cy + (KAPPA * ry), cx - rx, cy);
+				ctx.bezierCurveTo(cx - rx, cy - (KAPPA * ry), cx - (KAPPA * rx), cy - ry, cx, cy - ry);
+				ctx.closePath();
+			}
+
+			return new svg.BoundingBox(cx - rx, cy - ry, cx + rx, cy + ry);
+		};
+	};
+	svg.Element.ellipse.prototype = new svg.Element.PathElementBase();
+
+	// line element
+	svg.Element.line = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
+
+		this.getPoints = function () {
+			return [
+				new svg.Point(this.attribute('x1').toPixels('x'), this.attribute('y1').toPixels('y')),
+				new svg.Point(this.attribute('x2').toPixels('x'), this.attribute('y2').toPixels('y'))];
+		};
+
+		this.path = function (ctx) {
+			var points = this.getPoints();
+
+			if (ctx != null) {
+				ctx.beginPath();
+				ctx.moveTo(points[0].x, points[0].y);
+				ctx.lineTo(points[1].x, points[1].y);
+			}
+
+			return new svg.BoundingBox(points[0].x, points[0].y, points[1].x, points[1].y);
+		};
+
+		this.getMarkers = function () {
+			var points = this.getPoints();
+			var a = points[0].angleTo(points[1]);
+			return [[points[0], a], [points[1], a]];
+		};
+	};
+	svg.Element.line.prototype = new svg.Element.PathElementBase();
+
+	// polyline element
+	svg.Element.polyline = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
+
+		this.points = svg.CreatePath(this.attribute('points').value);
+		this.path = function (ctx) {
+			var bb = new svg.BoundingBox(this.points[0].x, this.points[0].y);
+			if (ctx != null) {
+				ctx.beginPath();
+				ctx.moveTo(this.points[0].x, this.points[0].y);
+			}
+			for (var i = 1; i < this.points.length; i++) {
+				bb.addPoint(this.points[i].x, this.points[i].y);
+				if (ctx != null) ctx.lineTo(this.points[i].x, this.points[i].y);
+			}
+			return bb;
+		};
+
+		this.getMarkers = function () {
+			var markers = [];
+			for (var i = 0; i < this.points.length - 1; i++) {
+				markers.push([this.points[i], this.points[i].angleTo(this.points[i + 1])]);
+			}
+			markers.push([this.points[this.points.length - 1], markers[markers.length - 1][1]]);
+			return markers;
+		};
+	};
+	svg.Element.polyline.prototype = new svg.Element.PathElementBase();
+
+	// polygon element
+	svg.Element.polygon = function (node) {
+		this.base = svg.Element.polyline;
+		this.base(node);
+
+		this.basePath = this.path;
+		this.path = function (ctx) {
+			var bb = this.basePath(ctx);
+			if (ctx != null) {
+				ctx.lineTo(this.points[0].x, this.points[0].y);
+				ctx.closePath();
+			}
+			return bb;
+		};
+	};
+	svg.Element.polygon.prototype = new svg.Element.polyline();
+
+	// path element
+	svg.Element.path = function (node) {
+		this.base = svg.Element.PathElementBase;
+		this.base(node);
+
+		var d = this.attribute('d').value;
+		// TODO: convert to real lexer based on http://www.w3.org/TR/SVG11/paths.html#PathDataBNF
+		d = d.replace(/,/gm, ' '); // get rid of all commas
+		d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from commands
+		d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from commands
+		d = d.replace(/([MmZzLlHhVvCcSsQqTtAa])([^\s])/gm, '$1 $2'); // separate commands from points
+		d = d.replace(/([^\s])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2'); // separate commands from points
+		d = d.replace(/([0-9])([+-])/gm, '$1 $2'); // separate digits when no comma
+		d = d.replace(/(\.[0-9]*)(\.)/gm, '$1 $2'); // separate digits when no comma
+		d = d.replace(/([Aa](\s+[0-9]+){3})\s+([01])\s*([01])/gm, '$1 $3 $4 '); // shorthand elliptical arc path syntax
+		d = svg.compressSpaces(d); // compress multiple spaces
+		d = svg.trim(d);
+		this.PathParser = new function (d) {
+			this.tokens = d.split(' ');
+
+			this.reset = function () {
+				this.i = -1;
+				this.command = '';
+				this.previousCommand = '';
+				this.start = new svg.Point(0, 0);
+				this.control = new svg.Point(0, 0);
+				this.current = new svg.Point(0, 0);
+				this.points = [];
+				this.angles = [];
+			};
+
+			this.isEnd = function () {
+				return this.i >= this.tokens.length - 1;
+			};
+
+			this.isCommandOrEnd = function () {
+				if (this.isEnd()) return true;
+				return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
+			};
+
+			this.isRelativeCommand = function () {
+				switch (this.command) {
+				case 'm':
+				case 'l':
+				case 'h':
+				case 'v':
+				case 'c':
+				case 's':
+				case 'q':
+				case 't':
+				case 'a':
+				case 'z':
+					return true;
 				}
-								
-				this.isEnd = function() {
-					return this.i >= this.tokens.length - 1;
+				return false;
+			};
+
+			this.getToken = function () {
+				this.i++;
+				return this.tokens[this.i];
+			};
+
+			this.getScalar = function () {
+				return parseFloat(this.getToken());
+			};
+
+			this.nextCommand = function () {
+				this.previousCommand = this.command;
+				this.command = this.getToken();
+			};
+
+			this.getPoint = function () {
+				var p = new svg.Point(this.getScalar(), this.getScalar());
+				return this.makeAbsolute(p);
+			};
+
+			this.getAsControlPoint = function () {
+				var p = this.getPoint();
+				this.control = p;
+				return p;
+			};
+
+			this.getAsCurrentPoint = function () {
+				var p = this.getPoint();
+				this.current = p;
+				return p;
+			};
+
+			this.getReflectedControlPoint = function () {
+				if (this.previousCommand.toLowerCase() !== 'c' &&
+					this.previousCommand.toLowerCase() !== 's' &&
+					this.previousCommand.toLowerCase() !== 'q' &&
+					this.previousCommand.toLowerCase() !== 't') {
+					return this.current;
 				}
-				
-				this.isCommandOrEnd = function() {
-					if (this.isEnd()) return true;
-					return this.tokens[this.i + 1].match(/^[A-Za-z]$/) != null;
+
+				// reflect point
+				var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);
+				return p;
+			};
+
+			this.makeAbsolute = function (p) {
+				if (this.isRelativeCommand()) {
+					p.x += this.current.x;
+					p.y += this.current.y;
 				}
-				
-				this.isRelativeCommand = function() {
-					switch(this.command)
-					{
-						case 'm':
-						case 'l':
-						case 'h':
-						case 'v':
-						case 'c':
-						case 's':
-						case 'q':
-						case 't':
-						case 'a':
-						case 'z':
-							return true;
-							break;
-					}
-					return false;
+				return p;
+			};
+
+			this.addMarker = function (p, from, priorTo) {
+				// if the last angle isn't filled in because we didn't have this point yet ...
+				if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length - 1] == null) {
+					this.angles[this.angles.length - 1] = this.points[this.points.length - 1].angleTo(priorTo);
 				}
-							
-				this.getToken = function() {
-					this.i++;
-					return this.tokens[this.i];
-				}
-				
-				this.getScalar = function() {
-					return parseFloat(this.getToken());
-				}
-				
-				this.nextCommand = function() {
-					this.previousCommand = this.command;
-					this.command = this.getToken();
-				}				
-				
-				this.getPoint = function() {
-					var p = new svg.Point(this.getScalar(), this.getScalar());
-					return this.makeAbsolute(p);
-				}
-				
-				this.getAsControlPoint = function() {
-					var p = this.getPoint();
-					this.control = p;
-					return p;
-				}
-				
-				this.getAsCurrentPoint = function() {
-					var p = this.getPoint();
-					this.current = p;
-					return p;	
-				}
-				
-				this.getReflectedControlPoint = function() {
-					if (this.previousCommand.toLowerCase() != 'c' && 
-					    this.previousCommand.toLowerCase() != 's' &&
-						this.previousCommand.toLowerCase() != 'q' && 
-						this.previousCommand.toLowerCase() != 't' ){
-						return this.current;
-					}
-					
-					// reflect point
-					var p = new svg.Point(2 * this.current.x - this.control.x, 2 * this.current.y - this.control.y);					
-					return p;
-				}
-				
-				this.makeAbsolute = function(p) {
-					if (this.isRelativeCommand()) {
-						p.x += this.current.x;
-						p.y += this.current.y;
-					}
-					return p;
-				}
-				
-				this.addMarker = function(p, from, priorTo) {
-					// if the last angle isn't filled in because we didn't have this point yet ...
-					if (priorTo != null && this.angles.length > 0 && this.angles[this.angles.length-1] == null) {
-						this.angles[this.angles.length-1] = this.points[this.points.length-1].angleTo(priorTo);
-					}
-					this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
-				}
-				
-				this.addMarkerAngle = function(p, a) {
-					this.points.push(p);
-					this.angles.push(a);
-				}				
-				
-				this.getMarkerPoints = function() { return this.points; }
-				this.getMarkerAngles = function() {
-					for (var i=0; i<this.angles.length; i++) {
-						if (this.angles[i] == null) {
-							for (var j=i+1; j<this.angles.length; j++) {
-								if (this.angles[j] != null) {
-									this.angles[i] = this.angles[j];
-									break;
-								}
+				this.addMarkerAngle(p, from == null ? null : from.angleTo(p));
+			};
+
+			this.addMarkerAngle = function (p, a) {
+				this.points.push(p);
+				this.angles.push(a);
+			};
+
+			this.getMarkerPoints = function () { return this.points; };
+			this.getMarkerAngles = function () {
+				for (var i = 0; i < this.angles.length; i++) {
+					if (this.angles[i] == null) {
+						for (var j = i + 1; j < this.angles.length; j++) {
+							if (this.angles[j] != null) {
+								this.angles[i] = this.angles[j];
+								break;
 							}
 						}
 					}
-					return this.angles;
 				}
-			})(d);
+				return this.angles;
+			};
+		}(d);
 
-			this.path = function(ctx) {
-				var pp = this.PathParser;
-				pp.reset();
+		this.path = function (ctx) {
+			var pp = this.PathParser;
+			pp.reset();
 
-				var bb = new svg.BoundingBox();
-				if (ctx != null) ctx.beginPath();
-				while (!pp.isEnd()) {
-					pp.nextCommand();
-					switch (pp.command) {
-					case 'M':
-					case 'm':
+			var bb = new svg.BoundingBox();
+			if (ctx != null) ctx.beginPath();
+			while (!pp.isEnd()) {
+				pp.nextCommand();
+				switch (pp.command) {
+				case 'M':
+				case 'm':
+					var p = pp.getAsCurrentPoint();
+					pp.addMarker(p);
+					bb.addPoint(p.x, p.y);
+					if (ctx != null) ctx.moveTo(p.x, p.y);
+					pp.start = pp.current;
+					while (!pp.isCommandOrEnd()) {
 						var p = pp.getAsCurrentPoint();
-						pp.addMarker(p);
+						pp.addMarker(p, pp.start);
 						bb.addPoint(p.x, p.y);
-						if (ctx != null) ctx.moveTo(p.x, p.y);
-						pp.start = pp.current;
-						while (!pp.isCommandOrEnd()) {
-							var p = pp.getAsCurrentPoint();
-							pp.addMarker(p, pp.start);
-							bb.addPoint(p.x, p.y);
-							if (ctx != null) ctx.lineTo(p.x, p.y);
-						}
-						break;
-					case 'L':
-					case 'l':
-						while (!pp.isCommandOrEnd()) {
-							var c = pp.current;
-							var p = pp.getAsCurrentPoint();
-							pp.addMarker(p, c);
-							bb.addPoint(p.x, p.y);
-							if (ctx != null) ctx.lineTo(p.x, p.y);
-						}
-						break;
-					case 'H':
-					case 'h':
-						while (!pp.isCommandOrEnd()) {
-							var newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y);
-							pp.addMarker(newP, pp.current);
-							pp.current = newP;
-							bb.addPoint(pp.current.x, pp.current.y);
-							if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
-						}
-						break;
-					case 'V':
-					case 'v':
-						while (!pp.isCommandOrEnd()) {
-							var newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar());
-							pp.addMarker(newP, pp.current);
-							pp.current = newP;
-							bb.addPoint(pp.current.x, pp.current.y);
-							if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
-						}
-						break;
-					case 'C':
-					case 'c':
-						while (!pp.isCommandOrEnd()) {
-							var curr = pp.current;
-							var p1 = pp.getPoint();
-							var cntrl = pp.getAsControlPoint();
-							var cp = pp.getAsCurrentPoint();
-							pp.addMarker(cp, cntrl, p1);
-							bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
-							if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
-						}
-						break;
-					case 'S':
-					case 's':
-						while (!pp.isCommandOrEnd()) {
-							var curr = pp.current;
-							var p1 = pp.getReflectedControlPoint();
-							var cntrl = pp.getAsControlPoint();
-							var cp = pp.getAsCurrentPoint();
-							pp.addMarker(cp, cntrl, p1);
-							bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
-							if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
-						}
-						break;
-					case 'Q':
-					case 'q':
-						while (!pp.isCommandOrEnd()) {
-							var curr = pp.current;
-							var cntrl = pp.getAsControlPoint();
-							var cp = pp.getAsCurrentPoint();
-							pp.addMarker(cp, cntrl, cntrl);
-							bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
-							if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
-						}
-						break;
-					case 'T':
-					case 't':
-						while (!pp.isCommandOrEnd()) {
-							var curr = pp.current;
-							var cntrl = pp.getReflectedControlPoint();
-							pp.control = cntrl;
-							var cp = pp.getAsCurrentPoint();
-							pp.addMarker(cp, cntrl, cntrl);
-							bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
-							if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
-						}
-						break;
-					case 'A':
-					case 'a':
-						while (!pp.isCommandOrEnd()) {
-						    var curr = pp.current;
-							var rx = pp.getScalar();
-							var ry = pp.getScalar();
-							var xAxisRotation = pp.getScalar() * (Math.PI / 180.0);
-							var largeArcFlag = pp.getScalar();
-							var sweepFlag = pp.getScalar();
-							var cp = pp.getAsCurrentPoint();
-
-							// Conversion from endpoint to center parameterization
-							// https://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter
-							
-							// x1', y1'
-							var currp = new svg.Point(
-								Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,
-								-Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0
-							);
-							// adjust radii
-							var l = Math.pow(currp.x,2)/Math.pow(rx,2)+Math.pow(currp.y,2)/Math.pow(ry,2);
-							if (l > 1) {
-								rx *= Math.sqrt(l);
-								ry *= Math.sqrt(l);
-							}
-							// cx', cy'
-							var s = (largeArcFlag == sweepFlag ? -1 : 1) * Math.sqrt(
-								((Math.pow(rx,2)*Math.pow(ry,2))-(Math.pow(rx,2)*Math.pow(currp.y,2))-(Math.pow(ry,2)*Math.pow(currp.x,2))) /
-								(Math.pow(rx,2)*Math.pow(currp.y,2)+Math.pow(ry,2)*Math.pow(currp.x,2))
-							);
-							if (isNaN(s)) s = 0;
-							var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx);
-							// cx, cy
-							var centp = new svg.Point(
-								(curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,
-								(curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y
-							);
-							// vector magnitude
-							var m = function(v) { return Math.sqrt(Math.pow(v[0],2) + Math.pow(v[1],2)); }
-							// ratio between two vectors
-							var r = function(u, v) { return (u[0]*v[0]+u[1]*v[1]) / (m(u)*m(v)) }
-							// angle between two vectors
-							var a = function(u, v) { return (u[0]*v[1] < u[1]*v[0] ? -1 : 1) * Math.acos(r(u,v)); }
-							// initial angle
-							var a1 = a([1,0], [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry]);
-							// angle delta
-							var u = [(currp.x-cpp.x)/rx,(currp.y-cpp.y)/ry];
-							var v = [(-currp.x-cpp.x)/rx,(-currp.y-cpp.y)/ry];
-							var ad = a(u, v);
-							if (r(u,v) <= -1) ad = Math.PI;
-							if (r(u,v) >= 1) ad = 0;
-
-							// for markers
-							var dir = 1 - sweepFlag ? 1.0 : -1.0;
-							var ah = a1 + dir * (ad / 2.0);
-							var halfWay = new svg.Point(
-								centp.x + rx * Math.cos(ah),
-								centp.y + ry * Math.sin(ah)
-							);
-							pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2);
-							pp.addMarkerAngle(cp, ah - dir * Math.PI);
-
-							bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better
-							if (ctx != null) {
-								var r = rx > ry ? rx : ry;
-								var sx = rx > ry ? 1 : rx / ry;
-								var sy = rx > ry ? ry / rx : 1;
-
-								ctx.translate(centp.x, centp.y);
-								ctx.rotate(xAxisRotation);
-								ctx.scale(sx, sy);
-								ctx.arc(0, 0, r, a1, a1 + ad, 1 - sweepFlag);
-								ctx.scale(1/sx, 1/sy);
-								ctx.rotate(-xAxisRotation);
-								ctx.translate(-centp.x, -centp.y);
-							}
-						}
-						break;
-					case 'Z':
-					case 'z':
-						if (ctx != null) ctx.closePath();
-						pp.current = pp.start;
+						if (ctx != null) ctx.lineTo(p.x, p.y);
 					}
-				}
+					break;
+				case 'L':
+				case 'l':
+					while (!pp.isCommandOrEnd()) {
+						var c = pp.current;
+						var p = pp.getAsCurrentPoint();
+						pp.addMarker(p, c);
+						bb.addPoint(p.x, p.y);
+						if (ctx != null) ctx.lineTo(p.x, p.y);
+					}
+					break;
+				case 'H':
+				case 'h':
+					while (!pp.isCommandOrEnd()) {
+						var newP = new svg.Point((pp.isRelativeCommand() ? pp.current.x : 0) + pp.getScalar(), pp.current.y);
+						pp.addMarker(newP, pp.current);
+						pp.current = newP;
+						bb.addPoint(pp.current.x, pp.current.y);
+						if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
+					}
+					break;
+				case 'V':
+				case 'v':
+					while (!pp.isCommandOrEnd()) {
+						var newP = new svg.Point(pp.current.x, (pp.isRelativeCommand() ? pp.current.y : 0) + pp.getScalar());
+						pp.addMarker(newP, pp.current);
+						pp.current = newP;
+						bb.addPoint(pp.current.x, pp.current.y);
+						if (ctx != null) ctx.lineTo(pp.current.x, pp.current.y);
+					}
+					break;
+				case 'C':
+				case 'c':
+					while (!pp.isCommandOrEnd()) {
+						var curr = pp.current;
+						var p1 = pp.getPoint();
+						var cntrl = pp.getAsControlPoint();
+						var cp = pp.getAsCurrentPoint();
+						pp.addMarker(cp, cntrl, p1);
+						bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+					}
+					break;
+				case 'S':
+				case 's':
+					while (!pp.isCommandOrEnd()) {
+						var curr = pp.current;
+						var p1 = pp.getReflectedControlPoint();
+						var cntrl = pp.getAsControlPoint();
+						var cp = pp.getAsCurrentPoint();
+						pp.addMarker(cp, cntrl, p1);
+						bb.addBezierCurve(curr.x, curr.y, p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						if (ctx != null) ctx.bezierCurveTo(p1.x, p1.y, cntrl.x, cntrl.y, cp.x, cp.y);
+					}
+					break;
+				case 'Q':
+				case 'q':
+					while (!pp.isCommandOrEnd()) {
+						var curr = pp.current;
+						var cntrl = pp.getAsControlPoint();
+						var cp = pp.getAsCurrentPoint();
+						pp.addMarker(cp, cntrl, cntrl);
+						bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
+					}
+					break;
+				case 'T':
+				case 't':
+					while (!pp.isCommandOrEnd()) {
+						var curr = pp.current;
+						var cntrl = pp.getReflectedControlPoint();
+						pp.control = cntrl;
+						var cp = pp.getAsCurrentPoint();
+						pp.addMarker(cp, cntrl, cntrl);
+						bb.addQuadraticCurve(curr.x, curr.y, cntrl.x, cntrl.y, cp.x, cp.y);
+						if (ctx != null) ctx.quadraticCurveTo(cntrl.x, cntrl.y, cp.x, cp.y);
+					}
+					break;
+				case 'A':
+				case 'a':
+					while (!pp.isCommandOrEnd()) {
+						var curr = pp.current;
+						var rx = pp.getScalar();
+						var ry = pp.getScalar();
+						var xAxisRotation = pp.getScalar() * (Math.PI / 180.0);
+						var largeArcFlag = pp.getScalar();
+						var sweepFlag = pp.getScalar();
+						var cp = pp.getAsCurrentPoint();
 
-				return bb;
+						// Conversion from endpoint to center parameterization
+						// https://www.w3.org/TR/SVG11/implnote.html#ArcConversionEndpointToCenter
+
+						// x1', y1'
+						var currp = new svg.Point(
+							Math.cos(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.sin(xAxisRotation) * (curr.y - cp.y) / 2.0,
+							-Math.sin(xAxisRotation) * (curr.x - cp.x) / 2.0 + Math.cos(xAxisRotation) * (curr.y - cp.y) / 2.0
+						);
+						// adjust radii
+						var l = Math.pow(currp.x, 2) / Math.pow(rx, 2) + Math.pow(currp.y, 2) / Math.pow(ry, 2);
+						if (l > 1) {
+							rx *= Math.sqrt(l);
+							ry *= Math.sqrt(l);
+						}
+						// cx', cy'
+						var s = (largeArcFlag === sweepFlag ? -1 : 1) * Math.sqrt(
+							((Math.pow(rx, 2) * Math.pow(ry, 2)) - (Math.pow(rx, 2) * Math.pow(currp.y, 2)) - (Math.pow(ry, 2) * Math.pow(currp.x, 2))) /
+							(Math.pow(rx, 2) * Math.pow(currp.y, 2) + Math.pow(ry, 2) * Math.pow(currp.x, 2))
+						);
+						if (isNaN(s)) s = 0;
+						var cpp = new svg.Point(s * rx * currp.y / ry, s * -ry * currp.x / rx);
+						// cx, cy
+						var centp = new svg.Point(
+							(curr.x + cp.x) / 2.0 + Math.cos(xAxisRotation) * cpp.x - Math.sin(xAxisRotation) * cpp.y,
+							(curr.y + cp.y) / 2.0 + Math.sin(xAxisRotation) * cpp.x + Math.cos(xAxisRotation) * cpp.y
+						);
+						// vector magnitude
+						var m = function (v) { return Math.sqrt(Math.pow(v[0], 2) + Math.pow(v[1], 2)); };
+						// ratio between two vectors
+						var r = function (u, v) { return (u[0] * v[0] + u[1] * v[1]) / (m(u) * m(v)); };
+						// angle between two vectors
+						var a = function (u, v) { return (u[0] * v[1] < u[1] * v[0] ? -1 : 1) * Math.acos(r(u, v)); };
+						// initial angle
+						var a1 = a([1, 0], [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry]);
+						// angle delta
+						var u = [(currp.x - cpp.x) / rx, (currp.y - cpp.y) / ry];
+						var v = [(-currp.x - cpp.x) / rx, (-currp.y - cpp.y) / ry];
+						var ad = a(u, v);
+						if (r(u, v) <= -1) ad = Math.PI;
+						if (r(u, v) >= 1) ad = 0;
+
+						// for markers
+						var dir = 1 - sweepFlag ? 1.0 : -1.0;
+						var ah = a1 + dir * (ad / 2.0);
+						var halfWay = new svg.Point(
+							centp.x + rx * Math.cos(ah),
+							centp.y + ry * Math.sin(ah)
+						);
+						pp.addMarkerAngle(halfWay, ah - dir * Math.PI / 2);
+						pp.addMarkerAngle(cp, ah - dir * Math.PI);
+
+						bb.addPoint(cp.x, cp.y); // TODO: this is too naive, make it better
+						if (ctx != null) {
+							var r = rx > ry ? rx : ry;
+							var sx = rx > ry ? 1 : rx / ry;
+							var sy = rx > ry ? ry / rx : 1;
+
+							ctx.translate(centp.x, centp.y);
+							ctx.rotate(xAxisRotation);
+							ctx.scale(sx, sy);
+							ctx.arc(0, 0, r, a1, a1 + ad, 1 - sweepFlag);
+							ctx.scale(1 / sx, 1 / sy);
+							ctx.rotate(-xAxisRotation);
+							ctx.translate(-centp.x, -centp.y);
+						}
+					}
+					break;
+				case 'Z':
+				case 'z':
+					if (ctx != null) ctx.closePath();
+					pp.current = pp.start;
+				}
 			}
 
-			this.getMarkers = function() {
-				var points = this.PathParser.getMarkerPoints();
-				var angles = this.PathParser.getMarkerAngles();
-				
-				var markers = [];
-				for (var i=0; i<points.length; i++) {
-					markers.push([points[i], angles[i]]);
-				}
-				return markers;
+			return bb;
+		};
+
+		this.getMarkers = function () {
+			var points = this.PathParser.getMarkerPoints();
+			var angles = this.PathParser.getMarkerAngles();
+
+			var markers = [];
+			for (var i = 0; i < points.length; i++) {
+				markers.push([points[i], angles[i]]);
 			}
+			return markers;
+		};
+	};
+	svg.Element.path.prototype = new svg.Element.PathElementBase();
+
+	// pattern element
+	svg.Element.pattern = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.createPattern = function (ctx, element) {
+			var width = this.attribute('width').toPixels('x', true);
+			var height = this.attribute('height').toPixels('y', true);
+
+			// render me using a temporary svg element
+			var tempSvg = new svg.Element.svg();
+			tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
+			tempSvg.attributes['width'] = new svg.Property('width', width + 'px');
+			tempSvg.attributes['height'] = new svg.Property('height', height + 'px');
+			tempSvg.attributes['transform'] = new svg.Property('transform', this.attribute('patternTransform').value);
+			tempSvg.children = this.children;
+
+			var c = document.createElement('canvas');
+			c.width = width;
+			c.height = height;
+			var cctx = c.getContext('2d');
+			if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
+				cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true));
+			}
+			// render 3x3 grid so when we transform there's no white space on edges
+			for (var x = -1; x <= 1; x++) {
+				for (var y = -1; y <= 1; y++) {
+					cctx.save();
+					cctx.translate(x * c.width, y * c.height);
+					tempSvg.render(cctx);
+					cctx.restore();
+				}
+			}
+			var pattern = ctx.createPattern(c, 'repeat');
+			return pattern;
+		};
+	};
+	svg.Element.pattern.prototype = new svg.Element.ElementBase();
+
+	// marker element
+	svg.Element.marker = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.baseRender = this.render;
+		this.render = function (ctx, point, angle) {
+			ctx.translate(point.x, point.y);
+			if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(angle);
+			if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
+			ctx.save();
+
+			// render me using a temporary svg element
+			var tempSvg = new svg.Element.svg();
+			tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
+			tempSvg.attributes['refX'] = new svg.Property('refX', this.attribute('refX').value);
+			tempSvg.attributes['refY'] = new svg.Property('refY', this.attribute('refY').value);
+			tempSvg.attributes['width'] = new svg.Property('width', this.attribute('markerWidth').value);
+			tempSvg.attributes['height'] = new svg.Property('height', this.attribute('markerHeight').value);
+			tempSvg.attributes['fill'] = new svg.Property('fill', this.attribute('fill').valueOrDefault('black'));
+			tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
+			tempSvg.children = this.children;
+			tempSvg.render(ctx);
+
+			ctx.restore();
+			if (this.attribute('markerUnits').valueOrDefault('strokeWidth') === 'strokeWidth') ctx.scale(1 / ctx.lineWidth, 1 / ctx.lineWidth);
+			if (this.attribute('orient').valueOrDefault('auto') === 'auto') ctx.rotate(-angle);
+			ctx.translate(-point.x, -point.y);
+		};
+	};
+	svg.Element.marker.prototype = new svg.Element.ElementBase();
+
+	// definitions element
+	svg.Element.defs = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.render = function (ctx) {
+			// NOOP
+		};
+	};
+	svg.Element.defs.prototype = new svg.Element.ElementBase();
+
+	// base for gradients
+	svg.Element.GradientBase = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
+
+		this.stops = [];
+		for (var i = 0; i < this.children.length; i++) {
+			var child = this.children[i];
+			if (child.type === 'stop') this.stops.push(child);
 		}
-		svg.Element.path.prototype = new svg.Element.PathElementBase;
-		
-		// pattern element
-		svg.Element.pattern = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.createPattern = function(ctx, element) {
-				var width = this.attribute('width').toPixels('x', true);
-				var height = this.attribute('height').toPixels('y', true);
-			
-				// render me using a temporary svg element
+
+		this.getGradient = function () {
+			// OVERRIDE ME!
+		};
+
+		this.createGradient = function (ctx, element, parentOpacityProp) {
+			var stopsContainer = this;
+			if (this.getHrefAttribute().hasValue()) {
+				stopsContainer = this.getHrefAttribute().getDefinition();
+			}
+
+			var addParentOpacity = function (color) {
+				if (parentOpacityProp.hasValue()) {
+					var p = new svg.Property('color', color);
+					return p.addOpacity(parentOpacityProp).value;
+				}
+				return color;
+			};
+
+			var g = this.getGradient(ctx, element);
+			if (g == null) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color);
+			for (var i = 0; i < stopsContainer.stops.length; i++) {
+				g.addColorStop(stopsContainer.stops[i].offset, addParentOpacity(stopsContainer.stops[i].color));
+			}
+
+			if (this.attribute('gradientTransform').hasValue()) {
+				// render as transformed pattern on temporary canvas
+				var rootView = svg.ViewPort.viewPorts[0];
+
+				var rect = new svg.Element.rect();
+				rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS / 3.0);
+				rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS / 3.0);
+				rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
+				rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
+
+				var group = new svg.Element.g();
+				group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
+				group.children = [ rect ];
+
 				var tempSvg = new svg.Element.svg();
-				tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
-				tempSvg.attributes['width'] = new svg.Property('width', width + 'px');
-				tempSvg.attributes['height'] = new svg.Property('height', height + 'px');
-				tempSvg.attributes['transform'] = new svg.Property('transform', this.attribute('patternTransform').value);
-				tempSvg.children = this.children;
-				
+				tempSvg.attributes['x'] = new svg.Property('x', 0);
+				tempSvg.attributes['y'] = new svg.Property('y', 0);
+				tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
+				tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
+				tempSvg.children = [ group ];
+
 				var c = document.createElement('canvas');
-				c.width = width;
-				c.height = height;
-				var cctx = c.getContext('2d');
-				if (this.attribute('x').hasValue() && this.attribute('y').hasValue()) {
-					cctx.translate(this.attribute('x').toPixels('x', true), this.attribute('y').toPixels('y', true));
-				}
-				// render 3x3 grid so when we transform there's no white space on edges
-				for (var x=-1; x<=1; x++) {
-					for (var y=-1; y<=1; y++) {
-						cctx.save();
-						cctx.translate(x * c.width, y * c.height);
-						tempSvg.render(cctx);
-						cctx.restore();
-					}
-				}
-				var pattern = ctx.createPattern(c, 'repeat');
-				return pattern;
+				c.width = rootView.width;
+				c.height = rootView.height;
+				var tempCtx = c.getContext('2d');
+				tempCtx.fillStyle = g;
+				tempSvg.render(tempCtx);
+				return tempCtx.createPattern(c, 'no-repeat');
 			}
-		}
-		svg.Element.pattern.prototype = new svg.Element.ElementBase;
-		
-		// marker element
-		svg.Element.marker = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.baseRender = this.render;
-			this.render = function(ctx, point, angle) {
-				ctx.translate(point.x, point.y);
-				if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(angle);
-				if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(ctx.lineWidth, ctx.lineWidth);
-				ctx.save();
-							
-				// render me using a temporary svg element
-				var tempSvg = new svg.Element.svg();
-				tempSvg.attributes['viewBox'] = new svg.Property('viewBox', this.attribute('viewBox').value);
-				tempSvg.attributes['refX'] = new svg.Property('refX', this.attribute('refX').value);
-				tempSvg.attributes['refY'] = new svg.Property('refY', this.attribute('refY').value);
-				tempSvg.attributes['width'] = new svg.Property('width', this.attribute('markerWidth').value);
-				tempSvg.attributes['height'] = new svg.Property('height', this.attribute('markerHeight').value);
-				tempSvg.attributes['fill'] = new svg.Property('fill', this.attribute('fill').valueOrDefault('black'));
-				tempSvg.attributes['stroke'] = new svg.Property('stroke', this.attribute('stroke').valueOrDefault('none'));
-				tempSvg.children = this.children;
-				tempSvg.render(ctx);
-				
-				ctx.restore();
-				if (this.attribute('markerUnits').valueOrDefault('strokeWidth') == 'strokeWidth') ctx.scale(1/ctx.lineWidth, 1/ctx.lineWidth);
-				if (this.attribute('orient').valueOrDefault('auto') == 'auto') ctx.rotate(-angle);
-				ctx.translate(-point.x, -point.y);
-			}
-		}
-		svg.Element.marker.prototype = new svg.Element.ElementBase;
-		
-		// definitions element
-		svg.Element.defs = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);	
-			
-			this.render = function(ctx) {
-				// NOOP
-			}
-		}
-		svg.Element.defs.prototype = new svg.Element.ElementBase;
-		
-		// base for gradients
-		svg.Element.GradientBase = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.gradientUnits = this.attribute('gradientUnits').valueOrDefault('objectBoundingBox');
-			
-			this.stops = [];			
-			for (var i=0; i<this.children.length; i++) {
-				var child = this.children[i];
-				if (child.type == 'stop') this.stops.push(child);
-			}	
-			
-			this.getGradient = function() {
-				// OVERRIDE ME!
-			}			
 
-			this.createGradient = function(ctx, element, parentOpacityProp) {
-				var stopsContainer = this;
-				if (this.getHrefAttribute().hasValue()) {
-					stopsContainer = this.getHrefAttribute().getDefinition();
-				}
-				
-				var addParentOpacity = function (color) {
-					if (parentOpacityProp.hasValue()) {
-						var p = new svg.Property('color', color);
-						return p.addOpacity(parentOpacityProp).value;
-					}
-					return color;
-				};
-			
-				var g = this.getGradient(ctx, element);
-				if (g == null) return addParentOpacity(stopsContainer.stops[stopsContainer.stops.length - 1].color);
-				for (var i=0; i<stopsContainer.stops.length; i++) {
-					g.addColorStop(stopsContainer.stops[i].offset, addParentOpacity(stopsContainer.stops[i].color));
-				}
-				
-				if (this.attribute('gradientTransform').hasValue()) {
-					// render as transformed pattern on temporary canvas
-					var rootView = svg.ViewPort.viewPorts[0];
-					
-					var rect = new svg.Element.rect();
-					rect.attributes['x'] = new svg.Property('x', -svg.MAX_VIRTUAL_PIXELS/3.0);
-					rect.attributes['y'] = new svg.Property('y', -svg.MAX_VIRTUAL_PIXELS/3.0);
-					rect.attributes['width'] = new svg.Property('width', svg.MAX_VIRTUAL_PIXELS);
-					rect.attributes['height'] = new svg.Property('height', svg.MAX_VIRTUAL_PIXELS);
-					
-					var group = new svg.Element.g();
-					group.attributes['transform'] = new svg.Property('transform', this.attribute('gradientTransform').value);
-					group.children = [ rect ];
-					
-					var tempSvg = new svg.Element.svg();
-					tempSvg.attributes['x'] = new svg.Property('x', 0);
-					tempSvg.attributes['y'] = new svg.Property('y', 0);
-					tempSvg.attributes['width'] = new svg.Property('width', rootView.width);
-					tempSvg.attributes['height'] = new svg.Property('height', rootView.height);
-					tempSvg.children = [ group ];
-					
-					var c = document.createElement('canvas');
-					c.width = rootView.width;
-					c.height = rootView.height;
-					var tempCtx = c.getContext('2d');
-					tempCtx.fillStyle = g;
-					tempSvg.render(tempCtx);		
-					return tempCtx.createPattern(c, 'no-repeat');
-				}
-				
-				return g;				
-			}
-		}
-		svg.Element.GradientBase.prototype = new svg.Element.ElementBase;
-		
-		// linear gradient element
-		svg.Element.linearGradient = function(node) {
-			this.base = svg.Element.GradientBase;
-			this.base(node);
-			
-			this.getGradient = function(ctx, element) {
-				var bb = this.gradientUnits == 'objectBoundingBox' ? element.getBoundingBox() : null;
-				
-				if (!this.attribute('x1').hasValue()
-				 && !this.attribute('y1').hasValue()
-				 && !this.attribute('x2').hasValue()
-				 && !this.attribute('y2').hasValue()) {
-					this.attribute('x1', true).value = 0;
-					this.attribute('y1', true).value = 0;
-					this.attribute('x2', true).value = 1;
-					this.attribute('y2', true).value = 0;
-				 }
-				
-				var x1 = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.x() + bb.width() * this.attribute('x1').numValue() 
-					: this.attribute('x1').toPixels('x'));
-				var y1 = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.y() + bb.height() * this.attribute('y1').numValue()
-					: this.attribute('y1').toPixels('y'));
-				var x2 = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.x() + bb.width() * this.attribute('x2').numValue()
-					: this.attribute('x2').toPixels('x'));
-				var y2 = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.y() + bb.height() * this.attribute('y2').numValue()
-					: this.attribute('y2').toPixels('y'));
+			return g;
+		};
+	};
+	svg.Element.GradientBase.prototype = new svg.Element.ElementBase();
 
-				if (x1 == x2 && y1 == y2) return null;
-				return ctx.createLinearGradient(x1, y1, x2, y2);
+	// linear gradient element
+	svg.Element.linearGradient = function (node) {
+		this.base = svg.Element.GradientBase;
+		this.base(node);
+
+		this.getGradient = function (ctx, element) {
+			var bb = this.gradientUnits === 'objectBoundingBox'
+				? element.getBoundingBox()
+				: null;
+
+			if (!this.attribute('x1').hasValue() &&
+				!this.attribute('y1').hasValue() &&
+				!this.attribute('x2').hasValue() &&
+				!this.attribute('y2').hasValue()
+			) {
+				this.attribute('x1', true).value = 0;
+				this.attribute('y1', true).value = 0;
+				this.attribute('x2', true).value = 1;
+				this.attribute('y2', true).value = 0;
 			}
-		}
-		svg.Element.linearGradient.prototype = new svg.Element.GradientBase;
-		
-		// radial gradient element
-		svg.Element.radialGradient = function(node) {
-			this.base = svg.Element.GradientBase;
-			this.base(node);
-			
-			this.getGradient = function(ctx, element) {
-				var bb = element.getBoundingBox();
-				
-				if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%';
-				if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%';
-				if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%';
-				
-				var cx = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.x() + bb.width() * this.attribute('cx').numValue() 
-					: this.attribute('cx').toPixels('x'));
-				var cy = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.y() + bb.height() * this.attribute('cy').numValue() 
-					: this.attribute('cy').toPixels('y'));
-				
-				var fx = cx;
-				var fy = cy;
-				if (this.attribute('fx').hasValue()) {
-					fx = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.x() + bb.width() * this.attribute('fx').numValue() 
+
+			var x1 = (this.gradientUnits === 'objectBoundingBox'
+				? bb.x() + bb.width() * this.attribute('x1').numValue()
+				: this.attribute('x1').toPixels('x'));
+			var y1 = (this.gradientUnits === 'objectBoundingBox'
+				? bb.y() + bb.height() * this.attribute('y1').numValue()
+				: this.attribute('y1').toPixels('y'));
+			var x2 = (this.gradientUnits === 'objectBoundingBox'
+				? bb.x() + bb.width() * this.attribute('x2').numValue()
+				: this.attribute('x2').toPixels('x'));
+			var y2 = (this.gradientUnits === 'objectBoundingBox'
+				? bb.y() + bb.height() * this.attribute('y2').numValue()
+				: this.attribute('y2').toPixels('y'));
+
+			if (x1 === x2 && y1 === y2) return null;
+			return ctx.createLinearGradient(x1, y1, x2, y2);
+		};
+	};
+	svg.Element.linearGradient.prototype = new svg.Element.GradientBase();
+
+	// radial gradient element
+	svg.Element.radialGradient = function (node) {
+		this.base = svg.Element.GradientBase;
+		this.base(node);
+
+		this.getGradient = function (ctx, element) {
+			var bb = element.getBoundingBox();
+
+			if (!this.attribute('cx').hasValue()) this.attribute('cx', true).value = '50%';
+			if (!this.attribute('cy').hasValue()) this.attribute('cy', true).value = '50%';
+			if (!this.attribute('r').hasValue()) this.attribute('r', true).value = '50%';
+
+			var cx = (this.gradientUnits === 'objectBoundingBox'
+				? bb.x() + bb.width() * this.attribute('cx').numValue()
+				: this.attribute('cx').toPixels('x'));
+			var cy = (this.gradientUnits === 'objectBoundingBox'
+				? bb.y() + bb.height() * this.attribute('cy').numValue()
+				: this.attribute('cy').toPixels('y'));
+
+			var fx = cx;
+			var fy = cy;
+			if (this.attribute('fx').hasValue()) {
+				fx = (this.gradientUnits === 'objectBoundingBox'
+					? bb.x() + bb.width() * this.attribute('fx').numValue()
 					: this.attribute('fx').toPixels('x'));
-				}
-				if (this.attribute('fy').hasValue()) {
-					fy = (this.gradientUnits == 'objectBoundingBox' 
-					? bb.y() + bb.height() * this.attribute('fy').numValue() 
+			}
+			if (this.attribute('fy').hasValue()) {
+				fy = (this.gradientUnits === 'objectBoundingBox'
+					? bb.y() + bb.height() * this.attribute('fy').numValue()
 					: this.attribute('fy').toPixels('y'));
-				}
-				
-				var r = (this.gradientUnits == 'objectBoundingBox' 
-					? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
-					: this.attribute('r').toPixels());
-				
-				return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
 			}
-		}
-		svg.Element.radialGradient.prototype = new svg.Element.GradientBase;
-		
-		// gradient stop element
-		svg.Element.stop = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.offset = this.attribute('offset').numValue();
-			if (this.offset < 0) this.offset = 0;
-			if (this.offset > 1) this.offset = 1;
-			
-			var stopColor = this.style('stop-color');
-			if (this.style('stop-opacity').hasValue()) stopColor = stopColor.addOpacity(this.style('stop-opacity'));
-			this.color = stopColor.value;
-		}
-		svg.Element.stop.prototype = new svg.Element.ElementBase;
-		
-		// animation base element
-		svg.Element.AnimateBase = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			svg.Animations.push(this);
-			
-			this.duration = 0.0;
-			this.begin = this.attribute('begin').toMilliseconds();
-			this.maxDuration = this.begin + this.attribute('dur').toMilliseconds();
-			
-			this.getProperty = function() {
-				var attributeType = this.attribute('attributeType').value;
-				var attributeName = this.attribute('attributeName').value;
-				
-				if (attributeType == 'CSS') {
-					return this.parent.style(attributeName, true);
-				}
-				return this.parent.attribute(attributeName, true);			
-			};
-			
-			this.initialValue = null;
-			this.initialUnits = '';
-			this.removed = false;		
 
-			this.calcValue = function() {
-				// OVERRIDE ME!
-				return '';
-			}
-					
-			this.update = function(delta) {	
-				// set initial value
-				if (this.initialValue == null) {
-					this.initialValue = this.getProperty().value;
-					this.initialUnits = this.getProperty().getUnits();
-				}
-			
-				// if we're past the end time
-				if (this.duration > this.maxDuration) {
-					// loop for indefinitely repeating animations
-					if (this.attribute('repeatCount').value == 'indefinite'
-					 || this.attribute('repeatDur').value == 'indefinite') {
-						this.duration = 0.0
-					}
-					else if (this.attribute('fill').valueOrDefault('remove') == 'freeze' && !this.frozen) {
-						this.frozen = true;
-						this.parent.animationFrozen = true;
-						this.parent.animationFrozenValue = this.getProperty().value;
-					}
-					else if (this.attribute('fill').valueOrDefault('remove') == 'remove' && !this.removed) {
-						this.removed = true;
-						this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue;
-						return true;
-					}
-					return false;
-				}			
-				this.duration = this.duration + delta;
-			
-				// if we're past the begin time
-				var updated = false;
-				if (this.begin < this.duration) {
-					var newValue = this.calcValue(); // tween
-					
-					if (this.attribute('type').hasValue()) {
-						// for transform, etc.
-						var type = this.attribute('type').value;
-						newValue = type + '(' + newValue + ')';
-					}
-					
-					this.getProperty().value = newValue;
-					updated = true;
-				}
-				
-				return updated;
-			}
-			
-			this.from = this.attribute('from');
-			this.to = this.attribute('to');
-			this.values = this.attribute('values');
-			if (this.values.hasValue()) this.values.value = this.values.value.split(';');
-			
-			// fraction of duration we've covered
-			this.progress = function() {
-				var ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) };
-				if (this.values.hasValue()) {
-					var p = ret.progress * (this.values.value.length - 1);
-					var lb = Math.floor(p), ub = Math.ceil(p);
-					ret.from = new svg.Property('from', parseFloat(this.values.value[lb]));
-					ret.to = new svg.Property('to', parseFloat(this.values.value[ub]));
-					ret.progress = (p - lb) / (ub - lb);
-				}
-				else {
-					ret.from = this.from;
-					ret.to = this.to;
-				}
-				return ret;
-			}			
-		}
-		svg.Element.AnimateBase.prototype = new svg.Element.ElementBase;
-		
-		// animate element
-		svg.Element.animate = function(node) {
-			this.base = svg.Element.AnimateBase;
-			this.base(node);
-			
-			this.calcValue = function() {
-				var p = this.progress();
-				
-				// tween value linearly
-				var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress; 
-				return newValue + this.initialUnits;
-			};
-		}
-		svg.Element.animate.prototype = new svg.Element.AnimateBase;
-			
-		// animate color element
-		svg.Element.animateColor = function(node) {
-			this.base = svg.Element.AnimateBase;
-			this.base(node);
+			var r = (this.gradientUnits === 'objectBoundingBox'
+				? (bb.width() + bb.height()) / 2.0 * this.attribute('r').numValue()
+				: this.attribute('r').toPixels());
 
-			this.calcValue = function() {
-				var p = this.progress();
-				var from = new RGBColor(p.from.value);
-				var to = new RGBColor(p.to.value);
-				
-				if (from.ok && to.ok) {
-					// tween color linearly
-					var r = from.r + (to.r - from.r) * p.progress;
-					var g = from.g + (to.g - from.g) * p.progress;
-					var b = from.b + (to.b - from.b) * p.progress;
-					return 'rgb('+parseInt(r,10)+','+parseInt(g,10)+','+parseInt(b,10)+')';
-				}
-				return this.attribute('from').value;
-			};
-		}
-		svg.Element.animateColor.prototype = new svg.Element.AnimateBase;
-		
-		// animate transform element
-		svg.Element.animateTransform = function(node) {
-			this.base = svg.Element.AnimateBase;
-			this.base(node);
-			
-			this.calcValue = function() {
-				var p = this.progress();
-				
-				// tween value linearly
-				var from = svg.ToNumberArray(p.from.value);
-				var to = svg.ToNumberArray(p.to.value);
-				var newValue = '';
-				for (var i=0; i<from.length; i++) {
-					newValue += from[i] + (to[i] - from[i]) * p.progress + ' ';
-				}
-				return newValue;
-			};
-		}
-		svg.Element.animateTransform.prototype = new svg.Element.animate;
-		
-		// font element
-		svg.Element.font = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
+			return ctx.createRadialGradient(fx, fy, 0, cx, cy, r);
+		};
+	};
+	svg.Element.radialGradient.prototype = new svg.Element.GradientBase();
 
-			this.horizAdvX = this.attribute('horiz-adv-x').numValue();			
-			
-			this.isRTL = false;
-			this.isArabic = false;
-			this.fontFace = null;
-			this.missingGlyph = null;
-			this.glyphs = [];			
-			for (var i=0; i<this.children.length; i++) {
-				var child = this.children[i];
-				if (child.type == 'font-face') {
-					this.fontFace = child;
-					if (child.style('font-family').hasValue()) {
-						svg.Definitions[child.style('font-family').value] = this;
-					}
-				}
-				else if (child.type == 'missing-glyph') this.missingGlyph = child;
-				else if (child.type == 'glyph') {
-					if (child.arabicForm != '') {
-						this.isRTL = true;
-						this.isArabic = true;
-						if (typeof(this.glyphs[child.unicode]) == 'undefined') this.glyphs[child.unicode] = [];
-						this.glyphs[child.unicode][child.arabicForm] = child;
-					}
-					else {
-						this.glyphs[child.unicode] = child;
-					}
-				}
-			}	
-		}
-		svg.Element.font.prototype = new svg.Element.ElementBase;
-		
-		// font-face element
-		svg.Element.fontface = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);	
-			
-			this.ascent = this.attribute('ascent').value;
-			this.descent = this.attribute('descent').value;
-			this.unitsPerEm = this.attribute('units-per-em').numValue();				
-		}
-		svg.Element.fontface.prototype = new svg.Element.ElementBase;
-		
-		// missing-glyph element
-		svg.Element.missingglyph = function(node) {
-			this.base = svg.Element.path;
-			this.base(node);	
-			
-			this.horizAdvX = 0;
-		}
-		svg.Element.missingglyph.prototype = new svg.Element.path;
-		
-		// glyph element
-		svg.Element.glyph = function(node) {
-			this.base = svg.Element.path;
-			this.base(node);	
-			
-			this.horizAdvX = this.attribute('horiz-adv-x').numValue();
-			this.unicode = this.attribute('unicode').value;
-			this.arabicForm = this.attribute('arabic-form').value;
-		}
-		svg.Element.glyph.prototype = new svg.Element.path;
-		
-		// text element
-		svg.Element.text = function(node) {
-			this.captureTextNodes = true;
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.baseSetContext = this.setContext;
-			this.setContext = function(ctx) {
-				this.baseSetContext(ctx);
-				
-				var textBaseline = this.style('dominant-baseline').toTextBaseline();
-				if (textBaseline == null) textBaseline = this.style('alignment-baseline').toTextBaseline();
-				if (textBaseline != null) ctx.textBaseline = textBaseline;
+	// gradient stop element
+	svg.Element.stop = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.offset = this.attribute('offset').numValue();
+		if (this.offset < 0) this.offset = 0;
+		if (this.offset > 1) this.offset = 1;
+
+		var stopColor = this.style('stop-color');
+		if (this.style('stop-opacity').hasValue()) stopColor = stopColor.addOpacity(this.style('stop-opacity'));
+		this.color = stopColor.value;
+	};
+	svg.Element.stop.prototype = new svg.Element.ElementBase();
+
+	// animation base element
+	svg.Element.AnimateBase = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		svg.Animations.push(this);
+
+		this.duration = 0.0;
+		this.begin = this.attribute('begin').toMilliseconds();
+		this.maxDuration = this.begin + this.attribute('dur').toMilliseconds();
+
+		this.getProperty = function () {
+			var attributeType = this.attribute('attributeType').value;
+			var attributeName = this.attribute('attributeName').value;
+
+			if (attributeType === 'CSS') {
+				return this.parent.style(attributeName, true);
 			}
-			
-			this.getBoundingBox = function () {
-				var x = this.attribute('x').toPixels('x');
-				var y = this.attribute('y').toPixels('y');
+			return this.parent.attribute(attributeName, true);
+		};
+
+		this.initialValue = null;
+		this.initialUnits = '';
+		this.removed = false;
+
+		this.calcValue = function () {
+			// OVERRIDE ME!
+			return '';
+		};
+
+		this.update = function (delta) {
+			// set initial value
+			if (this.initialValue == null) {
+				this.initialValue = this.getProperty().value;
+				this.initialUnits = this.getProperty().getUnits();
+			}
+
+			// if we're past the end time
+			if (this.duration > this.maxDuration) {
+				// loop for indefinitely repeating animations
+				if (this.attribute('repeatCount').value === 'indefinite' ||
+					this.attribute('repeatDur').value === 'indefinite') {
+					this.duration = 0.0;
+				} else if (this.attribute('fill').valueOrDefault('remove') === 'freeze' && !this.frozen) {
+					this.frozen = true;
+					this.parent.animationFrozen = true;
+					this.parent.animationFrozenValue = this.getProperty().value;
+				} else if (this.attribute('fill').valueOrDefault('remove') === 'remove' && !this.removed) {
+					this.removed = true;
+					this.getProperty().value = this.parent.animationFrozen ? this.parent.animationFrozenValue : this.initialValue;
+					return true;
+				}
+				return false;
+			}
+			this.duration = this.duration + delta;
+
+			// if we're past the begin time
+			var updated = false;
+			if (this.begin < this.duration) {
+				var newValue = this.calcValue(); // tween
+
+				if (this.attribute('type').hasValue()) {
+					// for transform, etc.
+					var type = this.attribute('type').value;
+					newValue = type + '(' + newValue + ')';
+				}
+
+				this.getProperty().value = newValue;
+				updated = true;
+			}
+
+			return updated;
+		};
+
+		this.from = this.attribute('from');
+		this.to = this.attribute('to');
+		this.values = this.attribute('values');
+		if (this.values.hasValue()) this.values.value = this.values.value.split(';');
+
+		// fraction of duration we've covered
+		this.progress = function () {
+			var ret = { progress: (this.duration - this.begin) / (this.maxDuration - this.begin) };
+			if (this.values.hasValue()) {
+				var p = ret.progress * (this.values.value.length - 1);
+				var lb = Math.floor(p), ub = Math.ceil(p);
+				ret.from = new svg.Property('from', parseFloat(this.values.value[lb]));
+				ret.to = new svg.Property('to', parseFloat(this.values.value[ub]));
+				ret.progress = (p - lb) / (ub - lb);
+			} else {
+				ret.from = this.from;
+				ret.to = this.to;
+			}
+			return ret;
+		};
+	};
+	svg.Element.AnimateBase.prototype = new svg.Element.ElementBase();
+
+	// animate element
+	svg.Element.animate = function (node) {
+		this.base = svg.Element.AnimateBase;
+		this.base(node);
+
+		this.calcValue = function () {
+			var p = this.progress();
+
+			// tween value linearly
+			var newValue = p.from.numValue() + (p.to.numValue() - p.from.numValue()) * p.progress;
+			return newValue + this.initialUnits;
+		};
+	};
+	svg.Element.animate.prototype = new svg.Element.AnimateBase();
+
+	// animate color element
+	svg.Element.animateColor = function (node) {
+		this.base = svg.Element.AnimateBase;
+		this.base(node);
+
+		this.calcValue = function () {
+			var p = this.progress();
+			var from = new RGBColor(p.from.value);
+			var to = new RGBColor(p.to.value);
+
+			if (from.ok && to.ok) {
+				// tween color linearly
+				var r = from.r + (to.r - from.r) * p.progress;
+				var g = from.g + (to.g - from.g) * p.progress;
+				var b = from.b + (to.b - from.b) * p.progress;
+				return 'rgb(' + parseInt(r, 10) + ',' + parseInt(g, 10) + ',' + parseInt(b, 10) + ')';
+			}
+			return this.attribute('from').value;
+		};
+	};
+	svg.Element.animateColor.prototype = new svg.Element.AnimateBase();
+
+	// animate transform element
+	svg.Element.animateTransform = function (node) {
+		this.base = svg.Element.AnimateBase;
+		this.base(node);
+
+		this.calcValue = function () {
+			var p = this.progress();
+
+			// tween value linearly
+			var from = svg.ToNumberArray(p.from.value);
+			var to = svg.ToNumberArray(p.to.value);
+			var newValue = '';
+			for (var i = 0; i < from.length; i++) {
+				newValue += from[i] + (to[i] - from[i]) * p.progress + ' ';
+			}
+			return newValue;
+		};
+	};
+	svg.Element.animateTransform.prototype = new svg.Element.animate();
+
+	// font element
+	svg.Element.font = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.horizAdvX = this.attribute('horiz-adv-x').numValue();
+
+		this.isRTL = false;
+		this.isArabic = false;
+		this.fontFace = null;
+		this.missingGlyph = null;
+		this.glyphs = [];
+		for (var i = 0; i < this.children.length; i++) {
+			var child = this.children[i];
+			if (child.type === 'font-face') {
+				this.fontFace = child;
+				if (child.style('font-family').hasValue()) {
+					svg.Definitions[child.style('font-family').value] = this;
+				}
+			} else if (child.type === 'missing-glyph') {
+				this.missingGlyph = child;
+			} else if (child.type === 'glyph') {
+				if (child.arabicForm !== '') {
+					this.isRTL = true;
+					this.isArabic = true;
+					if (typeof this.glyphs[child.unicode] === 'undefined') {
+						this.glyphs[child.unicode] = [];
+					}
+					this.glyphs[child.unicode][child.arabicForm] = child;
+				} else {
+					this.glyphs[child.unicode] = child;
+				}
+			}
+		}
+	};
+	svg.Element.font.prototype = new svg.Element.ElementBase();
+
+	// font-face element
+	svg.Element.fontface = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.ascent = this.attribute('ascent').value;
+		this.descent = this.attribute('descent').value;
+		this.unitsPerEm = this.attribute('units-per-em').numValue();
+	};
+	svg.Element.fontface.prototype = new svg.Element.ElementBase();
+
+	// missing-glyph element
+	svg.Element.missingglyph = function (node) {
+		this.base = svg.Element.path;
+		this.base(node);
+
+		this.horizAdvX = 0;
+	};
+	svg.Element.missingglyph.prototype = new svg.Element.path();
+
+	// glyph element
+	svg.Element.glyph = function (node) {
+		this.base = svg.Element.path;
+		this.base(node);
+
+		this.horizAdvX = this.attribute('horiz-adv-x').numValue();
+		this.unicode = this.attribute('unicode').value;
+		this.arabicForm = this.attribute('arabic-form').value;
+	};
+	svg.Element.glyph.prototype = new svg.Element.path();
+
+	// text element
+	svg.Element.text = function (node) {
+		this.captureTextNodes = true;
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.baseSetContext = this.setContext;
+		this.setContext = function (ctx) {
+			this.baseSetContext(ctx);
+
+			var textBaseline = this.style('dominant-baseline').toTextBaseline();
+			if (textBaseline == null) textBaseline = this.style('alignment-baseline').toTextBaseline();
+			if (textBaseline != null) ctx.textBaseline = textBaseline;
+		};
+
+		this.getBoundingBox = function () {
+			var x = this.attribute('x').toPixels('x');
+			var y = this.attribute('y').toPixels('y');
+			var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
+			return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y);
+		};
+
+		this.renderChildren = function (ctx) {
+			this.x = this.attribute('x').toPixels('x');
+			this.y = this.attribute('y').toPixels('y');
+			this.x += this.getAnchorDelta(ctx, this, 0);
+			for (var i = 0; i < this.children.length; i++) {
+				this.renderChild(ctx, this, i);
+			}
+		};
+
+		this.getAnchorDelta = function (ctx, parent, startI) {
+			var textAnchor = this.style('text-anchor').valueOrDefault('start');
+			if (textAnchor !== 'start') {
+				var width = 0;
+				for (var i = startI; i < parent.children.length; i++) {
+					var child = parent.children[i];
+					if (i > startI && child.attribute('x').hasValue()) break; // new group
+					width += child.measureTextRecursive(ctx);
+				}
+				return -1 * (textAnchor === 'end' ? width : width / 2.0);
+			}
+			return 0;
+		};
+
+		this.renderChild = function (ctx, parent, i) {
+			var child = parent.children[i];
+			if (child.attribute('x').hasValue()) {
+				child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i);
+				if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x');
+			} else {
+				if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x');
+				if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x');
+				child.x = this.x;
+			}
+			this.x = child.x + child.measureText(ctx);
+
+			if (child.attribute('y').hasValue()) {
+				child.y = child.attribute('y').toPixels('y');
+				if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y');
+			} else {
+				if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y');
+				if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y');
+				child.y = this.y;
+			}
+			this.y = child.y;
+
+			child.render(ctx);
+
+			for (var i = 0; i < child.children.length; i++) {
+				this.renderChild(ctx, child, i);
+			}
+		};
+	};
+	svg.Element.text.prototype = new svg.Element.RenderedElementBase();
+
+	// text base
+	svg.Element.TextElementBase = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.getGlyph = function (font, text, i) {
+			var c = text[i];
+			var glyph = null;
+			if (font.isArabic) {
+				var arabicForm = 'isolated';
+				if ((i === 0 || text[i - 1] === ' ') && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'terminal';
+				if (i > 0 && text[i - 1] !== ' ' && i < text.length - 2 && text[i + 1] !== ' ') arabicForm = 'medial';
+				if (i > 0 && text[i - 1] !== ' ' && (i === text.length - 1 || text[i + 1] === ' ')) arabicForm = 'initial';
+				if (typeof font.glyphs[c] !== 'undefined') {
+					glyph = font.glyphs[c][arabicForm];
+					if (glyph == null && font.glyphs[c].type === 'glyph') glyph = font.glyphs[c];
+				}
+			} else {
+				glyph = font.glyphs[c];
+			}
+			if (glyph == null) glyph = font.missingGlyph;
+			return glyph;
+		};
+
+		this.renderChildren = function (ctx) {
+			var customFont = this.parent.style('font-family').getDefinition();
+			if (customFont != null) {
 				var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
-				return new svg.BoundingBox(x, y - fontSize, x + Math.floor(fontSize * 2.0 / 3.0) * this.children[0].getText().length, y);
-			}
-			
-			this.renderChildren = function(ctx) {
-				this.x = this.attribute('x').toPixels('x');
-				this.y = this.attribute('y').toPixels('y');
-				this.x += this.getAnchorDelta(ctx, this, 0);
-				for (var i=0; i<this.children.length; i++) {
-					this.renderChild(ctx, this, i);
-				}
-			}
-			
-			this.getAnchorDelta = function (ctx, parent, startI) {
-				var textAnchor = this.style('text-anchor').valueOrDefault('start');
-				if (textAnchor != 'start') {
-					var width = 0;
-					for (var i=startI; i<parent.children.length; i++) {
-						var child = parent.children[i];
-						if (i > startI && child.attribute('x').hasValue()) break; // new group
-						width += child.measureTextRecursive(ctx);
-					}
-					return -1 * (textAnchor == 'end' ? width : width / 2.0);
-				}
-				return 0;
-			}
-			
-			this.renderChild = function(ctx, parent, i) {
-				var child = parent.children[i];
-				if (child.attribute('x').hasValue()) {
-					child.x = child.attribute('x').toPixels('x') + this.getAnchorDelta(ctx, parent, i);
-					if (child.attribute('dx').hasValue()) child.x += child.attribute('dx').toPixels('x');
-				}
-				else {
-					if (this.attribute('dx').hasValue()) this.x += this.attribute('dx').toPixels('x');
-					if (child.attribute('dx').hasValue()) this.x += child.attribute('dx').toPixels('x');
-					child.x = this.x;
-				}
-				this.x = child.x + child.measureText(ctx);
-				
-				if (child.attribute('y').hasValue()) {
-					child.y = child.attribute('y').toPixels('y');
-					if (child.attribute('dy').hasValue()) child.y += child.attribute('dy').toPixels('y');
-				}
-				else {
-					if (this.attribute('dy').hasValue()) this.y += this.attribute('dy').toPixels('y');
-					if (child.attribute('dy').hasValue()) this.y += child.attribute('dy').toPixels('y');
-					child.y = this.y;
-				}
-				this.y = child.y;
-				
-				child.render(ctx);
-				
-				for (var i=0; i<child.children.length; i++) {
-					this.renderChild(ctx, child, i);
-				}
-			}
-		}
-		svg.Element.text.prototype = new svg.Element.RenderedElementBase;
-		
-		// text base
-		svg.Element.TextElementBase = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.getGlyph = function(font, text, i) {
-				var c = text[i];
-				var glyph = null;
-				if (font.isArabic) {
-					var arabicForm = 'isolated';
-					if ((i==0 || text[i-1]==' ') && i<text.length-2 && text[i+1]!=' ') arabicForm = 'terminal'; 
-					if (i>0 && text[i-1]!=' ' && i<text.length-2 && text[i+1]!=' ') arabicForm = 'medial';
-					if (i>0 && text[i-1]!=' ' && (i == text.length-1 || text[i+1]==' ')) arabicForm = 'initial';
-					if (typeof(font.glyphs[c]) != 'undefined') {
-						glyph = font.glyphs[c][arabicForm];
-						if (glyph == null && font.glyphs[c].type == 'glyph') glyph = font.glyphs[c];
-					}
-				}
-				else {
-					glyph = font.glyphs[c];
-				}
-				if (glyph == null) glyph = font.missingGlyph;
-				return glyph;
-			}
-			
-			this.renderChildren = function(ctx) {
-				var customFont = this.parent.style('font-family').getDefinition();
-				if (customFont != null) {
-					var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
-					var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
-					var text = this.getText();
-					if (customFont.isRTL) text = text.split("").reverse().join("");
-					
-					var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
-					for (var i=0; i<text.length; i++) {
-						var glyph = this.getGlyph(customFont, text, i);
-						var scale = fontSize / customFont.fontFace.unitsPerEm;
-						ctx.translate(this.x, this.y);
-						ctx.scale(scale, -scale);
-						var lw = ctx.lineWidth;
-						ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize;
-						if (fontStyle == 'italic') ctx.transform(1, 0, .4, 1, 0, 0);
-						glyph.render(ctx);
-						if (fontStyle == 'italic') ctx.transform(1, 0, -.4, 1, 0, 0);
-						ctx.lineWidth = lw;
-						ctx.scale(1/scale, -1/scale);
-						ctx.translate(-this.x, -this.y);	
-						
-						this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
-						if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
-							this.x += dx[i];
-						}
-					}
-					return;
-				}
-			
-				if (ctx.fillStyle != '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
-				if (ctx.strokeStyle != '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
-			}
-			
-			this.getText = function() {
-				// OVERRIDE ME
-			}
-			
-			this.measureTextRecursive = function(ctx) {
-				var width = this.measureText(ctx);
-				for (var i=0; i<this.children.length; i++) {
-					width += this.children[i].measureTextRecursive(ctx);
-				}
-				return width;
-			}
-			
-			this.measureText = function(ctx) {
-				var customFont = this.parent.style('font-family').getDefinition();
-				if (customFont != null) {
-					var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
-					var measure = 0;
-					var text = this.getText();
-					if (customFont.isRTL) text = text.split("").reverse().join("");
-					var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
-					for (var i=0; i<text.length; i++) {
-						var glyph = this.getGlyph(customFont, text, i);
-						measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm;
-						if (typeof(dx[i]) != 'undefined' && !isNaN(dx[i])) {
-							measure += dx[i];
-						}
-					}
-					return measure;
-				}
-			
-				var textToMeasure = svg.compressSpaces(this.getText());
-				if (!ctx.measureText) return textToMeasure.length * 10;
-				
-				ctx.save();
-				this.setContext(ctx);
-				var width = ctx.measureText(textToMeasure).width;
-				ctx.restore();
-				return width;
-			}
-		}
-		svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase;
-		
-		// tspan 
-		svg.Element.tspan = function(node) {
-			this.captureTextNodes = true;
-			this.base = svg.Element.TextElementBase;
-			this.base(node);
-			
-			this.text = node.nodeValue || node.text || '';
-			this.getText = function() {
-				return this.text;
-			}
-		}
-		svg.Element.tspan.prototype = new svg.Element.TextElementBase;
-		
-		// tref
-		svg.Element.tref = function(node) {
-			this.base = svg.Element.TextElementBase;
-			this.base(node);
-			
-			this.getText = function() {
-				var element = this.getHrefAttribute().getDefinition();
-				if (element != null) return element.children[0].getText();
-			}
-		}
-		svg.Element.tref.prototype = new svg.Element.TextElementBase;		
-		
-		// a element
-		svg.Element.a = function(node) {
-			this.base = svg.Element.TextElementBase;
-			this.base(node);
-			
-			this.hasText = true;
-			for (var i=0; i<node.childNodes.length; i++) {
-				if (node.childNodes[i].nodeType != 3) this.hasText = false;
-			}
-			
-			// this might contain text
-			this.text = this.hasText ? node.childNodes[0].nodeValue : '';
-			this.getText = function() {
-				return this.text;
-			}		
+				var fontStyle = this.parent.style('font-style').valueOrDefault(svg.Font.Parse(svg.ctx.font).fontStyle);
+				var text = this.getText();
+				if (customFont.isRTL) text = text.split('').reverse().join('');
 
-			this.baseRenderChildren = this.renderChildren;
-			this.renderChildren = function(ctx) {
-				if (this.hasText) {
-					// render as text element
-					this.baseRenderChildren(ctx);
-					var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
-					svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y));					
+				var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
+				for (var i = 0; i < text.length; i++) {
+					var glyph = this.getGlyph(customFont, text, i);
+					var scale = fontSize / customFont.fontFace.unitsPerEm;
+					ctx.translate(this.x, this.y);
+					ctx.scale(scale, -scale);
+					var lw = ctx.lineWidth;
+					ctx.lineWidth = ctx.lineWidth * customFont.fontFace.unitsPerEm / fontSize;
+					if (fontStyle === 'italic') ctx.transform(1, 0, 0.4, 1, 0, 0);
+					glyph.render(ctx);
+					if (fontStyle === 'italic') ctx.transform(1, 0, -0.4, 1, 0, 0);
+					ctx.lineWidth = lw;
+					ctx.scale(1 / scale, -1 / scale);
+					ctx.translate(-this.x, -this.y);
+
+					this.x += fontSize * (glyph.horizAdvX || customFont.horizAdvX) / customFont.fontFace.unitsPerEm;
+					if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) {
+						this.x += dx[i];
+					}
 				}
-				else {
-					// render as temporary group
-					var g = new svg.Element.g();
-					g.children = this.children;
-					g.parent = this;
-					g.render(ctx);
-				}
-			}
-			
-			this.onclick = function() {
-				window.open(this.getHrefAttribute().value);
-			}
-			
-			this.onmousemove = function() {
-				svg.ctx.canvas.style.cursor = 'pointer';
-			}
-		}
-		svg.Element.a.prototype = new svg.Element.TextElementBase;		
-		
-		// image element
-		svg.Element.image = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			var href = this.getHrefAttribute().value;
-			if (href === '') {
 				return;
 			}
-			var isSvg = href.match(/\.svg$/)
-			
-			svg.Images.push(this);
-			this.loaded = false;
-			if (!isSvg) {
-				this.img = document.createElement('img');
-				if (svg.opts['useCORS'] == true) { this.img.crossOrigin = 'Anonymous'; }
-				var self = this;
-				this.img.onload = function() { self.loaded = true; }
-				this.img.onerror = function() { svg.log('ERROR: image "' + href + '" not found'); self.loaded = true; }
-				this.img.src = href;
-			}
-			else {
-				this.img = svg.ajax(href);
-				this.loaded = true;
-			}
-			
-			this.renderChildren = function(ctx) {
-				var x = this.attribute('x').toPixels('x');
-				var y = this.attribute('y').toPixels('y');
-				
-				var width = this.attribute('width').toPixels('x');
-				var height = this.attribute('height').toPixels('y');			
-				if (width == 0 || height == 0) return;
-			
-				ctx.save();
-				if (isSvg) {
-					ctx.drawSvg(this.img, x, y, width, height);
-				}
-				else {
-					ctx.translate(x, y);
-					svg.AspectRatio(ctx,
-									this.attribute('preserveAspectRatio').value,
-									width,
-									this.img.width,
-									height,
-									this.img.height,
-									0,
-									0);	
-					ctx.drawImage(this.img, 0, 0);		
-				}
-				ctx.restore();
-			}
-			
-			this.getBoundingBox = function() {
-				var x = this.attribute('x').toPixels('x');
-				var y = this.attribute('y').toPixels('y');
-				var width = this.attribute('width').toPixels('x');
-				var height = this.attribute('height').toPixels('y');
-				return new svg.BoundingBox(x, y, x + width, y + height);
-			}
-		}
-		svg.Element.image.prototype = new svg.Element.RenderedElementBase;
-		
-		// group element
-		svg.Element.g = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.getBoundingBox = function() {
-				var bb = new svg.BoundingBox();
-				for (var i=0; i<this.children.length; i++) {
-					bb.addBoundingBox(this.children[i].getBoundingBox());
-				}
-				return bb;
-			};
-		}
-		svg.Element.g.prototype = new svg.Element.RenderedElementBase;
 
-		// symbol element
-		svg.Element.symbol = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
+			if (ctx.fillStyle !== '') ctx.fillText(svg.compressSpaces(this.getText()), this.x, this.y);
+			if (ctx.strokeStyle !== '') ctx.strokeText(svg.compressSpaces(this.getText()), this.x, this.y);
+		};
 
-			this.render = function(ctx) {
-				// NO RENDER
-			};
-		}
-		svg.Element.symbol.prototype = new svg.Element.RenderedElementBase;		
-			
-		// style element
-		svg.Element.style = function(node) { 
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			// text, or spaces then CDATA
-			var css = ''
-			for (var i=0; i<node.childNodes.length; i++) {
-			  css += node.childNodes[i].nodeValue;
+		this.getText = function () {
+			// OVERRIDE ME
+		};
+
+		this.measureTextRecursive = function (ctx) {
+			var width = this.measureText(ctx);
+			for (var i = 0; i < this.children.length; i++) {
+				width += this.children[i].measureTextRecursive(ctx);
 			}
-			css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
-			css = svg.compressSpaces(css); // replace whitespace
-			var cssDefs = css.split('}');
-			for (var i=0; i<cssDefs.length; i++) {
-				if (svg.trim(cssDefs[i]) != '') {
-					var cssDef = cssDefs[i].split('{');
-					var cssClasses = cssDef[0].split(',');
-					var cssProps = cssDef[1].split(';');
-					for (var j=0; j<cssClasses.length; j++) {
-						var cssClass = svg.trim(cssClasses[j]);
-						if (cssClass != '') {
-							var props = {};
-							for (var k=0; k<cssProps.length; k++) {
-								var prop = cssProps[k].indexOf(':');
-								var name = cssProps[k].substr(0, prop);
-								var value = cssProps[k].substr(prop + 1, cssProps[k].length - prop);
-								if (name != null && value != null) {
-									props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value));
-								}
+			return width;
+		};
+
+		this.measureText = function (ctx) {
+			var customFont = this.parent.style('font-family').getDefinition();
+			if (customFont != null) {
+				var fontSize = this.parent.style('font-size').numValueOrDefault(svg.Font.Parse(svg.ctx.font).fontSize);
+				var measure = 0;
+				var text = this.getText();
+				if (customFont.isRTL) text = text.split('').reverse().join('');
+				var dx = svg.ToNumberArray(this.parent.attribute('dx').value);
+				for (var i = 0; i < text.length; i++) {
+					var glyph = this.getGlyph(customFont, text, i);
+					measure += (glyph.horizAdvX || customFont.horizAdvX) * fontSize / customFont.fontFace.unitsPerEm;
+					if (typeof dx[i] !== 'undefined' && !isNaN(dx[i])) {
+						measure += dx[i];
+					}
+				}
+				return measure;
+			}
+
+			var textToMeasure = svg.compressSpaces(this.getText());
+			if (!ctx.measureText) return textToMeasure.length * 10;
+
+			ctx.save();
+			this.setContext(ctx);
+			var width = ctx.measureText(textToMeasure).width;
+			ctx.restore();
+			return width;
+		};
+	};
+	svg.Element.TextElementBase.prototype = new svg.Element.RenderedElementBase();
+
+	// tspan
+	svg.Element.tspan = function (node) {
+		this.captureTextNodes = true;
+		this.base = svg.Element.TextElementBase;
+		this.base(node);
+
+		this.text = node.nodeValue || node.text || '';
+		this.getText = function () {
+			return this.text;
+		};
+	};
+	svg.Element.tspan.prototype = new svg.Element.TextElementBase();
+
+	// tref
+	svg.Element.tref = function (node) {
+		this.base = svg.Element.TextElementBase;
+		this.base(node);
+
+		this.getText = function () {
+			var element = this.getHrefAttribute().getDefinition();
+			if (element != null) return element.children[0].getText();
+		};
+	};
+	svg.Element.tref.prototype = new svg.Element.TextElementBase();
+
+	// a element
+	svg.Element.a = function (node) {
+		this.base = svg.Element.TextElementBase;
+		this.base(node);
+
+		this.hasText = true;
+		for (var i = 0; i < node.childNodes.length; i++) {
+			if (node.childNodes[i].nodeType !== 3) this.hasText = false;
+		}
+
+		// this might contain text
+		this.text = this.hasText ? node.childNodes[0].nodeValue : '';
+		this.getText = function () {
+			return this.text;
+		};
+
+		this.baseRenderChildren = this.renderChildren;
+		this.renderChildren = function (ctx) {
+			if (this.hasText) {
+				// render as text element
+				this.baseRenderChildren(ctx);
+				var fontSize = new svg.Property('fontSize', svg.Font.Parse(svg.ctx.font).fontSize);
+				svg.Mouse.checkBoundingBox(this, new svg.BoundingBox(this.x, this.y - fontSize.toPixels('y'), this.x + this.measureText(ctx), this.y));
+			} else {
+				// render as temporary group
+				var g = new svg.Element.g();
+				g.children = this.children;
+				g.parent = this;
+				g.render(ctx);
+			}
+		};
+
+		this.onclick = function () {
+			window.open(this.getHrefAttribute().value);
+		};
+
+		this.onmousemove = function () {
+			svg.ctx.canvas.style.cursor = 'pointer';
+		};
+	};
+	svg.Element.a.prototype = new svg.Element.TextElementBase();
+
+	// image element
+	svg.Element.image = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		var href = this.getHrefAttribute().value;
+		if (href === '') {
+			return;
+		}
+		var isSvg = href.match(/\.svg$/);
+
+		svg.Images.push(this);
+		this.loaded = false;
+		if (!isSvg) {
+			this.img = document.createElement('img');
+			if (svg.opts['useCORS'] === true) { this.img.crossOrigin = 'Anonymous'; }
+			var self = this;
+			this.img.onload = function () { self.loaded = true; };
+			this.img.onerror = function () { svg.log('ERROR: image "' + href + '" not found'); self.loaded = true; };
+			this.img.src = href;
+		} else {
+			this.img = svg.ajax(href);
+			this.loaded = true;
+		}
+
+		this.renderChildren = function (ctx) {
+			var x = this.attribute('x').toPixels('x');
+			var y = this.attribute('y').toPixels('y');
+
+			var width = this.attribute('width').toPixels('x');
+			var height = this.attribute('height').toPixels('y');
+			if (width === 0 || height === 0) return;
+
+			ctx.save();
+			if (isSvg) {
+				ctx.drawSvg(this.img, x, y, width, height);
+			} else {
+				ctx.translate(x, y);
+				svg.AspectRatio(
+					ctx,
+					this.attribute('preserveAspectRatio').value,
+					width,
+					this.img.width,
+					height,
+					this.img.height,
+					0,
+					0
+				);
+				ctx.drawImage(this.img, 0, 0);
+			}
+			ctx.restore();
+		};
+
+		this.getBoundingBox = function () {
+			var x = this.attribute('x').toPixels('x');
+			var y = this.attribute('y').toPixels('y');
+			var width = this.attribute('width').toPixels('x');
+			var height = this.attribute('height').toPixels('y');
+			return new svg.BoundingBox(x, y, x + width, y + height);
+		};
+	};
+	svg.Element.image.prototype = new svg.Element.RenderedElementBase();
+
+	// group element
+	svg.Element.g = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.getBoundingBox = function () {
+			var bb = new svg.BoundingBox();
+			for (var i = 0; i < this.children.length; i++) {
+				bb.addBoundingBox(this.children[i].getBoundingBox());
+			}
+			return bb;
+		};
+	};
+	svg.Element.g.prototype = new svg.Element.RenderedElementBase();
+
+	// symbol element
+	svg.Element.symbol = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.render = function (ctx) {
+			// NO RENDER
+		};
+	};
+	svg.Element.symbol.prototype = new svg.Element.RenderedElementBase();
+
+	// style element
+	svg.Element.style = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		// text, or spaces then CDATA
+		var css = '';
+		for (var i = 0; i < node.childNodes.length; i++) {
+			css += node.childNodes[i].nodeValue;
+		}
+		css = css.replace(/(\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, ''); // remove comments
+		css = svg.compressSpaces(css); // replace whitespace
+		var cssDefs = css.split('}');
+		for (var i = 0; i < cssDefs.length; i++) {
+			if (svg.trim(cssDefs[i]) !== '') {
+				var cssDef = cssDefs[i].split('{');
+				var cssClasses = cssDef[0].split(',');
+				var cssProps = cssDef[1].split(';');
+				for (var j = 0; j < cssClasses.length; j++) {
+					var cssClass = svg.trim(cssClasses[j]);
+					if (cssClass !== '') {
+						var props = {};
+						for (var k = 0; k < cssProps.length; k++) {
+							var prop = cssProps[k].indexOf(':');
+							var name = cssProps[k].substr(0, prop);
+							var value = cssProps[k].substr(prop + 1, cssProps[k].length - prop);
+							if (name != null && value != null) {
+								props[svg.trim(name)] = new svg.Property(svg.trim(name), svg.trim(value));
 							}
-							svg.Styles[cssClass] = props;
-							if (cssClass == '@font-face') {
-								var fontFamily = props['font-family'].value.replace(/"/g,'');
-								var srcs = props['src'].value.split(',');
-								for (var s=0; s<srcs.length; s++) {
-									if (srcs[s].indexOf('format("svg")') > 0) {
-										var urlStart = srcs[s].indexOf('url');
-										var urlEnd = srcs[s].indexOf(')', urlStart);
-										var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6);
-										var doc = svg.parseXml(svg.ajax(url));
-										var fonts = doc.getElementsByTagName('font');
-										for (var f=0; f<fonts.length; f++) {
-											var font = svg.CreateElement(fonts[f]);
-											svg.Definitions[fontFamily] = font;
-										}
+						}
+						svg.Styles[cssClass] = props;
+						if (cssClass === '@font-face') {
+							var fontFamily = props['font-family'].value.replace(/"/g, '');
+							var srcs = props['src'].value.split(',');
+							for (var s = 0; s < srcs.length; s++) {
+								if (srcs[s].indexOf('format("svg")') > 0) {
+									var urlStart = srcs[s].indexOf('url');
+									var urlEnd = srcs[s].indexOf(')', urlStart);
+									var url = srcs[s].substr(urlStart + 5, urlEnd - urlStart - 6);
+									var doc = svg.parseXml(svg.ajax(url));
+									var fonts = doc.getElementsByTagName('font');
+									for (var f = 0; f < fonts.length; f++) {
+										var font = svg.CreateElement(fonts[f]);
+										svg.Definitions[fontFamily] = font;
 									}
 								}
 							}
@@ -2387,536 +2404,544 @@
 				}
 			}
 		}
-		svg.Element.style.prototype = new svg.Element.ElementBase;
-		
-		// use element 
-		svg.Element.use = function(node) {
-			this.base = svg.Element.RenderedElementBase;
-			this.base(node);
-			
-			this.baseSetContext = this.setContext;
-			this.setContext = function(ctx) {
-				this.baseSetContext(ctx);
-				if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0);
-				if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y'));
-			}
-			
-			var element = this.getHrefAttribute().getDefinition();
-			
-			this.path = function(ctx) {
-				if (element != null) element.path(ctx);
-			}
-			
-			this.getBoundingBox = function() {
-				if (element != null) return element.getBoundingBox();
-			}
-			
-			this.renderChildren = function(ctx) {
-				if (element != null) {
-					var tempSvg = element;
-					if (element.type == 'symbol') {
-						// render me using a temporary svg element in symbol cases (http://www.w3.org/TR/SVG/struct.html#UseElement)
-						tempSvg = new svg.Element.svg();
-						tempSvg.type = 'svg';
-						tempSvg.attributes['viewBox'] = new svg.Property('viewBox', element.attribute('viewBox').value);
-						tempSvg.attributes['preserveAspectRatio'] = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value);
-						tempSvg.attributes['overflow'] = new svg.Property('overflow', element.attribute('overflow').value);
-						tempSvg.children = element.children;
-					}
-					if (tempSvg.type == 'svg') {
-						// if symbol or svg, inherit width/height from me
-						if (this.attribute('width').hasValue()) tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
-						if (this.attribute('height').hasValue()) tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
-					}
-					var oldParent = tempSvg.parent;
-					tempSvg.parent = null;
-					tempSvg.render(ctx);
-					tempSvg.parent = oldParent;
-				}
-			}
-		}
-		svg.Element.use.prototype = new svg.Element.RenderedElementBase;
-		
-		// mask element
-		svg.Element.mask = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-						
-			this.apply = function(ctx, element) {
-				// render as temp svg	
-				var x = this.attribute('x').toPixels('x');
-				var y = this.attribute('y').toPixels('y');
-				var width = this.attribute('width').toPixels('x');
-				var height = this.attribute('height').toPixels('y');
-				
-				if (width == 0 && height == 0) {
-					var bb = new svg.BoundingBox();
-					for (var i=0; i<this.children.length; i++) {
-						bb.addBoundingBox(this.children[i].getBoundingBox());
-					}
-					var x = Math.floor(bb.x1);
-					var y = Math.floor(bb.y1);
-					var width = Math.floor(bb.width());
-					var	height = Math.floor(bb.height());
-				}
-				
-				// temporarily remove mask to avoid recursion
-				var mask = element.attribute('mask').value;
-				element.attribute('mask').value = '';
-				
-					var cMask = document.createElement('canvas');
-					cMask.width = x + width;
-					cMask.height = y + height;
-					var maskCtx = cMask.getContext('2d');
-					this.renderChildren(maskCtx);
-				
-					var c = document.createElement('canvas');
-					c.width = x + width;
-					c.height = y + height;
-					var tempCtx = c.getContext('2d');
-					element.render(tempCtx);
-					tempCtx.globalCompositeOperation = 'destination-in';
-					tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
-					tempCtx.fillRect(0, 0, x + width, y + height);
-					
-					ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
-					ctx.fillRect(0, 0, x + width, y + height);
-					
-				// reassign mask
-				element.attribute('mask').value = mask;	
-			}
-			
-			this.render = function(ctx) {
-				// NO RENDER
-			}
-		}
-		svg.Element.mask.prototype = new svg.Element.ElementBase;
-		
-		// clip element
-		svg.Element.clipPath = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.apply = function(ctx) {
-				for (var i=0; i<this.children.length; i++) {
-					var child = this.children[i];
-					if (typeof(child.path) != 'undefined') {
-						var transform = null;
-						if (child.attribute('transform').hasValue()) { 
-							transform = new svg.Transform(child.attribute('transform').value);
-							transform.apply(ctx);
-						}
-						child.path(ctx);
-						ctx.clip();
-						if (transform) { transform.unapply(ctx); }
-					}
-				}
-			}
-			
-			this.render = function(ctx) {
-				// NO RENDER
-			}
-		}
-		svg.Element.clipPath.prototype = new svg.Element.ElementBase;
+	};
+	svg.Element.style.prototype = new svg.Element.ElementBase();
 
-		// filters
-		svg.Element.filter = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-						
-			this.apply = function(ctx, element) {
-				// render as temp svg	
-				var bb = element.getBoundingBox();
+	// use element
+	svg.Element.use = function (node) {
+		this.base = svg.Element.RenderedElementBase;
+		this.base(node);
+
+		this.baseSetContext = this.setContext;
+		this.setContext = function (ctx) {
+			this.baseSetContext(ctx);
+			if (this.attribute('x').hasValue()) ctx.translate(this.attribute('x').toPixels('x'), 0);
+			if (this.attribute('y').hasValue()) ctx.translate(0, this.attribute('y').toPixels('y'));
+		};
+
+		var element = this.getHrefAttribute().getDefinition();
+
+		this.path = function (ctx) {
+			if (element != null) element.path(ctx);
+		};
+
+		this.getBoundingBox = function () {
+			if (element != null) return element.getBoundingBox();
+		};
+
+		this.renderChildren = function (ctx) {
+			if (element != null) {
+				var tempSvg = element;
+				if (element.type === 'symbol') {
+					// render me using a temporary svg element in symbol cases (http://www.w3.org/TR/SVG/struct.html#UseElement)
+					tempSvg = new svg.Element.svg();
+					tempSvg.type = 'svg';
+					tempSvg.attributes['viewBox'] = new svg.Property('viewBox', element.attribute('viewBox').value);
+					tempSvg.attributes['preserveAspectRatio'] = new svg.Property('preserveAspectRatio', element.attribute('preserveAspectRatio').value);
+					tempSvg.attributes['overflow'] = new svg.Property('overflow', element.attribute('overflow').value);
+					tempSvg.children = element.children;
+				}
+				if (tempSvg.type === 'svg') {
+					// if symbol or svg, inherit width/height from me
+					if (this.attribute('width').hasValue()) tempSvg.attributes['width'] = new svg.Property('width', this.attribute('width').value);
+					if (this.attribute('height').hasValue()) tempSvg.attributes['height'] = new svg.Property('height', this.attribute('height').value);
+				}
+				var oldParent = tempSvg.parent;
+				tempSvg.parent = null;
+				tempSvg.render(ctx);
+				tempSvg.parent = oldParent;
+			}
+		};
+	};
+	svg.Element.use.prototype = new svg.Element.RenderedElementBase();
+
+	// mask element
+	svg.Element.mask = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.apply = function (ctx, element) {
+			// render as temp svg
+			var x = this.attribute('x').toPixels('x');
+			var y = this.attribute('y').toPixels('y');
+			var width = this.attribute('width').toPixels('x');
+			var height = this.attribute('height').toPixels('y');
+
+			if (width === 0 && height === 0) {
+				var bb = new svg.BoundingBox();
+				for (var i = 0; i < this.children.length; i++) {
+					bb.addBoundingBox(this.children[i].getBoundingBox());
+				}
 				var x = Math.floor(bb.x1);
 				var y = Math.floor(bb.y1);
 				var width = Math.floor(bb.width());
 				var	height = Math.floor(bb.height());
-
-				// temporarily remove filter to avoid recursion
-				var filter = element.style('filter').value;
-				element.style('filter').value = '';
-				
-				var px = 0, py = 0;
-				for (var i=0; i<this.children.length; i++) {
-					var efd = this.children[i].extraFilterDistance || 0;
-					px = Math.max(px, efd);
-					py = Math.max(py, efd);
-				}
-				
-				var c = document.createElement('canvas');
-				c.width = width + 2*px;
-				c.height = height + 2*py;
-				var tempCtx = c.getContext('2d');
-				tempCtx.translate(-x + px, -y + py);
-				element.render(tempCtx);
-			
-				// apply filters
-				for (var i=0; i<this.children.length; i++) {
-					this.children[i].apply(tempCtx, 0, 0, width + 2*px, height + 2*py);
-				}
-				
-				// render on me
-				ctx.drawImage(c, 0, 0, width + 2*px, height + 2*py, x - px, y - py, width + 2*px, height + 2*py);
-				
-				// reassign filter
-				element.style('filter', true).value = filter;	
-			}
-			
-			this.render = function(ctx) {
-				// NO RENDER
-			}		
-		}
-		svg.Element.filter.prototype = new svg.Element.ElementBase;
-		
-		svg.Element.feMorphology = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.apply = function(ctx, x, y, width, height) {
-				// TODO: implement
-			}
-		}
-		svg.Element.feMorphology.prototype = new svg.Element.ElementBase;
-		
-		svg.Element.feComposite = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			this.apply = function(ctx, x, y, width, height) {
-				// TODO: implement
-			}
-		}
-		svg.Element.feComposite.prototype = new svg.Element.ElementBase;
-		
-		svg.Element.feColorMatrix = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-			
-			var matrix = svg.ToNumberArray(this.attribute('values').value);
-			switch (this.attribute('type').valueOrDefault('matrix')) { // http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
-				case 'saturate':
-					var s = matrix[0];
-					matrix = [0.213+0.787*s,0.715-0.715*s,0.072-0.072*s,0,0,
-							  0.213-0.213*s,0.715+0.285*s,0.072-0.072*s,0,0,
-							  0.213-0.213*s,0.715-0.715*s,0.072+0.928*s,0,0,
-							  0,0,0,1,0,
-							  0,0,0,0,1];
-					break;
-				case 'hueRotate':
-					var a = matrix[0] * Math.PI / 180.0;
-					var c = function (m1,m2,m3) { return m1 + Math.cos(a)*m2 + Math.sin(a)*m3; };
-					matrix = [c(0.213,0.787,-0.213),c(0.715,-0.715,-0.715),c(0.072,-0.072,0.928),0,0,
-							  c(0.213,-0.213,0.143),c(0.715,0.285,0.140),c(0.072,-0.072,-0.283),0,0,
-							  c(0.213,-0.213,-0.787),c(0.715,-0.715,0.715),c(0.072,0.928,0.072),0,0,
-							  0,0,0,1,0,
-							  0,0,0,0,1];
-					break;
-				case 'luminanceToAlpha':
-					matrix = [0,0,0,0,0,
-							  0,0,0,0,0,
-							  0,0,0,0,0,
-							  0.2125,0.7154,0.0721,0,0,
-							  0,0,0,0,1];
-					break;
-			}
-			
-			function imGet(img, x, y, width, height, rgba) {
-				return img[y*width*4 + x*4 + rgba];
-			}
-			
-			function imSet(img, x, y, width, height, rgba, val) {
-				img[y*width*4 + x*4 + rgba] = val;
-			}
-			
-			function m(i, v) {
-				var mi = matrix[i];
-				return mi * (mi < 0 ? v - 255 : v);
-			}
-						
-			this.apply = function(ctx, x, y, width, height) {
-				// assuming x==0 && y==0 for now
-				var srcData = ctx.getImageData(0, 0, width, height);
-				for (var y = 0; y < height; y++) {
-					for (var x = 0; x < width; x++) {
-						var r = imGet(srcData.data, x, y, width, height, 0);
-						var g = imGet(srcData.data, x, y, width, height, 1);
-						var b = imGet(srcData.data, x, y, width, height, 2);
-						var a = imGet(srcData.data, x, y, width, height, 3);
-						imSet(srcData.data, x, y, width, height, 0, m(0,r)+m(1,g)+m(2,b)+m(3,a)+m(4,1));
-						imSet(srcData.data, x, y, width, height, 1, m(5,r)+m(6,g)+m(7,b)+m(8,a)+m(9,1));
-						imSet(srcData.data, x, y, width, height, 2, m(10,r)+m(11,g)+m(12,b)+m(13,a)+m(14,1));
-						imSet(srcData.data, x, y, width, height, 3, m(15,r)+m(16,g)+m(17,b)+m(18,a)+m(19,1));
-					}
-				}
-				ctx.clearRect(0, 0, width, height);
-				ctx.putImageData(srcData, 0, 0);
-			}
-		}
-		svg.Element.feColorMatrix.prototype = new svg.Element.ElementBase;
-		
-		svg.Element.feGaussianBlur = function(node) {
-			this.base = svg.Element.ElementBase;
-			this.base(node);
-
-			this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
-			this.extraFilterDistance = this.blurRadius;
-			
-			this.apply = function(ctx, x, y, width, height) {
-				if (typeof(stackBlurCanvasRGBA) == 'undefined') {
-					svg.log('ERROR: StackBlur.js must be included for blur to work');
-					return;
-				}
-				
-				// StackBlur requires canvas be on document
-				ctx.canvas.id = svg.UniqueId();
-				ctx.canvas.style.display = 'none';
-				document.body.appendChild(ctx.canvas);
-				stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
-				document.body.removeChild(ctx.canvas);
-			}
-		}
-		svg.Element.feGaussianBlur.prototype = new svg.Element.ElementBase;
-		
-		// title element, do nothing
-		svg.Element.title = function(node) {
-		}
-		svg.Element.title.prototype = new svg.Element.ElementBase;
-
-		// desc element, do nothing
-		svg.Element.desc = function(node) {
-		}
-		svg.Element.desc.prototype = new svg.Element.ElementBase;		
-		
-		svg.Element.MISSING = function(node) {
-			svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
-		}
-		svg.Element.MISSING.prototype = new svg.Element.ElementBase;
-		
-		// element factory
-		svg.CreateElement = function(node) {	
-			var className = node.nodeName.replace(/^[^:]+:/,''); // remove namespace
-			className = className.replace(/\-/g,''); // remove dashes
-			var e = null;
-			if (typeof(svg.Element[className]) != 'undefined') {
-				e = new svg.Element[className](node);
-			}
-			else {
-				e = new svg.Element.MISSING(node);
 			}
 
-			e.type = node.nodeName;
-			return e;
-		}
-				
-		// load from url
-		svg.load = function(ctx, url) {
-			svg.loadXml(ctx, svg.ajax(url));
-		}
-		
-		// load from xml
-		svg.loadXml = function(ctx, xml) {
-			svg.loadXmlDoc(ctx, svg.parseXml(xml));
-		}
-		
-		svg.loadXmlDoc = function(ctx, dom) {
-			svg.init(ctx);
-			
-			var mapXY = function(p) {
-				var e = ctx.canvas;
-				while (e) {
-					p.x -= e.offsetLeft;
-					p.y -= e.offsetTop;
-					e = e.offsetParent;
-				}
-				if (window.scrollX) p.x += window.scrollX;
-				if (window.scrollY) p.y += window.scrollY;
-				return p;
-			}
-			
-			// bind mouse
-			if (svg.opts['ignoreMouse'] != true) {
-				ctx.canvas.onclick = function(e) {
-					var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
-					svg.Mouse.onclick(p.x, p.y);
-				};
-				ctx.canvas.onmousemove = function(e) {
-					var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
-					svg.Mouse.onmousemove(p.x, p.y);
-				};
-			}
-		
-			var e = svg.CreateElement(dom.documentElement);
-			e.root = true;
-					
-			// render loop
-			var isFirstRender = true;
-			var draw = function() {
-				svg.ViewPort.Clear();
-				if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
-			
-				if (svg.opts['ignoreDimensions'] != true) {
-					// set canvas size
-					if (e.style('width').hasValue()) {
-						ctx.canvas.width = e.style('width').toPixels('x');
-						ctx.canvas.style.width = ctx.canvas.width + 'px';
-					}
-					if (e.style('height').hasValue()) {
-						ctx.canvas.height = e.style('height').toPixels('y');
-						ctx.canvas.style.height = ctx.canvas.height + 'px';
-					}
-				}
-				var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
-				var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
-				if (svg.opts['ignoreDimensions'] == true && e.style('width').hasValue() && e.style('height').hasValue()) {
-					cWidth = e.style('width').toPixels('x');
-					cHeight = e.style('height').toPixels('y');
-				}
-				svg.ViewPort.SetCurrent(cWidth, cHeight);		
-				
-				if (svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
-				if (svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
-				if (svg.opts['scaleWidth'] != null || svg.opts['scaleHeight'] != null) {
-					var xRatio = null, yRatio = null, viewBox = svg.ToNumberArray(e.attribute('viewBox').value);
-					
-					if (svg.opts['scaleWidth'] != null) {
-						if (e.attribute('width').hasValue()) xRatio = e.attribute('width').toPixels('x') / svg.opts['scaleWidth'];
-						else if (!isNaN(viewBox[2])) xRatio = viewBox[2] / svg.opts['scaleWidth'];
-					}
-					
-					if (svg.opts['scaleHeight'] != null) {
-						if (e.attribute('height').hasValue()) yRatio = e.attribute('height').toPixels('y') / svg.opts['scaleHeight'];
-						else if (!isNaN(viewBox[3])) yRatio = viewBox[3] / svg.opts['scaleHeight'];
-					}
+			// temporarily remove mask to avoid recursion
+			var mask = element.attribute('mask').value;
+			element.attribute('mask').value = '';
 
-					if (xRatio == null) { xRatio = yRatio; }
-					if (yRatio == null) { yRatio = xRatio; }
-					
-					e.attribute('width', true).value = svg.opts['scaleWidth'];
-					e.attribute('height', true).value = svg.opts['scaleHeight'];			
-					e.attribute('viewBox', true).value = '0 0 ' + (cWidth * xRatio) + ' ' + (cHeight * yRatio);
-					e.attribute('preserveAspectRatio', true).value = 'none';
+			var cMask = document.createElement('canvas');
+			cMask.width = x + width;
+			cMask.height = y + height;
+			var maskCtx = cMask.getContext('2d');
+			this.renderChildren(maskCtx);
+
+			var c = document.createElement('canvas');
+			c.width = x + width;
+			c.height = y + height;
+			var tempCtx = c.getContext('2d');
+			element.render(tempCtx);
+			tempCtx.globalCompositeOperation = 'destination-in';
+			tempCtx.fillStyle = maskCtx.createPattern(cMask, 'no-repeat');
+			tempCtx.fillRect(0, 0, x + width, y + height);
+
+			ctx.fillStyle = tempCtx.createPattern(c, 'no-repeat');
+			ctx.fillRect(0, 0, x + width, y + height);
+
+			// reassign mask
+			element.attribute('mask').value = mask;
+		};
+
+		this.render = function (ctx) {
+			// NO RENDER
+		};
+	};
+	svg.Element.mask.prototype = new svg.Element.ElementBase();
+
+	// clip element
+	svg.Element.clipPath = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.apply = function (ctx) {
+			for (var i = 0; i < this.children.length; i++) {
+				var child = this.children[i];
+				if (typeof child.path !== 'undefined') {
+					var transform = null;
+					if (child.attribute('transform').hasValue()) {
+						transform = new svg.Transform(child.attribute('transform').value);
+						transform.apply(ctx);
+					}
+					child.path(ctx);
+					ctx.clip();
+					if (transform) { transform.unapply(ctx); }
 				}
-			
-				// clear and render
-				if (svg.opts['ignoreClear'] != true) {
-					ctx.clearRect(0, 0, cWidth, cHeight);
-				}
-				e.render(ctx);
-				if (isFirstRender) {
-					isFirstRender = false;
-					if (typeof(svg.opts['renderCallback']) == 'function') svg.opts['renderCallback'](dom);
-				}			
 			}
-			
-			var waitingForImages = true;
-			if (svg.ImagesLoaded()) {
+		};
+
+		this.render = function (ctx) {
+			// NO RENDER
+		};
+	};
+	svg.Element.clipPath.prototype = new svg.Element.ElementBase();
+
+	// filters
+	svg.Element.filter = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.apply = function (ctx, element) {
+			// render as temp svg
+			var bb = element.getBoundingBox();
+			var x = Math.floor(bb.x1);
+			var y = Math.floor(bb.y1);
+			var width = Math.floor(bb.width());
+			var	height = Math.floor(bb.height());
+
+			// temporarily remove filter to avoid recursion
+			var filter = element.style('filter').value;
+			element.style('filter').value = '';
+
+			var px = 0, py = 0;
+			for (var i = 0; i < this.children.length; i++) {
+				var efd = this.children[i].extraFilterDistance || 0;
+				px = Math.max(px, efd);
+				py = Math.max(py, efd);
+			}
+
+			var c = document.createElement('canvas');
+			c.width = width + 2 * px;
+			c.height = height + 2 * py;
+			var tempCtx = c.getContext('2d');
+			tempCtx.translate(-x + px, -y + py);
+			element.render(tempCtx);
+
+			// apply filters
+			for (var i = 0; i < this.children.length; i++) {
+				this.children[i].apply(tempCtx, 0, 0, width + 2 * px, height + 2 * py);
+			}
+
+			// render on me
+			ctx.drawImage(c, 0, 0, width + 2 * px, height + 2 * py, x - px, y - py, width + 2 * px, height + 2 * py);
+
+			// reassign filter
+			element.style('filter', true).value = filter;
+		};
+
+		this.render = function (ctx) {
+			// NO RENDER
+		};
+	};
+	svg.Element.filter.prototype = new svg.Element.ElementBase();
+
+	svg.Element.feMorphology = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.apply = function (ctx, x, y, width, height) {
+			// TODO: implement
+		};
+	};
+	svg.Element.feMorphology.prototype = new svg.Element.ElementBase();
+
+	svg.Element.feComposite = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.apply = function (ctx, x, y, width, height) {
+			// TODO: implement
+		};
+	};
+	svg.Element.feComposite.prototype = new svg.Element.ElementBase();
+
+	svg.Element.feColorMatrix = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		var matrix = svg.ToNumberArray(this.attribute('values').value);
+		switch (this.attribute('type').valueOrDefault('matrix')) { // http://www.w3.org/TR/SVG/filters.html#feColorMatrixElement
+		case 'saturate':
+			var s = matrix[0];
+			matrix = [
+				0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0, 0,
+				0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0, 0,
+				0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0, 0,
+				0, 0, 0, 1, 0,
+				0, 0, 0, 0, 1
+			];
+			break;
+		case 'hueRotate':
+			var a = matrix[0] * Math.PI / 180.0;
+			var c = function (m1, m2, m3) { return m1 + Math.cos(a) * m2 + Math.sin(a) * m3; };
+			matrix = [
+				c(0.213, 0.787, -0.213), c(0.715, -0.715, -0.715), c(0.072, -0.072, 0.928), 0, 0,
+				c(0.213, -0.213, 0.143), c(0.715, 0.285, 0.140), c(0.072, -0.072, -0.283), 0, 0,
+				c(0.213, -0.213, -0.787), c(0.715, -0.715, 0.715), c(0.072, 0.928, 0.072), 0, 0,
+				0, 0, 0, 1, 0,
+				0, 0, 0, 0, 1
+			];
+			break;
+		case 'luminanceToAlpha':
+			matrix = [
+				0, 0, 0, 0, 0,
+				0, 0, 0, 0, 0,
+				0, 0, 0, 0, 0,
+				0.2125, 0.7154, 0.0721, 0, 0,
+				0, 0, 0, 0, 1
+			];
+			break;
+		}
+
+		function imGet (img, x, y, width, height, rgba) {
+			return img[y * width * 4 + x * 4 + rgba];
+		}
+
+		function imSet (img, x, y, width, height, rgba, val) {
+			img[y * width * 4 + x * 4 + rgba] = val;
+		}
+
+		function m (i, v) {
+			var mi = matrix[i];
+			return mi * (mi < 0 ? v - 255 : v);
+		}
+
+		this.apply = function (ctx, x, y, width, height) {
+			// assuming x==0 && y==0 for now
+			var srcData = ctx.getImageData(0, 0, width, height);
+			for (var y = 0; y < height; y++) {
+				for (var x = 0; x < width; x++) {
+					var r = imGet(srcData.data, x, y, width, height, 0);
+					var g = imGet(srcData.data, x, y, width, height, 1);
+					var b = imGet(srcData.data, x, y, width, height, 2);
+					var a = imGet(srcData.data, x, y, width, height, 3);
+					imSet(srcData.data, x, y, width, height, 0, m(0, r) + m(1, g) + m(2, b) + m(3, a) + m(4, 1));
+					imSet(srcData.data, x, y, width, height, 1, m(5, r) + m(6, g) + m(7, b) + m(8, a) + m(9, 1));
+					imSet(srcData.data, x, y, width, height, 2, m(10, r) + m(11, g) + m(12, b) + m(13, a) + m(14, 1));
+					imSet(srcData.data, x, y, width, height, 3, m(15, r) + m(16, g) + m(17, b) + m(18, a) + m(19, 1));
+				}
+			}
+			ctx.clearRect(0, 0, width, height);
+			ctx.putImageData(srcData, 0, 0);
+		};
+	};
+	svg.Element.feColorMatrix.prototype = new svg.Element.ElementBase();
+
+	svg.Element.feGaussianBlur = function (node) {
+		this.base = svg.Element.ElementBase;
+		this.base(node);
+
+		this.blurRadius = Math.floor(this.attribute('stdDeviation').numValue());
+		this.extraFilterDistance = this.blurRadius;
+
+		this.apply = function (ctx, x, y, width, height) {
+			if (typeof stackBlurCanvasRGBA === 'undefined') {
+				svg.log('ERROR: StackBlur.js must be included for blur to work');
+				return;
+			}
+
+			// StackBlur requires canvas be on document
+			ctx.canvas.id = svg.UniqueId();
+			ctx.canvas.style.display = 'none';
+			document.body.appendChild(ctx.canvas);
+			stackBlurCanvasRGBA(ctx.canvas.id, x, y, width, height, this.blurRadius);
+			document.body.removeChild(ctx.canvas);
+		};
+	};
+	svg.Element.feGaussianBlur.prototype = new svg.Element.ElementBase();
+
+	// title element, do nothing
+	svg.Element.title = function (node) {
+	};
+	svg.Element.title.prototype = new svg.Element.ElementBase();
+
+	// desc element, do nothing
+	svg.Element.desc = function (node) {
+	};
+	svg.Element.desc.prototype = new svg.Element.ElementBase();
+
+	svg.Element.MISSING = function (node) {
+		svg.log('ERROR: Element \'' + node.nodeName + '\' not yet implemented.');
+	};
+	svg.Element.MISSING.prototype = new svg.Element.ElementBase();
+
+	// element factory
+	svg.CreateElement = function (node) {
+		var className = node.nodeName.replace(/^[^:]+:/, ''); // remove namespace
+		className = className.replace(/-/g, ''); // remove dashes
+		var e = null;
+		if (typeof svg.Element[className] !== 'undefined') {
+			e = new svg.Element[className](node);
+		} else {
+			e = new svg.Element.MISSING(node);
+		}
+
+		e.type = node.nodeName;
+		return e;
+	};
+
+	// load from url
+	svg.load = function (ctx, url) {
+		svg.loadXml(ctx, svg.ajax(url));
+	};
+
+	// load from xml
+	svg.loadXml = function (ctx, xml) {
+		svg.loadXmlDoc(ctx, svg.parseXml(xml));
+	};
+
+	svg.loadXmlDoc = function (ctx, dom) {
+		svg.init(ctx);
+
+		var mapXY = function (p) {
+			var e = ctx.canvas;
+			while (e) {
+				p.x -= e.offsetLeft;
+				p.y -= e.offsetTop;
+				e = e.offsetParent;
+			}
+			if (window.scrollX) p.x += window.scrollX;
+			if (window.scrollY) p.y += window.scrollY;
+			return p;
+		};
+
+		// bind mouse
+		if (svg.opts['ignoreMouse'] !== true) {
+			ctx.canvas.onclick = function (e) {
+				var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
+				svg.Mouse.onclick(p.x, p.y);
+			};
+			ctx.canvas.onmousemove = function (e) {
+				var p = mapXY(new svg.Point(e != null ? e.clientX : event.clientX, e != null ? e.clientY : event.clientY));
+				svg.Mouse.onmousemove(p.x, p.y);
+			};
+		}
+
+		var e = svg.CreateElement(dom.documentElement);
+		e.root = true;
+
+		// render loop
+		var isFirstRender = true;
+		var draw = function () {
+			svg.ViewPort.Clear();
+			if (ctx.canvas.parentNode) svg.ViewPort.SetCurrent(ctx.canvas.parentNode.clientWidth, ctx.canvas.parentNode.clientHeight);
+
+			if (svg.opts['ignoreDimensions'] !== true) {
+				// set canvas size
+				if (e.style('width').hasValue()) {
+					ctx.canvas.width = e.style('width').toPixels('x');
+					ctx.canvas.style.width = ctx.canvas.width + 'px';
+				}
+				if (e.style('height').hasValue()) {
+					ctx.canvas.height = e.style('height').toPixels('y');
+					ctx.canvas.style.height = ctx.canvas.height + 'px';
+				}
+			}
+			var cWidth = ctx.canvas.clientWidth || ctx.canvas.width;
+			var cHeight = ctx.canvas.clientHeight || ctx.canvas.height;
+			if (svg.opts['ignoreDimensions'] === true && e.style('width').hasValue() && e.style('height').hasValue()) {
+				cWidth = e.style('width').toPixels('x');
+				cHeight = e.style('height').toPixels('y');
+			}
+			svg.ViewPort.SetCurrent(cWidth, cHeight);
+
+			if (svg.opts['offsetX'] != null) e.attribute('x', true).value = svg.opts['offsetX'];
+			if (svg.opts['offsetY'] != null) e.attribute('y', true).value = svg.opts['offsetY'];
+			if (svg.opts['scaleWidth'] != null || svg.opts['scaleHeight'] != null) {
+				var xRatio = null, yRatio = null, viewBox = svg.ToNumberArray(e.attribute('viewBox').value);
+
+				if (svg.opts['scaleWidth'] != null) {
+					if (e.attribute('width').hasValue()) xRatio = e.attribute('width').toPixels('x') / svg.opts['scaleWidth'];
+					else if (!isNaN(viewBox[2])) xRatio = viewBox[2] / svg.opts['scaleWidth'];
+				}
+
+				if (svg.opts['scaleHeight'] != null) {
+					if (e.attribute('height').hasValue()) yRatio = e.attribute('height').toPixels('y') / svg.opts['scaleHeight'];
+					else if (!isNaN(viewBox[3])) yRatio = viewBox[3] / svg.opts['scaleHeight'];
+				}
+
+				if (xRatio == null) { xRatio = yRatio; }
+				if (yRatio == null) { yRatio = xRatio; }
+
+				e.attribute('width', true).value = svg.opts['scaleWidth'];
+				e.attribute('height', true).value = svg.opts['scaleHeight'];
+				e.attribute('viewBox', true).value = '0 0 ' + (cWidth * xRatio) + ' ' + (cHeight * yRatio);
+				e.attribute('preserveAspectRatio', true).value = 'none';
+			}
+
+			// clear and render
+			if (svg.opts['ignoreClear'] !== true) {
+				ctx.clearRect(0, 0, cWidth, cHeight);
+			}
+			e.render(ctx);
+			if (isFirstRender) {
+				isFirstRender = false;
+				if (typeof svg.opts['renderCallback'] === 'function') {
+					svg.opts['renderCallback'](dom);
+				}
+			}
+		};
+
+		var waitingForImages = true;
+		if (svg.ImagesLoaded()) {
+			waitingForImages = false;
+			draw();
+		}
+		svg.intervalID = setInterval(function () {
+			var needUpdate = false;
+
+			if (waitingForImages && svg.ImagesLoaded()) {
 				waitingForImages = false;
+				needUpdate = true;
+			}
+
+			// need update from mouse events?
+			if (svg.opts['ignoreMouse'] !== true) {
+				needUpdate = needUpdate | svg.Mouse.hasEvents();
+			}
+
+			// need update from animations?
+			if (svg.opts['ignoreAnimation'] !== true) {
+				for (var i = 0; i < svg.Animations.length; i++) {
+					needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
+				}
+			}
+
+			// need update from redraw?
+			if (typeof svg.opts['forceRedraw'] === 'function') {
+				if (svg.opts['forceRedraw']() === true) needUpdate = true;
+			}
+
+			// render if needed
+			if (needUpdate) {
 				draw();
+				svg.Mouse.runEvents(); // run and clear our events
 			}
-			svg.intervalID = setInterval(function() { 
-				var needUpdate = false;
-				
-				if (waitingForImages && svg.ImagesLoaded()) {
-					waitingForImages = false;
-					needUpdate = true;
-				}
-			
-				// need update from mouse events?
-				if (svg.opts['ignoreMouse'] != true) {
-					needUpdate = needUpdate | svg.Mouse.hasEvents();
-				}
-			
-				// need update from animations?
-				if (svg.opts['ignoreAnimation'] != true) {
-					for (var i=0; i<svg.Animations.length; i++) {
-						needUpdate = needUpdate | svg.Animations[i].update(1000 / svg.FRAMERATE);
-					}
-				}
-				
-				// need update from redraw?
-				if (typeof(svg.opts['forceRedraw']) == 'function') {
-					if (svg.opts['forceRedraw']() == true) needUpdate = true;
-				}
-				
-				// render if needed
-				if (needUpdate) {
-					draw();				
-					svg.Mouse.runEvents(); // run and clear our events
-				}
-			}, 1000 / svg.FRAMERATE);
+		}, 1000 / svg.FRAMERATE);
+	};
+
+	svg.stop = function () {
+		if (svg.intervalID) {
+			clearInterval(svg.intervalID);
 		}
-		
-		svg.stop = function() {
-			if (svg.intervalID) {
-				clearInterval(svg.intervalID);
+	};
+
+	svg.Mouse = new function () {
+		this.events = [];
+		this.hasEvents = function () { return this.events.length !== 0; };
+
+		this.onclick = function (x, y) {
+			this.events.push({ type: 'onclick', x: x, y: y,
+				run: function (e) { if (e.onclick) e.onclick(); }
+			});
+		};
+
+		this.onmousemove = function (x, y) {
+			this.events.push({ type: 'onmousemove', x: x, y: y,
+				run: function (e) { if (e.onmousemove) e.onmousemove(); }
+			});
+		};
+
+		this.eventElements = [];
+
+		this.checkPath = function (element, ctx) {
+			for (var i = 0; i < this.events.length; i++) {
+				var e = this.events[i];
+				if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
 			}
-		}
-		
-		svg.Mouse = new (function() {
+		};
+
+		this.checkBoundingBox = function (element, bb) {
+			for (var i = 0; i < this.events.length; i++) {
+				var e = this.events[i];
+				if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
+			}
+		};
+
+		this.runEvents = function () {
+			svg.ctx.canvas.style.cursor = '';
+
+			for (var i = 0; i < this.events.length; i++) {
+				var e = this.events[i];
+				var element = this.eventElements[i];
+				while (element) {
+					e.run(element);
+					element = element.parent;
+				}
+			}
+
+			// done running, clear
 			this.events = [];
-			this.hasEvents = function() { return this.events.length != 0; }
-		
-			this.onclick = function(x, y) {
-				this.events.push({ type: 'onclick', x: x, y: y, 
-					run: function(e) { if (e.onclick) e.onclick(); }
-				});
-			}
-			
-			this.onmousemove = function(x, y) {
-				this.events.push({ type: 'onmousemove', x: x, y: y,
-					run: function(e) { if (e.onmousemove) e.onmousemove(); }
-				});
-			}			
-			
 			this.eventElements = [];
-			
-			this.checkPath = function(element, ctx) {
-				for (var i=0; i<this.events.length; i++) {
-					var e = this.events[i];
-					if (ctx.isPointInPath && ctx.isPointInPath(e.x, e.y)) this.eventElements[i] = element;
-				}
-			}
-			
-			this.checkBoundingBox = function(element, bb) {
-				for (var i=0; i<this.events.length; i++) {
-					var e = this.events[i];
-					if (bb.isPointInBox(e.x, e.y)) this.eventElements[i] = element;
-				}			
-			}
-			
-			this.runEvents = function() {
-				svg.ctx.canvas.style.cursor = '';
-				
-				for (var i=0; i<this.events.length; i++) {
-					var e = this.events[i];
-					var element = this.eventElements[i];
-					while (element) {
-						e.run(element);
-						element = element.parent;
-					}
-				}		
-			
-				// done running, clear
-				this.events = []; 
-				this.eventElements = [];
-			}
-		});
-		
-		return svg;
-	}
+		};
+	}();
+
+	return svg;
+}
 })();
 
-if (typeof(CanvasRenderingContext2D) != 'undefined') {
-	CanvasRenderingContext2D.prototype.drawSvg = function(s, dx, dy, dw, dh) {
-		canvg(this.canvas, s, { 
-			ignoreMouse: true, 
-			ignoreAnimation: true, 
-			ignoreDimensions: true, 
-			ignoreClear: true, 
-			offsetX: dx, 
-			offsetY: dy, 
-			scaleWidth: dw, 
+if (typeof CanvasRenderingContext2D !== 'undefined') {
+	CanvasRenderingContext2D.prototype.drawSvg = function (s, dx, dy, dw, dh) {
+		canvg(this.canvas, s, {
+			ignoreMouse: true,
+			ignoreAnimation: true,
+			ignoreDimensions: true,
+			ignoreClear: true,
+			offsetX: dx,
+			offsetY: dy,
+			scaleWidth: dw,
 			scaleHeight: dh
 		});
-	}
+	};
 }
diff --git a/editor/canvg/rgbcolor.js b/editor/canvg/rgbcolor.js
index 4b44a635..f902e112 100644
--- a/editor/canvg/rgbcolor.js
+++ b/editor/canvg/rgbcolor.js
@@ -1,294 +1,291 @@
-/*jslint vars: true*/
+/* eslint-disable no-var */
 /**
  * A class to parse color values
  * @author Stoyan Stefanov <sstoo@gmail.com>
  * @link   http://www.phpied.com/rgb-color-parser-in-javascript/
  * @license Use it if you like it
  */
-function RGBColor(color_string) { 'use strict';
-    this.ok = false;
+function RGBColor (colorString) { // eslint-disable-line no-unused-vars
+	'use strict';
+	this.ok = false;
 
-    // strip any leading #
-    if (color_string.charAt(0) === '#') { // remove # if any
-        color_string = color_string.substr(1,6);
-    }
+	// strip any leading #
+	if (colorString.charAt(0) === '#') { // remove # if any
+		colorString = colorString.substr(1, 6);
+	}
 
-    color_string = color_string.replace(/ /g,'');
-    color_string = color_string.toLowerCase();
+	colorString = colorString.replace(/ /g, '');
+	colorString = colorString.toLowerCase();
 
-    // before getting into regexps, try simple matches
-    // and overwrite the input
-    var simple_colors = {
-        aliceblue: 'f0f8ff',
-        antiquewhite: 'faebd7',
-        aqua: '00ffff',
-        aquamarine: '7fffd4',
-        azure: 'f0ffff',
-        beige: 'f5f5dc',
-        bisque: 'ffe4c4',
-        black: '000000',
-        blanchedalmond: 'ffebcd',
-        blue: '0000ff',
-        blueviolet: '8a2be2',
-        brown: 'a52a2a',
-        burlywood: 'deb887',
-        cadetblue: '5f9ea0',
-        chartreuse: '7fff00',
-        chocolate: 'd2691e',
-        coral: 'ff7f50',
-        cornflowerblue: '6495ed',
-        cornsilk: 'fff8dc',
-        crimson: 'dc143c',
-        cyan: '00ffff',
-        darkblue: '00008b',
-        darkcyan: '008b8b',
-        darkgoldenrod: 'b8860b',
-        darkgray: 'a9a9a9',
-        darkgreen: '006400',
-        darkkhaki: 'bdb76b',
-        darkmagenta: '8b008b',
-        darkolivegreen: '556b2f',
-        darkorange: 'ff8c00',
-        darkorchid: '9932cc',
-        darkred: '8b0000',
-        darksalmon: 'e9967a',
-        darkseagreen: '8fbc8f',
-        darkslateblue: '483d8b',
-        darkslategray: '2f4f4f',
-        darkturquoise: '00ced1',
-        darkviolet: '9400d3',
-        deeppink: 'ff1493',
-        deepskyblue: '00bfff',
-        dimgray: '696969',
-        dodgerblue: '1e90ff',
-        feldspar: 'd19275',
-        firebrick: 'b22222',
-        floralwhite: 'fffaf0',
-        forestgreen: '228b22',
-        fuchsia: 'ff00ff',
-        gainsboro: 'dcdcdc',
-        ghostwhite: 'f8f8ff',
-        gold: 'ffd700',
-        goldenrod: 'daa520',
-        gray: '808080',
-        green: '008000',
-        greenyellow: 'adff2f',
-        honeydew: 'f0fff0',
-        hotpink: 'ff69b4',
-        indianred : 'cd5c5c',
-        indigo : '4b0082',
-        ivory: 'fffff0',
-        khaki: 'f0e68c',
-        lavender: 'e6e6fa',
-        lavenderblush: 'fff0f5',
-        lawngreen: '7cfc00',
-        lemonchiffon: 'fffacd',
-        lightblue: 'add8e6',
-        lightcoral: 'f08080',
-        lightcyan: 'e0ffff',
-        lightgoldenrodyellow: 'fafad2',
-        lightgrey: 'd3d3d3',
-        lightgreen: '90ee90',
-        lightpink: 'ffb6c1',
-        lightsalmon: 'ffa07a',
-        lightseagreen: '20b2aa',
-        lightskyblue: '87cefa',
-        lightslateblue: '8470ff',
-        lightslategray: '778899',
-        lightsteelblue: 'b0c4de',
-        lightyellow: 'ffffe0',
-        lime: '00ff00',
-        limegreen: '32cd32',
-        linen: 'faf0e6',
-        magenta: 'ff00ff',
-        maroon: '800000',
-        mediumaquamarine: '66cdaa',
-        mediumblue: '0000cd',
-        mediumorchid: 'ba55d3',
-        mediumpurple: '9370d8',
-        mediumseagreen: '3cb371',
-        mediumslateblue: '7b68ee',
-        mediumspringgreen: '00fa9a',
-        mediumturquoise: '48d1cc',
-        mediumvioletred: 'c71585',
-        midnightblue: '191970',
-        mintcream: 'f5fffa',
-        mistyrose: 'ffe4e1',
-        moccasin: 'ffe4b5',
-        navajowhite: 'ffdead',
-        navy: '000080',
-        oldlace: 'fdf5e6',
-        olive: '808000',
-        olivedrab: '6b8e23',
-        orange: 'ffa500',
-        orangered: 'ff4500',
-        orchid: 'da70d6',
-        palegoldenrod: 'eee8aa',
-        palegreen: '98fb98',
-        paleturquoise: 'afeeee',
-        palevioletred: 'd87093',
-        papayawhip: 'ffefd5',
-        peachpuff: 'ffdab9',
-        peru: 'cd853f',
-        pink: 'ffc0cb',
-        plum: 'dda0dd',
-        powderblue: 'b0e0e6',
-        purple: '800080',
-        red: 'ff0000',
-        rosybrown: 'bc8f8f',
-        royalblue: '4169e1',
-        saddlebrown: '8b4513',
-        salmon: 'fa8072',
-        sandybrown: 'f4a460',
-        seagreen: '2e8b57',
-        seashell: 'fff5ee',
-        sienna: 'a0522d',
-        silver: 'c0c0c0',
-        skyblue: '87ceeb',
-        slateblue: '6a5acd',
-        slategray: '708090',
-        snow: 'fffafa',
-        springgreen: '00ff7f',
-        steelblue: '4682b4',
-        tan: 'd2b48c',
-        teal: '008080',
-        thistle: 'd8bfd8',
-        tomato: 'ff6347',
-        turquoise: '40e0d0',
-        violet: 'ee82ee',
-        violetred: 'd02090',
-        wheat: 'f5deb3',
-        white: 'ffffff',
-        whitesmoke: 'f5f5f5',
-        yellow: 'ffff00',
-        yellowgreen: '9acd32'
-    };
-    var key;
-    for (key in simple_colors) {
-        if (simple_colors.hasOwnProperty(key)) {
-            if (color_string == key) {
-                color_string = simple_colors[key];
-            }
-        }
-    }
-    // emd of simple type-in colors
+	// before getting into regexps, try simple matches
+	// and overwrite the input
+	var simpleColors = {
+		aliceblue: 'f0f8ff',
+		antiquewhite: 'faebd7',
+		aqua: '00ffff',
+		aquamarine: '7fffd4',
+		azure: 'f0ffff',
+		beige: 'f5f5dc',
+		bisque: 'ffe4c4',
+		black: '000000',
+		blanchedalmond: 'ffebcd',
+		blue: '0000ff',
+		blueviolet: '8a2be2',
+		brown: 'a52a2a',
+		burlywood: 'deb887',
+		cadetblue: '5f9ea0',
+		chartreuse: '7fff00',
+		chocolate: 'd2691e',
+		coral: 'ff7f50',
+		cornflowerblue: '6495ed',
+		cornsilk: 'fff8dc',
+		crimson: 'dc143c',
+		cyan: '00ffff',
+		darkblue: '00008b',
+		darkcyan: '008b8b',
+		darkgoldenrod: 'b8860b',
+		darkgray: 'a9a9a9',
+		darkgreen: '006400',
+		darkkhaki: 'bdb76b',
+		darkmagenta: '8b008b',
+		darkolivegreen: '556b2f',
+		darkorange: 'ff8c00',
+		darkorchid: '9932cc',
+		darkred: '8b0000',
+		darksalmon: 'e9967a',
+		darkseagreen: '8fbc8f',
+		darkslateblue: '483d8b',
+		darkslategray: '2f4f4f',
+		darkturquoise: '00ced1',
+		darkviolet: '9400d3',
+		deeppink: 'ff1493',
+		deepskyblue: '00bfff',
+		dimgray: '696969',
+		dodgerblue: '1e90ff',
+		feldspar: 'd19275',
+		firebrick: 'b22222',
+		floralwhite: 'fffaf0',
+		forestgreen: '228b22',
+		fuchsia: 'ff00ff',
+		gainsboro: 'dcdcdc',
+		ghostwhite: 'f8f8ff',
+		gold: 'ffd700',
+		goldenrod: 'daa520',
+		gray: '808080',
+		green: '008000',
+		greenyellow: 'adff2f',
+		honeydew: 'f0fff0',
+		hotpink: 'ff69b4',
+		indianred: 'cd5c5c',
+		indigo: '4b0082',
+		ivory: 'fffff0',
+		khaki: 'f0e68c',
+		lavender: 'e6e6fa',
+		lavenderblush: 'fff0f5',
+		lawngreen: '7cfc00',
+		lemonchiffon: 'fffacd',
+		lightblue: 'add8e6',
+		lightcoral: 'f08080',
+		lightcyan: 'e0ffff',
+		lightgoldenrodyellow: 'fafad2',
+		lightgrey: 'd3d3d3',
+		lightgreen: '90ee90',
+		lightpink: 'ffb6c1',
+		lightsalmon: 'ffa07a',
+		lightseagreen: '20b2aa',
+		lightskyblue: '87cefa',
+		lightslateblue: '8470ff',
+		lightslategray: '778899',
+		lightsteelblue: 'b0c4de',
+		lightyellow: 'ffffe0',
+		lime: '00ff00',
+		limegreen: '32cd32',
+		linen: 'faf0e6',
+		magenta: 'ff00ff',
+		maroon: '800000',
+		mediumaquamarine: '66cdaa',
+		mediumblue: '0000cd',
+		mediumorchid: 'ba55d3',
+		mediumpurple: '9370d8',
+		mediumseagreen: '3cb371',
+		mediumslateblue: '7b68ee',
+		mediumspringgreen: '00fa9a',
+		mediumturquoise: '48d1cc',
+		mediumvioletred: 'c71585',
+		midnightblue: '191970',
+		mintcream: 'f5fffa',
+		mistyrose: 'ffe4e1',
+		moccasin: 'ffe4b5',
+		navajowhite: 'ffdead',
+		navy: '000080',
+		oldlace: 'fdf5e6',
+		olive: '808000',
+		olivedrab: '6b8e23',
+		orange: 'ffa500',
+		orangered: 'ff4500',
+		orchid: 'da70d6',
+		palegoldenrod: 'eee8aa',
+		palegreen: '98fb98',
+		paleturquoise: 'afeeee',
+		palevioletred: 'd87093',
+		papayawhip: 'ffefd5',
+		peachpuff: 'ffdab9',
+		peru: 'cd853f',
+		pink: 'ffc0cb',
+		plum: 'dda0dd',
+		powderblue: 'b0e0e6',
+		purple: '800080',
+		red: 'ff0000',
+		rosybrown: 'bc8f8f',
+		royalblue: '4169e1',
+		saddlebrown: '8b4513',
+		salmon: 'fa8072',
+		sandybrown: 'f4a460',
+		seagreen: '2e8b57',
+		seashell: 'fff5ee',
+		sienna: 'a0522d',
+		silver: 'c0c0c0',
+		skyblue: '87ceeb',
+		slateblue: '6a5acd',
+		slategray: '708090',
+		snow: 'fffafa',
+		springgreen: '00ff7f',
+		steelblue: '4682b4',
+		tan: 'd2b48c',
+		teal: '008080',
+		thistle: 'd8bfd8',
+		tomato: 'ff6347',
+		turquoise: '40e0d0',
+		violet: 'ee82ee',
+		violetred: 'd02090',
+		wheat: 'f5deb3',
+		white: 'ffffff',
+		whitesmoke: 'f5f5f5',
+		yellow: 'ffff00',
+		yellowgreen: '9acd32'
+	};
+	var key;
+	for (key in simpleColors) {
+		if (simpleColors.hasOwnProperty(key)) {
+			if (colorString === key) {
+				colorString = simpleColors[key];
+			}
+		}
+	}
+	// emd of simple type-in colors
 
-    // array of color definition objects
-    var color_defs = [
-        {
-            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
-            example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
-            process: function (bits){
-                return [
-                    parseInt(bits[1], 10),
-                    parseInt(bits[2], 10),
-                    parseInt(bits[3], 10)
-                ];
-            }
-        },
-        {
-            re: /^(\w{2})(\w{2})(\w{2})$/,
-            example: ['#00ff00', '336699'],
-            process: function (bits){
-                return [
-                    parseInt(bits[1], 16),
-                    parseInt(bits[2], 16),
-                    parseInt(bits[3], 16)
-                ];
-            }
-        },
-        {
-            re: /^(\w{1})(\w{1})(\w{1})$/,
-            example: ['#fb0', 'f0f'],
-            process: function (bits){
-                return [
-                    parseInt(bits[1] + bits[1], 16),
-                    parseInt(bits[2] + bits[2], 16),
-                    parseInt(bits[3] + bits[3], 16)
-                ];
-            }
-        }
-    ];
+	// array of color definition objects
+	var colorDefs = [
+		{
+			re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+			example: ['rgb(123, 234, 45)', 'rgb(255,234,245)'],
+			process: function (bits) {
+				return [
+					parseInt(bits[1], 10),
+					parseInt(bits[2], 10),
+					parseInt(bits[3], 10)
+				];
+			}
+		},
+		{
+			re: /^(\w{2})(\w{2})(\w{2})$/,
+			example: ['#00ff00', '336699'],
+			process: function (bits) {
+				return [
+					parseInt(bits[1], 16),
+					parseInt(bits[2], 16),
+					parseInt(bits[3], 16)
+				];
+			}
+		},
+		{
+			re: /^(\w{1})(\w{1})(\w{1})$/,
+			example: ['#fb0', 'f0f'],
+			process: function (bits) {
+				return [
+					parseInt(bits[1] + bits[1], 16),
+					parseInt(bits[2] + bits[2], 16),
+					parseInt(bits[3] + bits[3], 16)
+				];
+			}
+		}
+	];
 
-    var i;
-    // search through the definitions to find a match
-    for (i = 0; i < color_defs.length; i++) {
-        var re = color_defs[i].re;
-        var processor = color_defs[i].process;
-        var bits = re.exec(color_string);
-        if (bits) {
-            var channels = processor(bits);
-            this.r = channels[0];
-            this.g = channels[1];
-            this.b = channels[2];
-            this.ok = true;
-        }
+	var i;
+	// search through the definitions to find a match
+	for (i = 0; i < colorDefs.length; i++) {
+		var re = colorDefs[i].re;
+		var processor = colorDefs[i].process;
+		var bits = re.exec(colorString);
+		if (bits) {
+			var channels = processor(bits);
+			this.r = channels[0];
+			this.g = channels[1];
+			this.b = channels[2];
+			this.ok = true;
+		}
+	}
 
-    }
+	// validate/cleanup values
+	this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
+	this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
+	this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
 
-    // validate/cleanup values
-    this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
-    this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
-    this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
+	// some getters
+	this.toRGB = function () {
+		return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
+	};
+	this.toHex = function () {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (r.length === 1) { r = '0' + r; }
+		if (g.length === 1) { g = '0' + g; }
+		if (b.length === 1) { b = '0' + b; }
+		return '#' + r + g + b;
+	};
 
-    // some getters
-    this.toRGB = function () {
-        return 'rgb(' + this.r + ', ' + this.g + ', ' + this.b + ')';
-    };
-    this.toHex = function () {
-        var r = this.r.toString(16);
-        var g = this.g.toString(16);
-        var b = this.b.toString(16);
-        if (r.length === 1) {r = '0' + r;}
-        if (g.length === 1) {g = '0' + g;}
-        if (b.length === 1) {b = '0' + b;}
-        return '#' + r + g + b;
-    };
-
-    // help
-    this.getHelpXML = function () {
-        var i, j;
-        var examples = [];
-        // add regexps
-        for (i = 0; i < color_defs.length; i++) {
-            var example = color_defs[i].example;
-            for (j = 0; j < example.length; j++) {
-                examples[examples.length] = example[j];
-            }
-        }
-        // add type-in colors
-        var sc;
-        for (sc in simple_colors) {
-            if (simple_colors.hasOwnProperty(sc)) {
-                examples[examples.length] = sc;
-            }
-        }
-
-        var xml = document.createElement('ul');
-        xml.setAttribute('id', 'rgbcolor-examples');
-        for (i = 0; i < examples.length; i++) {
-            try {
-                var list_item = document.createElement('li');
-                var list_color = new RGBColor(examples[i]);
-                var example_div = document.createElement('div');
-                example_div.style.cssText =
-                        'margin: 3px; '
-                        + 'border: 1px solid black; '
-                        + 'background:' + list_color.toHex() + '; '
-                        + 'color:' + list_color.toHex()
-                ;
-                example_div.appendChild(document.createTextNode('test'));
-                var list_item_value = document.createTextNode(
-                    ' ' + examples[i] + ' -> ' + list_color.toRGB() + ' -> ' + list_color.toHex()
-                );
-                list_item.appendChild(example_div);
-                list_item.appendChild(list_item_value);
-                xml.appendChild(list_item);
-
-            } catch(e){}
-        }
-        return xml;
-
-    };
+	// help
+	this.getHelpXML = function () {
+		var i, j;
+		var examples = [];
+		// add regexps
+		for (i = 0; i < colorDefs.length; i++) {
+			var example = colorDefs[i].example;
+			for (j = 0; j < example.length; j++) {
+				examples[examples.length] = example[j];
+			}
+		}
+		// add type-in colors
+		var sc;
+		for (sc in simpleColors) {
+			if (simpleColors.hasOwnProperty(sc)) {
+				examples[examples.length] = sc;
+			}
+		}
 
+		var xml = document.createElement('ul');
+		xml.setAttribute('id', 'rgbcolor-examples');
+		for (i = 0; i < examples.length; i++) {
+			try {
+				var listItem = document.createElement('li');
+				var listColor = new RGBColor(examples[i]);
+				var exampleDiv = document.createElement('div');
+				exampleDiv.style.cssText =
+						'margin: 3px; ' +
+						'border: 1px solid black; ' +
+						'background:' + listColor.toHex() + '; ' +
+						'color:' + listColor.toHex()
+				;
+				exampleDiv.appendChild(document.createTextNode('test'));
+				var listItemValue = document.createTextNode(
+					' ' + examples[i] + ' -> ' + listColor.toRGB() + ' -> ' + listColor.toHex()
+				);
+				listItem.appendChild(exampleDiv);
+				listItem.appendChild(listItemValue);
+				xml.appendChild(listItem);
+			} catch (e) {}
+		}
+		return xml;
+	};
 }
diff --git a/editor/contextmenu/jquery.contextMenu.js b/editor/contextmenu/jquery.contextMenu.js
index 76126019..2dc92679 100755
--- a/editor/contextmenu/jquery.contextMenu.js
+++ b/editor/contextmenu/jquery.contextMenu.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+/* globals jQuery, $, svgedit */
 // jQuery Context Menu Plugin
 //
 // Version 1.01
@@ -13,191 +15,191 @@
 // This plugin is dual-licensed under the GNU General Public License
 //   and the MIT License and is copyright A Beautiful Site, LLC.
 //
-if(jQuery)( function() {
-	var win = $(window);
-	var doc = $(document);
+if (jQuery) {
+	(function () {
+		var win = $(window);
+		var doc = $(document);
 
-	$.extend($.fn, {
-		
-		contextMenu: function(o, callback) {
-			// Defaults
-			if( o.menu == undefined ) return false;
-			if( o.inSpeed == undefined ) o.inSpeed = 150;
-			if( o.outSpeed == undefined ) o.outSpeed = 75;
-			// 0 needs to be -1 for expected results (no fade)
-			if( o.inSpeed == 0 ) o.inSpeed = -1;
-			if( o.outSpeed == 0 ) o.outSpeed = -1;
-			// Loop each context menu
-			$(this).each( function() {
-				var el = $(this);
-				var offset = $(el).offset();
-			
-				var menu = $('#' + o.menu);
+		$.extend($.fn, {
 
-				// Add contextMenu class
-				menu.addClass('contextMenu');
-				// Simulate a true right click
-				$(this).bind( "mousedown", function(e) {
-					var evt = e;
-					$(this).mouseup( function(e) {
-						var srcElement = $(this);
-						srcElement.unbind('mouseup');
-						if( evt.button === 2 || o.allowLeft || (evt.ctrlKey && svgedit.browser.isMac()) ) {
-							e.stopPropagation();
-							// Hide context menus that may be showing
-							$(".contextMenu").hide();
-							// Get this context menu
-						
-							if( el.hasClass('disabled') ) return false;
-							
-							// Detect mouse position
-							var d = {}, x = e.pageX, y = e.pageY;
-							
-							var x_off = win.width() - menu.width(), 
-								y_off = win.height() - menu.height();
+			contextMenu: function (o, callback) {
+				// Defaults
+				if (o.menu === undefined) return false;
+				if (o.inSpeed === undefined) o.inSpeed = 150;
+				if (o.outSpeed === undefined) o.outSpeed = 75;
+				// 0 needs to be -1 for expected results (no fade)
+				if (o.inSpeed === 0) o.inSpeed = -1;
+				if (o.outSpeed === 0) o.outSpeed = -1;
+				// Loop each context menu
+				$(this).each(function () {
+					var el = $(this);
+					var offset = $(el).offset();
 
-							if(x > x_off - 15) x = x_off-15;
-							if(y > y_off - 30) y = y_off-30; // 30 is needed to prevent scrollbars in FF
-							
-							// Show the menu
-							doc.unbind('click');
-							menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
-							// Hover events
-							menu.find('A').mouseover( function() {
-								menu.find('LI.hover').removeClass('hover');
-								$(this).parent().addClass('hover');
-							}).mouseout( function() {
-								menu.find('LI.hover').removeClass('hover');
-							});
-							
-							// Keyboard
-							doc.keypress( function(e) {
-								switch( e.keyCode ) {
+					var menu = $('#' + o.menu);
+
+					// Add contextMenu class
+					menu.addClass('contextMenu');
+					// Simulate a true right click
+					$(this).bind('mousedown', function (e) {
+						var evt = e;
+						$(this).mouseup(function (e) {
+							var srcElement = $(this);
+							srcElement.unbind('mouseup');
+							if (evt.button === 2 || o.allowLeft ||
+								(evt.ctrlKey && svgedit.browser.isMac())) {
+								e.stopPropagation();
+								// Hide context menus that may be showing
+								$('.contextMenu').hide();
+								// Get this context menu
+
+								if (el.hasClass('disabled')) return false;
+
+								// Detect mouse position
+								var x = e.pageX, y = e.pageY;
+
+								var xOff = win.width() - menu.width(),
+									yOff = win.height() - menu.height();
+
+								if (x > xOff - 15) x = xOff - 15;
+								if (y > yOff - 30) y = yOff - 30; // 30 is needed to prevent scrollbars in FF
+
+								// Show the menu
+								doc.unbind('click');
+								menu.css({ top: y, left: x }).fadeIn(o.inSpeed);
+								// Hover events
+								menu.find('A').mouseover(function () {
+									menu.find('LI.hover').removeClass('hover');
+									$(this).parent().addClass('hover');
+								}).mouseout(function () {
+									menu.find('LI.hover').removeClass('hover');
+								});
+
+								// Keyboard
+								doc.keypress(function (e) {
+									switch (e.keyCode) {
 									case 38: // up
-										if( !menu.find('LI.hover').length ) {
+										if (!menu.find('LI.hover').length) {
 											menu.find('LI:last').addClass('hover');
 										} else {
 											menu.find('LI.hover').removeClass('hover').prevAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:last').addClass('hover');
+											if (!menu.find('LI.hover').length) menu.find('LI:last').addClass('hover');
 										}
-									break;
+										break;
 									case 40: // down
-										if( menu.find('LI.hover').length == 0 ) {
+										if (menu.find('LI.hover').length === 0) {
 											menu.find('LI:first').addClass('hover');
 										} else {
 											menu.find('LI.hover').removeClass('hover').nextAll('LI:not(.disabled)').eq(0).addClass('hover');
-											if( !menu.find('LI.hover').length ) menu.find('LI:first').addClass('hover');
+											if (!menu.find('LI.hover').length) menu.find('LI:first').addClass('hover');
 										}
-									break;
+										break;
 									case 13: // enter
 										menu.find('LI.hover A').trigger('click');
-									break;
+										break;
 									case 27: // esc
 										doc.trigger('click');
-									break
-								}
-							});
-							
-							// When items are selected
-							menu.find('A').unbind('mouseup');
-							menu.find('LI:not(.disabled) A').mouseup( function() {
-								doc.unbind('click').unbind('keypress');
-								$(".contextMenu").hide();
-								// Callback
-								if( callback ) callback( $(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y} );
-								return false;
-							});
-							
-							// Hide bindings
-							setTimeout( function() { // Delay for Mozilla
-								doc.click( function() {
+										break;
+									}
+								});
+
+								// When items are selected
+								menu.find('A').unbind('mouseup');
+								menu.find('LI:not(.disabled) A').mouseup(function () {
 									doc.unbind('click').unbind('keypress');
-									menu.fadeOut(o.outSpeed);
+									$('.contextMenu').hide();
+									// Callback
+									if (callback) callback($(this).attr('href').substr(1), $(srcElement), {x: x - offset.left, y: y - offset.top, docX: x, docY: y});
 									return false;
 								});
-							}, 0);
-						}
+
+								// Hide bindings
+								setTimeout(function () { // Delay for Mozilla
+									doc.click(function () {
+										doc.unbind('click').unbind('keypress');
+										menu.fadeOut(o.outSpeed);
+										return false;
+									});
+								}, 0);
+							}
+						});
 					});
+
+					// Disable text selection
+					if ($.browser.mozilla) {
+						$('#' + o.menu).each(function () { $(this).css({'MozUserSelect': 'none'}); });
+					} else if ($.browser.msie) {
+						$('#' + o.menu).each(function () { $(this).bind('selectstart.disableTextSelect', function () { return false; }); });
+					} else {
+						$('#' + o.menu).each(function () { $(this).bind('mousedown.disableTextSelect', function () { return false; }); });
+					}
+					// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
+					$(el).add($('UL.contextMenu')).bind('contextmenu', function () { return false; });
 				});
-				
-				// Disable text selection
-				if( $.browser.mozilla ) {
-					$('#' + o.menu).each( function() { $(this).css({ 'MozUserSelect' : 'none' }); });
-				} else if( $.browser.msie ) {
-					$('#' + o.menu).each( function() { $(this).bind('selectstart.disableTextSelect', function() { return false; }); });
-				} else {
-					$('#' + o.menu).each(function() { $(this).bind('mousedown.disableTextSelect', function() { return false; }); });
+				return $(this);
+			},
+
+			// Disable context menu items on the fly
+			disableContextMenuItems: function (o) {
+				if (o === undefined) {
+					// Disable all
+					$(this).find('LI').addClass('disabled');
+					return $(this);
 				}
-				// Disable browser context menu (requires both selectors to work in IE/Safari + FF/Chrome)
-				$(el).add($('UL.contextMenu')).bind('contextmenu', function() { return false; });
-				
-			});
-			return $(this);
-		},
-		
-		// Disable context menu items on the fly
-		disableContextMenuItems: function(o) {
-			if( o == undefined ) {
-				// Disable all
-				$(this).find('LI').addClass('disabled');
-				return( $(this) );
-			}
-			$(this).each( function() {
-				if( o != undefined ) {
-					var d = o.split(',');
-					for( var i = 0; i < d.length; i++ ) {
-						$(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
-						
+				$(this).each(function () {
+					if (o !== undefined) {
+						var d = o.split(',');
+						for (var i = 0; i < d.length; i++) {
+							$(this).find('A[href="' + d[i] + '"]').parent().addClass('disabled');
+						}
 					}
+				});
+				return $(this);
+			},
+
+			// Enable context menu items on the fly
+			enableContextMenuItems: function (o) {
+				if (o === undefined) {
+					// Enable all
+					$(this).find('LI.disabled').removeClass('disabled');
+					return $(this);
 				}
-			});
-			return( $(this) );
-		},
-		
-		// Enable context menu items on the fly
-		enableContextMenuItems: function(o) {
-			if( o == undefined ) {
-				// Enable all
-				$(this).find('LI.disabled').removeClass('disabled');
-				return( $(this) );
-			}
-			$(this).each( function() {
-				if( o != undefined ) {
-					var d = o.split(',');
-					for( var i = 0; i < d.length; i++ ) {
-						$(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
-						
+				$(this).each(function () {
+					if (o !== undefined) {
+						var d = o.split(',');
+						for (var i = 0; i < d.length; i++) {
+							$(this).find('A[href="' + d[i] + '"]').parent().removeClass('disabled');
+						}
 					}
-				}
-			});
-			return( $(this) );
-		},
-		
-		// Disable context menu(s)
-		disableContextMenu: function() {
-			$(this).each( function() {
-				$(this).addClass('disabled');
-			});
-			return( $(this) );
-		},
-		
-		// Enable context menu(s)
-		enableContextMenu: function() {
-			$(this).each( function() {
-				$(this).removeClass('disabled');
-			});
-			return( $(this) );
-		},
-		
-		// Destroy context menu(s)
-		destroyContextMenu: function() {
-			// Destroy specified context menus
-			$(this).each( function() {
-				// Disable action
-				$(this).unbind('mousedown').unbind('mouseup');
-			});
-			return( $(this) );
-		}
-		
-	});
-})(jQuery);
\ No newline at end of file
+				});
+				return $(this);
+			},
+
+			// Disable context menu(s)
+			disableContextMenu: function () {
+				$(this).each(function () {
+					$(this).addClass('disabled');
+				});
+				return $(this);
+			},
+
+			// Enable context menu(s)
+			enableContextMenu: function () {
+				$(this).each(function () {
+					$(this).removeClass('disabled');
+				});
+				return $(this);
+			},
+
+			// Destroy context menu(s)
+			destroyContextMenu: function () {
+				// Destroy specified context menus
+				$(this).each(function () {
+					// Disable action
+					$(this).unbind('mousedown').unbind('mouseup');
+				});
+				return $(this);
+			}
+
+		});
+	})(jQuery);
+}
diff --git a/editor/jgraduate/jpicker.js b/editor/jgraduate/jpicker.js
index 683052cc..37b99a61 100755
--- a/editor/jgraduate/jpicker.js
+++ b/editor/jgraduate/jpicker.js
@@ -1,4 +1,6 @@
-/*
+/* eslint-disable no-var */
+/* globals jQuery */
+/*
  * jPicker 1.1.6
  *
  * jQuery Plugin for Photoshop style color picker
@@ -10,2082 +12,1944 @@
  * Painstakingly ported from John Dyers' excellent work on his own color picker based on the Prototype framework.
  *
  * John Dyers' website: (http://johndyer.name)
- * Color Picker page:   (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
+ * Color Picker page:	 (http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx)
  *
  */
-(function($, version)
+(function ($, version) {
+Math.precision = function (value, precision) {
+	if (precision === undefined) precision = 0;
+	return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
+};
+var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
+	function (bar, options) {
+		var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
+			arrow = bar.find('img:first'), // the arrow image to drag
+			minX = 0,
+			maxX = 100,
+			rangeX = 100,
+			minY = 0,
+			maxY = 100,
+			rangeY = 100,
+			x = 0,
+			y = 0,
+			offset,
+			timeout,
+			changeEvents = [],
+			fireChangeEvents =
+				function (context) {
+					for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
+				},
+			mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
+				function (e) {
+					var off = bar.offset();
+					offset = { l: off.left | 0, t: off.top | 0 };
+					clearTimeout(timeout);
+					timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
+						function () {
+							setValuesFromMousePosition.call($this, e);
+						}, 0);
+					// Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
+					$(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
+					e.preventDefault(); // don't try to select anything or drag the image to the desktop
+				},
+			mouseMove = // set the values as the mouse moves
+				function (e) {
+					clearTimeout(timeout);
+					timeout = setTimeout(
+						function () {
+							setValuesFromMousePosition.call($this, e);
+						}, 0);
+					e.stopPropagation();
+					e.preventDefault();
+					return false;
+				},
+			mouseUp = // unbind the document events - they aren't needed when not dragging
+				function (e) {
+					$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+					e.stopPropagation();
+					e.preventDefault();
+					return false;
+				},
+			setValuesFromMousePosition = // calculate mouse position and set value within the current range
+				function (e) {
+					var locX = e.pageX - offset.l,
+						locY = e.pageY - offset.t,
+						barW = bar.w, // local copies for YUI compressor
+						barH = bar.h;
+					// keep the arrow within the bounds of the bar
+					if (locX < 0) locX = 0;
+					else if (locX > barW) locX = barW;
+					if (locY < 0) locY = 0;
+					else if (locY > barH) locY = barH;
+					val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY });
+				},
+			draw =
+				function () {
+					var arrowOffsetX = 0,
+						arrowOffsetY = 0,
+						barW = bar.w,
+						barH = bar.h,
+						arrowW = arrow.w,
+						arrowH = arrow.h;
+					setTimeout(
+						function () {
+							if (rangeX > 0) { // range is greater than zero
+								// constrain to bounds
+								if (x === maxX) arrowOffsetX = barW;
+								else arrowOffsetX = ((x / rangeX) * barW) | 0;
+							}
+							if (rangeY > 0) { // range is greater than zero
+								// constrain to bounds
+								if (y === maxY) arrowOffsetY = barH;
+								else arrowOffsetY = ((y / rangeY) * barH) | 0;
+							}
+							// if arrow width is greater than bar width, center arrow and prevent horizontal dragging
+							if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
+							else arrowOffsetX -= arrowW >> 1;
+							// if arrow height is greater than bar height, center arrow and prevent vertical dragging
+							if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
+							else arrowOffsetY -= arrowH >> 1;
+							// set the arrow position based on these offsets
+							arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
+						}, 0);
+				},
+			val =
+				function (name, value, context) {
+					var set = value !== undefined;
+					if (!set) {
+						if (name === undefined || name == null) name = 'xy';
+						switch (name.toLowerCase()) {
+						case 'x': return x;
+						case 'y': return y;
+						case 'xy':
+						default: return { x: x, y: y };
+						}
+					}
+					if (context != null && context === $this) return;
+					var changed = false,
+						newX,
+						newY;
+					if (name == null) name = 'xy';
+					switch (name.toLowerCase()) {
+					case 'x':
+						newX = value && (value.x && value.x | 0 || value | 0) || 0;
+						break;
+					case 'y':
+						newY = value && (value.y && value.y | 0 || value | 0) || 0;
+						break;
+					case 'xy':
+					default:
+						newX = value && value.x && value.x | 0 || 0;
+						newY = value && value.y && value.y | 0 || 0;
+						break;
+					}
+					if (newX != null) {
+						if (newX < minX) newX = minX;
+						else if (newX > maxX) newX = maxX;
+						if (x !== newX) {
+							x = newX;
+							changed = true;
+						}
+					}
+					if (newY != null) {
+						if (newY < minY) newY = minY;
+						else if (newY > maxY) newY = maxY;
+						if (y !== newY) {
+							y = newY;
+							changed = true;
+						}
+					}
+					changed && fireChangeEvents.call($this, context || $this);
+				},
+			range =
+				function (name, value) {
+					var set = value !== undefined;
+					if (!set) {
+						if (name === undefined || name == null) name = 'all';
+						switch (name.toLowerCase()) {
+						case 'minx': return minX;
+						case 'maxx': return maxX;
+						case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX };
+						case 'miny': return minY;
+						case 'maxy': return maxY;
+						case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY };
+						case 'all':
+						default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
+						}
+					}
+					var changed = false,
+						newMinX,
+						newMaxX,
+						newMinY,
+						newMaxY;
+					if (name == null) name = 'all';
+					switch (name.toLowerCase()) {
+					case 'minx':
+						newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
+						break;
+					case 'maxx':
+						newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
+						break;
+					case 'rangex':
+						newMinX = value && value.minX && value.minX | 0 || 0;
+						newMaxX = value && value.maxX && value.maxX | 0 || 0;
+						break;
+					case 'miny':
+						newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
+						break;
+					case 'maxy':
+						newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
+						break;
+					case 'rangey':
+						newMinY = value && value.minY && value.minY | 0 || 0;
+						newMaxY = value && value.maxY && value.maxY | 0 || 0;
+						break;
+					case 'all':
+					default:
+						newMinX = value && value.minX && value.minX | 0 || 0;
+						newMaxX = value && value.maxX && value.maxX | 0 || 0;
+						newMinY = value && value.minY && value.minY | 0 || 0;
+						newMaxY = value && value.maxY && value.maxY | 0 || 0;
+						break;
+					}
+					if (newMinX != null && minX !== newMinX) {
+						minX = newMinX;
+						rangeX = maxX - minX;
+					}
+					if (newMaxX != null && maxX !== newMaxX) {
+						maxX = newMaxX;
+						rangeX = maxX - minX;
+					}
+					if (newMinY != null && minY !== newMinY) {
+						minY = newMinY;
+						rangeY = maxY - minY;
+					}
+					if (newMaxY != null && maxY !== newMaxY) {
+						maxY = newMaxY;
+						rangeY = maxY - minY;
+					}
+				},
+			bind =
+				function (callback) {
+					if ($.isFunction(callback)) changeEvents.push(callback);
+				},
+			unbind =
+				function (callback) {
+					if (!$.isFunction(callback)) return;
+					var i;
+					while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
+				},
+			destroy =
+				function () {
+					// unbind all possible events and null objects
+					$(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
+					bar.unbind('mousedown', mouseDown);
+					bar = null;
+					arrow = null;
+					changeEvents = null;
+				};
+		$.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
+			{
+				val: val,
+				range: range,
+				bind: bind,
+				unbind: unbind,
+				destroy: destroy
+			});
+		// initialize this control
+		arrow.src = options.arrow && options.arrow.image;
+		arrow.w = options.arrow && options.arrow.width || arrow.width();
+		arrow.h = options.arrow && options.arrow.height || arrow.height();
+		bar.w = options.map && options.map.width || bar.width();
+		bar.h = options.map && options.map.height || bar.height();
+		// bind mousedown event
+		bar.bind('mousedown', mouseDown);
+		bind.call($this, draw);
+	},
+	ColorValuePicker = // controls for all the input elements for the typing in color values
+	function (picker, color, bindedHex, alphaPrecision) {
+		var $this = this, // private properties and methods
+			inputs = picker.find('td.Text input'),
+			red = inputs.eq(3),
+			green = inputs.eq(4),
+			blue = inputs.eq(5),
+			alpha = inputs.length > 7 ? inputs.eq(6) : null,
+			hue = inputs.eq(0),
+			saturation = inputs.eq(1),
+			value = inputs.eq(2),
+			hex = inputs.eq(inputs.length > 7 ? 7 : 6),
+			ahex = inputs.length > 7 ? inputs.eq(8) : null,
+			keyDown = // input box key down - use arrows to alter color
+				function (e) {
+					if (e.target.value === '' && e.target !== hex.get(0) && (bindedHex != null && e.target !== bindedHex.get(0) || bindedHex == null)) return;
+					if (!validateKey(e)) return e;
+					switch (e.target) {
+					case red.get(0):
+						switch (e.keyCode) {
+						case 38:
+							red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
+							color.val('r', red.val(), e.target);
+							return false;
+						case 40:
+							red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
+							color.val('r', red.val(), e.target);
+							return false;
+						}
+						break;
+					case green.get(0):
+						switch (e.keyCode) {
+						case 38:
+							green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
+							color.val('g', green.val(), e.target);
+							return false;
+						case 40:
+							green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
+							color.val('g', green.val(), e.target);
+							return false;
+						}
+						break;
+					case blue.get(0):
+						switch (e.keyCode) {
+						case 38:
+							blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
+							color.val('b', blue.val(), e.target);
+							return false;
+						case 40:
+							blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
+							color.val('b', blue.val(), e.target);
+							return false;
+						}
+						break;
+					case alpha && alpha.get(0):
+						switch (e.keyCode) {
+						case 38:
+							alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
+							color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+							return false;
+						case 40:
+							alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
+							color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+							return false;
+						}
+						break;
+					case hue.get(0):
+						switch (e.keyCode) {
+						case 38:
+							hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
+							color.val('h', hue.val(), e.target);
+							return false;
+						case 40:
+							hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
+							color.val('h', hue.val(), e.target);
+							return false;
+						}
+						break;
+					case saturation.get(0):
+						switch (e.keyCode) {
+						case 38:
+							saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
+							color.val('s', saturation.val(), e.target);
+							return false;
+						case 40:
+							saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
+							color.val('s', saturation.val(), e.target);
+							return false;
+						}
+						break;
+					case value.get(0):
+						switch (e.keyCode) {
+						case 38:
+							value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
+							color.val('v', value.val(), e.target);
+							return false;
+						case 40:
+							value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
+							color.val('v', value.val(), e.target);
+							return false;
+						}
+						break;
+					}
+				},
+			keyUp = // input box key up - validate value and set color
+				function (e) {
+					if (e.target.value === '' && e.target !== hex.get(0) && (bindedHex != null && e.target !== bindedHex.get(0) || bindedHex == null)) return;
+					if (!validateKey(e)) return e;
+					switch (e.target) {
+					case red.get(0):
+						red.val(setValueInRange.call($this, red.val(), 0, 255));
+						color.val('r', red.val(), e.target);
+						break;
+					case green.get(0):
+						green.val(setValueInRange.call($this, green.val(), 0, 255));
+						color.val('g', green.val(), e.target);
+						break;
+					case blue.get(0):
+						blue.val(setValueInRange.call($this, blue.val(), 0, 255));
+						color.val('b', blue.val(), e.target);
+						break;
+					case alpha && alpha.get(0):
+						alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
+						color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
+						break;
+					case hue.get(0):
+						hue.val(setValueInRange.call($this, hue.val(), 0, 360));
+						color.val('h', hue.val(), e.target);
+						break;
+					case saturation.get(0):
+						saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
+						color.val('s', saturation.val(), e.target);
+						break;
+					case value.get(0):
+						value.val(setValueInRange.call($this, value.val(), 0, 100));
+						color.val('v', value.val(), e.target);
+						break;
+					case hex.get(0):
+						hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
+						bindedHex && bindedHex.val(hex.val());
+						color.val('hex', hex.val() !== '' ? hex.val() : null, e.target);
+						break;
+					case bindedHex && bindedHex.get(0):
+						bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
+						hex.val(bindedHex.val());
+						color.val('hex', bindedHex.val() !== '' ? bindedHex.val() : null, e.target);
+						break;
+					case ahex && ahex.get(0):
+						ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
+						color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
+						break;
+					}
+				},
+			blur = // input box blur - reset to original if value empty
+				function (e) {
+					if (color.val() != null) {
+						switch (e.target) {
+						case red.get(0): red.val(color.val('r')); break;
+						case green.get(0): green.val(color.val('g')); break;
+						case blue.get(0): blue.val(color.val('b')); break;
+						case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
+						case hue.get(0): hue.val(color.val('h')); break;
+						case saturation.get(0): saturation.val(color.val('s')); break;
+						case value.get(0): value.val(color.val('v')); break;
+						case hex.get(0):
+						case bindedHex && bindedHex.get(0):
+							hex.val(color.val('hex'));
+							bindedHex && bindedHex.val(color.val('hex'));
+							break;
+						case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
+						}
+					}
+				},
+			validateKey = // validate key
+				function (e) {
+					switch (e.keyCode) {
+					case 9:
+					case 16:
+					case 29:
+					case 37:
+					case 39:
+						return false;
+					case 'c'.charCodeAt():
+					case 'v'.charCodeAt():
+						if (e.ctrlKey) return false;
+					}
+					return true;
+				},
+			setValueInRange = // constrain value within range
+				function (value, min, max) {
+					if (value == '' || isNaN(value)) return min;
+					if (value > max) return max;
+					if (value < min) return min;
+					return value;
+				},
+			colorChanged =
+				function (ui, context) {
+					var all = ui.val('all');
+					if (context !== red.get(0)) red.val(all != null ? all.r : '');
+					if (context !== green.get(0)) green.val(all != null ? all.g : '');
+					if (context !== blue.get(0)) blue.val(all != null ? all.b : '');
+					if (alpha && context !== alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
+					if (context !== hue.get(0)) hue.val(all != null ? all.h : '');
+					if (context !== saturation.get(0)) saturation.val(all != null ? all.s : '');
+					if (context !== value.get(0)) value.val(all != null ? all.v : '');
+					if (context !== hex.get(0) && (bindedHex && context !== bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
+					if (bindedHex && context !== bindedHex.get(0) && context !== hex.get(0)) bindedHex.val(all != null ? all.hex : '');
+					if (ahex && context !== ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
+				},
+			destroy =
+				function () {
+					// unbind all events and null objects
+					red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
+					red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
+					color.unbind(colorChanged);
+					red = null;
+					green = null;
+					blue = null;
+					alpha = null;
+					hue = null;
+					saturation = null;
+					value = null;
+					hex = null;
+					ahex = null;
+				};
+		$.extend(true, $this, // public properties and methods
+			{
+				destroy: destroy
+			});
+		red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
+		red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
+		color.bind(colorChanged);
+	};
+$.jPicker =
 {
-  Math.precision = function(value, precision)
-    {
-      if (precision === undefined) precision = 0;
-      return Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision);
-    };
-  var Slider = // encapsulate slider functionality for the ColorMap and ColorBar - could be useful to use a jQuery UI draggable for this with certain extensions
-      function(bar, options)
-      {
-        var $this = this, // private properties, methods, and events - keep these variables and classes invisible to outside code
-          arrow = bar.find('img:first'), // the arrow image to drag
-          minX = 0,
-          maxX = 100,
-          rangeX = 100,
-          minY = 0,
-          maxY = 100,
-          rangeY = 100,
-          x = 0,
-          y = 0,
-          offset,
-          timeout,
-          changeEvents = new Array(),
-          fireChangeEvents =
-            function(context)
-            {
-              for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
-            },
-          mouseDown = // bind the mousedown to the bar not the arrow for quick snapping to the clicked location
-            function(e)
-            {
-              var off = bar.offset();
-              offset = { l: off.left | 0, t: off.top | 0 };
-              clearTimeout(timeout);
-              timeout = setTimeout( // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run
-                function()
-                {
-                  setValuesFromMousePosition.call($this, e);
-                }, 0);
-              // Bind mousemove and mouseup event to the document so it responds when dragged of of the bar - we will unbind these when on mouseup to save processing
-              $(document).bind('mousemove', mouseMove).bind('mouseup', mouseUp);
-              e.preventDefault(); // don't try to select anything or drag the image to the desktop
-            },
-          mouseMove = // set the values as the mouse moves
-            function(e)
-            {
-              clearTimeout(timeout);
-              timeout = setTimeout(
-                function()
-                {
-                  setValuesFromMousePosition.call($this, e);
-                }, 0);
-              e.stopPropagation();
-              e.preventDefault();
-              return false;
-            },
-          mouseUp = // unbind the document events - they aren't needed when not dragging
-            function(e)
-            {
-              $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
-              e.stopPropagation();
-              e.preventDefault();
-              return false;
-            },
-          setValuesFromMousePosition = // calculate mouse position and set value within the current range
-            function(e)
-            {
-              var locX = e.pageX - offset.l,
-                  locY = e.pageY - offset.t,
-                  barW = bar.w, // local copies for YUI compressor
-                  barH = bar.h;
-              // keep the arrow within the bounds of the bar
-              if (locX < 0) locX = 0;
-              else if (locX > barW) locX = barW;
-              if (locY < 0) locY = 0;
-              else if (locY > barH) locY = barH;
-              val.call($this, 'xy', { x: ((locX / barW) * rangeX) + minX, y: ((locY / barH) * rangeY) + minY });
-            },
-          draw =
-            function()
-            {
-              var arrowOffsetX = 0,
-                arrowOffsetY = 0,
-                barW = bar.w,
-                barH = bar.h,
-                arrowW = arrow.w,
-                arrowH = arrow.h;
-              setTimeout(
-                function()
-                {
-                  if (rangeX > 0) // range is greater than zero
-                  {
-                    // constrain to bounds
-                    if (x == maxX) arrowOffsetX = barW;
-                    else arrowOffsetX = ((x / rangeX) * barW) | 0;
-                  }
-                  if (rangeY > 0) // range is greater than zero
-                  {
-                    // constrain to bounds
-                    if (y == maxY) arrowOffsetY = barH;
-                    else arrowOffsetY = ((y / rangeY) * barH) | 0;
-                  }
-                  // if arrow width is greater than bar width, center arrow and prevent horizontal dragging
-                  if (arrowW >= barW) arrowOffsetX = (barW >> 1) - (arrowW >> 1); // number >> 1 - superfast bitwise divide by two and truncate (move bits over one bit discarding lowest)
-                  else arrowOffsetX -= arrowW >> 1;
-                  // if arrow height is greater than bar height, center arrow and prevent vertical dragging
-                  if (arrowH >= barH) arrowOffsetY = (barH >> 1) - (arrowH >> 1);
-                  else arrowOffsetY -= arrowH >> 1;
-                  // set the arrow position based on these offsets
-                  arrow.css({ left: arrowOffsetX + 'px', top: arrowOffsetY + 'px' });
-                }, 0);
-            },
-          val =
-            function(name, value, context)
-            {
-              var set = value !== undefined;
-              if (!set)
-              {
-                if (name === undefined || name == null) name = 'xy';
-                switch (name.toLowerCase())
-                {
-                  case 'x': return x;
-                  case 'y': return y;
-                  case 'xy':
-                  default: return { x: x, y: y };
-                }
-              }
-              if (context != null && context == $this) return;
-              var changed = false,
-                  newX,
-                  newY;
-              if (name == null) name = 'xy';
-              switch (name.toLowerCase())
-              {
-                case 'x':
-                  newX = value && (value.x && value.x | 0 || value | 0) || 0;
-                  break;
-                case 'y':
-                  newY = value && (value.y && value.y | 0 || value | 0) || 0;
-                  break;
-                case 'xy':
-                default:
-                  newX = value && value.x && value.x | 0 || 0;
-                  newY = value && value.y && value.y | 0 || 0;
-                  break;
-              }
-              if (newX != null)
-              {
-                if (newX < minX) newX = minX;
-                else if (newX > maxX) newX = maxX;
-                if (x != newX)
-                {
-                  x = newX;
-                  changed = true;
-                }
-              }
-              if (newY != null)
-              {
-                if (newY < minY) newY = minY;
-                else if (newY > maxY) newY = maxY;
-                if (y != newY)
-                {
-                  y = newY;
-                  changed = true;
-                }
-              }
-              changed && fireChangeEvents.call($this, context || $this);
-            },
-          range =
-            function (name, value)
-            {
-              var set = value !== undefined;
-              if (!set)
-              {
-                if (name === undefined || name == null) name = 'all';
-                switch (name.toLowerCase())
-                {
-                  case 'minx': return minX;
-                  case 'maxx': return maxX;
-                  case 'rangex': return { minX: minX, maxX: maxX, rangeX: rangeX };
-                  case 'miny': return minY;
-                  case 'maxy': return maxY;
-                  case 'rangey': return { minY: minY, maxY: maxY, rangeY: rangeY };
-                  case 'all':
-                  default: return { minX: minX, maxX: maxX, rangeX: rangeX, minY: minY, maxY: maxY, rangeY: rangeY };
-                }
-              }
-              var changed = false,
-                  newMinX,
-                  newMaxX,
-                  newMinY,
-                  newMaxY;
-              if (name == null) name = 'all';
-              switch (name.toLowerCase())
-              {
-                case 'minx':
-                  newMinX = value && (value.minX && value.minX | 0 || value | 0) || 0;
-                  break;
-                case 'maxx':
-                  newMaxX = value && (value.maxX && value.maxX | 0 || value | 0) || 0;
-                  break;
-                case 'rangex':
-                  newMinX = value && value.minX && value.minX | 0 || 0;
-                  newMaxX = value && value.maxX && value.maxX | 0 || 0;
-                  break;
-                case 'miny':
-                  newMinY = value && (value.minY && value.minY | 0 || value | 0) || 0;
-                  break;
-                case 'maxy':
-                  newMaxY = value && (value.maxY && value.maxY | 0 || value | 0) || 0;
-                  break;
-                case 'rangey':
-                  newMinY = value && value.minY && value.minY | 0 || 0;
-                  newMaxY = value && value.maxY && value.maxY | 0 || 0;
-                  break;
-                case 'all':
-                default:
-                  newMinX = value && value.minX && value.minX | 0 || 0;
-                  newMaxX = value && value.maxX && value.maxX | 0 || 0;
-                  newMinY = value && value.minY && value.minY | 0 || 0;
-                  newMaxY = value && value.maxY && value.maxY | 0 || 0;
-                  break;
-              }
-              if (newMinX != null && minX != newMinX)
-              {
-                minX = newMinX;
-                rangeX = maxX - minX;
-              }
-              if (newMaxX != null && maxX != newMaxX)
-              {
-                maxX = newMaxX;
-                rangeX = maxX - minX;
-              }
-              if (newMinY != null && minY != newMinY)
-              {
-                minY = newMinY;
-                rangeY = maxY - minY;
-              }
-              if (newMaxY != null && maxY != newMaxY)
-              {
-                maxY = newMaxY;
-                rangeY = maxY - minY;
-              }
-            },
-          bind =
-            function (callback)
-            {
-              if ($.isFunction(callback)) changeEvents.push(callback);
-            },
-          unbind =
-            function (callback)
-            {
-              if (!$.isFunction(callback)) return;
-              var i;
-              while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
-            },
-          destroy =
-            function()
-            {
-              // unbind all possible events and null objects
-              $(document).unbind('mouseup', mouseUp).unbind('mousemove', mouseMove);
-              bar.unbind('mousedown', mouseDown);
-              bar = null;
-              arrow = null;
-              changeEvents = null;
-            };
-        $.extend(true, $this, // public properties, methods, and event bindings - these we need to access from other controls
-          {
-            val: val,
-            range: range,
-            bind: bind,
-            unbind: unbind,
-            destroy: destroy
-          });
-        // initialize this control
-        arrow.src = options.arrow && options.arrow.image;
-        arrow.w = options.arrow && options.arrow.width || arrow.width();
-        arrow.h = options.arrow && options.arrow.height || arrow.height();
-        bar.w = options.map && options.map.width || bar.width();
-        bar.h = options.map && options.map.height || bar.height();
-        // bind mousedown event
-        bar.bind('mousedown', mouseDown);
-        bind.call($this, draw);
-      },
-    ColorValuePicker = // controls for all the input elements for the typing in color values
-      function(picker, color, bindedHex, alphaPrecision)
-      {
-        var $this = this, // private properties and methods
-          inputs = picker.find('td.Text input'),
-          red = inputs.eq(3),
-          green = inputs.eq(4),
-          blue = inputs.eq(5),
-          alpha = inputs.length > 7 ? inputs.eq(6) : null,
-          hue = inputs.eq(0),
-          saturation = inputs.eq(1),
-          value = inputs.eq(2),
-          hex = inputs.eq(inputs.length > 7 ? 7 : 6),
-          ahex = inputs.length > 7 ? inputs.eq(8) : null,
-          keyDown = // input box key down - use arrows to alter color
-            function(e)
-            {
-              if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
-              if (!validateKey(e)) return e;
-              switch (e.target)
-              {
-                case red.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      red.val(setValueInRange.call($this, (red.val() << 0) + 1, 0, 255));
-                      color.val('r', red.val(), e.target);
-                      return false;
-                    case 40:
-                      red.val(setValueInRange.call($this, (red.val() << 0) - 1, 0, 255));
-                      color.val('r', red.val(), e.target);
-                      return false;
-                  }
-                  break;
-                case green.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      green.val(setValueInRange.call($this, (green.val() << 0) + 1, 0, 255));
-                      color.val('g', green.val(), e.target);
-                      return false;
-                    case 40:
-                      green.val(setValueInRange.call($this, (green.val() << 0) - 1, 0, 255));
-                      color.val('g', green.val(), e.target);
-                      return false;
-                  }
-                  break;
-                case blue.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      blue.val(setValueInRange.call($this, (blue.val() << 0) + 1, 0, 255));
-                      color.val('b', blue.val(), e.target);
-                      return false;
-                    case 40:
-                      blue.val(setValueInRange.call($this, (blue.val() << 0) - 1, 0, 255));
-                      color.val('b', blue.val(), e.target);
-                      return false;
-                  }
-                  break;
-                case alpha && alpha.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) + 1, 0, 100));
-                      color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
-                      return false;
-                    case 40:
-                      alpha.val(setValueInRange.call($this, parseFloat(alpha.val()) - 1, 0, 100));
-                      color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
-                      return false;
-                  }
-                  break;
-                case hue.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      hue.val(setValueInRange.call($this, (hue.val() << 0) + 1, 0, 360));
-                      color.val('h', hue.val(), e.target);
-                      return false;
-                    case 40:
-                      hue.val(setValueInRange.call($this, (hue.val() << 0) - 1, 0, 360));
-                      color.val('h', hue.val(), e.target);
-                      return false;
-                  }
-                  break;
-                case saturation.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      saturation.val(setValueInRange.call($this, (saturation.val() << 0) + 1, 0, 100));
-                      color.val('s', saturation.val(), e.target);
-                      return false;
-                    case 40:
-                      saturation.val(setValueInRange.call($this, (saturation.val() << 0) - 1, 0, 100));
-                      color.val('s', saturation.val(), e.target);
-                      return false;
-                  }
-                  break;
-                case value.get(0):
-                  switch (e.keyCode)
-                  {
-                    case 38:
-                      value.val(setValueInRange.call($this, (value.val() << 0) + 1, 0, 100));
-                      color.val('v', value.val(), e.target);
-                      return false;
-                    case 40:
-                      value.val(setValueInRange.call($this, (value.val() << 0) - 1, 0, 100));
-                      color.val('v', value.val(), e.target);
-                      return false;
-                  }
-                  break;
-              }
-            },
-          keyUp = // input box key up - validate value and set color
-            function(e)
-            {
-              if (e.target.value == '' && e.target != hex.get(0) && (bindedHex != null && e.target != bindedHex.get(0) || bindedHex == null)) return;
-              if (!validateKey(e)) return e;
-              switch (e.target)
-              {
-                case red.get(0):
-                  red.val(setValueInRange.call($this, red.val(), 0, 255));
-                  color.val('r', red.val(), e.target);
-                  break;
-                case green.get(0):
-                  green.val(setValueInRange.call($this, green.val(), 0, 255));
-                  color.val('g', green.val(), e.target);
-                  break;
-                case blue.get(0):
-                  blue.val(setValueInRange.call($this, blue.val(), 0, 255));
-                  color.val('b', blue.val(), e.target);
-                  break;
-                case alpha && alpha.get(0):
-                  alpha.val(setValueInRange.call($this, alpha.val(), 0, 100));
-                  color.val('a', Math.precision((alpha.val() * 255) / 100, alphaPrecision), e.target);
-                  break;
-                case hue.get(0):
-                  hue.val(setValueInRange.call($this, hue.val(), 0, 360));
-                  color.val('h', hue.val(), e.target);
-                  break;
-                case saturation.get(0):
-                  saturation.val(setValueInRange.call($this, saturation.val(), 0, 100));
-                  color.val('s', saturation.val(), e.target);
-                  break;
-                case value.get(0):
-                  value.val(setValueInRange.call($this, value.val(), 0, 100));
-                  color.val('v', value.val(), e.target);
-                  break;
-                case hex.get(0):
-                  hex.val(hex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
-                  bindedHex && bindedHex.val(hex.val());
-                  color.val('hex', hex.val() != '' ? hex.val() : null, e.target);
-                  break;
-                case bindedHex && bindedHex.get(0):
-                  bindedHex.val(bindedHex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 6));
-                  hex.val(bindedHex.val());
-                  color.val('hex', bindedHex.val() != '' ? bindedHex.val() : null, e.target);
-                  break;
-                case ahex && ahex.get(0):
-                  ahex.val(ahex.val().replace(/[^a-fA-F0-9]/g, '').toLowerCase().substring(0, 2));
-                  color.val('a', ahex.val() != null ? parseInt(ahex.val(), 16) : null, e.target);
-                  break;
-              }
-            },
-          blur = // input box blur - reset to original if value empty
-            function(e)
-            {
-              if (color.val() != null)
-              {
-                switch (e.target)
-                {
-                  case red.get(0): red.val(color.val('r')); break;
-                  case green.get(0): green.val(color.val('g')); break;
-                  case blue.get(0): blue.val(color.val('b')); break;
-                  case alpha && alpha.get(0): alpha.val(Math.precision((color.val('a') * 100) / 255, alphaPrecision)); break;
-                  case hue.get(0): hue.val(color.val('h')); break;
-                  case saturation.get(0): saturation.val(color.val('s')); break;
-                  case value.get(0): value.val(color.val('v')); break;
-                  case hex.get(0):
-                  case bindedHex && bindedHex.get(0):
-                    hex.val(color.val('hex'));
-                    bindedHex && bindedHex.val(color.val('hex'));
-                    break;
-                  case ahex && ahex.get(0): ahex.val(color.val('ahex').substring(6)); break;
-                }
-              }
-            },
-          validateKey = // validate key
-            function(e)
-            {
-              switch(e.keyCode)
-              {
-                case 9:
-                case 16:
-                case 29:
-                case 37:
-                case 39:
-                  return false;
-                case 'c'.charCodeAt():
-                case 'v'.charCodeAt():
-                  if (e.ctrlKey) return false;
-              }
-              return true;
-            },
-          setValueInRange = // constrain value within range
-            function(value, min, max)
-            {
-              if (value == '' || isNaN(value)) return min;
-              if (value > max) return max;
-              if (value < min) return min;
-              return value;
-            },
-          colorChanged =
-            function(ui, context)
-            {
-              var all = ui.val('all');
-              if (context != red.get(0)) red.val(all != null ? all.r : '');
-              if (context != green.get(0)) green.val(all != null ? all.g : '');
-              if (context != blue.get(0)) blue.val(all != null ? all.b : '');
-              if (alpha && context != alpha.get(0)) alpha.val(all != null ? Math.precision((all.a * 100) / 255, alphaPrecision) : '');
-              if (context != hue.get(0)) hue.val(all != null ? all.h : '');
-              if (context != saturation.get(0)) saturation.val(all != null ? all.s : '');
-              if (context != value.get(0)) value.val(all != null ? all.v : '');
-              if (context != hex.get(0) && (bindedHex && context != bindedHex.get(0) || !bindedHex)) hex.val(all != null ? all.hex : '');
-              if (bindedHex && context != bindedHex.get(0) && context != hex.get(0)) bindedHex.val(all != null ? all.hex : '');
-              if (ahex && context != ahex.get(0)) ahex.val(all != null ? all.ahex.substring(6) : '');
-            },
-          destroy =
-            function()
-            {
-              // unbind all events and null objects
-              red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).unbind('keyup', keyUp).unbind('blur', blur);
-              red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).unbind('keydown', keyDown);
-              color.unbind(colorChanged);
-              red = null;
-              green = null;
-              blue = null;
-              alpha = null;
-              hue = null;
-              saturation = null;
-              value = null;
-              hex = null;
-              ahex = null;
-            };
-        $.extend(true, $this, // public properties and methods
-          {
-            destroy: destroy
-          });
-        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).add(hex).add(bindedHex).add(ahex).bind('keyup', keyUp).bind('blur', blur);
-        red.add(green).add(blue).add(alpha).add(hue).add(saturation).add(value).bind('keydown', keyDown);
-        color.bind(colorChanged);
-      };
-  $.jPicker =
-    {
-      List: [], // array holding references to each active instance of the control
-      Color: // color object - we will be able to assign by any color space type or retrieve any color space info
-             // we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
-        function(init)
-        {
-          var $this = this,
-            r,
-            g,
-            b,
-            a,
-            h,
-            s,
-            v,
-            changeEvents = new Array(),
-            fireChangeEvents = 
-              function(context)
-              {
-                for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
-              },
-            val =
-              function(name, value, context)
-              {
-                // Kind of ugly
-                var set = Boolean(value);
-                if (set && value.ahex === "") value.ahex = "00000000";
-                if (!set)
-                {
-                  if (name === undefined || name == null || name == '') name = 'all';
-                  if (r == null) return null;
-                  switch (name.toLowerCase())
-                  {
-                    case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
-                    case 'hex': return val('ahex').substring(0, 6);
-                    case 'all': return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') };
-                    default:
-                      var ret={};
-                      for (var i = 0; i < name.length; i++)
-                      {
-                        switch (name.charAt(i))
-                        {
-                          case 'r':
-                            if (name.length == 1) ret = r;
-                            else ret.r = r;
-                            break;
-                          case 'g':
-                            if (name.length == 1) ret = g;
-                            else ret.g = g;
-                            break;
-                          case 'b':
-                            if (name.length == 1) ret = b;
-                            else ret.b = b;
-                            break;
-                          case 'a':
-                            if (name.length == 1) ret = a;
-                            else ret.a = a;
-                            break;
-                          case 'h':
-                            if (name.length == 1) ret = h;
-                            else ret.h = h;
-                            break;
-                          case 's':
-                            if (name.length == 1) ret = s;
-                            else ret.s = s;
-                            break;
-                          case 'v':
-                            if (name.length == 1) ret = v;
-                            else ret.v = v;
-                            break;
-                        }
-                      }
-                      return ret == {} ? val.call($this, 'all') : ret;
-                      break;
-                  }
-                }
-                if (context != null && context == $this) return;
-                var changed = false;
-                if (name == null) name = '';
-                if (value == null)
-                {
-                  if (r != null)
-                  {
-                    r = null;
-                    changed = true;
-                  }
-                  if (g != null)
-                  {
-                    g = null;
-                    changed = true;
-                  }
-                  if (b != null)
-                  {
-                    b = null;
-                    changed = true;
-                  }
-                  if (a != null)
-                  {
-                    a = null;
-                    changed = true;
-                  }
-                  if (h != null)
-                  {
-                    h = null;
-                    changed = true;
-                  }
-                  if (s != null)
-                  {
-                    s = null;
-                    changed = true;
-                  }
-                  if (v != null)
-                  {
-                    v = null;
-                    changed = true;
-                  }
-                  changed && fireChangeEvents.call($this, context || $this);
-                  return;
-                }
-                switch (name.toLowerCase())
-                {
-                  case 'ahex':
-                  case 'hex':
-                    var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || 'none');
+	List: [], // array holding references to each active instance of the control
+	Color: // color object - we will be able to assign by any color space type or retrieve any color space info
+			// we want this public so we can optionally assign new color objects to initial values using inputs other than a string hex value (also supported)
+		function (init) {
+			var $this = this,
+				r,
+				g,
+				b,
+				a,
+				h,
+				s,
+				v,
+				changeEvents = [],
+				fireChangeEvents =
+					function (context) {
+						for (var i = 0; i < changeEvents.length; i++) changeEvents[i].call($this, $this, context);
+					},
+				val =
+					function (name, value, context) {
+						// Kind of ugly
+						var set = Boolean(value);
+						if (set && value.ahex === '') value.ahex = '00000000';
+						if (!set) {
+							if (name === undefined || name == null || name === '') name = 'all';
+							if (r == null) return null;
+							switch (name.toLowerCase()) {
+							case 'ahex': return ColorMethods.rgbaToHex({ r: r, g: g, b: b, a: a });
+							case 'hex': return val('ahex').substring(0, 6);
+							case 'all': return { r: r, g: g, b: b, a: a, h: h, s: s, v: v, hex: val.call($this, 'hex'), ahex: val.call($this, 'ahex') };
+							default:
+								var ret = {};
+								for (var i = 0; i < name.length; i++) {
+									switch (name.charAt(i)) {
+									case 'r':
+										if (name.length == 1) ret = r;
+										else ret.r = r;
+										break;
+									case 'g':
+										if (name.length == 1) ret = g;
+										else ret.g = g;
+										break;
+									case 'b':
+										if (name.length == 1) ret = b;
+										else ret.b = b;
+										break;
+									case 'a':
+										if (name.length == 1) ret = a;
+										else ret.a = a;
+										break;
+									case 'h':
+										if (name.length == 1) ret = h;
+										else ret.h = h;
+										break;
+									case 's':
+										if (name.length == 1) ret = s;
+										else ret.s = s;
+										break;
+									case 'v':
+										if (name.length == 1) ret = v;
+										else ret.v = v;
+										break;
+									}
+								}
+								return ret == {} ? val.call($this, 'all') : ret;
+							}
+						}
+						if (context != null && context === $this) return;
+						var changed = false;
+						if (name == null) name = '';
+						if (value == null) {
+							if (r != null) {
+								r = null;
+								changed = true;
+							}
+							if (g != null) {
+								g = null;
+								changed = true;
+							}
+							if (b != null) {
+								b = null;
+								changed = true;
+							}
+							if (a != null) {
+								a = null;
+								changed = true;
+							}
+							if (h != null) {
+								h = null;
+								changed = true;
+							}
+							if (s != null) {
+								s = null;
+								changed = true;
+							}
+							if (v != null) {
+								v = null;
+								changed = true;
+							}
+							changed && fireChangeEvents.call($this, context || $this);
+							return;
+						}
+						switch (name.toLowerCase()) {
+						case 'ahex':
+						case 'hex':
+							var ret = ColorMethods.hexToRgba(value && (value.ahex || value.hex) || value || 'none');
 
-                    val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context);
-                    break;
-                  default:
-                    if (value && (value.ahex != null || value.hex != null))
-                    {
-                      val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
-                      return;
-                    }
-                    var newV = {}, rgb = false, hsv = false;
-                    if (value.r !== undefined && !name.indexOf('r') == -1) name += 'r';
-                    if (value.g !== undefined && !name.indexOf('g') == -1) name += 'g';
-                    if (value.b !== undefined && !name.indexOf('b') == -1) name += 'b';
-                    if (value.a !== undefined && !name.indexOf('a') == -1) name += 'a';
-                    if (value.h !== undefined && !name.indexOf('h') == -1) name += 'h';
-                    if (value.s !== undefined && !name.indexOf('s') == -1) name += 's';
-                    if (value.v !== undefined && !name.indexOf('v') == -1) name += 'v';
-                    for (var i = 0; i < name.length; i++)
-                    {
-                      switch (name.charAt(i))
-                      {
-                        case 'r':
-                          if (hsv) continue;
-                          rgb = true;
-                          newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
-                          if (newV.r < 0) newV.r = 0;
-                          else if (newV.r > 255) newV.r = 255;
-                          if (r != newV.r)
-                          {
-                            r = newV.r;
-                            changed = true;
-                          }
-                          break;
-                        case 'g':
-                          if (hsv) continue;
-                          rgb = true;
-                          newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
-                          if (newV.g < 0) newV.g = 0;
-                          else if (newV.g > 255) newV.g = 255;
-                          if (g != newV.g)
-                          {
-                            g = newV.g;
-                            changed = true;
-                          }
-                          break;
-                        case 'b':
-                          if (hsv) continue;
-                          rgb = true;
-                          newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
-                          if (newV.b < 0) newV.b = 0;
-                          else if (newV.b > 255) newV.b = 255;
-                          if (b != newV.b)
-                          {
-                            b = newV.b;
-                            changed = true;
-                          }
-                          break;
-                        case 'a':
-                          newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
-                          if (newV.a < 0) newV.a = 0;
-                          else if (newV.a > 255) newV.a = 255;
-                          if (a != newV.a)
-                          {
-                            a = newV.a;
-                            changed = true;
-                          }
-                          break;
-                        case 'h':
-                          if (rgb) continue;
-                          hsv = true;
-                          newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
-                          if (newV.h < 0) newV.h = 0;
-                          else if (newV.h > 360) newV.h = 360;
-                          if (h != newV.h)
-                          {
-                            h = newV.h;
-                            changed = true;
-                          }
-                          break;
-                        case 's':
-                          if (rgb) continue;
-                          hsv = true;
-                          newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
-                          if (newV.s < 0) newV.s = 0;
-                          else if (newV.s > 100) newV.s = 100;
-                          if (s != newV.s)
-                          {
-                            s = newV.s;
-                            changed = true;
-                          }
-                          break;
-                        case 'v':
-                          if (rgb) continue;
-                          hsv = true;
-                          newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
-                          if (newV.v < 0) newV.v = 0;
-                          else if (newV.v > 100) newV.v = 100;
-                          if (v != newV.v)
-                          {
-                            v = newV.v;
-                            changed = true;
-                          }
-                          break;
-                      }
-                    }
-                    if (changed)
-                    {
-                      if (rgb)
-                      {
-                        r = r || 0;
-                        g = g || 0;
-                        b = b || 0;
-                        var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
-                        h = ret.h;
-                        s = ret.s;
-                        v = ret.v;
-                      }
-                      else if (hsv)
-                      {
-                        h = h || 0;
-                        s = s != null ? s : 100;
-                        v = v != null ? v : 100;
-                        var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
-                        r = ret.r;
-                        g = ret.g;
-                        b = ret.b;
-                      }
-                      a = a != null ? a : 255;
-                      fireChangeEvents.call($this, context || $this);
-                    }
-                    break;
-                }
-              },
-            bind =
-              function(callback)
-              {
-                if ($.isFunction(callback)) changeEvents.push(callback);
-              },
-            unbind =
-              function(callback)
-              {
-                if (!$.isFunction(callback)) return;
-                var i;
-                while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
-              },
-            destroy =
-              function()
-              {
-                changeEvents = null;
-              }
-          $.extend(true, $this, // public properties and methods
-            {
-              val: val,
-              bind: bind,
-              unbind: unbind,
-              destroy: destroy
-            });
-          if (init)
-          {
-            if (init.ahex != null) val('ahex', init);
-            else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
-            else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
-            else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
-          }
-        },
-      ColorMethods: // color conversion methods  - make public to give use to external scripts
-        {
-          hexToRgba:
-            function(hex)
-            {
-              if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null };
-              hex = this.validateHex(hex);
-              var r = '00', g = '00', b = '00', a = '255';
-              if (hex.length == 6) hex += 'ff';
-              if (hex.length > 6)
-              {
-                r = hex.substring(0, 2);
-                g = hex.substring(2, 4);
-                b = hex.substring(4, 6);
-                a = hex.substring(6, hex.length);
-              }
-              else
-              {
-                if (hex.length > 4)
-                {
-                  r = hex.substring(4, hex.length);
-                  hex = hex.substring(0, 4);
-                }
-                if (hex.length > 2)
-                {
-                  g = hex.substring(2, hex.length);
-                  hex = hex.substring(0, 2);
-                }
-                if (hex.length > 0) b = hex.substring(0, hex.length);
-              }
-              return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
-            },
-          validateHex:
-            function(hex)
-            {
-              //if (typeof hex === "object") return "";
-              hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
-              if (hex.length > 8) hex = hex.substring(0, 8);
-              return hex;
-            },
-          rgbaToHex:
-            function(rgba)
-            {
-              return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
-            },
-          intToHex:
-            function(dec)
-            {
-              var result = (dec | 0).toString(16);
-              if (result.length == 1) result = ('0' + result);
-              return result.toLowerCase();
-            },
-          hexToInt:
-            function(hex)
-            {
-              return parseInt(hex, 16);
-            },
-          rgbToHsv:
-            function(rgb)
-            {
-              var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }, min = 0, max = 0, delta;
-              if (r >= g && r >= b)
-              {
-                max = r;
-                min = g > b ? b : g;
-              }
-              else if (g >= b && g >= r)
-              {
-                max = g;
-                min = r > b ? b : r;
-              }
-              else
-              {
-                max = b;
-                min = g > r ? r : g;
-              }
-              hsv.v = max;
-              hsv.s = max ? (max - min) / max : 0;
-              if (!hsv.s) hsv.h = 0;
-              else
-              {
-                delta = max - min;
-                if (r == max) hsv.h = (g - b) / delta;
-                else if (g == max) hsv.h = 2 + (b - r) / delta;
-                else hsv.h = 4 + (r - g) / delta;
-                hsv.h = parseInt(hsv.h * 60);
-                if (hsv.h < 0) hsv.h += 360;
-              }
-              hsv.s = (hsv.s * 100) | 0;
-              hsv.v = (hsv.v * 100) | 0;
-              return hsv;
-            },
-          hsvToRgb:
-            function(hsv)
-            {
-              var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v;
-              if (s == 0)
-              {
-                if (v == 0) rgb.r = rgb.g = rgb.b = 0;
-                else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
-              }
-              else
-              {
-                if (h == 360) h = 0;
-                h /= 60;
-                s = s / 100;
-                v = v / 100;
-                var i = h | 0,
-                    f = h - i,
-                    p = v * (1 - s),
-                    q = v * (1 - (s * f)),
-                    t = v * (1 - (s * (1 - f)));
-                switch (i)
-                {
-                  case 0:
-                    rgb.r = v;
-                    rgb.g = t;
-                    rgb.b = p;
-                    break;
-                  case 1:
-                    rgb.r = q;
-                    rgb.g = v;
-                    rgb.b = p;
-                    break;
-                  case 2:
-                    rgb.r = p;
-                    rgb.g = v;
-                    rgb.b = t;
-                    break;
-                  case 3:
-                    rgb.r = p;
-                    rgb.g = q;
-                    rgb.b = v;
-                    break;
-                  case 4:
-                    rgb.r = t;
-                    rgb.g = p;
-                    rgb.b = v;
-                    break;
-                  case 5:
-                    rgb.r = v;
-                    rgb.g = p;
-                    rgb.b = q;
-                    break;
-                }
-                rgb.r = (rgb.r * 255) | 0;
-                rgb.g = (rgb.g * 255) | 0;
-                rgb.b = (rgb.b * 255) | 0;
-              }
-              return rgb;
-            }
-        }
-    };
-  var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
-  $.fn.jPicker =
-    function(options)
-    {
-      var $arguments = arguments;
-      return this.each(
-        function()
-        {
-          var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
-          if ($($this).get(0).nodeName.toLowerCase() == 'input') // Add color picker icon if binding to an input element and bind the events to the input
-          {
-            $.extend(true, settings,
-              {
-                window:
-                {
-                  bindToInput: true,
-                  expandable: true,
-                  input: $($this)
-                }
-              });
-            if($($this).val()=='')
-            {
-              settings.color.active = new Color({ hex: null });
-              settings.color.current = new Color({ hex: null });
-            }
-            else if (ColorMethods.validateHex($($this).val()))
-            {
-              settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
-              settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
-            }
-          }
-          if (settings.window.expandable)
-            $($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
-          else settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
-          var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
-            container = null,
-            colorMapDiv = null,
-            colorBarDiv = null,
-            colorMapL1 = null, // different layers of colorMap and colorBar
-            colorMapL2 = null,
-            colorMapL3 = null,
-            colorBarL1 = null,
-            colorBarL2 = null,
-            colorBarL3 = null,
-            colorBarL4 = null,
-            colorBarL5 = null,
-            colorBarL6 = null,
-            colorMap = null, // color maps
-            colorBar = null,
-            colorPicker = null,
-            elementStartX = null, // Used to record the starting css positions for dragging the control
-            elementStartY = null,
-            pageStartX = null, // Used to record the mousedown coordinates for dragging the control
-            pageStartY = null,
-            activePreview = null, // color boxes above the radio buttons
-            currentPreview = null,
-            okButton = null,
-            cancelButton = null,
-            grid = null, // preset colors grid
-            iconColor = null, // iconColor for popup icon
-            iconAlpha = null, // iconAlpha for popup icon
-            iconImage = null, // iconImage popup icon
-            moveBar = null, // drag bar
-            setColorMode = // set color mode and update visuals for the new color mode
-              function(colorMode)
-              {
-                var active = color.active, // local copies for YUI compressor
-                  clientPath = images.clientPath,
-                  hex = active.val('hex'),
-                  rgbMap,
-                  rgbBar;
-                settings.color.mode = colorMode;
-                switch (colorMode)
-                {
-                  case 'h':
-                    setTimeout(
-                      function()
-                      {
-                        setBG.call($this, colorMapDiv, 'transparent');
-                        setImgLoc.call($this, colorMapL1, 0);
-                        setAlpha.call($this, colorMapL1, 100);
-                        setImgLoc.call($this, colorMapL2, 260);
-                        setAlpha.call($this, colorMapL2, 100);
-                        setBG.call($this, colorBarDiv, 'transparent');
-                        setImgLoc.call($this, colorBarL1, 0);
-                        setAlpha.call($this, colorBarL1, 100);
-                        setImgLoc.call($this, colorBarL2, 260);
-                        setAlpha.call($this, colorBarL2, 100);
-                        setImgLoc.call($this, colorBarL3, 260);
-                        setAlpha.call($this, colorBarL3, 100);
-                        setImgLoc.call($this, colorBarL4, 260);
-                        setAlpha.call($this, colorBarL4, 100);
-                        setImgLoc.call($this, colorBarL6, 260);
-                        setAlpha.call($this, colorBarL6, 100);
-                      }, 0);
-                    colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 360 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
-                    colorBar.val('y', 360 - active.val('h'), colorBar);
-                    break;
-                  case 's':
-                    setTimeout(
-                      function()
-                      {
-                        setBG.call($this, colorMapDiv, 'transparent');
-                        setImgLoc.call($this, colorMapL1, -260);
-                        setImgLoc.call($this, colorMapL2, -520);
-                        setImgLoc.call($this, colorBarL1, -260);
-                        setImgLoc.call($this, colorBarL2, -520);
-                        setImgLoc.call($this, colorBarL6, 260);
-                        setAlpha.call($this, colorBarL6, 100);
-                      }, 0);
-                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 100 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
-                    colorBar.val('y', 100 - active.val('s'), colorBar);
-                    break;
-                  case 'v':
-                    setTimeout(
-                      function()
-                      {
-                        setBG.call($this, colorMapDiv, '000000');
-                        setImgLoc.call($this, colorMapL1, -780);
-                        setImgLoc.call($this, colorMapL2, 260);
-                        setBG.call($this, colorBarDiv, hex);
-                        setImgLoc.call($this, colorBarL1, -520);
-                        setImgLoc.call($this, colorBarL2, 260);
-                        setAlpha.call($this, colorBarL2, 100);
-                        setImgLoc.call($this, colorBarL6, 260);
-                        setAlpha.call($this, colorBarL6, 100);
-                      }, 0);
-                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 100 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
-                    colorBar.val('y', 100 - active.val('v'), colorBar);
-                    break;
-                  case 'r':
-                    rgbMap = -1040;
-                    rgbBar = -780;
-                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
-                    colorBar.val('y', 255 - active.val('r'), colorBar);
-                    break;
-                  case 'g':
-                    rgbMap = -1560;
-                    rgbBar = -1820;
-                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
-                    colorBar.val('y', 255 - active.val('g'), colorBar);
-                    break;
-                  case 'b':
-                    rgbMap = -2080;
-                    rgbBar = -2860;
-                    colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
-                    colorBar.val('y', 255 - active.val('b'), colorBar);
-                    break;
-                  case 'a':
-                    setTimeout(
-                      function()
-                      {
-                        setBG.call($this, colorMapDiv, 'transparent');
-                        setImgLoc.call($this, colorMapL1, -260);
-                        setImgLoc.call($this, colorMapL2, -520);
-                        setImgLoc.call($this, colorBarL1, 260);
-                        setImgLoc.call($this, colorBarL2, 260);
-                        setAlpha.call($this, colorBarL2, 100);
-                        setImgLoc.call($this, colorBarL6, 0);
-                        setAlpha.call($this, colorBarL6, 100);
-                      }, 0);
-                    colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
-                    colorBar.range('rangeY', { minY: 0, maxY: 255 });
-                    if (active.val('ahex') == null) break;
-                    colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
-                    colorBar.val('y', 255 - active.val('a'), colorBar);
-                    break;
-                  default:
-                    throw ('Invalid Mode');
-                    break;
-                }
-                switch (colorMode)
-                {
-                  case 'h':
-                    break;
-                  case 's':
-                  case 'v':
-                  case 'a':
-                    setTimeout(
-                      function()
-                      {
-                        setAlpha.call($this, colorMapL1, 100);
-                        setAlpha.call($this, colorBarL1, 100);
-                        setImgLoc.call($this, colorBarL3, 260);
-                        setAlpha.call($this, colorBarL3, 100);
-                        setImgLoc.call($this, colorBarL4, 260);
-                        setAlpha.call($this, colorBarL4, 100);
-                      }, 0);
-                    break;
-                  case 'r':
-                  case 'g':
-                  case 'b':
-                    setTimeout(
-                      function()
-                      {
-                        setBG.call($this, colorMapDiv, 'transparent');
-                        setBG.call($this, colorBarDiv, 'transparent');
-                        setAlpha.call($this, colorBarL1, 100);
-                        setAlpha.call($this, colorMapL1, 100);
-                        setImgLoc.call($this, colorMapL1, rgbMap);
-                        setImgLoc.call($this, colorMapL2, rgbMap - 260);
-                        setImgLoc.call($this, colorBarL1, rgbBar - 780);
-                        setImgLoc.call($this, colorBarL2, rgbBar - 520);
-                        setImgLoc.call($this, colorBarL3, rgbBar);
-                        setImgLoc.call($this, colorBarL4, rgbBar - 260);
-                        setImgLoc.call($this, colorBarL6, 260);
-                        setAlpha.call($this, colorBarL6, 100);
-                      }, 0);
-                    break;
-                }
-                if (active.val('ahex') == null) return;
-                activeColorChanged.call($this, active);
-              },
-            activeColorChanged = // Update color when user changes text values
-              function(ui, context)
-              {
-                if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
-                setTimeout(
-                  function()
-                  {
-                    updatePreview.call($this, ui);
-                    updateMapVisuals.call($this, ui);
-                    updateBarVisuals.call($this, ui);
-                  }, 0);
-              },
-            mapValueChanged = // user has dragged the ColorMap pointer
-              function(ui, context)
-              {
-                var active = color.active;
-                if (context != colorMap && active.val() == null) return;
-                var xy = ui.val('all');
-                switch (settings.color.mode)
-                {
-                  case 'h':
-                    active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
-                    break;
-                  case 's':
-                  case 'a':
-                    active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
-                    break;
-                  case 'v':
-                    active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
-                    break;
-                  case 'r':
-                    active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
-                    break;
-                  case 'g':
-                    active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
-                    break;
-                  case 'b':
-                    active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
-                    break;
-                }
-              },
-            colorBarValueChanged = // user has dragged the ColorBar slider
-              function(ui, context)
-              {
-                var active = color.active;
-                if (context != colorBar && active.val() == null) return;
-                switch (settings.color.mode)
-                {
-                  case 'h':
-                    active.val('h', { h: 360 - ui.val('y') }, context);
-                    break;
-                  case 's':
-                    active.val('s', { s: 100 - ui.val('y') }, context);
-                    break;
-                  case 'v':
-                    active.val('v', { v: 100 - ui.val('y') }, context);
-                    break;
-                  case 'r':
-                    active.val('r', { r: 255 - ui.val('y') }, context);
-                    break;
-                  case 'g':
-                    active.val('g', { g: 255 - ui.val('y') }, context);
-                    break;
-                  case 'b':
-                    active.val('b', { b: 255 - ui.val('y') }, context);
-                    break;
-                  case 'a':
-                    active.val('a', 255 - ui.val('y'), context);
-                    break;
-                }
-              },
-            positionMapAndBarArrows = // position map and bar arrows to match current color
-              function(ui, context)
-              {
-                if (context != colorMap)
-                {
-                  switch (settings.color.mode)
-                  {
-                    case 'h':
-                      var sv = ui.val('sv');
-                      colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
-                      break;
-                    case 's':
-                    case 'a':
-                      var hv = ui.val('hv');
-                      colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
-                      break;
-                    case 'v':
-                      var hs = ui.val('hs');
-                      colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
-                      break;
-                    case 'r':
-                      var bg = ui.val('bg');
-                      colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
-                      break;
-                    case 'g':
-                      var br = ui.val('br');
-                      colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
-                      break;
-                    case 'b':
-                      var rg = ui.val('rg');
-                      colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
-                      break;
-                  }
-                }
-                if (context != colorBar)
-                {
-                  switch (settings.color.mode)
-                  {
-                    case 'h':
-                      colorBar.val('y', 360 - (ui.val('h') || 0), context);
-                      break;
-                    case 's':
-                      var s = ui.val('s');
-                      colorBar.val('y', 100 - (s != null ? s : 100), context);
-                      break;
-                    case 'v':
-                      var v = ui.val('v');
-                      colorBar.val('y', 100 - (v != null ? v : 100), context);
-                      break;
-                    case 'r':
-                      colorBar.val('y', 255 - (ui.val('r') || 0), context);
-                      break;
-                    case 'g':
-                      colorBar.val('y', 255 - (ui.val('g') || 0), context);
-                      break;
-                    case 'b':
-                      colorBar.val('y', 255 - (ui.val('b') || 0), context);
-                      break;
-                    case 'a':
-                      var a = ui.val('a');
-                      colorBar.val('y', 255 - (a != null ? a : 255), context);
-                      break;
-                  }
-                }
-              },
-            updatePreview =
-              function(ui)
-              {
-                try
-                {
-                  var all = ui.val('all');
-                  activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
-                  setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
-                }
-                catch (e) { }
-              },
-            updateMapVisuals =
-              function(ui)
-              {
-                switch (settings.color.mode)
-                {
-                  case 'h':
-                    setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
-                    break;
-                  case 's':
-                  case 'a':
-                    var s = ui.val('s');
-                    setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
-                    break;
-                  case 'v':
-                    var v = ui.val('v');
-                    setAlpha.call($this, colorMapL1, v != null ? v : 100);
-                    break;
-                  case 'r':
-                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
-                    break;
-                  case 'g':
-                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
-                    break;
-                  case 'b':
-                    setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
-                    break;
-                }
-                var a = ui.val('a');
-                setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
-              },
-            updateBarVisuals =
-              function(ui)
-              {
-                switch (settings.color.mode)
-                {
-                  case 'h':
-                    var a = ui.val('a');
-                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
-                    break;
-                  case 's':
-                    var hva = ui.val('hva'),
-                        saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
-                    setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
-                    setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
-                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
-                    break;
-                  case 'v':
-                    var hsa = ui.val('hsa'),
-                        valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
-                    setBG.call($this, colorBarDiv, valueColor.val('hex'));
-                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
-                    break;
-                  case 'r':
-                  case 'g':
-                  case 'b':
-                    var hValue = 0, vValue = 0, rgba = ui.val('rgba');
-                    if (settings.color.mode == 'r')
-                    {
-                      hValue = rgba && rgba.b || 0;
-                      vValue = rgba && rgba.g || 0;
-                    }
-                    else if (settings.color.mode == 'g')
-                    {
-                      hValue = rgba && rgba.b || 0;
-                      vValue = rgba && rgba.r || 0;
-                    }
-                    else if (settings.color.mode == 'b')
-                    {
-                      hValue = rgba && rgba.r || 0;
-                      vValue = rgba && rgba.g || 0;
-                    }
-                    var middle = vValue > hValue ? hValue : vValue;
-                    setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
-                    setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
-                    setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
-                    setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
-                    break;
-                  case 'a':
-                    var a = ui.val('a');
-                    setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
-                    setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
-                    setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
-                    break;
-                }
-              },
-            setBG =
-              function(el, c)
-              {
-                el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' });
-              },
-            setImg =
-              function(img, src)
-              {
-                if (isLessThanIE7 && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
-                {
-                  img.attr('pngSrc', src);
-                  img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
-                }
-                else img.css({ backgroundImage: 'url(\'' + src + '\')' });
-              },
-            setImgLoc =
-              function(img, y)
-              {
-                img.css({ top: y + 'px' });
-              },
-            setAlpha =
-              function(obj, alpha)
-              {
-                obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
-                if (alpha > 0 && alpha < 100)
-                {
-                  if (isLessThanIE7)
-                  {
-                    var src = obj.attr('pngSrc');
-                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
-                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
-                    else obj.css({ opacity: Math.precision(alpha / 100, 4) });
-                  }
-                  else obj.css({ opacity: Math.precision(alpha / 100, 4) });
-                }
-                else if (alpha == 0 || alpha == 100)
-                {
-                  if (isLessThanIE7)
-                  {
-                    var src = obj.attr('pngSrc');
-                    if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
-                      obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
-                    else obj.css({ opacity: '' });
-                  }
-                  else obj.css({ opacity: '' });
-                }
-              },
-            revertColor = // revert color to original color when opened
-              function()
-              {
-                color.active.val('ahex', color.current.val('ahex'));
-              },
-            commitColor = // commit the color changes
-              function()
-              {
-                color.current.val('ahex', color.active.val('ahex'));
-              },
-            radioClicked =
-              function(e)
-              {
-                $(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
-                setColorMode.call($this, e.target.value);
-              },
-            currentClicked =
-              function()
-              {
-                revertColor.call($this);
-              },
-            cancelClicked =
-              function()
-              {
-                revertColor.call($this);
-                settings.window.expandable && hide.call($this);
-                $.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
-              },
-            okClicked =
-              function()
-              {
-                commitColor.call($this);
-                settings.window.expandable && hide.call($this);
-                $.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
-              },
-            iconImageClicked =
-              function()
-              {
-                show.call($this);
-              },
-            currentColorChanged =
-              function(ui, context)
-              {
-                var hex = ui.val('hex');
-                currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
-                setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
-              },
-            expandableColorChanged =
-              function(ui, context)
-              {
-                var hex = ui.val('hex');
-                var va = ui.val('va');
-                iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
-                setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
-                if (settings.window.bindToInput&&settings.window.updateInputColor)
-                  settings.window.input.css(
-                    {
-                      backgroundColor: hex && '#' + hex || 'transparent',
-                      color: va == null || va.v > 75 ? '#000000' : '#ffffff'
-                    });
-              },
-            moveBarMouseDown =
-              function(e)
-              {
-                var element = settings.window.element, // local copies for YUI compressor
-                  page = settings.window.page;
-                elementStartX = parseInt(container.css('left'));
-                elementStartY = parseInt(container.css('top'));
-                pageStartX = e.pageX;
-                pageStartY = e.pageY;
-                // bind events to document to move window - we will unbind these on mouseup
-                $(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
-                e.preventDefault(); // prevent attempted dragging of the column
-              },
-            documentMouseMove =
-              function(e)
-              {
-                container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
-                if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
-                e.stopPropagation();
-                e.preventDefault();
-                return false;
-              },
-            documentMouseUp =
-              function(e)
-              {
-                $(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
-                e.stopPropagation();
-                e.preventDefault();
-                return false;
-              },
-            quickPickClicked =
-              function(e)
-              {
-                e.preventDefault();
-                e.stopPropagation();
-                color.active.val('ahex', $(this).attr('title') || null, e.target);
-                return false;
-              },
-            commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
-            liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
-            cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
-            show =
-              function()
-              {
-                color.current.val('ahex', color.active.val('ahex'));
-                var attachIFrame = function()
-                  {
-                    if (!settings.window.expandable || $.support.boxModel) return;
-                    var table = container.find('table:first');
-                    container.before('<iframe/>');
-                    container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
-                  };
-                if (settings.window.expandable)
-                {
-                  $(document.body).children('div.jPicker.Container').css({zIndex:10});
-                  container.css({zIndex:20});
-                }
-                switch (settings.window.effects.type)
-                {
-                  case 'fade':
-                    container.fadeIn(settings.window.effects.speed.show, attachIFrame);
-                    break;
-                  case 'slide':
-                    container.slideDown(settings.window.effects.speed.show, attachIFrame);
-                    break;
-                  case 'show':
-                  default:
-                    container.show(settings.window.effects.speed.show, attachIFrame);
-                    break;
-                }
-              },
-            hide =
-              function()
-              {
-                var removeIFrame = function()
-                  {
-                    if (settings.window.expandable) container.css({ zIndex: 10 });
-                    if (!settings.window.expandable || $.support.boxModel) return;
-                    container.prev().remove();
-                  };
-                switch (settings.window.effects.type)
-                {
-                  case 'fade':
-                    container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
-                    break;
-                  case 'slide':
-                    container.slideUp(settings.window.effects.speed.hide, removeIFrame);
-                    break;
-                  case 'show':
-                  default:
-                    container.hide(settings.window.effects.speed.hide, removeIFrame);
-                    break;
-                }
-              },
-            initialize =
-              function()
-              {
-                var win = settings.window,
-                    popup = win.expandable ? $($this).next().find('.Container:first') : null;
-                container = win.expandable ? $('<div/>') : $($this);
-                container.addClass('jPicker Container');
-                if (win.expandable) container.hide();
-                container.get(0).onselectstart = function(event){ if (event.target.nodeName.toLowerCase() !== 'input') return false; };
-                // inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
-                // this control really is tabular data, so I believe it is the right move
-                var all = color.active.val('all');
-                if (win.alphaPrecision < 0) win.alphaPrecision = 0;
-                else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
-                var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
-                if (win.expandable)
-                {
-                  container.html(controlHtml);
-                  if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
-                  else $(document.body).children('div.jPicker.Container:last').after(container);
-                  container.mousedown(
-                    function()
-                    {
-                      $(document.body).children('div.jPicker.Container').css({zIndex:10});
-                      container.css({zIndex:20});
-                    });
-                  container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
-                    {
-                      left:
-                        win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
-                        win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
-                        win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
-                        win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
-                      position: 'absolute',
-                      top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
-                           win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
-                           win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
-                    });
-                }
-                else
-                {
-                  container = $($this);
-                  container.html(controlHtml);
-                }
-                // initialize the objects to the source code just injected
-                var tbody = container.find('tbody:first');
-                colorMapDiv = tbody.find('div.Map:first');
-                colorBarDiv = tbody.find('div.Bar:first');
-                var MapMaps = colorMapDiv.find('span'),
-                    BarMaps = colorBarDiv.find('span');
-                colorMapL1 = MapMaps.filter('.Map1:first');
-                colorMapL2 = MapMaps.filter('.Map2:first');
-                colorMapL3 = MapMaps.filter('.Map3:first');
-                colorBarL1 = BarMaps.filter('.Map1:first');
-                colorBarL2 = BarMaps.filter('.Map2:first');
-                colorBarL3 = BarMaps.filter('.Map3:first');
-                colorBarL4 = BarMaps.filter('.Map4:first');
-                colorBarL5 = BarMaps.filter('.Map5:first');
-                colorBarL6 = BarMaps.filter('.Map6:first');
-                // create color pickers and maps
-                colorMap = new Slider(colorMapDiv,
-                  {
-                    map:
-                    {
-                      width: images.colorMap.width,
-                      height: images.colorMap.height
-                    },
-                    arrow:
-                    {
-                      image: images.clientPath + images.colorMap.arrow.file,
-                      width: images.colorMap.arrow.width,
-                      height: images.colorMap.arrow.height
-                    }
-                  });
-                colorMap.bind(mapValueChanged);
-                colorBar = new Slider(colorBarDiv,
-                  {
-                    map:
-                    {
-                      width: images.colorBar.width,
-                      height: images.colorBar.height
-                    },
-                    arrow:
-                    {
-                      image: images.clientPath + images.colorBar.arrow.file,
-                      width: images.colorBar.arrow.width,
-                      height: images.colorBar.arrow.height
-                    }
-                  });
-                colorBar.bind(colorBarValueChanged);
-                colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
-                var hex = all != null ? all.hex : null,
-                    preview = tbody.find('.Preview'),
-                    button = tbody.find('.Button');
-                activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
-                currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
-                setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
-                okButton = button.find('.Ok:first').bind('click', okClicked);
-                cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
-                grid = button.find('.Grid:first');
-                setTimeout(
-                  function()
-                  {
-                    setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
-                    setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
-                    setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
-                    setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
-                    setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
-                    setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
-                    setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
-                    setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
-                    setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
-                    setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
-                  }, 0);
-                tbody.find('td.Radio input').bind('click', radioClicked);
-                // initialize quick list
-                if (color.quickList && color.quickList.length > 0)
-                {
-                  var html = '';
-                  for (i = 0; i < color.quickList.length; i++)
-                  {
-                    /* if default colors are hex strings, change them to color objects */
-                    if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
-                    var alpha = color.quickList[i].val('a');
-                    var ahex = color.quickList[i].val('ahex');
-                    if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
-                    var quickHex = color.quickList[i].val('hex');
-                    if(!ahex) ahex = "00000000";
-                    html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || 'none') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
-                  }
-                  setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
-                  grid.html(html);
-                  grid.find('.QuickColor').click(quickPickClicked);
-                }
-                setColorMode.call($this, settings.color.mode);
-                color.active.bind(activeColorChanged);
-                $.isFunction(liveCallback) && color.active.bind(liveCallback);
-                color.current.bind(currentColorChanged);
-                // bind to input
-                if (win.expandable)
-                {
-                  $this.icon = popup.parents('.Icon:first');
-                  iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
-                  iconAlpha = $this.icon.find('.Alpha:first');
-                  setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
-                  setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
-                  iconImage = $this.icon.find('.Image:first').css(
-                    {
-                      backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
-                    }).bind('click', iconImageClicked);
-                  if (win.bindToInput&&win.updateInputColor)
-                    win.input.css(
-                      {
-                        backgroundColor: hex && '#' + hex || 'transparent',
-                        color: all == null || all.v > 75 ? '#000000' : '#ffffff'
-                      });
-                  moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
-                  color.active.bind(expandableColorChanged);
-                }
-                else show.call($this);
-              },
-            destroy =
-              function()
-              {
-                container.find('td.Radio input').unbind('click', radioClicked);
-                currentPreview.unbind('click', currentClicked);
-                cancelButton.unbind('click', cancelClicked);
-                okButton.unbind('click', okClicked);
-                if (settings.window.expandable)
-                {
-                  iconImage.unbind('click', iconImageClicked);
-                  moveBar.unbind('mousedown', moveBarMouseDown);
-                  $this.icon = null;
-                }
-                container.find('.QuickColor').unbind('click', quickPickClicked);
-                colorMapDiv = null;
-                colorBarDiv = null;
-                colorMapL1 = null;
-                colorMapL2 = null;
-                colorMapL3 = null;
-                colorBarL1 = null;
-                colorBarL2 = null;
-                colorBarL3 = null;
-                colorBarL4 = null;
-                colorBarL5 = null;
-                colorBarL6 = null;
-                colorMap.destroy();
-                colorMap = null;
-                colorBar.destroy();
-                colorBar = null;
-                colorPicker.destroy();
-                colorPicker = null;
-                activePreview = null;
-                currentPreview = null;
-                okButton = null;
-                cancelButton = null;
-                grid = null;
-                commitCallback = null;
-                cancelCallback = null;
-                liveCallback = null;
-                container.html('');
-                for (i = 0; i < List.length; i++) if (List[i] == $this) List.splice(i, 1);
-              },
-            images = settings.images, // local copies for YUI compressor
-            localization = settings.localization,
-            color =
-              {
-                active: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
-                current: (typeof(settings.color.active)).toString().toLowerCase() == 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
-                quickList: settings.color.quickList
-              };
-          $.extend(true, $this, // public properties, methods, and callbacks
-            {
-              commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
-              liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
-              cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
-              color: color,
-              show: show,
-              hide: hide,
-              destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
-            });
-          List.push($this);
-          setTimeout(
-            function()
-            {
-              initialize.call($this);
-            }, 0);
-        });
-    };
-  $.fn.jPicker.defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
-      {
-      window:
-        {
-          title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
-          effects:
-          {
-            type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
-            speed:
-            {
-              show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
-              hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
-            }
-          },
-          position:
-          {
-            x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
-            y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
-          },
-          expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
-          liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
-          alphaSupport: false, /* set to true to enable alpha picking */
-          alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
-          updateInputColor: true /* set to false to prevent binded input colors from changing */
-        },
-      color:
-        {
-          mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
-          active: new Color({ ahex: '#ffcc00ff' }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
-          quickList: /* the quick pick color list */
-            [
-              new Color({ h: 360, s: 33, v: 100 }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
-              new Color({ h: 360, s: 66, v: 100 }),
-              new Color({ h: 360, s: 100, v: 100 }),
-              new Color({ h: 360, s: 100, v: 75 }),
-              new Color({ h: 360, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 100 }),
-              new Color({ h: 30, s: 33, v: 100 }),
-              new Color({ h: 30, s: 66, v: 100 }),
-              new Color({ h: 30, s: 100, v: 100 }),
-              new Color({ h: 30, s: 100, v: 75 }),
-              new Color({ h: 30, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 90 }),
-              new Color({ h: 60, s: 33, v: 100 }),
-              new Color({ h: 60, s: 66, v: 100 }),
-              new Color({ h: 60, s: 100, v: 100 }),
-              new Color({ h: 60, s: 100, v: 75 }),
-              new Color({ h: 60, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 80 }),
-              new Color({ h: 90, s: 33, v: 100 }),
-              new Color({ h: 90, s: 66, v: 100 }),
-              new Color({ h: 90, s: 100, v: 100 }),
-              new Color({ h: 90, s: 100, v: 75 }),
-              new Color({ h: 90, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 70 }),
-              new Color({ h: 120, s: 33, v: 100 }),
-              new Color({ h: 120, s: 66, v: 100 }),
-              new Color({ h: 120, s: 100, v: 100 }),
-              new Color({ h: 120, s: 100, v: 75 }),
-              new Color({ h: 120, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 60 }),
-              new Color({ h: 150, s: 33, v: 100 }),
-              new Color({ h: 150, s: 66, v: 100 }),
-              new Color({ h: 150, s: 100, v: 100 }),
-              new Color({ h: 150, s: 100, v: 75 }),
-              new Color({ h: 150, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 50 }),
-              new Color({ h: 180, s: 33, v: 100 }),
-              new Color({ h: 180, s: 66, v: 100 }),
-              new Color({ h: 180, s: 100, v: 100 }),
-              new Color({ h: 180, s: 100, v: 75 }),
-              new Color({ h: 180, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 40 }),
-              new Color({ h: 210, s: 33, v: 100 }),
-              new Color({ h: 210, s: 66, v: 100 }),
-              new Color({ h: 210, s: 100, v: 100 }),
-              new Color({ h: 210, s: 100, v: 75 }),
-              new Color({ h: 210, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 30 }),
-              new Color({ h: 240, s: 33, v: 100 }),
-              new Color({ h: 240, s: 66, v: 100 }),
-              new Color({ h: 240, s: 100, v: 100 }),
-              new Color({ h: 240, s: 100, v: 75 }),
-              new Color({ h: 240, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 20 }),
-              new Color({ h: 270, s: 33, v: 100 }),
-              new Color({ h: 270, s: 66, v: 100 }),
-              new Color({ h: 270, s: 100, v: 100 }),
-              new Color({ h: 270, s: 100, v: 75 }),
-              new Color({ h: 270, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 10 }),
-              new Color({ h: 300, s: 33, v: 100 }),
-              new Color({ h: 300, s: 66, v: 100 }),
-              new Color({ h: 300, s: 100, v: 100 }),
-              new Color({ h: 300, s: 100, v: 75 }),
-              new Color({ h: 300, s: 100, v: 50 }),
-              new Color({ h: 180, s: 0, v: 0 }),
-              new Color({ h: 330, s: 33, v: 100 }),
-              new Color({ h: 330, s: 66, v: 100 }),
-              new Color({ h: 330, s: 100, v: 100 }),
-              new Color({ h: 330, s: 100, v: 75 }),
-              new Color({ h: 330, s: 100, v: 50 }),
-              new Color()
-            ]
-        },
-      images:
-        {
-          clientPath: '/jPicker/images/', /* Path to image files */
-          colorMap:
-          {
-            width: 256,
-            height: 256,
-            arrow:
-            {
-              file: 'mappoint.gif', /* ColorMap arrow icon */
-              width: 15,
-              height: 15
-            }
-          },
-          colorBar:
-          {
-            width: 20,
-            height: 256,
-            arrow:
-            {
-              file: 'rangearrows.gif', /* ColorBar arrow icon */
-              width: 20,
-              height: 7
-            }
-          },
-          picker:
-          {
-            file: 'picker.gif', /* Color Picker icon */
-            width: 25,
-            height: 24
-          }
-        },
-      localization: /* alter these to change the text presented by the picker (e.g. different language) */
-        {
-          text:
-          {
-            title: 'Drag Markers To Pick A Color',
-            newColor: 'new',
-            currentColor: 'current',
-            ok: 'OK',
-            cancel: 'Cancel'
-          },
-          tooltips:
-          {
-            colors:
-            {
-              newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
-              currentColor: 'Click To Revert To Original Color'
-            },
-            buttons:
-            {
-              ok: 'Commit To This Color Selection',
-              cancel: 'Cancel And Revert To Original Color'
-            },
-            hue:
-            {
-              radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
-            },
-            saturation:
-            {
-              radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
-            },
-            value:
-            {
-              radio: 'Set To &ldquo;Value&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
-            },
-            red:
-            {
-              radio: 'Set To &ldquo;Red&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
-            },
-            green:
-            {
-              radio: 'Set To &ldquo;Green&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
-            },
-            blue:
-            {
-              radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
-            },
-            alpha:
-            {
-              radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
-              textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
-            },
-            hex:
-            {
-              textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
-              alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
-            }
-          }
-        }
-    };
-})(jQuery, '1.1.6');
\ No newline at end of file
+							val.call($this, 'rgba', { r: ret.r, g: ret.g, b: ret.b, a: name == 'ahex' ? ret.a : a != null ? a : 255 }, context);
+							break;
+						default:
+							if (value && (value.ahex != null || value.hex != null))
+							{
+								val.call($this, 'ahex', value.ahex || value.hex || '00000000', context);
+								return;
+							}
+							var newV = {}, rgb = false, hsv = false;
+							if (value.r !== undefined && !name.indexOf('r') === -1) name += 'r';
+							if (value.g !== undefined && !name.indexOf('g') === -1) name += 'g';
+							if (value.b !== undefined && !name.indexOf('b') === -1) name += 'b';
+							if (value.a !== undefined && !name.indexOf('a') === -1) name += 'a';
+							if (value.h !== undefined && !name.indexOf('h') === -1) name += 'h';
+							if (value.s !== undefined && !name.indexOf('s') === -1) name += 's';
+							if (value.v !== undefined && !name.indexOf('v') === -1) name += 'v';
+							for (var i = 0; i < name.length; i++) {
+								switch (name.charAt(i)) {
+								case 'r':
+									if (hsv) continue;
+									rgb = true;
+									newV.r = value && value.r && value.r | 0 || value && value | 0 || 0;
+									if (newV.r < 0) newV.r = 0;
+									else if (newV.r > 255) newV.r = 255;
+									if (r !== newV.r) {
+										r = newV.r;
+										changed = true;
+									}
+									break;
+								case 'g':
+									if (hsv) continue;
+									rgb = true;
+									newV.g = value && value.g && value.g | 0 || value && value | 0 || 0;
+									if (newV.g < 0) newV.g = 0;
+									else if (newV.g > 255) newV.g = 255;
+									if (g !== newV.g) {
+										g = newV.g;
+										changed = true;
+									}
+									break;
+								case 'b':
+									if (hsv) continue;
+									rgb = true;
+									newV.b = value && value.b && value.b | 0 || value && value | 0 || 0;
+									if (newV.b < 0) newV.b = 0;
+									else if (newV.b > 255) newV.b = 255;
+									if (b != newV.b)
+									{
+										b = newV.b;
+										changed = true;
+									}
+									break;
+								case 'a':
+									newV.a = value && value.a != null ? value.a | 0 : value != null ? value | 0 : 255;
+									if (newV.a < 0) newV.a = 0;
+									else if (newV.a > 255) newV.a = 255;
+									if (a != newV.a)
+									{
+										a = newV.a;
+										changed = true;
+									}
+									break;
+								case 'h':
+									if (rgb) continue;
+									hsv = true;
+									newV.h = value && value.h && value.h | 0 || value && value | 0 || 0;
+									if (newV.h < 0) newV.h = 0;
+									else if (newV.h > 360) newV.h = 360;
+									if (h != newV.h)
+									{
+										h = newV.h;
+										changed = true;
+									}
+									break;
+								case 's':
+									if (rgb) continue;
+									hsv = true;
+									newV.s = value && value.s != null ? value.s | 0 : value != null ? value | 0 : 100;
+									if (newV.s < 0) newV.s = 0;
+									else if (newV.s > 100) newV.s = 100;
+									if (s != newV.s)
+									{
+										s = newV.s;
+										changed = true;
+									}
+									break;
+								case 'v':
+									if (rgb) continue;
+									hsv = true;
+									newV.v = value && value.v != null ? value.v | 0 : value != null ? value | 0 : 100;
+									if (newV.v < 0) newV.v = 0;
+									else if (newV.v > 100) newV.v = 100;
+									if (v != newV.v)
+									{
+										v = newV.v;
+										changed = true;
+									}
+									break;
+								}
+							}
+							if (changed) {
+								if (rgb) {
+									r = r || 0;
+									g = g || 0;
+									b = b || 0;
+									var ret = ColorMethods.rgbToHsv({ r: r, g: g, b: b });
+									h = ret.h;
+									s = ret.s;
+									v = ret.v;
+								} else if (hsv) {
+									h = h || 0;
+									s = s != null ? s : 100;
+									v = v != null ? v : 100;
+									var ret = ColorMethods.hsvToRgb({ h: h, s: s, v: v });
+									r = ret.r;
+									g = ret.g;
+									b = ret.b;
+								}
+								a = a != null ? a : 255;
+								fireChangeEvents.call($this, context || $this);
+							}
+							break;
+						}
+					},
+				bind =
+					function (callback) {
+						if ($.isFunction(callback)) changeEvents.push(callback);
+					},
+				unbind =
+					function (callback) {
+						if (!$.isFunction(callback)) return;
+						var i;
+						while ((i = $.inArray(callback, changeEvents)) != -1) changeEvents.splice(i, 1);
+					},
+				destroy =
+					function () {
+						changeEvents = null;
+					}
+			$.extend(true, $this, // public properties and methods
+				{
+					val: val,
+					bind: bind,
+					unbind: unbind,
+					destroy: destroy
+				});
+			if (init) {
+				if (init.ahex != null) val('ahex', init);
+				else if (init.hex != null) val((init.a != null ? 'a' : '') + 'hex', init.a != null ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init);
+				else if (init.r != null && init.g != null && init.b != null) val('rgb' + (init.a != null ? 'a' : ''), init);
+				else if (init.h != null && init.s != null && init.v != null) val('hsv' + (init.a != null ? 'a' : ''), init);
+			}
+		},
+	ColorMethods: // color conversion methods	- make public to give use to external scripts
+		{
+			hexToRgba:
+				function(hex)
+				{
+					if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null };
+					hex = this.validateHex(hex);
+					var r = '00', g = '00', b = '00', a = '255';
+					if (hex.length == 6) hex += 'ff';
+					if (hex.length > 6)
+					{
+						r = hex.substring(0, 2);
+						g = hex.substring(2, 4);
+						b = hex.substring(4, 6);
+						a = hex.substring(6, hex.length);
+					}
+					else
+					{
+						if (hex.length > 4)
+						{
+							r = hex.substring(4, hex.length);
+							hex = hex.substring(0, 4);
+						}
+						if (hex.length > 2)
+						{
+							g = hex.substring(2, hex.length);
+							hex = hex.substring(0, 2);
+						}
+						if (hex.length > 0) b = hex.substring(0, hex.length);
+					}
+					return { r: this.hexToInt(r), g: this.hexToInt(g), b: this.hexToInt(b), a: this.hexToInt(a) };
+				},
+			validateHex:
+				function(hex)
+				{
+					//if (typeof hex === "object") return "";
+					hex = hex.toLowerCase().replace(/[^a-f0-9]/g, '');
+					if (hex.length > 8) hex = hex.substring(0, 8);
+					return hex;
+				},
+			rgbaToHex:
+				function (rgba) {
+					return this.intToHex(rgba.r) + this.intToHex(rgba.g) + this.intToHex(rgba.b) + this.intToHex(rgba.a);
+				},
+			intToHex:
+				function (dec) {
+					var result = (dec | 0).toString(16);
+					if (result.length === 1) result = ('0' + result);
+					return result.toLowerCase();
+				},
+			hexToInt:
+				function (hex) {
+					return parseInt(hex, 16);
+				},
+			rgbToHsv:
+				function (rgb) {
+					var r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }, min = 0, max = 0, delta;
+					if (r >= g && r >= b) {
+						max = r;
+						min = g > b ? b : g;
+					} else if (g >= b && g >= r) {
+						max = g;
+						min = r > b ? b : r;
+					} else {
+						max = b;
+						min = g > r ? r : g;
+					}
+					hsv.v = max;
+					hsv.s = max ? (max - min) / max : 0;
+					if (!hsv.s) hsv.h = 0;
+					else {
+						delta = max - min;
+						if (r == max) hsv.h = (g - b) / delta;
+						else if (g == max) hsv.h = 2 + (b - r) / delta;
+						else hsv.h = 4 + (r - g) / delta;
+						hsv.h = parseInt(hsv.h * 60);
+						if (hsv.h < 0) hsv.h += 360;
+					}
+					hsv.s = (hsv.s * 100) | 0;
+					hsv.v = (hsv.v * 100) | 0;
+					return hsv;
+				},
+			hsvToRgb:
+				function (hsv) {
+					var rgb = { r: 0, g: 0, b: 0, a: 100 }, h = hsv.h, s = hsv.s, v = hsv.v;
+					if (s === 0) {
+						if (v === 0) rgb.r = rgb.g = rgb.b = 0;
+						else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0;
+					} else {
+						if (h == 360) h = 0;
+						h /= 60;
+						s = s / 100;
+						v = v / 100;
+						var i = h | 0,
+							f = h - i,
+							p = v * (1 - s),
+							q = v * (1 - (s * f)),
+							t = v * (1 - (s * (1 - f)));
+						switch (i) {
+						case 0:
+							rgb.r = v;
+							rgb.g = t;
+							rgb.b = p;
+							break;
+						case 1:
+							rgb.r = q;
+							rgb.g = v;
+							rgb.b = p;
+							break;
+						case 2:
+							rgb.r = p;
+							rgb.g = v;
+							rgb.b = t;
+							break;
+						case 3:
+							rgb.r = p;
+							rgb.g = q;
+							rgb.b = v;
+							break;
+						case 4:
+							rgb.r = t;
+							rgb.g = p;
+							rgb.b = v;
+							break;
+						case 5:
+							rgb.r = v;
+							rgb.g = p;
+							rgb.b = q;
+							break;
+						}
+						rgb.r = (rgb.r * 255) | 0;
+						rgb.g = (rgb.g * 255) | 0;
+						rgb.b = (rgb.b * 255) | 0;
+					}
+					return rgb;
+				}
+		}
+};
+var Color = $.jPicker.Color, List = $.jPicker.List, ColorMethods = $.jPicker.ColorMethods; // local copies for YUI compressor
+$.fn.jPicker =
+function(options)
+{
+	var $arguments = arguments;
+	return this.each(
+		function () {
+			var $this = this, settings = $.extend(true, {}, $.fn.jPicker.defaults, options); // local copies for YUI compressor
+			if ($($this).get(0).nodeName.toLowerCase() == 'input') { // Add color picker icon if binding to an input element and bind the events to the input
+				$.extend(true, settings,
+					{
+						window:
+						{
+							bindToInput: true,
+							expandable: true,
+							input: $($this)
+						}
+					});
+				if ($($this).val() === '') {
+					settings.color.active = new Color({ hex: null });
+					settings.color.current = new Color({ hex: null });
+				} else if (ColorMethods.validateHex($($this).val())) {
+					settings.color.active = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+					settings.color.current = new Color({ hex: $($this).val(), a: settings.color.active.val('a') });
+				}
+			}
+			if (settings.window.expandable) {
+				$($this).after('<span class="jPicker"><span class="Icon"><span class="Color">&nbsp;</span><span class="Alpha">&nbsp;</span><span class="Image" title="Click To Open Color Picker">&nbsp;</span><span class="Container">&nbsp;</span></span></span>');
+			} else {
+				settings.window.liveUpdate = false; // Basic control binding for inline use - You will need to override the liveCallback or commitCallback function to retrieve results
+			}
+			var isLessThanIE7 = parseFloat(navigator.appVersion.split('MSIE')[1]) < 7 && document.body.filters, // needed to run the AlphaImageLoader function for IE6
+				container = null,
+				colorMapDiv = null,
+				colorBarDiv = null,
+				colorMapL1 = null, // different layers of colorMap and colorBar
+				colorMapL2 = null,
+				colorMapL3 = null,
+				colorBarL1 = null,
+				colorBarL2 = null,
+				colorBarL3 = null,
+				colorBarL4 = null,
+				colorBarL5 = null,
+				colorBarL6 = null,
+				colorMap = null, // color maps
+				colorBar = null,
+				colorPicker = null,
+				elementStartX = null, // Used to record the starting css positions for dragging the control
+				elementStartY = null,
+				pageStartX = null, // Used to record the mousedown coordinates for dragging the control
+				pageStartY = null,
+				activePreview = null, // color boxes above the radio buttons
+				currentPreview = null,
+				okButton = null,
+				cancelButton = null,
+				grid = null, // preset colors grid
+				iconColor = null, // iconColor for popup icon
+				iconAlpha = null, // iconAlpha for popup icon
+				iconImage = null, // iconImage popup icon
+				moveBar = null, // drag bar
+				setColorMode = // set color mode and update visuals for the new color mode
+					function (colorMode) {
+						var active = color.active, // local copies for YUI compressor
+							clientPath = images.clientPath,
+							hex = active.val('hex'),
+							rgbMap,
+							rgbBar;
+						settings.color.mode = colorMode;
+						switch (colorMode) {
+						case 'h':
+							setTimeout(
+								function()
+								{
+									setBG.call($this, colorMapDiv, 'transparent');
+									setImgLoc.call($this, colorMapL1, 0);
+									setAlpha.call($this, colorMapL1, 100);
+									setImgLoc.call($this, colorMapL2, 260);
+									setAlpha.call($this, colorMapL2, 100);
+									setBG.call($this, colorBarDiv, 'transparent');
+									setImgLoc.call($this, colorBarL1, 0);
+									setAlpha.call($this, colorBarL1, 100);
+									setImgLoc.call($this, colorBarL2, 260);
+									setAlpha.call($this, colorBarL2, 100);
+									setImgLoc.call($this, colorBarL3, 260);
+									setAlpha.call($this, colorBarL3, 100);
+									setImgLoc.call($this, colorBarL4, 260);
+									setAlpha.call($this, colorBarL4, 100);
+									setImgLoc.call($this, colorBarL6, 260);
+									setAlpha.call($this, colorBarL6, 100);
+								}, 0);
+							colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 });
+							colorBar.range('rangeY', { minY: 0, maxY: 360 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap);
+							colorBar.val('y', 360 - active.val('h'), colorBar);
+							break;
+						case 's':
+							setTimeout(
+								function()
+								{
+									setBG.call($this, colorMapDiv, 'transparent');
+									setImgLoc.call($this, colorMapL1, -260);
+									setImgLoc.call($this, colorMapL2, -520);
+									setImgLoc.call($this, colorBarL1, -260);
+									setImgLoc.call($this, colorBarL2, -520);
+									setImgLoc.call($this, colorBarL6, 260);
+									setAlpha.call($this, colorBarL6, 100);
+								}, 0);
+							colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+							colorBar.range('rangeY', { minY: 0, maxY: 100 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
+							colorBar.val('y', 100 - active.val('s'), colorBar);
+							break;
+						case 'v':
+							setTimeout(
+								function()
+								{
+									setBG.call($this, colorMapDiv, '000000');
+									setImgLoc.call($this, colorMapL1, -780);
+									setImgLoc.call($this, colorMapL2, 260);
+									setBG.call($this, colorBarDiv, hex);
+									setImgLoc.call($this, colorBarL1, -520);
+									setImgLoc.call($this, colorBarL2, 260);
+									setAlpha.call($this, colorBarL2, 100);
+									setImgLoc.call($this, colorBarL6, 260);
+									setAlpha.call($this, colorBarL6, 100);
+								}, 0);
+							colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+							colorBar.range('rangeY', { minY: 0, maxY: 100 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap);
+							colorBar.val('y', 100 - active.val('v'), colorBar);
+							break;
+						case 'r':
+							rgbMap = -1040;
+							rgbBar = -780;
+							colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+							colorBar.range('rangeY', { minY: 0, maxY: 255 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap);
+							colorBar.val('y', 255 - active.val('r'), colorBar);
+							break;
+						case 'g':
+							rgbMap = -1560;
+							rgbBar = -1820;
+							colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+							colorBar.range('rangeY', { minY: 0, maxY: 255 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap);
+							colorBar.val('y', 255 - active.val('g'), colorBar);
+							break;
+						case 'b':
+							rgbMap = -2080;
+							rgbBar = -2860;
+							colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 });
+							colorBar.range('rangeY', { minY: 0, maxY: 255 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap);
+							colorBar.val('y', 255 - active.val('b'), colorBar);
+							break;
+						case 'a':
+							setTimeout(
+								function()
+								{
+									setBG.call($this, colorMapDiv, 'transparent');
+									setImgLoc.call($this, colorMapL1, -260);
+									setImgLoc.call($this, colorMapL2, -520);
+									setImgLoc.call($this, colorBarL1, 260);
+									setImgLoc.call($this, colorBarL2, 260);
+									setAlpha.call($this, colorBarL2, 100);
+									setImgLoc.call($this, colorBarL6, 0);
+									setAlpha.call($this, colorBarL6, 100);
+								}, 0);
+							colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 });
+							colorBar.range('rangeY', { minY: 0, maxY: 255 });
+							if (active.val('ahex') == null) break;
+							colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap);
+							colorBar.val('y', 255 - active.val('a'), colorBar);
+							break;
+						default:
+							throw ('Invalid Mode');
+						}
+						switch (colorMode) {
+						case 'h':
+							break;
+						case 's':
+						case 'v':
+						case 'a':
+							setTimeout(
+								function()
+								{
+									setAlpha.call($this, colorMapL1, 100);
+									setAlpha.call($this, colorBarL1, 100);
+									setImgLoc.call($this, colorBarL3, 260);
+									setAlpha.call($this, colorBarL3, 100);
+									setImgLoc.call($this, colorBarL4, 260);
+									setAlpha.call($this, colorBarL4, 100);
+								}, 0);
+							break;
+						case 'r':
+						case 'g':
+						case 'b':
+							setTimeout(
+								function()
+								{
+									setBG.call($this, colorMapDiv, 'transparent');
+									setBG.call($this, colorBarDiv, 'transparent');
+									setAlpha.call($this, colorBarL1, 100);
+									setAlpha.call($this, colorMapL1, 100);
+									setImgLoc.call($this, colorMapL1, rgbMap);
+									setImgLoc.call($this, colorMapL2, rgbMap - 260);
+									setImgLoc.call($this, colorBarL1, rgbBar - 780);
+									setImgLoc.call($this, colorBarL2, rgbBar - 520);
+									setImgLoc.call($this, colorBarL3, rgbBar);
+									setImgLoc.call($this, colorBarL4, rgbBar - 260);
+									setImgLoc.call($this, colorBarL6, 260);
+									setAlpha.call($this, colorBarL6, 100);
+								}, 0);
+							break;
+						}
+						if (active.val('ahex') == null) return;
+						activeColorChanged.call($this, active);
+					},
+				activeColorChanged = // Update color when user changes text values
+					function (ui, context) {
+						if (context == null || (context != colorBar && context != colorMap)) positionMapAndBarArrows.call($this, ui, context);
+						setTimeout(
+							function () {
+								updatePreview.call($this, ui);
+								updateMapVisuals.call($this, ui);
+								updateBarVisuals.call($this, ui);
+							}, 0);
+					},
+				mapValueChanged = // user has dragged the ColorMap pointer
+					function (ui, context) {
+						var active = color.active;
+						if (context != colorMap && active.val() == null) return;
+						var xy = ui.val('all');
+						switch (settings.color.mode) {
+						case 'h':
+							active.val('sv', { s: xy.x, v: 100 - xy.y }, context);
+							break;
+						case 's':
+						case 'a':
+							active.val('hv', { h: xy.x, v: 100 - xy.y }, context);
+							break;
+						case 'v':
+							active.val('hs', { h: xy.x, s: 100 - xy.y }, context);
+							break;
+						case 'r':
+							active.val('gb', { g: 255 - xy.y, b: xy.x }, context);
+							break;
+						case 'g':
+							active.val('rb', { r: 255 - xy.y, b: xy.x }, context);
+							break;
+						case 'b':
+							active.val('rg', { r: xy.x, g: 255 - xy.y }, context);
+							break;
+						}
+					},
+				colorBarValueChanged = // user has dragged the ColorBar slider
+					function(ui, context)
+					{
+						var active = color.active;
+						if (context != colorBar && active.val() == null) return;
+						switch (settings.color.mode)
+						{
+							case 'h':
+								active.val('h', { h: 360 - ui.val('y') }, context);
+								break;
+							case 's':
+								active.val('s', { s: 100 - ui.val('y') }, context);
+								break;
+							case 'v':
+								active.val('v', { v: 100 - ui.val('y') }, context);
+								break;
+							case 'r':
+								active.val('r', { r: 255 - ui.val('y') }, context);
+								break;
+							case 'g':
+								active.val('g', { g: 255 - ui.val('y') }, context);
+								break;
+							case 'b':
+								active.val('b', { b: 255 - ui.val('y') }, context);
+								break;
+							case 'a':
+								active.val('a', 255 - ui.val('y'), context);
+								break;
+						}
+					},
+				positionMapAndBarArrows = // position map and bar arrows to match current color
+					function(ui, context) {
+						if (context != colorMap) {
+							switch (settings.color.mode) {
+							case 'h':
+								var sv = ui.val('sv');
+								colorMap.val('xy', { x: sv != null ? sv.s : 100, y: 100 - (sv != null ? sv.v : 100) }, context);
+								break;
+							case 's':
+							case 'a':
+								var hv = ui.val('hv');
+								colorMap.val('xy', { x: hv && hv.h || 0, y: 100 - (hv != null ? hv.v : 100) }, context);
+								break;
+							case 'v':
+								var hs = ui.val('hs');
+								colorMap.val('xy', { x: hs && hs.h || 0, y: 100 - (hs != null ? hs.s : 100) }, context);
+								break;
+							case 'r':
+								var bg = ui.val('bg');
+								colorMap.val('xy', { x: bg && bg.b || 0, y: 255 - (bg && bg.g || 0) }, context);
+								break;
+							case 'g':
+								var br = ui.val('br');
+								colorMap.val('xy', { x: br && br.b || 0, y: 255 - (br && br.r || 0) }, context);
+								break;
+							case 'b':
+								var rg = ui.val('rg');
+								colorMap.val('xy', { x: rg && rg.r || 0, y: 255 - (rg && rg.g || 0) }, context);
+								break;
+							}
+						}
+						if (context != colorBar) {
+							switch (settings.color.mode) {
+							case 'h':
+								colorBar.val('y', 360 - (ui.val('h') || 0), context);
+								break;
+							case 's':
+								var s = ui.val('s');
+								colorBar.val('y', 100 - (s != null ? s : 100), context);
+								break;
+							case 'v':
+								var v = ui.val('v');
+								colorBar.val('y', 100 - (v != null ? v : 100), context);
+								break;
+							case 'r':
+								colorBar.val('y', 255 - (ui.val('r') || 0), context);
+								break;
+							case 'g':
+								colorBar.val('y', 255 - (ui.val('g') || 0), context);
+								break;
+							case 'b':
+								colorBar.val('y', 255 - (ui.val('b') || 0), context);
+								break;
+							case 'a':
+								var a = ui.val('a');
+								colorBar.val('y', 255 - (a != null ? a : 255), context);
+								break;
+							}
+						}
+					},
+				updatePreview =
+					function (ui) {
+						try {
+							var all = ui.val('all');
+							activePreview.css({ backgroundColor: all && '#' + all.hex || 'transparent' });
+							setAlpha.call($this, activePreview, all && Math.precision((all.a * 100) / 255, 4) || 0);
+						} catch (e) { }
+					},
+				updateMapVisuals =
+					function (ui) {
+						switch (settings.color.mode) {
+						case 'h':
+							setBG.call($this, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex'));
+							break;
+						case 's':
+						case 'a':
+							var s = ui.val('s');
+							setAlpha.call($this, colorMapL2, 100 - (s != null ? s : 100));
+							break;
+						case 'v':
+							var v = ui.val('v');
+							setAlpha.call($this, colorMapL1, v != null ? v : 100);
+							break;
+						case 'r':
+							setAlpha.call($this, colorMapL2, Math.precision((ui.val('r') || 0) / 255 * 100, 4));
+							break;
+						case 'g':
+							setAlpha.call($this, colorMapL2, Math.precision((ui.val('g') || 0) / 255 * 100, 4));
+							break;
+						case 'b':
+							setAlpha.call($this, colorMapL2, Math.precision((ui.val('b') || 0) / 255 * 100));
+							break;
+						}
+						var a = ui.val('a');
+						setAlpha.call($this, colorMapL3, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
+					},
+				updateBarVisuals =
+					function (ui) {
+						switch (settings.color.mode) {
+						case 'h':
+							var a = ui.val('a');
+							setAlpha.call($this, colorBarL5, Math.precision(((255 - (a || 0)) * 100) / 255, 4));
+							break;
+						case 's':
+							var hva = ui.val('hva'),
+									saturatedColor = new Color({ h: hva && hva.h || 0, s: 100, v: hva != null ? hva.v : 100 });
+							setBG.call($this, colorBarDiv, saturatedColor.val('hex'));
+							setAlpha.call($this, colorBarL2, 100 - (hva != null ? hva.v : 100));
+							setAlpha.call($this, colorBarL5, Math.precision(((255 - (hva && hva.a || 0)) * 100) / 255, 4));
+							break;
+						case 'v':
+							var hsa = ui.val('hsa'),
+									valueColor = new Color({ h: hsa && hsa.h || 0, s: hsa != null ? hsa.s : 100, v: 100 });
+							setBG.call($this, colorBarDiv, valueColor.val('hex'));
+							setAlpha.call($this, colorBarL5, Math.precision(((255 - (hsa && hsa.a || 0)) * 100) / 255, 4));
+							break;
+						case 'r':
+						case 'g':
+						case 'b':
+							var hValue = 0, vValue = 0, rgba = ui.val('rgba');
+							if (settings.color.mode == 'r')
+							{
+								hValue = rgba && rgba.b || 0;
+								vValue = rgba && rgba.g || 0;
+							}
+							else if (settings.color.mode == 'g')
+							{
+								hValue = rgba && rgba.b || 0;
+								vValue = rgba && rgba.r || 0;
+							}
+							else if (settings.color.mode == 'b')
+							{
+								hValue = rgba && rgba.r || 0;
+								vValue = rgba && rgba.g || 0;
+							}
+							var middle = vValue > hValue ? hValue : vValue;
+							setAlpha.call($this, colorBarL2, hValue > vValue ? Math.precision(((hValue - vValue) / (255 - vValue)) * 100, 4) : 0);
+							setAlpha.call($this, colorBarL3, vValue > hValue ? Math.precision(((vValue - hValue) / (255 - hValue)) * 100, 4) : 0);
+							setAlpha.call($this, colorBarL4, Math.precision((middle / 255) * 100, 4));
+							setAlpha.call($this, colorBarL5, Math.precision(((255 - (rgba && rgba.a || 0)) * 100) / 255, 4));
+							break;
+						case 'a':
+							var a = ui.val('a');
+							setBG.call($this, colorBarDiv, ui.val('hex') || '000000');
+							setAlpha.call($this, colorBarL5, a != null ? 0 : 100);
+							setAlpha.call($this, colorBarL6, a != null ? 100 : 0);
+							break;
+						}
+					},
+				setBG =
+					function (el, c) {
+						el.css({ backgroundColor: c && c.length == 6 && '#' + c || 'transparent' });
+					},
+				setImg =
+					function (img, src) {
+						if (isLessThanIE7 && (src.indexOf('AlphaBar.png') > -1 || src.indexOf('Bars.png') > -1 || src.indexOf('Maps.png') > -1)) {
+							img.attr('pngSrc', src);
+							img.css({ backgroundImage: 'none', filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+						}
+						else img.css({ backgroundImage: 'url(\'' + src + '\')' });
+					},
+				setImgLoc =
+					function (img, y) {
+						img.css({ top: y + 'px' });
+					},
+				setAlpha =
+					function (obj, alpha) {
+						obj.css({ visibility: alpha > 0 ? 'visible' : 'hidden' });
+						if (alpha > 0 && alpha < 100) {
+							if (isLessThanIE7) {
+								var src = obj.attr('pngSrc');
+								if (src != null && (src.indexOf('AlphaBar.png') > -1 || src.indexOf('Bars.png') > -1 || src.indexOf('Maps.png') > -1))
+									obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\') progid:DXImageTransform.Microsoft.Alpha(opacity=' + alpha + ')' });
+								else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+							} else obj.css({ opacity: Math.precision(alpha / 100, 4) });
+						}
+						else if (alpha == 0 || alpha == 100) {
+							if (isLessThanIE7) {
+								var src = obj.attr('pngSrc');
+								if (src != null && (src.indexOf('AlphaBar.png') != -1 || src.indexOf('Bars.png') != -1 || src.indexOf('Maps.png') != -1))
+									obj.css({ filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + src + '\', sizingMethod=\'scale\')' });
+								else obj.css({ opacity: '' });
+							} else obj.css({ opacity: '' });
+						}
+					},
+				revertColor = // revert color to original color when opened
+					function()
+					{
+						color.active.val('ahex', color.current.val('ahex'));
+					},
+				commitColor = // commit the color changes
+					function()
+					{
+						color.current.val('ahex', color.active.val('ahex'));
+					},
+				radioClicked =
+					function(e)
+					{
+						$(this).parents('tbody:first').find('input:radio[value!="'+e.target.value+'"]').removeAttr('checked');
+						setColorMode.call($this, e.target.value);
+					},
+				currentClicked =
+					function()
+					{
+						revertColor.call($this);
+					},
+				cancelClicked =
+					function()
+					{
+						revertColor.call($this);
+						settings.window.expandable && hide.call($this);
+						$.isFunction(cancelCallback) && cancelCallback.call($this, color.active, cancelButton);
+					},
+				okClicked =
+					function()
+					{
+						commitColor.call($this);
+						settings.window.expandable && hide.call($this);
+						$.isFunction(commitCallback) && commitCallback.call($this, color.active, okButton);
+					},
+				iconImageClicked =
+					function()
+					{
+						show.call($this);
+					},
+				currentColorChanged =
+					function(ui, context)
+					{
+						var hex = ui.val('hex');
+						currentPreview.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+						setAlpha.call($this, currentPreview, Math.precision(((ui.val('a') || 0) * 100) / 255, 4));
+					},
+				expandableColorChanged =
+					function(ui, context)
+					{
+						var hex = ui.val('hex');
+						var va = ui.val('va');
+						iconColor.css({ backgroundColor: hex && '#' + hex || 'transparent' });
+						setAlpha.call($this, iconAlpha, Math.precision(((255 - (va && va.a || 0)) * 100) / 255, 4));
+						if (settings.window.bindToInput&&settings.window.updateInputColor)
+							settings.window.input.css(
+								{
+									backgroundColor: hex && '#' + hex || 'transparent',
+									color: va == null || va.v > 75 ? '#000000' : '#ffffff'
+								});
+					},
+				moveBarMouseDown =
+					function(e)
+					{
+						var element = settings.window.element, // local copies for YUI compressor
+							page = settings.window.page;
+						elementStartX = parseInt(container.css('left'));
+						elementStartY = parseInt(container.css('top'));
+						pageStartX = e.pageX;
+						pageStartY = e.pageY;
+						// bind events to document to move window - we will unbind these on mouseup
+						$(document).bind('mousemove', documentMouseMove).bind('mouseup', documentMouseUp);
+						e.preventDefault(); // prevent attempted dragging of the column
+					},
+				documentMouseMove =
+					function(e)
+					{
+						container.css({ left: elementStartX - (pageStartX - e.pageX) + 'px', top: elementStartY - (pageStartY - e.pageY) + 'px' });
+						if (settings.window.expandable && !$.support.boxModel) container.prev().css({ left: container.css("left"), top: container.css("top") });
+						e.stopPropagation();
+						e.preventDefault();
+						return false;
+					},
+				documentMouseUp =
+					function(e)
+					{
+						$(document).unbind('mousemove', documentMouseMove).unbind('mouseup', documentMouseUp);
+						e.stopPropagation();
+						e.preventDefault();
+						return false;
+					},
+				quickPickClicked =
+					function(e)
+					{
+						e.preventDefault();
+						e.stopPropagation();
+						color.active.val('ahex', $(this).attr('title') || null, e.target);
+						return false;
+					},
+				commitCallback = $.isFunction($arguments[1]) && $arguments[1] || null,
+				liveCallback = $.isFunction($arguments[2]) && $arguments[2] || null,
+				cancelCallback = $.isFunction($arguments[3]) && $arguments[3] || null,
+				show =
+					function()
+					{
+						color.current.val('ahex', color.active.val('ahex'));
+						var attachIFrame = function()
+							{
+								if (!settings.window.expandable || $.support.boxModel) return;
+								var table = container.find('table:first');
+								container.before('<iframe/>');
+								container.prev().css({ width: table.width(), height: container.height(), opacity: 0, position: 'absolute', left: container.css("left"), top: container.css("top") });
+							};
+						if (settings.window.expandable)
+						{
+							$(document.body).children('div.jPicker.Container').css({zIndex:10});
+							container.css({zIndex:20});
+						}
+						switch (settings.window.effects.type)
+						{
+							case 'fade':
+								container.fadeIn(settings.window.effects.speed.show, attachIFrame);
+								break;
+							case 'slide':
+								container.slideDown(settings.window.effects.speed.show, attachIFrame);
+								break;
+							case 'show':
+							default:
+								container.show(settings.window.effects.speed.show, attachIFrame);
+								break;
+						}
+					},
+				hide =
+					function () {
+						var removeIFrame = function () {
+							if (settings.window.expandable) container.css({ zIndex: 10 });
+							if (!settings.window.expandable || $.support.boxModel) return;
+							container.prev().remove();
+						};
+						switch (settings.window.effects.type) {
+						case 'fade':
+							container.fadeOut(settings.window.effects.speed.hide, removeIFrame);
+							break;
+						case 'slide':
+							container.slideUp(settings.window.effects.speed.hide, removeIFrame);
+							break;
+						case 'show':
+						default:
+							container.hide(settings.window.effects.speed.hide, removeIFrame);
+							break;
+						}
+					},
+				initialize =
+					function() {
+						var win = settings.window,
+							popup = win.expandable ? $($this).next().find('.Container:first') : null;
+						container = win.expandable ? $('<div/>') : $($this);
+						container.addClass('jPicker Container');
+						if (win.expandable) container.hide();
+						container.get(0).onselectstart = function (event) { if (event.target.nodeName.toLowerCase() !== 'input') return false; };
+						// inject html source code - we are using a single table for this control - I know tables are considered bad, but it takes care of equal height columns and
+						// this control really is tabular data, so I believe it is the right move
+						var all = color.active.val('all');
+						if (win.alphaPrecision < 0) win.alphaPrecision = 0;
+						else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
+						var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview">' + localization.text.newColor + '<div><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><hr/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;&deg;</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label><br/><br/></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
+						if (win.expandable)
+						{
+							container.html(controlHtml);
+							if($(document.body).children('div.jPicker.Container').length==0)$(document.body).prepend(container);
+							else $(document.body).children('div.jPicker.Container:last').after(container);
+							container.mousedown(
+								function()
+								{
+									$(document.body).children('div.jPicker.Container').css({zIndex:10});
+									container.css({zIndex:20});
+								});
+							container.css( // positions must be set and display set to absolute before source code injection or IE will size the container to fit the window
+								{
+									left:
+										win.position.x == 'left' ? (popup.offset().left - 530 - (win.position.y == 'center' ? 25 : 0)) + 'px' :
+										win.position.x == 'center' ? (popup.offset().left - 260) + 'px' :
+										win.position.x == 'right' ? (popup.offset().left - 10 + (win.position.y == 'center' ? 25 : 0)) + 'px' :
+										win.position.x == 'screenCenter' ? (($(document).width() >> 1) - 260) + 'px' : (popup.offset().left + parseInt(win.position.x)) + 'px',
+									position: 'absolute',
+									top: win.position.y == 'top' ? (popup.offset().top - 312) + 'px' :
+											 win.position.y == 'center' ? (popup.offset().top - 156) + 'px' :
+											 win.position.y == 'bottom' ? (popup.offset().top + 25) + 'px' : (popup.offset().top + parseInt(win.position.y)) + 'px'
+								});
+						}
+						else
+						{
+							container = $($this);
+							container.html(controlHtml);
+						}
+						// initialize the objects to the source code just injected
+						var tbody = container.find('tbody:first');
+						colorMapDiv = tbody.find('div.Map:first');
+						colorBarDiv = tbody.find('div.Bar:first');
+						var MapMaps = colorMapDiv.find('span'),
+								BarMaps = colorBarDiv.find('span');
+						colorMapL1 = MapMaps.filter('.Map1:first');
+						colorMapL2 = MapMaps.filter('.Map2:first');
+						colorMapL3 = MapMaps.filter('.Map3:first');
+						colorBarL1 = BarMaps.filter('.Map1:first');
+						colorBarL2 = BarMaps.filter('.Map2:first');
+						colorBarL3 = BarMaps.filter('.Map3:first');
+						colorBarL4 = BarMaps.filter('.Map4:first');
+						colorBarL5 = BarMaps.filter('.Map5:first');
+						colorBarL6 = BarMaps.filter('.Map6:first');
+						// create color pickers and maps
+						colorMap = new Slider(colorMapDiv,
+							{
+								map:
+								{
+									width: images.colorMap.width,
+									height: images.colorMap.height
+								},
+								arrow:
+								{
+									image: images.clientPath + images.colorMap.arrow.file,
+									width: images.colorMap.arrow.width,
+									height: images.colorMap.arrow.height
+								}
+							});
+						colorMap.bind(mapValueChanged);
+						colorBar = new Slider(colorBarDiv,
+							{
+								map:
+								{
+									width: images.colorBar.width,
+									height: images.colorBar.height
+								},
+								arrow:
+								{
+									image: images.clientPath + images.colorBar.arrow.file,
+									width: images.colorBar.arrow.width,
+									height: images.colorBar.arrow.height
+								}
+							});
+						colorBar.bind(colorBarValueChanged);
+						colorPicker = new ColorValuePicker(tbody, color.active, win.expandable && win.bindToInput ? win.input : null, win.alphaPrecision);
+						var hex = all != null ? all.hex : null,
+								preview = tbody.find('.Preview'),
+								button = tbody.find('.Button');
+						activePreview = preview.find('.Active:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
+						currentPreview = preview.find('.Current:first').css({ backgroundColor: hex && '#' + hex || 'transparent' }).bind('click', currentClicked);
+						setAlpha.call($this, currentPreview, Math.precision(color.current.val('a') * 100) / 255, 4);
+						okButton = button.find('.Ok:first').bind('click', okClicked);
+						cancelButton = button.find('.Cancel:first').bind('click', cancelClicked);
+						grid = button.find('.Grid:first');
+						setTimeout(
+							function()
+							{
+								setImg.call($this, colorMapL1, images.clientPath + 'Maps.png');
+								setImg.call($this, colorMapL2, images.clientPath + 'Maps.png');
+								setImg.call($this, colorMapL3, images.clientPath + 'map-opacity.png');
+								setImg.call($this, colorBarL1, images.clientPath + 'Bars.png');
+								setImg.call($this, colorBarL2, images.clientPath + 'Bars.png');
+								setImg.call($this, colorBarL3, images.clientPath + 'Bars.png');
+								setImg.call($this, colorBarL4, images.clientPath + 'Bars.png');
+								setImg.call($this, colorBarL5, images.clientPath + 'bar-opacity.png');
+								setImg.call($this, colorBarL6, images.clientPath + 'AlphaBar.png');
+								setImg.call($this, preview.find('div:first'), images.clientPath + 'preview-opacity.png');
+							}, 0);
+						tbody.find('td.Radio input').bind('click', radioClicked);
+						// initialize quick list
+						if (color.quickList && color.quickList.length > 0)
+						{
+							var html = '';
+							for (i = 0; i < color.quickList.length; i++)
+							{
+								/* if default colors are hex strings, change them to color objects */
+								if ((typeof (color.quickList[i])).toString().toLowerCase() == 'string') color.quickList[i] = new Color({ hex: color.quickList[i] });
+								var alpha = color.quickList[i].val('a');
+								var ahex = color.quickList[i].val('ahex');
+								if (!win.alphaSupport && ahex) ahex = ahex.substring(0, 6) + 'ff';
+								var quickHex = color.quickList[i].val('hex');
+								if(!ahex) ahex = "00000000";
+								html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || 'none') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.png)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
+							}
+							setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
+							grid.html(html);
+							grid.find('.QuickColor').click(quickPickClicked);
+						}
+						setColorMode.call($this, settings.color.mode);
+						color.active.bind(activeColorChanged);
+						$.isFunction(liveCallback) && color.active.bind(liveCallback);
+						color.current.bind(currentColorChanged);
+						// bind to input
+						if (win.expandable)
+						{
+							$this.icon = popup.parents('.Icon:first');
+							iconColor = $this.icon.find('.Color:first').css({ backgroundColor: hex && '#' + hex || 'transparent' });
+							iconAlpha = $this.icon.find('.Alpha:first');
+							setImg.call($this, iconAlpha, images.clientPath + 'bar-opacity.png');
+							setAlpha.call($this, iconAlpha, Math.precision(((255 - (all != null ? all.a : 0)) * 100) / 255, 4));
+							iconImage = $this.icon.find('.Image:first').css(
+								{
+									backgroundImage: 'url(\'' + images.clientPath + images.picker.file + '\')'
+								}).bind('click', iconImageClicked);
+							if (win.bindToInput&&win.updateInputColor)
+								win.input.css(
+									{
+										backgroundColor: hex && '#' + hex || 'transparent',
+										color: all == null || all.v > 75 ? '#000000' : '#ffffff'
+									});
+							moveBar = tbody.find('.Move:first').bind('mousedown', moveBarMouseDown);
+							color.active.bind(expandableColorChanged);
+						}
+						else show.call($this);
+					},
+				destroy =
+					function()
+					{
+						container.find('td.Radio input').unbind('click', radioClicked);
+						currentPreview.unbind('click', currentClicked);
+						cancelButton.unbind('click', cancelClicked);
+						okButton.unbind('click', okClicked);
+						if (settings.window.expandable)
+						{
+							iconImage.unbind('click', iconImageClicked);
+							moveBar.unbind('mousedown', moveBarMouseDown);
+							$this.icon = null;
+						}
+						container.find('.QuickColor').unbind('click', quickPickClicked);
+						colorMapDiv = null;
+						colorBarDiv = null;
+						colorMapL1 = null;
+						colorMapL2 = null;
+						colorMapL3 = null;
+						colorBarL1 = null;
+						colorBarL2 = null;
+						colorBarL3 = null;
+						colorBarL4 = null;
+						colorBarL5 = null;
+						colorBarL6 = null;
+						colorMap.destroy();
+						colorMap = null;
+						colorBar.destroy();
+						colorBar = null;
+						colorPicker.destroy();
+						colorPicker = null;
+						activePreview = null;
+						currentPreview = null;
+						okButton = null;
+						cancelButton = null;
+						grid = null;
+						commitCallback = null;
+						cancelCallback = null;
+						liveCallback = null;
+						container.html('');
+						for (i = 0; i < List.length; i++) if (List[i] == $this) List.splice(i, 1);
+					},
+				images = settings.images, // local copies for YUI compressor
+				localization = settings.localization,
+				color =
+					{
+						active: (typeof settings.color.active).toString().toLowerCase() === 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
+						current: (typeof settings.color.active).toString().toLowerCase() === 'string' ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }),
+						quickList: settings.color.quickList
+					};
+			$.extend(true, $this, // public properties, methods, and callbacks
+				{
+					commitCallback: commitCallback, // commitCallback function can be overridden to return the selected color to a method you specify when the user clicks "OK"
+					liveCallback: liveCallback, // liveCallback function can be overridden to return the selected color to a method you specify in live mode (continuous update)
+					cancelCallback: cancelCallback, // cancelCallback function can be overridden to a method you specify when the user clicks "Cancel"
+					color: color,
+					show: show,
+					hide: hide,
+					destroy: destroy // destroys this control entirely, removing all events and objects, and removing itself from the List
+				});
+			List.push($this);
+			setTimeout(
+				function () {
+					initialize.call($this);
+				}, 0);
+		});
+};
+$.fn.jPicker.defaults = /* jPicker defaults - you can change anything in this section (such as the clientPath to your images) without fear of breaking the program */
+	{
+		window: {
+			title: null, /* any title for the jPicker window itself - displays "Drag Markers To Pick A Color" if left null */
+			effects:
+			{
+				type: 'slide', /* effect used to show/hide an expandable picker. Acceptable values "slide", "show", "fade" */
+				speed:
+				{
+					show: 'slow', /* duration of "show" effect. Acceptable values are "fast", "slow", or time in ms */
+					hide: 'fast' /* duration of "hide" effect. Acceptable values are "fast", "slow", or time in ms */
+				}
+			},
+			position:
+			{
+				x: 'screenCenter', /* acceptable values "left", "center", "right", "screenCenter", or relative px value */
+				y: 'top' /* acceptable values "top", "bottom", "center", or relative px value */
+			},
+			expandable: false, /* default to large static picker - set to true to make an expandable picker (small icon with popup) - set automatically when binded to input element */
+			liveUpdate: true, /* set false if you want the user to have to click "OK" before the binded input box updates values (always "true" for expandable picker) */
+			alphaSupport: false, /* set to true to enable alpha picking */
+			alphaPrecision: 0, /* set decimal precision for alpha percentage display - hex codes do not map directly to percentage integers - range 0-2 */
+			updateInputColor: true /* set to false to prevent binded input colors from changing */
+		},
+		color: {
+			mode: 'h', /* acceptabled values "h" (hue), "s" (saturation), "v" (value), "r" (red), "g" (green), "b" (blue), "a" (alpha) */
+			active: new Color({ ahex: '#ffcc00ff' }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
+			quickList: /* the quick pick color list */
+				[
+					new Color({ h: 360, s: 33, v: 100 }), /* acceptable values are any declared $.jPicker.Color object or string HEX value (e.g. #ffc000) WITH OR WITHOUT the "#" prefix */
+					new Color({ h: 360, s: 66, v: 100 }),
+					new Color({ h: 360, s: 100, v: 100 }),
+					new Color({ h: 360, s: 100, v: 75 }),
+					new Color({ h: 360, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 100 }),
+					new Color({ h: 30, s: 33, v: 100 }),
+					new Color({ h: 30, s: 66, v: 100 }),
+					new Color({ h: 30, s: 100, v: 100 }),
+					new Color({ h: 30, s: 100, v: 75 }),
+					new Color({ h: 30, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 90 }),
+					new Color({ h: 60, s: 33, v: 100 }),
+					new Color({ h: 60, s: 66, v: 100 }),
+					new Color({ h: 60, s: 100, v: 100 }),
+					new Color({ h: 60, s: 100, v: 75 }),
+					new Color({ h: 60, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 80 }),
+					new Color({ h: 90, s: 33, v: 100 }),
+					new Color({ h: 90, s: 66, v: 100 }),
+					new Color({ h: 90, s: 100, v: 100 }),
+					new Color({ h: 90, s: 100, v: 75 }),
+					new Color({ h: 90, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 70 }),
+					new Color({ h: 120, s: 33, v: 100 }),
+					new Color({ h: 120, s: 66, v: 100 }),
+					new Color({ h: 120, s: 100, v: 100 }),
+					new Color({ h: 120, s: 100, v: 75 }),
+					new Color({ h: 120, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 60 }),
+					new Color({ h: 150, s: 33, v: 100 }),
+					new Color({ h: 150, s: 66, v: 100 }),
+					new Color({ h: 150, s: 100, v: 100 }),
+					new Color({ h: 150, s: 100, v: 75 }),
+					new Color({ h: 150, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 50 }),
+					new Color({ h: 180, s: 33, v: 100 }),
+					new Color({ h: 180, s: 66, v: 100 }),
+					new Color({ h: 180, s: 100, v: 100 }),
+					new Color({ h: 180, s: 100, v: 75 }),
+					new Color({ h: 180, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 40 }),
+					new Color({ h: 210, s: 33, v: 100 }),
+					new Color({ h: 210, s: 66, v: 100 }),
+					new Color({ h: 210, s: 100, v: 100 }),
+					new Color({ h: 210, s: 100, v: 75 }),
+					new Color({ h: 210, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 30 }),
+					new Color({ h: 240, s: 33, v: 100 }),
+					new Color({ h: 240, s: 66, v: 100 }),
+					new Color({ h: 240, s: 100, v: 100 }),
+					new Color({ h: 240, s: 100, v: 75 }),
+					new Color({ h: 240, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 20 }),
+					new Color({ h: 270, s: 33, v: 100 }),
+					new Color({ h: 270, s: 66, v: 100 }),
+					new Color({ h: 270, s: 100, v: 100 }),
+					new Color({ h: 270, s: 100, v: 75 }),
+					new Color({ h: 270, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 10 }),
+					new Color({ h: 300, s: 33, v: 100 }),
+					new Color({ h: 300, s: 66, v: 100 }),
+					new Color({ h: 300, s: 100, v: 100 }),
+					new Color({ h: 300, s: 100, v: 75 }),
+					new Color({ h: 300, s: 100, v: 50 }),
+					new Color({ h: 180, s: 0, v: 0 }),
+					new Color({ h: 330, s: 33, v: 100 }),
+					new Color({ h: 330, s: 66, v: 100 }),
+					new Color({ h: 330, s: 100, v: 100 }),
+					new Color({ h: 330, s: 100, v: 75 }),
+					new Color({ h: 330, s: 100, v: 50 }),
+					new Color()
+				]
+		},
+		images:
+		{
+			clientPath: '/jPicker/images/', /* Path to image files */
+			colorMap:
+			{
+				width: 256,
+				height: 256,
+				arrow:
+				{
+					file: 'mappoint.gif', /* ColorMap arrow icon */
+					width: 15,
+					height: 15
+				}
+			},
+			colorBar:
+			{
+				width: 20,
+				height: 256,
+				arrow:
+				{
+					file: 'rangearrows.gif', /* ColorBar arrow icon */
+					width: 20,
+					height: 7
+				}
+			},
+			picker:
+			{
+				file: 'picker.gif', /* Color Picker icon */
+				width: 25,
+				height: 24
+			}
+		},
+		localization: /* alter these to change the text presented by the picker (e.g. different language) */
+		{
+			text:
+			{
+				title: 'Drag Markers To Pick A Color',
+				newColor: 'new',
+				currentColor: 'current',
+				ok: 'OK',
+				cancel: 'Cancel'
+			},
+			tooltips:
+			{
+				colors:
+				{
+					newColor: 'New Color - Press &ldquo;OK&rdquo; To Commit',
+					currentColor: 'Click To Revert To Original Color'
+				},
+				buttons:
+				{
+					ok: 'Commit To This Color Selection',
+					cancel: 'Cancel And Revert To Original Color'
+				},
+				hue:
+				{
+					radio: 'Set To &ldquo;Hue&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Hue&rdquo; Value (0-360&deg;)'
+				},
+				saturation:
+				{
+					radio: 'Set To &ldquo;Saturation&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Saturation&rdquo; Value (0-100%)'
+				},
+				value:
+				{
+					radio: 'Set To &ldquo;Value&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Value&rdquo; Value (0-100%)'
+				},
+				red:
+				{
+					radio: 'Set To &ldquo;Red&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Red&rdquo; Value (0-255)'
+				},
+				green:
+				{
+					radio: 'Set To &ldquo;Green&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Green&rdquo; Value (0-255)'
+				},
+				blue:
+				{
+					radio: 'Set To &ldquo;Blue&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Blue&rdquo; Value (0-255)'
+				},
+				alpha:
+				{
+					radio: 'Set To &ldquo;Alpha&rdquo; Color Mode',
+					textbox: 'Enter A &ldquo;Alpha&rdquo; Value (0-100)'
+				},
+				hex:
+				{
+					textbox: 'Enter A &ldquo;Hex&rdquo; Color Value (#000000-#ffffff)',
+					alpha: 'Enter A &ldquo;Alpha&rdquo; Value (#00-#ff)'
+				}
+			}
+		}
+	};
+})(jQuery, '1.1.6');
diff --git a/editor/jgraduate/jquery.jgraduate.js b/editor/jgraduate/jquery.jgraduate.js
index 4565b713..6f475d28 100644
--- a/editor/jgraduate/jquery.jgraduate.js
+++ b/editor/jgraduate/jquery.jgraduate.js
@@ -1,4 +1,6 @@
-/*
+/* eslint-disable no-var, no-redeclare */
+/* globals $, jQuery */
+/*
  * jGraduate 0.4
  *
  * jQuery Plugin for a gradient picker
@@ -17,10 +19,10 @@ where options is an object literal:
 		window: { title: "Pick the start color and opacity for the gradient" },
 		images: { clientPath: "images/" },
 		paint: a Paint object,
-		newstop: String of value "same", "inverse", "black" or "white" 
+		newstop: String of value "same", "inverse", "black" or "white"
 				 OR object with one or both values {color: #Hex color, opac: number 0-1}
 	}
- 
+
 - the Paint object is:
 	Paint {
 		type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
@@ -47,94 +49,88 @@ $.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
 - okCallback receives a Paint object
 
  *
- */
- 
-(function() {
- 
+*/
+(function () {
 var ns = { svg: 'http://www.w3.org/2000/svg', xlink: 'http://www.w3.org/1999/xlink' };
-if(!window.console) {
-  window.console = new function() {
-    this.log = function(str) {};
-    this.dir = function(str) {};
-  };
+if (!window.console) {
+	window.console = new function () {
+		this.log = function (str) {};
+		this.dir = function (str) {};
+	}();
 }
 
-$.jGraduate = { 
+$.jGraduate = {
 	Paint:
-		function(opt) {
+		function (opt) {
 			var options = opt || {};
 			this.alpha = isNaN(options.alpha) ? 100 : options.alpha;
 			// copy paint object
-    		if (options.copy) {
-    			this.type = options.copy.type;
-    			this.alpha = options.copy.alpha;
+			if (options.copy) {
+				this.type = options.copy.type;
+				this.alpha = options.copy.alpha;
 				this.solidColor = null;
 				this.linearGradient = null;
 				this.radialGradient = null;
 
-    			switch(this.type) {
-    				case "none":
-    					break;
-    				case "solidColor":
-    					this.solidColor = options.copy.solidColor;
-    					break;
-    				case "linearGradient":
-    					this.linearGradient = options.copy.linearGradient.cloneNode(true);
-    					break;
-    				case "radialGradient":
-    					this.radialGradient = options.copy.radialGradient.cloneNode(true);
-    					break;
-    			}
-    		}
-    		// create linear gradient paint
-    		else if (options.linearGradient) {
-    			this.type = "linearGradient";
-    			this.solidColor = null;
-    			this.radialGradient = null;
-    			this.linearGradient = options.linearGradient.cloneNode(true);
-    		}
-    		// create linear gradient paint
-    		else if (options.radialGradient) {
-    			this.type = "radialGradient";
-    			this.solidColor = null;
-    			this.linearGradient = null;
-    			this.radialGradient = options.radialGradient.cloneNode(true);
-    		}
-    		// create solid color paint
-    		else if (options.solidColor) {
-    			this.type = "solidColor";
-    			this.solidColor = options.solidColor;
-    		}
-    		// create empty paint
-	    	else {
-	    		this.type = "none";
-    			this.solidColor = null;
-    			this.linearGradient = null;
-    			this.radialGradient = null;
-	    	}
+				switch (this.type) {
+				case 'none':
+					break;
+				case 'solidColor':
+					this.solidColor = options.copy.solidColor;
+					break;
+				case 'linearGradient':
+					this.linearGradient = options.copy.linearGradient.cloneNode(true);
+					break;
+				case 'radialGradient':
+					this.radialGradient = options.copy.radialGradient.cloneNode(true);
+					break;
+				}
+			// create linear gradient paint
+			} else if (options.linearGradient) {
+				this.type = 'linearGradient';
+				this.solidColor = null;
+				this.radialGradient = null;
+				this.linearGradient = options.linearGradient.cloneNode(true);
+			// create linear gradient paint
+			} else if (options.radialGradient) {
+				this.type = 'radialGradient';
+				this.solidColor = null;
+				this.linearGradient = null;
+				this.radialGradient = options.radialGradient.cloneNode(true);
+			// create solid color paint
+			} else if (options.solidColor) {
+				this.type = 'solidColor';
+				this.solidColor = options.solidColor;
+			// create empty paint
+			} else {
+				this.type = 'none';
+				this.solidColor = null;
+				this.linearGradient = null;
+				this.radialGradient = null;
+			}
 		}
 };
 
 jQuery.fn.jGraduateDefaults = {
 	paint: new $.jGraduate.Paint(),
 	window: {
-		pickerTitle: "Drag markers to pick a paint"
+		pickerTitle: 'Drag markers to pick a paint'
 	},
 	images: {
-		clientPath: "images/"
+		clientPath: 'images/'
 	},
 	newstop: 'inverse' // same, inverse, black, white
 };
 
 var isGecko = navigator.userAgent.indexOf('Gecko/') >= 0;
 
-function setAttrs(elem, attrs) {
-	if(isGecko) {
+function setAttrs (elem, attrs) {
+	if (isGecko) {
 		for (var aname in attrs) elem.setAttribute(aname, attrs[aname]);
 	} else {
 		for (var aname in attrs) {
 			var val = attrs[aname], prop = elem[aname];
-			if(prop && prop.constructor === 'SVGLength') {
+			if (prop && prop.constructor === 'SVGLength') {
 				prop.baseVal.value = val;
 			} else {
 				elem.setAttribute(aname, val);
@@ -143,106 +139,102 @@ function setAttrs(elem, attrs) {
 	}
 }
 
-function mkElem(name, attrs, newparent) {
+function mkElem (name, attrs, newparent) {
 	var elem = document.createElementNS(ns.svg, name);
 	setAttrs(elem, attrs);
-	if(newparent) newparent.appendChild(elem);
+	if (newparent) newparent.appendChild(elem);
 	return elem;
 }
 
 jQuery.fn.jGraduate =
-	function(options) {
-	 	var $arguments = arguments;
-		return this.each( function() {
+	function (options) {
+		var $arguments = arguments;
+		return this.each(function () {
 			var $this = $(this), $settings = $.extend(true, {}, jQuery.fn.jGraduateDefaults, options),
 				id = $this.attr('id'),
-				idref = '#'+$this.attr('id')+' ';
-			
-            if (!idref)
-            {
-              alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
-              return;
-            }
-            
-            var okClicked = function() {
-	            switch ( $this.paint.type ) {
-	            	case "radialGradient":
-	            		$this.paint.linearGradient = null;
-	            		break;
-	            	case "linearGradient":
-	            		$this.paint.radialGradient = null;
-	            		break;
-	            	case "solidColor":
-	            		$this.paint.radialGradient = $this.paint.linearGradient = null;
-	            		break;
-	            }
-            	$.isFunction($this.okCallback) && $this.okCallback($this.paint);
-            	$this.hide();
-            },
-            cancelClicked = function() {
-            	$.isFunction($this.cancelCallback) && $this.cancelCallback();
-            	$this.hide();
-            };
+				idref = '#' + $this.attr('id') + ' ';
 
-            $.extend(true, $this, // public properties, methods, and callbacks
-              {
-              	// make a copy of the incoming paint
-                paint: new $.jGraduate.Paint({copy: $settings.paint}),
-                okCallback: $.isFunction($arguments[1]) && $arguments[1] || null,
-                cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null
-              });
+			if (!idref) {
+				alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
+				return;
+			}
+
+			var okClicked = function () {
+				switch ($this.paint.type) {
+				case 'radialGradient':
+					$this.paint.linearGradient = null;
+					break;
+				case 'linearGradient':
+					$this.paint.radialGradient = null;
+					break;
+				case 'solidColor':
+					$this.paint.radialGradient = $this.paint.linearGradient = null;
+					break;
+				}
+				$.isFunction($this.okCallback) && $this.okCallback($this.paint);
+				$this.hide();
+			};
+			var cancelClicked = function () {
+				$.isFunction($this.cancelCallback) && $this.cancelCallback();
+				$this.hide();
+			};
+
+			$.extend(true, $this, { // public properties, methods, and callbacks
+				// make a copy of the incoming paint
+				paint: new $.jGraduate.Paint({copy: $settings.paint}),
+				okCallback: $.isFunction($arguments[1]) && $arguments[1] || null,
+				cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null
+			});
 
 			var pos = $this.position(),
 				color = null;
 			var $win = $(window);
 
-			if ($this.paint.type == "none") {
+			if ($this.paint.type === 'none') {
 				$this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
 			}
-			
-            $this.addClass('jGraduate_Picker');
-            $this.html('<ul class="jGraduate_tabs">' +
-            				'<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
-            				'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
-            				'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
-            			'</ul>' +
-            			'<div class="jGraduate_colPick"></div>' +
-            			'<div class="jGraduate_gradPick"></div>' +
+
+			$this.addClass('jGraduate_Picker');
+			$this.html('<ul class="jGraduate_tabs">' +
+							'<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
+							'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
+							'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
+						'</ul>' +
+						'<div class="jGraduate_colPick"></div>' +
+						'<div class="jGraduate_gradPick"></div>' +
 						'<div class="jGraduate_LightBox"></div>' +
 						'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>'
-            			
-            			
-            			);
+			);
 			var colPicker = $(idref + '> .jGraduate_colPick');
 			var gradPicker = $(idref + '> .jGraduate_gradPick');
-			
-            gradPicker.html(
-            	'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
-            		'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
-            		'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
-            		'<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' +
-            	'</div>' + 
-            	'<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">' +
-            		'<div class="jGraduate_StopSection">' +
-	            		'<label class="jGraduate_Form_Heading">Begin Point</label>' +
-    	        		'<div class="jGraduate_Form_Section">' +
-        	    			'<label>x:</label>' +
-            				'<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' +
-            				'<label>y:</label>' +
-            				'<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' +
-        	   			'</div>' +
-        	   		'</div>' +
-        	   		'<div class="jGraduate_StopSection">' +
-	            		'<label class="jGraduate_Form_Heading">End Point</label>' +
-    	        		'<div class="jGraduate_Form_Section">' +
-	    	        		'<label>x:</label>' +
-		    	        	'<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' +
-    		    	    	'<label>y:</label>' +
-        		    		'<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' +
-    	    	    	'</div>' +
-    	    	    '</div>' +
-    	       	'</div>' +
-            	'<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">' +
+
+			gradPicker.html(
+				'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
+					'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
+					'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
+					'<div id="' + id + '_jGraduate_StopSlider" class="jGraduate_StopSlider"></div>' +
+				'</div>' +
+				'<div class="jGraduate_Form jGraduate_Points jGraduate_lg_field">' +
+					'<div class="jGraduate_StopSection">' +
+						'<label class="jGraduate_Form_Heading">Begin Point</label>' +
+						'<div class="jGraduate_Form_Section">' +
+							'<label>x:</label>' +
+							'<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' +
+							'<label>y:</label>' +
+							'<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' +
+						'</div>' +
+					'</div>' +
+					'<div class="jGraduate_StopSection">' +
+						'<label class="jGraduate_Form_Heading">End Point</label>' +
+						'<div class="jGraduate_Form_Section">' +
+							'<label>x:</label>' +
+							'<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' +
+							'<label>y:</label>' +
+							'<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' +
+						'</div>' +
+					'</div>' +
+				'</div>' +
+				'<div class="jGraduate_Form jGraduate_Points jGraduate_rg_field">' +
 					'<div class="jGraduate_StopSection">' +
 						'<label class="jGraduate_Form_Heading">Center Point</label>' +
 						'<div class="jGraduate_Form_Section">' +
@@ -262,7 +254,7 @@ jQuery.fn.jGraduate =
 							'<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
 						'</div>' +
 					'</div>' +
-    	       	'</div>' +
+				'</div>' +
 				'<div class="jGraduate_StopSection jGraduate_SpreadMethod">' +
 					'<label class="jGraduate_Form_Heading">Spread method</label>' +
 					'<div class="jGraduate_Form_Section">' +
@@ -270,160 +262,160 @@ jQuery.fn.jGraduate =
 							'<option value=pad selected>Pad</option>' +
 							'<option value=reflect>Reflect</option>' +
 							'<option value=repeat>Repeat</option>' +
-						'</select>' + 
+						'</select>' +
 					'</div>' +
 				'</div>' +
-            	'<div class="jGraduate_Form">' +
-        	   		'<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">' +
+				'<div class="jGraduate_Form">' +
+					'<div class="jGraduate_Slider jGraduate_RadiusField jGraduate_rg_field">' +
 						'<label class="prelabel">Radius:</label>' +
 						'<div id="' + id + '_jGraduate_Radius" class="jGraduate_SliderBar jGraduate_Radius" title="Click to set radius">' +
 							'<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
 						'</div>' +
-						'<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' + 
-    	    	    '</div>' +
-        	   		'<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">' +
+						'<label><input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%</label>' +
+					'</div>' +
+					'<div class="jGraduate_Slider jGraduate_EllipField jGraduate_rg_field">' +
 						'<label class="prelabel">Ellip:</label>' +
 						'<div id="' + id + '_jGraduate_Ellip" class="jGraduate_SliderBar jGraduate_Ellip" title="Click to set Ellip">' +
 							'<img id="' + id + '_jGraduate_EllipArrows" class="jGraduate_EllipArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
 						'</div>' +
-						'<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' + 
-    	    	    '</div>' +
-        	   		'<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">' +
+						'<label><input type="text" id="' + id + '_jGraduate_EllipInput" size="3" value="0"/>%</label>' +
+					'</div>' +
+					'<div class="jGraduate_Slider jGraduate_AngleField jGraduate_rg_field">' +
 						'<label class="prelabel">Angle:</label>' +
 						'<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
 							'<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
 						'</div>' +
-						'<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>deg</label>' + 
-    	    	    '</div>' +
-        	   		'<div class="jGraduate_Slider jGraduate_OpacField">' +
+						'<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>deg</label>' +
+					'</div>' +
+					'<div class="jGraduate_Slider jGraduate_OpacField">' +
 						'<label class="prelabel">Opac:</label>' +
 						'<div id="' + id + '_jGraduate_Opac" class="jGraduate_SliderBar jGraduate_Opac" title="Click to set Opac">' +
 							'<img id="' + id + '_jGraduate_OpacArrows" class="jGraduate_OpacArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif">' +
 						'</div>' +
-						'<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' + 
-    	    	    '</div>' +
-    	       	'</div>' +
-        	    '<div class="jGraduate_OkCancel">' +
-            		'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
-            		'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
-            	'</div>');
-            	
+						'<label><input type="text" id="' + id + '_jGraduate_OpacInput" size="3" value="100"/>%</label>' +
+					'</div>' +
+				'</div>' +
+				'<div class="jGraduate_OkCancel">' +
+					'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
+					'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
+				'</div>');
+
 			// --------------
-            // Set up all the SVG elements (the gradient, stops and rectangle)
-            var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
-            	SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
-            	
-            var curType, curGradient, previewRect;	
-            
+			// Set up all the SVG elements (the gradient, stops and rectangle)
+			var MAX = 256, MARGINX = 0, MARGINY = 0,
+				// STOP_RADIUS = 15 / 2,
+				SIZEX = MAX - 2 * MARGINX, SIZEY = MAX - 2 * MARGINY;
+
+			var curType, curGradient, previewRect;
+
 			var attr_input = {};
-            
-            var SLIDERW = 145;
-            $('.jGraduate_SliderBar').width(SLIDERW);
-			
-			var container = $('#' + id+'_jGraduate_GradContainer')[0];
-			
+
+			var SLIDERW = 145;
+			$('.jGraduate_SliderBar').width(SLIDERW);
+
+			var container = $('#' + id + '_jGraduate_GradContainer')[0];
+
 			var svg = mkElem('svg', {
 				id: id + '_jgraduate_svg',
 				width: MAX,
 				height: MAX,
 				xmlns: ns.svg
 			}, container);
-			
-			// if we are sent a gradient, import it 
-			
+
+			// if we are sent a gradient, import it
+
 			curType = curType || $this.paint.type;
-			
+
 			var grad = curGradient = $this.paint[curType];
-			
+
 			var gradalpha = $this.paint.alpha;
-			
+
 			var isSolid = curType === 'solidColor';
-			
+
 			// Make any missing gradients
-			switch ( curType ) {
-				case "solidColor":
-					// fall through
-				case "linearGradient":
-					if(!isSolid) {
-						curGradient.id = id+'_lg_jgraduate_grad';
-						grad = curGradient = svg.appendChild(curGradient);//.cloneNode(true));
-					}
-					mkElem('radialGradient', {
-						id: id + '_rg_jgraduate_grad'
-					}, svg);
-					if(curType === "linearGradient") break;
-				case "radialGradient":
-					if(!isSolid) {
-						curGradient.id = id+'_rg_jgraduate_grad';
-						grad = curGradient = svg.appendChild(curGradient);//.cloneNode(true));
-					}
-					mkElem('linearGradient', {
-						id: id + '_lg_jgraduate_grad'
-					}, svg);
+			switch (curType) {
+			case 'solidColor':
+				// fall through
+			case 'linearGradient':
+				if (!isSolid) {
+					curGradient.id = id + '_lg_jgraduate_grad';
+					grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+				}
+				mkElem('radialGradient', {
+					id: id + '_rg_jgraduate_grad'
+				}, svg);
+				if (curType === 'linearGradient') break;
+				// fall through
+			case 'radialGradient':
+				if (!isSolid) {
+					curGradient.id = id + '_rg_jgraduate_grad';
+					grad = curGradient = svg.appendChild(curGradient); // .cloneNode(true));
+				}
+				mkElem('linearGradient', {
+					id: id + '_lg_jgraduate_grad'
+				}, svg);
 			}
-			
-			if(isSolid) {
+
+			if (isSolid) {
 				grad = curGradient = $('#' + id + '_lg_jgraduate_grad')[0];
 				var color = $this.paint[curType];
 				mkStop(0, '#' + color, 1);
-				
-				var type = typeof $settings.newstop;
-				
-				if(type === 'string') {
-					switch ( $settings.newstop ) {
-						case 'same':
-							mkStop(1, '#' + color, 1);				
-							break;
 
-						case 'inverse':
-							// Invert current color for second stop
-							var inverted = '';
-							
-							for(var i = 0; i < 6; i += 2) {
-								var ch = color.substr(i, 2);
-								var inv = (255 - parseInt(color.substr(i, 2), 16)).toString(16);
-								if(inv.length < 2) inv = 0 + inv;
-								inverted += inv;
-							}
-							mkStop(1, '#' + inverted, 1);
-							break;
-						
-						case 'white':
-							mkStop(1, '#ffffff', 1);
-							break;
-	
-						case 'black':
-							mkStop(1, '#000000', 1);
-							break;
+				var type = typeof $settings.newstop;
+
+				if (type === 'string') {
+					switch ($settings.newstop) {
+					case 'same':
+						mkStop(1, '#' + color, 1);
+						break;
+
+					case 'inverse':
+						// Invert current color for second stop
+						var inverted = '';
+
+						for (var i = 0; i < 6; i += 2) {
+							var ch = color.substr(i, 2);
+							var inv = (255 - parseInt(color.substr(i, 2), 16)).toString(16);
+							if (inv.length < 2) inv = 0 + inv;
+							inverted += inv;
+						}
+						mkStop(1, '#' + inverted, 1);
+						break;
+
+					case 'white':
+						mkStop(1, '#ffffff', 1);
+						break;
+
+					case 'black':
+						mkStop(1, '#000000', 1);
+						break;
 					}
-				} else if(type === 'object'){
+				} else if (type === 'object') {
 					var opac = ('opac' in $settings.newstop) ? $settings.newstop.opac : 1;
 					mkStop(1, ($settings.newstop.color || '#' + color), opac);
 				}
 			}
 
-			
-			var x1 = parseFloat(grad.getAttribute('x1')||0.0),
-				y1 = parseFloat(grad.getAttribute('y1')||0.0),
-				x2 = parseFloat(grad.getAttribute('x2')||1.0),
-				y2 = parseFloat(grad.getAttribute('y2')||0.0);
-				
-			var cx = parseFloat(grad.getAttribute('cx')||0.5),
-				cy = parseFloat(grad.getAttribute('cy')||0.5),
-				fx = parseFloat(grad.getAttribute('fx')|| cx),
-				fy = parseFloat(grad.getAttribute('fy')|| cy);
+			var x1 = parseFloat(grad.getAttribute('x1') || 0.0),
+				y1 = parseFloat(grad.getAttribute('y1') || 0.0),
+				x2 = parseFloat(grad.getAttribute('x2') || 1.0),
+				y2 = parseFloat(grad.getAttribute('y2') || 0.0);
+
+			var cx = parseFloat(grad.getAttribute('cx') || 0.5),
+				cy = parseFloat(grad.getAttribute('cy') || 0.5),
+				fx = parseFloat(grad.getAttribute('fx') || cx),
+				fy = parseFloat(grad.getAttribute('fy') || cy);
 
-			
 			var previewRect = mkElem('rect', {
 				id: id + '_jgraduate_rect',
 				x: MARGINX,
 				y: MARGINY,
 				width: SIZEX,
 				height: SIZEY,
-				fill: 'url(#'+id+'_jgraduate_grad)',
-				'fill-opacity': gradalpha/100
+				fill: 'url(#' + id + '_jgraduate_grad)',
+				'fill-opacity': gradalpha / 100
 			}, svg);
-			
+
 			// stop visuals created here
 			var beginCoord = $('<div/>').attr({
 				'class': 'grad_coord jGraduate_lg_field',
@@ -432,12 +424,12 @@ jQuery.fn.jGraduate =
 				top: y1 * MAX,
 				left: x1 * MAX
 			}).data('coord', 'start').appendTo(container);
-			
+
 			var endCoord = beginCoord.clone().text(2).css({
 				top: y2 * MAX,
 				left: x2 * MAX
 			}).attr('title', 'End stop').data('coord', 'end').appendTo(container);
-		
+
 			var centerCoord = $('<div/>').attr({
 				'class': 'grad_coord jGraduate_rg_field',
 				title: 'Center stop'
@@ -445,93 +437,91 @@ jQuery.fn.jGraduate =
 				top: cy * MAX,
 				left: cx * MAX
 			}).data('coord', 'center').appendTo(container);
-			
+
 			var focusCoord = centerCoord.clone().text('F').css({
 				top: fy * MAX,
 				left: fx * MAX,
 				display: 'none'
 			}).attr('title', 'Focus point').data('coord', 'focus').appendTo(container);
-			
+
 			focusCoord[0].id = id + '_jGraduate_focusCoord';
-			
+
 			var coords = $(idref + ' .grad_coord');
-			
-// 			$(container).hover(function() {
-// 				coords.animate({
-// 					opacity: 1
-// 				}, 500);
-// 			}, function() {
-// 				coords.animate({
-// 					opacity: .2
-// 				}, 500);				
-// 			});
-			
-			$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function(i, attr) {
+
+			// $(container).hover(function () {
+			// 	coords.animate({
+			// 		opacity: 1
+			// 	}, 500);
+			// }, function () {
+			// 	coords.animate({
+			// 		opacity: .2
+			// 	}, 500);
+			// });
+
+			$.each(['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'], function (i, attr) {
 				var attrval = curGradient.getAttribute(attr);
-				
+
 				var isRadial = isNaN(attr[1]);
-				
-				if(!attrval) {
+
+				if (!attrval) {
 					// Set defaults
-					if(isRadial) {
+					if (isRadial) {
 						// For radial points
-						attrval = "0.5";
+						attrval = '0.5';
 					} else {
 						// Only x2 is 1
-						attrval = attr === 'x2' ? "1.0" : "0.0";
+						attrval = attr === 'x2' ? '1.0' : '0.0';
 					}
 				}
 
-				attr_input[attr] = $('#'+id+'_jGraduate_' + attr)
+				attr_input[attr] = $('#' + id + '_jGraduate_' + attr)
 					.val(attrval)
-					.change(function() {
+					.change(function () {
 						// TODO: Support values < 0 and > 1 (zoomable preview?)
 						if (isNaN(parseFloat(this.value)) || this.value < 0) {
-							this.value = 0.0; 
-						} else if(this.value > 1) {
+							this.value = 0.0;
+						} else if (this.value > 1) {
 							this.value = 1.0;
 						}
-						
-						if(!(attr[0] === 'f' && !showFocus)) {
-							if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
+
+						if (!(attr[0] === 'f' && !showFocus)) {
+							if (isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
 								curGradient.setAttribute(attr, this.value);
 							}
 						}
-						
-						if(isRadial) {
-							var $elem = attr[0] === "c" ? centerCoord : focusCoord;
+
+						if (isRadial) {
+							var $elem = attr[0] === 'c' ? centerCoord : focusCoord;
 						} else {
-							var $elem = attr[1] === "1" ? beginCoord : endCoord;						
+							var $elem = attr[1] === '1' ? beginCoord : endCoord;
 						}
-						
+
 						var cssName = attr.indexOf('x') >= 0 ? 'left' : 'top';
-						
+
 						$elem.css(cssName, this.value * MAX);
-				}).change();
+					}).change();
 			});
 
-
-			
-			function mkStop(n, color, opac, sel, stop_elem) {
-				var stop = stop_elem || mkElem('stop',{'stop-color':color,'stop-opacity':opac,offset:n}, curGradient);
-				if(stop_elem) {
+			function mkStop (n, color, opac, sel, stop_elem) {
+				var stop = stop_elem || mkElem('stop', {'stop-color': color, 'stop-opacity': opac, offset: n}, curGradient);
+				if (stop_elem) {
 					color = stop_elem.getAttribute('stop-color');
 					opac = stop_elem.getAttribute('stop-opacity');
 					n = stop_elem.getAttribute('offset');
 				} else {
 					curGradient.appendChild(stop);
 				}
-				if(opac === null) opac = 1;
-				
+				if (opac === null) opac = 1;
+
 				var picker_d = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
-				
-				var pathbg = mkElem('path',{
+
+				var pathbg = mkElem('path', {
 					d: picker_d,
 					fill: 'url(#jGraduate_trans)',
 					transform: 'translate(' + (10 + n * MAX) + ', 26)'
 				}, stopGroup);
-				
-				var path = mkElem('path',{
+
+				var path = mkElem('path', {
 					d: picker_d,
 					fill: color,
 					'fill-opacity': opac,
@@ -540,44 +530,44 @@ jQuery.fn.jGraduate =
 					'stroke-width': 1.5
 				}, stopGroup);
 
-				$(path).mousedown(function(e) {
+				$(path).mousedown(function (e) {
 					selectStop(this);
 					drag = cur_stop;
 					$win.mousemove(dragColor).mouseup(remDrags);
 					stop_offset = stopMakerDiv.offset();
 					e.preventDefault();
 					return false;
-				}).data('stop', stop).data('bg', pathbg).dblclick(function() {
-					$('div.jGraduate_LightBox').show();			
+				}).data('stop', stop).data('bg', pathbg).dblclick(function () {
+					$('div.jGraduate_LightBox').show();
 					var colorhandle = this;
 					var stopOpacity = +stop.getAttribute('stop-opacity') || 1;
 					var stopColor = stop.getAttribute('stop-color') || 1;
-					var thisAlpha = (parseFloat(stopOpacity)*255).toString(16);
-					while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
+					var thisAlpha = (parseFloat(stopOpacity) * 255).toString(16);
+					while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
 					color = stopColor.substr(1) + thisAlpha;
-					$('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
-							window: { title: "Pick the start color and opacity for the gradient" },
-							images: { clientPath: $settings.images.clientPath },
-							color: { active: color, alphaSupport: true }
-						}, function(color, arg2){
-							stopColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
-							stopOpacity = color.val('a') !== null ? color.val('a')/256 : 1;
-							colorhandle.setAttribute('fill', stopColor);
-							colorhandle.setAttribute('fill-opacity', stopOpacity);
-							stop.setAttribute('stop-color', stopColor);
-							stop.setAttribute('stop-opacity', stopOpacity);
-							$('div.jGraduate_LightBox').hide();
-							$('#'+id+'_jGraduate_stopPicker').hide();
-						}, null, function() {
-							$('div.jGraduate_LightBox').hide();
-							$('#'+id+'_jGraduate_stopPicker').hide();
-						});
+					$('#' + id + '_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
+						window: { title: 'Pick the start color and opacity for the gradient' },
+						images: { clientPath: $settings.images.clientPath },
+						color: { active: color, alphaSupport: true }
+					}, function (color, arg2) {
+						stopColor = color.val('hex') ? ('#' + color.val('hex')) : 'none';
+						stopOpacity = color.val('a') !== null ? color.val('a') / 256 : 1;
+						colorhandle.setAttribute('fill', stopColor);
+						colorhandle.setAttribute('fill-opacity', stopOpacity);
+						stop.setAttribute('stop-color', stopColor);
+						stop.setAttribute('stop-opacity', stopOpacity);
+						$('div.jGraduate_LightBox').hide();
+						$('#' + id + '_jGraduate_stopPicker').hide();
+					}, null, function () {
+						$('div.jGraduate_LightBox').hide();
+						$('#' + id + '_jGraduate_stopPicker').hide();
+					});
 				});
-				
-				$(curGradient).find('stop').each(function() {
+
+				$(curGradient).find('stop').each(function () {
 					var cur_s = $(this);
-					if(+this.getAttribute('offset') > n) {
-						if(!color) {
+					if (+this.getAttribute('offset') > n) {
+						if (!color) {
 							var newcolor = this.getAttribute('stop-color');
 							var newopac = this.getAttribute('stop-opacity');
 							stop.setAttribute('stop-color', newcolor);
@@ -589,142 +579,138 @@ jQuery.fn.jGraduate =
 						return false;
 					}
 				});
-				if(sel) selectStop(path);
+				if (sel) selectStop(path);
 				return stop;
 			}
-			
-			function remStop() {
+
+			function remStop () {
 				delStop.setAttribute('display', 'none');
 				var path = $(cur_stop);
 				var stop = path.data('stop');
 				var bg = path.data('bg');
 				$([cur_stop, stop, bg]).remove();
 			}
-			
-				
+
 			var stops, stopGroup;
-			
+
 			var stopMakerDiv = $('#' + id + '_jGraduate_StopSlider');
 
 			var cur_stop, stopGroup, stopMakerSVG, drag;
-			
-			var delStop = mkElem('path',{
-				d:'m9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',
-				fill:'none',
-				stroke:'#D00',
-				'stroke-width':5,
-				display:'none'
+
+			var delStop = mkElem('path', {
+				d: 'm9.75,-6l-19.5,19.5m0,-19.5l19.5,19.5',
+				fill: 'none',
+				stroke: '#D00',
+				'stroke-width': 5,
+				display: 'none'
 			}, stopMakerSVG);
 
-			
-			function selectStop(item) {
-				if(cur_stop) cur_stop.setAttribute('stroke', '#000');
+			function selectStop (item) {
+				if (cur_stop) cur_stop.setAttribute('stroke', '#000');
 				item.setAttribute('stroke', 'blue');
 				cur_stop = item;
 				cur_stop.parentNode.appendChild(cur_stop);
-			// 	stops = $('stop');
-			// 	opac_select.val(cur_stop.attr('fill-opacity') || 1);
-			// 	root.append(delStop);
+				// 	stops = $('stop');
+				// 	opac_select.val(cur_stop.attr('fill-opacity') || 1);
+				// 	root.append(delStop);
 			}
-			
+
 			var stop_offset;
-			
-			function remDrags() {
+
+			function remDrags () {
 				$win.unbind('mousemove', dragColor);
-				if(delStop.getAttribute('display') !== 'none') {
+				if (delStop.getAttribute('display') !== 'none') {
 					remStop();
 				}
 				drag = null;
 			}
-			
+
 			var scale_x = 1, scale_y = 1, angle = 0;
 			var c_x = cx;
 			var c_y = cy;
-			
-			function xform() {
-				var rot = angle?'rotate(' + angle + ',' + c_x + ',' + c_y + ') ':'';
-				if(scale_x === 1 && scale_y === 1) {
+
+			function xform () {
+				var rot = angle ? 'rotate(' + angle + ',' + c_x + ',' + c_y + ') ' : '';
+				if (scale_x === 1 && scale_y === 1) {
 					curGradient.removeAttribute('gradientTransform');
-// 					$('#ang').addClass('dis');
+					// $('#ang').addClass('dis');
 				} else {
-					var x = -c_x * (scale_x-1);
-					var y = -c_y * (scale_y-1);
+					var x = -c_x * (scale_x - 1);
+					var y = -c_y * (scale_y - 1);
 					curGradient.setAttribute('gradientTransform', rot + 'translate(' + x + ',' + y + ') scale(' + scale_x + ',' + scale_y + ')');
-// 					$('#ang').removeClass('dis');
+					// $('#ang').removeClass('dis');
 				}
 			}
-			
-			function dragColor(evt) {
 
+			function dragColor (evt) {
 				var x = evt.pageX - stop_offset.left;
 				var y = evt.pageY - stop_offset.top;
-				x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10: x;
+				x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;
 
 				var xf_str = 'translate(' + x + ', 26)';
-					if(y < -60 || y > 130) {
-						delStop.setAttribute('display', 'block');
-						delStop.setAttribute('transform', xf_str);
-					} else {
-						delStop.setAttribute('display', 'none');
-					}
-				
+				if (y < -60 || y > 130) {
+					delStop.setAttribute('display', 'block');
+					delStop.setAttribute('transform', xf_str);
+				} else {
+					delStop.setAttribute('display', 'none');
+				}
+
 				drag.setAttribute('transform', xf_str);
 				$.data(drag, 'bg').setAttribute('transform', xf_str);
 				var stop = $.data(drag, 'stop');
 				var s_x = (x - 10) / MAX;
-				
+
 				stop.setAttribute('offset', s_x);
 				var last = 0;
-				
-				$(curGradient).find('stop').each(function(i) {
+
+				$(curGradient).find('stop').each(function (i) {
 					var cur = this.getAttribute('offset');
 					var t = $(this);
-					if(cur < last) {
+					if (cur < last) {
 						t.prev().before(t);
 						stops = $(curGradient).find('stop');
 					}
 					last = cur;
 				});
-				
 			}
-			
+
 			stopMakerSVG = mkElem('svg', {
 				width: '100%',
 				height: 45
 			}, stopMakerDiv[0]);
-			
+
 			var trans_pattern = mkElem('pattern', {
 				width: 16,
 				height: 16,
 				patternUnits: 'userSpaceOnUse',
 				id: 'jGraduate_trans'
 			}, stopMakerSVG);
-			
+
 			var trans_img = mkElem('image', {
 				width: 16,
 				height: 16
 			}, trans_pattern);
-			
+
 			var bg_image = $settings.images.clientPath + 'map-opacity.png';
 
 			trans_img.setAttributeNS(ns.xlink, 'xlink:href', bg_image);
-			
-			$(stopMakerSVG).click(function(evt) {
+
+			$(stopMakerSVG).click(function (evt) {
 				stop_offset = stopMakerDiv.offset();
 				var target = evt.target;
-				if(target.tagName === 'path') return;
+				if (target.tagName === 'path') return;
 				var x = evt.pageX - stop_offset.left - 8;
-				x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10: x;
+				x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x;
 				mkStop(x / MAX, 0, 0, true);
 				evt.stopPropagation();
 			});
-			
-			$(stopMakerSVG).mouseover(function() {
+
+			$(stopMakerSVG).mouseover(function () {
 				stopMakerSVG.appendChild(delStop);
 			});
-			
+
 			stopGroup = mkElem('g', {}, stopMakerSVG);
-			
+
 			mkElem('line', {
 				x1: 10,
 				y1: 15,
@@ -733,169 +719,165 @@ jQuery.fn.jGraduate =
 				'stroke-width': 2,
 				stroke: '#000'
 			}, stopMakerSVG);
-			
-			
-			var spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function() {
+
+			var spreadMethodOpt = gradPicker.find('.jGraduate_spreadMethod').change(function () {
 				curGradient.setAttribute('spreadMethod', $(this).val());
 			});
-			
-		
+
 			// handle dragging the stop around the swatch
 			var draggingCoord = null;
-			
-			var onCoordDrag = function(evt) {
+
+			var onCoordDrag = function (evt) {
 				var x = evt.pageX - offset.left;
 				var y = evt.pageY - offset.top;
 
 				// clamp stop to the swatch
 				x = x < 0 ? 0 : x > MAX ? MAX : x;
 				y = y < 0 ? 0 : y > MAX ? MAX : y;
-				
+
 				draggingCoord.css('left', x).css('top', y);
 
-				// calculate stop offset            		
+				// calculate stop offset
 				var fracx = x / SIZEX;
 				var fracy = y / SIZEY;
-				
+
 				var type = draggingCoord.data('coord');
 				var grad = curGradient;
-				
-				switch ( type ) {
-					case 'start':
-						attr_input.x1.val(fracx);
-						attr_input.y1.val(fracy);
-						grad.setAttribute('x1', fracx);
-						grad.setAttribute('y1', fracy);
-						break;
-					case 'end':
-						attr_input.x2.val(fracx);
-						attr_input.y2.val(fracy);
-						grad.setAttribute('x2', fracx);
-						grad.setAttribute('y2', fracy);
-						break;
-					case 'center':
-						attr_input.cx.val(fracx);
-						attr_input.cy.val(fracy);
-						grad.setAttribute('cx', fracx);
-						grad.setAttribute('cy', fracy);
-						c_x = fracx;
-						c_y = fracy;
-						xform();
-						break;
-					case 'focus':
-						attr_input.fx.val(fracx);
-						attr_input.fy.val(fracy);
-						grad.setAttribute('fx', fracx);
-						grad.setAttribute('fy', fracy);
-						xform();
+
+				switch (type) {
+				case 'start':
+					attr_input.x1.val(fracx);
+					attr_input.y1.val(fracy);
+					grad.setAttribute('x1', fracx);
+					grad.setAttribute('y1', fracy);
+					break;
+				case 'end':
+					attr_input.x2.val(fracx);
+					attr_input.y2.val(fracy);
+					grad.setAttribute('x2', fracx);
+					grad.setAttribute('y2', fracy);
+					break;
+				case 'center':
+					attr_input.cx.val(fracx);
+					attr_input.cy.val(fracy);
+					grad.setAttribute('cx', fracx);
+					grad.setAttribute('cy', fracy);
+					c_x = fracx;
+					c_y = fracy;
+					xform();
+					break;
+				case 'focus':
+					attr_input.fx.val(fracx);
+					attr_input.fy.val(fracy);
+					grad.setAttribute('fx', fracx);
+					grad.setAttribute('fy', fracy);
+					xform();
 				}
-				
+
 				evt.preventDefault();
-			}
-			
-			var onCoordUp = function() {
+			};
+
+			var onCoordUp = function () {
 				draggingCoord = null;
 				$win.unbind('mousemove', onCoordDrag).unbind('mouseup', onCoordUp);
-			}
-			
-			// Linear gradient
-// 			(function() {
+			};
+
+			// Linear gradient
+			// (function () {
 
-			
 			stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
 
-			// if there are not at least two stops, then 
+			// if there are not at least two stops, then
 			if (numstops < 2) {
 				while (numstops < 2) {
-					curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
+					curGradient.appendChild(document.createElementNS(ns.svg, 'stop'));
 					++numstops;
 				}
 				stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
 			}
-			
-			var numstops = stops.length;				
-			for(var i = 0; i < numstops; i++) {
+
+			var numstops = stops.length;
+			for (var i = 0; i < numstops; i++) {
 				mkStop(0, 0, 0, 0, stops[i]);
 			}
-			
+
 			spreadMethodOpt.val(curGradient.getAttribute('spreadMethod') || 'pad');
 
 			var offset;
-			
-			// No match, so show focus point
-			var showFocus = false; 
-			
-			previewRect.setAttribute('fill-opacity', gradalpha/100);
 
-			
-			$('#' + id + ' div.grad_coord').mousedown(function(evt) {
+			// No match, so show focus point
+			var showFocus = false;
+
+			previewRect.setAttribute('fill-opacity', gradalpha / 100);
+
+			$('#' + id + ' div.grad_coord').mousedown(function (evt) {
 				evt.preventDefault();
 				draggingCoord = $(this);
-				var s_pos = draggingCoord.offset();
+				// var s_pos = draggingCoord.offset();
 				offset = draggingCoord.parent().offset();
 				$win.mousemove(onCoordDrag).mouseup(onCoordUp);
 			});
-			
+
 			// bind GUI elements
-			$('#'+id+'_jGraduate_Ok').bind('click', function() {
+			$('#' + id + '_jGraduate_Ok').bind('click', function () {
 				$this.paint.type = curType;
-				$this.paint[curType] = curGradient.cloneNode(true);;
+				$this.paint[curType] = curGradient.cloneNode(true);
 				$this.paint.solidColor = null;
 				okClicked();
 			});
-			$('#'+id+'_jGraduate_Cancel').bind('click', function(paint) {
+			$('#' + id + '_jGraduate_Cancel').bind('click', function (paint) {
 				cancelClicked();
 			});
 
-			if(curType === 'radialGradient') {
-				if(showFocus) {
-					focusCoord.show();				
+			if (curType === 'radialGradient') {
+				if (showFocus) {
+					focusCoord.show();
 				} else {
 					focusCoord.hide();
-					attr_input.fx.val("");
-					attr_input.fy.val("");
+					attr_input.fx.val('');
+					attr_input.fy.val('');
 				}
 			}
 
-			$("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus;
-			
+			$('#' + id + '_jGraduate_match_ctr')[0].checked = !showFocus;
+
 			var lastfx, lastfy;
-			
-			$("#" + id + "_jGraduate_match_ctr").change(function() {
+
+			$('#' + id + '_jGraduate_match_ctr').change(function () {
 				showFocus = !this.checked;
 				focusCoord.toggle(showFocus);
 				attr_input.fx.val('');
 				attr_input.fy.val('');
 				var grad = curGradient;
-				if(!showFocus) {
+				if (!showFocus) {
 					lastfx = grad.getAttribute('fx');
 					lastfy = grad.getAttribute('fy');
 					grad.removeAttribute('fx');
 					grad.removeAttribute('fy');
 				} else {
-					var fx = lastfx || .5;
-					var fy = lastfy || .5;
+					var fx = lastfx || 0.5;
+					var fy = lastfy || 0.5;
 					grad.setAttribute('fx', fx);
 					grad.setAttribute('fy', fy);
 					attr_input.fx.val(fx);
 					attr_input.fy.val(fy);
 				}
 			});
-			
+
 			var stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
 			var numstops = stops.length;
-			// if there are not at least two stops, then 
+			// if there are not at least two stops, then
 			if (numstops < 2) {
 				while (numstops < 2) {
-					curGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
+					curGradient.appendChild(document.createElementNS(ns.svg, 'stop'));
 					++numstops;
 				}
 				stops = curGradient.getElementsByTagNameNS(ns.svg, 'stop');
 			}
-			
+
 			var slider;
-			
-			var setSlider = function(e) {
+
+			var setSlider = function (e) {
 				var offset = slider.offset;
 				var div = slider.parent;
 				var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
@@ -903,88 +885,88 @@ jQuery.fn.jGraduate =
 				if (x <= 0) x = 0;
 				var posx = x - 5;
 				x /= SLIDERW;
-				
-				switch ( slider.type ) {
-					case 'radius':
-						x = Math.pow(x * 2, 2.5);
-						if(x > .98 && x < 1.02) x = 1;
-						if (x <= .01) x = .01;
-						curGradient.setAttribute('r', x);
-						break;
-					case 'opacity':
-						$this.paint.alpha = parseInt(x*100);
-						previewRect.setAttribute('fill-opacity', x);
-						break;
-					case 'ellip':
-						scale_x = 1, scale_y = 1;
-						if(x < .5) {
-							x /= .5; // 0.001
-							scale_x = x <= 0 ? .01 : x;
-						} else if(x > .5) {
-							x /= .5; // 2
-							x = 2 - x;
-							scale_y = x <= 0 ? .01 : x;
-						} 
-						xform();
-						x -= 1;
-						if(scale_y === x + 1) {
-							x = Math.abs(x);
-						}
-						break;
-					case 'angle':
-						x = x - .5;
-						angle = x *= 180;
-						xform();
-						x /= 100;
-						break;
+
+				switch (slider.type) {
+				case 'radius':
+					x = Math.pow(x * 2, 2.5);
+					if (x > 0.98 && x < 1.02) x = 1;
+					if (x <= 0.01) x = 0.01;
+					curGradient.setAttribute('r', x);
+					break;
+				case 'opacity':
+					$this.paint.alpha = parseInt(x * 100);
+					previewRect.setAttribute('fill-opacity', x);
+					break;
+				case 'ellip':
+					scale_x = 1;
+					scale_y = 1;
+					if (x < 0.5) {
+						x /= 0.5; // 0.001
+						scale_x = x <= 0 ? 0.01 : x;
+					} else if (x > 0.5) {
+						x /= 0.5; // 2
+						x = 2 - x;
+						scale_y = x <= 0 ? 0.01 : x;
+					}
+					xform();
+					x -= 1;
+					if (scale_y === x + 1) {
+						x = Math.abs(x);
+					}
+					break;
+				case 'angle':
+					x = x - 0.5;
+					angle = x *= 180;
+					xform();
+					x /= 100;
+					break;
 				}
-				slider.elem.css({'margin-left':posx});
-				x = Math.round(x*100);
+				slider.elem.css({'margin-left': posx});
+				x = Math.round(x * 100);
 				slider.input.val(x);
 			};
-			
+
 			var ellip_val = 0, angle_val = 0;
-			
-			if(curType === 'radialGradient') {
+
+			if (curType === 'radialGradient') {
 				var tlist = curGradient.gradientTransform.baseVal;
-				if(tlist.numberOfItems === 2) {
+				if (tlist.numberOfItems === 2) {
 					var t = tlist.getItem(0);
 					var s = tlist.getItem(1);
-					if(t.type === 2 && s.type === 3) {
+					if (t.type === 2 && s.type === 3) {
 						var m = s.matrix;
-						if(m.a !== 1) {
-							ellip_val = Math.round(-(1 - m.a) * 100);	
-						} else if(m.d !== 1) {
+						if (m.a !== 1) {
+							ellip_val = Math.round(-(1 - m.a) * 100);
+						} else if (m.d !== 1) {
 							ellip_val = Math.round((1 - m.d) * 100);
-						} 
+						}
 					}
-				} else if(tlist.numberOfItems === 3) {
+				} else if (tlist.numberOfItems === 3) {
 					// Assume [R][T][S]
 					var r = tlist.getItem(0);
 					var t = tlist.getItem(1);
 					var s = tlist.getItem(2);
-					
-					if(r.type === 4 
-						&& t.type === 2 
-						&& s.type === 3) {
 
+					if (r.type === 4 &&
+						t.type === 2 &&
+						s.type === 3
+					) {
 						angle_val = Math.round(r.angle);
 						var m = s.matrix;
-						if(m.a !== 1) {
-							ellip_val = Math.round(-(1 - m.a) * 100);	
+						if (m.a !== 1) {
+							ellip_val = Math.round(-(1 - m.a) * 100);
 						} else if(m.d !== 1) {
 							ellip_val = Math.round((1 - m.d) * 100);
-						} 
-						
+						}
 					}
 				}
 			}
-			
+
 			var sliders = {
 				radius: {
 					handle: '#' + id + '_jGraduate_RadiusArrows',
 					input: '#' + id + '_jGraduate_RadiusInput',
-					val: (curGradient.getAttribute('r') || .5) * 100
+					val: (curGradient.getAttribute('r') || 0.5) * 100
 				},
 				opacity: {
 					handle: '#' + id + '_jGraduate_OpacArrows',
@@ -1001,11 +983,11 @@ jQuery.fn.jGraduate =
 					input: '#' + id + '_jGraduate_AngleInput',
 					val: angle_val
 				}
-			}
-			
-			$.each(sliders, function(type, data) {
+			};
+
+			$.each(sliders, function (type, data) {
 				var handle = $(data.handle);
-				handle.mousedown(function(evt) {
+				handle.mousedown(function (evt) {
 					var parent = handle.parent();
 					slider = {
 						type: type,
@@ -1017,124 +999,122 @@ jQuery.fn.jGraduate =
 					$win.mousemove(dragSlider).mouseup(stopSlider);
 					evt.preventDefault();
 				});
-				
-				$(data.input).val(data.val).change(function() {
+
+				$(data.input).val(data.val).change(function () {
 					var val = +this.value;
 					var xpos = 0;
 					var isRad = curType === 'radialGradient';
-					switch ( type ) {
-						case 'radius':
-							if(isRad) curGradient.setAttribute('r', val / 100);
-							xpos = (Math.pow(val / 100, 1 / 2.5) / 2) * SLIDERW;
-							break;
-						
-						case 'opacity':
-							$this.paint.alpha = val;
-							previewRect.setAttribute('fill-opacity', val / 100);
-							xpos = val * (SLIDERW / 100);
-							break;
-							
-						case 'ellip':
-							scale_x = scale_y = 1;
-							if(val === 0) {
-								xpos = SLIDERW * .5;
-								break;
-							}
-							if(val > 99.5) val = 99.5;
-							if(val > 0) {
-								scale_y = 1 - (val / 100);
-							} else {
-								scale_x = - (val / 100) - 1;
-							}
+					switch (type) {
+					case 'radius':
+						if (isRad) curGradient.setAttribute('r', val / 100);
+						xpos = (Math.pow(val / 100, 1 / 2.5) / 2) * SLIDERW;
+						break;
 
-							xpos = SLIDERW * ((val + 100) / 2) / 100;
-							if(isRad) xform();
+					case 'opacity':
+						$this.paint.alpha = val;
+						previewRect.setAttribute('fill-opacity', val / 100);
+						xpos = val * (SLIDERW / 100);
+						break;
+
+					case 'ellip':
+						scale_x = scale_y = 1;
+						if (val === 0) {
+							xpos = SLIDERW * 0.5;
 							break;
-						
-						case 'angle':
-							angle = val;
-							xpos = angle / 180;
-							xpos += .5;
-							xpos *= SLIDERW;
-							if(isRad) xform();
+						}
+						if (val > 99.5) val = 99.5;
+						if (val > 0) {
+							scale_y = 1 - (val / 100);
+						} else {
+							scale_x = -(val / 100) - 1;
+						}
+
+						xpos = SLIDERW * ((val + 100) / 2) / 100;
+						if (isRad) xform();
+						break;
+
+					case 'angle':
+						angle = val;
+						xpos = angle / 180;
+						xpos += 0.5;
+						xpos *= SLIDERW;
+						if (isRad) xform();
 					}
-					if(xpos > SLIDERW) {
+					if (xpos > SLIDERW) {
 						xpos = SLIDERW;
-					} else if(xpos < 0) {
+					} else if (xpos < 0) {
 						xpos = 0;
 					}
 					handle.css({'margin-left': xpos - 5});
 				}).change();
 			});
-			
-			var dragSlider = function(evt) {
+
+			var dragSlider = function (evt) {
 				setSlider(evt);
 				evt.preventDefault();
 			};
-			
-			var stopSlider = function(evt) {
+
+			var stopSlider = function (evt) {
 				$win.unbind('mousemove', dragSlider).unbind('mouseup', stopSlider);
 				slider = null;
 			};
-			
-			
+
 			// --------------
-			var thisAlpha = ($this.paint.alpha*255/100).toString(16);
-			while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
-			thisAlpha = thisAlpha.split(".")[0];
-			color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
-			
-			if(!isSolid) {
+			var thisAlpha = ($this.paint.alpha * 255 / 100).toString(16);
+			while (thisAlpha.length < 2) { thisAlpha = '0' + thisAlpha; }
+			thisAlpha = thisAlpha.split('.')[0];
+			color = $this.paint.solidColor === 'none' ? '' : $this.paint.solidColor + thisAlpha;
+
+			if (!isSolid) {
 				color = stops[0].getAttribute('stop-color');
 			}
-			
+
 			// This should be done somewhere else, probably
 			$.extend($.fn.jPicker.defaults.window, {
-				alphaSupport: true, effects: {type: 'show',speed: 0}
+				alphaSupport: true, effects: {type: 'show', speed: 0}
 			});
-			
+
 			colPicker.jPicker(
 				{
 					window: { title: $settings.window.pickerTitle },
 					images: { clientPath: $settings.images.clientPath },
 					color: { active: color, alphaSupport: true }
 				},
-				function(color) {
-					$this.paint.type = "solidColor";
+				function (color) {
+					$this.paint.type = 'solidColor';
 					$this.paint.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
-					$this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
+					$this.paint.solidColor = color.val('hex') ? color.val('hex') : 'none';
 					$this.paint.radialGradient = null;
-					okClicked(); 
+					okClicked();
 				},
 				null,
-				function(){ cancelClicked(); }
-				);
+				function () { cancelClicked(); }
+			);
 
-			
 			var tabs = $(idref + ' .jGraduate_tabs li');
-			tabs.click(function() {
+			tabs.click(function () {
 				tabs.removeClass('jGraduate_tab_current');
 				$(this).addClass('jGraduate_tab_current');
-				$(idref + " > div").hide();
+				$(idref + ' > div').hide();
 				var type = $(this).attr('data-type');
 				var container = $(idref + ' .jGraduate_gradPick').show();
-				if(type === 'rg' || type === 'lg') {
+				if (type === 'rg' || type === 'lg') {
 					// Show/hide appropriate fields
 					$('.jGraduate_' + type + '_field').show();
 					$('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
-					
+
 					$('#' + id + '_jgraduate_rect')[0].setAttribute('fill', 'url(#' + id + '_' + type + '_jgraduate_grad)');
-					
+
 					// Copy stops
-					
+
 					curType = type === 'lg' ? 'linearGradient' : 'radialGradient';
-					
+
 					$('#' + id + '_jGraduate_OpacInput').val($this.paint.alpha).change();
-					
+
 					var newGrad = $('#' + id + '_' + type + '_jgraduate_grad')[0];
-					
-					if(curGradient !== newGrad) {
-						var cur_stops = $(curGradient).find('stop');	
+
+					if (curGradient !== newGrad) {
+						var cur_stops = $(curGradient).find('stop');
 						$(newGrad).empty().append(cur_stops);
 						curGradient = newGrad;
 						var sm = spreadMethodOpt.val();
@@ -1142,7 +1122,7 @@ jQuery.fn.jGraduate =
 					}
 					showFocus = type === 'rg' && curGradient.getAttribute('fx') != null && !(cx == fx && cy == fy);
 					$('#' + id + '_jGraduate_focusCoord').toggle(showFocus);
-					if(showFocus) {
+					if (showFocus) {
 						$('#' + id + '_jGraduate_match_ctr')[0].checked = false;
 					}
 				} else {
@@ -1150,26 +1130,26 @@ jQuery.fn.jGraduate =
 					$(idref + ' .jGraduate_colPick').show();
 				}
 			});
-			$(idref + " > div").hide();
+			$(idref + ' > div').hide();
 			tabs.removeClass('jGraduate_tab_current');
 			var tab;
-			switch ( $this.paint.type ) {
-				case 'linearGradient':
-					tab = $(idref + ' .jGraduate_tab_lingrad');
-					break;
-				case 'radialGradient':
-					tab = $(idref + ' .jGraduate_tab_radgrad');
-					break;
-				default:
-					tab = $(idref + ' .jGraduate_tab_color');
-					break;
+			switch ($this.paint.type) {
+			case 'linearGradient':
+				tab = $(idref + ' .jGraduate_tab_lingrad');
+				break;
+			case 'radialGradient':
+				tab = $(idref + ' .jGraduate_tab_radgrad');
+				break;
+			default:
+				tab = $(idref + ' .jGraduate_tab_color');
+				break;
 			}
 			$this.show();
-			
+
 			// jPicker will try to show after a 0ms timeout, so need to fire this after that
-			setTimeout(function() {
-				tab.addClass('jGraduate_tab_current').click();	
+			setTimeout(function () {
+				tab.addClass('jGraduate_tab_current').click();
 			}, 10);
 		});
 	};
-})();
\ No newline at end of file
+})();
diff --git a/editor/spinbtn/JQuerySpinBtn.js b/editor/spinbtn/JQuerySpinBtn.js
index 292be62c..bdbb0087 100644
--- a/editor/spinbtn/JQuerySpinBtn.js
+++ b/editor/spinbtn/JQuerySpinBtn.js
@@ -1,5 +1,5 @@
-/*globals $, svgEditor*/
-/*jslint vars: true, eqeq: true*/
+/* eslint-disable no-var */
+/* globals $, svgEditor */
 /* SpinButton control
  *
  * Adds bells and whistles to any ordinary textbox to
@@ -37,15 +37,15 @@
  * v1.2  27 Sep 2006 - Mark Gibson		- Major enhancements
  * v1.3a 28 Sep 2006 - George Adamson	- Minor enhancements
  * v1.4  18 Jun 2009 - Jeff Schiller    - Added callback function
- * v1.5  06 Jul 2009 - Jeff Schiller    - Fixes for Opera.  
- * v1.6  13 Oct 2009 - Alexis Deveria   - Added stepfunc function  
+ * v1.5  06 Jul 2009 - Jeff Schiller    - Fixes for Opera.
+ * v1.6  13 Oct 2009 - Alexis Deveria   - Added stepfunc function
  * v1.7  21 Oct 2009 - Alexis Deveria   - Minor fixes
  *                                        Fast-repeat for keys and live updating as you type.
  * v1.8  12 Jan 2010 - Benjamin Thomas  - Fixes for mouseout behavior.
  *                                        Added smallStep
- 
+
  Sample usage:
- 
+
 	// Create group of settings to initialise spinbutton(s). (Optional)
 	var myOptions = {
 					min: 0,						// Set lower limit.
@@ -56,37 +56,37 @@
 					upClass: mySpinUpClass,		// CSS class for style when mouse over up button.
 					downClass: mySpinDnClass	// CSS class for style when mouse over down button.
 					}
- 
+
 	$(document).ready(function(){
 
 		// Initialise INPUT element(s) as SpinButtons: (passing options if desired)
 		$("#myInputElement").SpinButton(myOptions);
 
 	});
- 
+
  */
-$.fn.SpinButton = function(cfg) { 'use strict';
-	function coord(el,prop) {
+$.fn.SpinButton = function (cfg) {
+	'use strict';
+	function coord (el, prop) {
 		var c = el[prop], b = document.body;
-		
-		while ((el = el.offsetParent) && (el != b)) {
+
+		while ((el = el.offsetParent) && (el !== b)) {
 			if (!$.browser.msie || (el.currentStyle.position !== 'relative')) {
 				c += el[prop];
 			}
 		}
-		
+
 		return c;
 	}
 
-	return this.each(function(){
-
+	return this.each(function () {
 		this.repeating = false;
-		
+
 		// Apply specified options or defaults:
 		// (Ought to refactor this some day to use $.extend() instead)
 		this.spinCfg = {
-			//min: cfg && cfg.min ? Number(cfg.min) : null,
-			//max: cfg && cfg.max ? Number(cfg.max) : null,
+			// min: cfg && cfg.min ? Number(cfg.min) : null,
+			// max: cfg && cfg.max ? Number(cfg.max) : null,
 			min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,	// Fixes bug with min:0
 			max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
 			step: cfg && cfg.step ? Number(cfg.step) : 1,
@@ -105,42 +105,43 @@ $.fn.SpinButton = function(cfg) { 'use strict';
 		};
 
 		// if a smallStep isn't supplied, use half the regular step
-		this.spinCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.spinCfg.step/2;
-		
-		this.adjustValue = function(i){
+		this.spinCfg.smallStep = cfg && cfg.smallStep ? cfg.smallStep : this.spinCfg.step / 2;
+
+		this.adjustValue = function (i) {
 			var v;
-			if(isNaN(this.value)) {
+			if (isNaN(this.value)) {
 				v = this.spinCfg.reset;
-			} else if($.isFunction(this.spinCfg.stepfunc)) {
+			} else if ($.isFunction(this.spinCfg.stepfunc)) {
 				v = this.spinCfg.stepfunc(this, i);
 			} else {
 				// weirdest javascript bug ever: 5.1 + 0.1 = 5.199999999
 				v = Number((Number(this.value) + Number(i)).toFixed(5));
 			}
-			if (this.spinCfg.min !== null) {v = Math.max(v, this.spinCfg.min);}
-			if (this.spinCfg.max !== null) {v = Math.min(v, this.spinCfg.max);}
+			if (this.spinCfg.min !== null) { v = Math.max(v, this.spinCfg.min); }
+			if (this.spinCfg.max !== null) { v = Math.min(v, this.spinCfg.max); }
 			this.value = v;
-			if ($.isFunction(this.spinCfg.callback)) {this.spinCfg.callback(this);}
+			if ($.isFunction(this.spinCfg.callback)) { this.spinCfg.callback(this); }
 		};
-		
+
 		$(this)
-		.addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button')
-		
-		.mousemove(function(e){
-			// Determine which button mouse is over, or not (spin direction):
-			var x = e.pageX || e.x;
-			var y = e.pageY || e.y;
-			var el = e.target || e.srcElement;
-			var scale = svgEditor.tool_scale || 1;
-			var height = $(el).height()/2;
-			
-			var direction = 
-				(x > coord(el,'offsetLeft') + el.offsetWidth*scale - this.spinCfg._btn_width)
-				? ((y < coord(el,'offsetTop') + height*scale) ? 1 : -1) : 0;
-			
-			if (direction !== this.spinCfg._direction) {
-				// Style up/down buttons:
-				switch(direction){
+			.addClass(cfg && cfg.spinClass ? cfg.spinClass : 'spin-button')
+
+			.mousemove(function (e) {
+				// Determine which button mouse is over, or not (spin direction):
+				var x = e.pageX || e.x;
+				var y = e.pageY || e.y;
+				var el = e.target || e.srcElement;
+				var scale = svgEditor.tool_scale || 1;
+				var height = $(el).height() / 2;
+
+				var direction =
+					(x > coord(el, 'offsetLeft') +
+						el.offsetWidth * scale - this.spinCfg._btn_width)
+						? ((y < coord(el, 'offsetTop') + height * scale) ? 1 : -1) : 0;
+
+				if (direction !== this.spinCfg._direction) {
+					// Style up/down buttons:
+					switch (direction) {
 					case 1: // Up arrow:
 						$(this).removeClass(this.spinCfg.downClass).addClass(this.spinCfg.upClass);
 						break;
@@ -149,124 +150,121 @@ $.fn.SpinButton = function(cfg) { 'use strict';
 						break;
 					default: // Mouse is elsewhere in the textbox
 						$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
-				}
-				
-				// Set spin direction:
-				this.spinCfg._direction = direction;
-			}
-		})
-		
-		.mouseout(function(){
-			// Reset up/down buttons to their normal appearance when mouse moves away:
-			$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
-			this.spinCfg._direction = null;
-			window.clearInterval(this.spinCfg._repeat);
-			window.clearTimeout(this.spinCfg._delay);
-		})
-		
-		.mousedown(function(e){
-			if (e.button === 0 && this.spinCfg._direction != 0) {
-				// Respond to click on one of the buttons:
-				var self = this;
-				var stepSize = e.shiftKey ? self.spinCfg.smallStep : self.spinCfg.step;
+					}
 
-				var adjust = function() {
-					self.adjustValue(self.spinCfg._direction * stepSize);
-				};
-			
-				adjust();
-				
-				// Initial delay before repeating adjustment
-				self.spinCfg._delay = window.setTimeout(function() {
-					adjust();
-					// Repeat adjust at regular intervals
-					self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval);
-				}, self.spinCfg.delay);
-			}
-		})
-		
-		.mouseup(function(e){
-			// Cancel repeating adjustment
-			window.clearInterval(this.spinCfg._repeat);
-			window.clearTimeout(this.spinCfg._delay);
-		})
-		
-		.dblclick(function(e) {
-			if ($.browser.msie) {
-				this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
-			}
-		})
-		
-		.keydown(function(e){
-			// Respond to up/down arrow keys.
-			switch(e.keyCode){
-				case 38: this.adjustValue(this.spinCfg.step);  break; // Up
-				case 40: this.adjustValue(-this.spinCfg.step); break; // Down
-				case 33: this.adjustValue(this.spinCfg.page);  break; // PageUp
-				case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
-			}
-		})
-		
-		/*
-		http://unixpapa.com/js/key.html describes the current state-of-affairs for
-		key repeat events:
-		- Safari 3.1 changed their model so that keydown is reliably repeated going forward
-		- Firefox and Opera still only repeat the keypress event, not the keydown
-		*/
-		.keypress(function(e){
-			if (this.repeating) {
-				// Respond to up/down arrow keys.
-				switch(e.keyCode){
-					case 38: this.adjustValue(this.spinCfg.step);  break; // Up
-					case 40: this.adjustValue(-this.spinCfg.step); break; // Down
-					case 33: this.adjustValue(this.spinCfg.page);  break; // PageUp
-					case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
+					// Set spin direction:
+					this.spinCfg._direction = direction;
 				}
-			} 
-			// we always ignore the first keypress event (use the keydown instead)
-			else {
-				this.repeating = true;
-			}
-		})
-		
-		// clear the 'repeating' flag
-		.keyup(function(e) {
-			this.repeating = false;
-			switch(e.keyCode){
+			})
+
+			.mouseout(function () {
+				// Reset up/down buttons to their normal appearance when mouse moves away:
+				$(this).removeClass(this.spinCfg.upClass).removeClass(this.spinCfg.downClass);
+				this.spinCfg._direction = null;
+				window.clearInterval(this.spinCfg._repeat);
+				window.clearTimeout(this.spinCfg._delay);
+			})
+
+			.mousedown(function (e) {
+				if (e.button === 0 && this.spinCfg._direction !== 0) {
+					// Respond to click on one of the buttons:
+					var self = this;
+					var stepSize = e.shiftKey ? self.spinCfg.smallStep : self.spinCfg.step;
+
+					var adjust = function () {
+						self.adjustValue(self.spinCfg._direction * stepSize);
+					};
+
+					adjust();
+
+					// Initial delay before repeating adjustment
+					self.spinCfg._delay = window.setTimeout(function () {
+						adjust();
+						// Repeat adjust at regular intervals
+						self.spinCfg._repeat = window.setInterval(adjust, self.spinCfg.interval);
+					}, self.spinCfg.delay);
+				}
+			})
+
+			.mouseup(function (e) {
+				// Cancel repeating adjustment
+				window.clearInterval(this.spinCfg._repeat);
+				window.clearTimeout(this.spinCfg._delay);
+			})
+
+			.dblclick(function (e) {
+				if ($.browser.msie) {
+					this.adjustValue(this.spinCfg._direction * this.spinCfg.step);
+				}
+			})
+
+			.keydown(function (e) {
+				// Respond to up/down arrow keys.
+				switch (e.keyCode) {
+				case 38: this.adjustValue(this.spinCfg.step); break; // Up
+				case 40: this.adjustValue(-this.spinCfg.step); break; // Down
+				case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
+				case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
+				}
+			})
+
+			/*
+			http://unixpapa.com/js/key.html describes the current state-of-affairs for
+			key repeat events:
+			- Safari 3.1 changed their model so that keydown is reliably repeated going forward
+			- Firefox and Opera still only repeat the keypress event, not the keydown
+			*/
+			.keypress(function (e) {
+				if (this.repeating) {
+					// Respond to up/down arrow keys.
+					switch (e.keyCode) {
+					case 38: this.adjustValue(this.spinCfg.step); break; // Up
+					case 40: this.adjustValue(-this.spinCfg.step); break; // Down
+					case 33: this.adjustValue(this.spinCfg.page); break; // PageUp
+					case 34: this.adjustValue(-this.spinCfg.page); break; // PageDown
+					}
+				// we always ignore the first keypress event (use the keydown instead)
+				} else {
+					this.repeating = true;
+				}
+			})
+
+			// clear the 'repeating' flag
+			.keyup(function (e) {
+				this.repeating = false;
+				switch (e.keyCode) {
 				case 38: // Up
 				case 40: // Down
 				case 33: // PageUp
 				case 34: // PageDown
 				case 13: this.adjustValue(0); break; // Enter/Return
-			}
-		})
-		
-		.bind("mousewheel", function(e){
-			// Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
-			if (e.wheelDelta >= 120) {
-				this.adjustValue(this.spinCfg.step);
-			}
-			else if (e.wheelDelta <= -120) {
-				this.adjustValue(-this.spinCfg.step);
-			}
-			
-			e.preventDefault();
-		})
-		
-		.change(function(e){
-			this.adjustValue(0);
-		});
-		
-		if (this.addEventListener) {
-			// Respond to mouse wheel in Firefox
-			this.addEventListener('DOMMouseScroll', function(e) {
-				if (e.detail > 0) {
+				}
+			})
+
+			.bind('mousewheel', function (e) {
+				// Respond to mouse wheel in IE. (It returns up/dn motion in multiples of 120)
+				if (e.wheelDelta >= 120) {
+					this.adjustValue(this.spinCfg.step);
+				} else if (e.wheelDelta <= -120) {
 					this.adjustValue(-this.spinCfg.step);
 				}
-				else if (e.detail < 0) {
+
+				e.preventDefault();
+			})
+
+			.change(function (e) {
+				this.adjustValue(0);
+			});
+
+		if (this.addEventListener) {
+			// Respond to mouse wheel in Firefox
+			this.addEventListener('DOMMouseScroll', function (e) {
+				if (e.detail > 0) {
+					this.adjustValue(-this.spinCfg.step);
+				} else if (e.detail < 0) {
 					this.adjustValue(this.spinCfg.step);
 				}
-				
+
 				e.preventDefault();
 			}, false);
 		}
diff --git a/editor/svgicons/jquery.svgicons.js b/editor/svgicons/jquery.svgicons.js
index 5a51e46d..f496c310 100644
--- a/editor/svgicons/jquery.svgicons.js
+++ b/editor/svgicons/jquery.svgicons.js
@@ -1,4 +1,6 @@
-/*
+/* eslint-disable no-var */
+/* globals jQuery */
+/*
  * SVG Icon Loader 2.0
  *
  * jQuery Plugin for loading SVG icons from a single file
@@ -12,10 +14,10 @@ How to use:
 
 1. Create the SVG master file that includes all icons:
 
-The master SVG icon-containing file is an SVG file that contains 
+The master SVG icon-containing file is an SVG file that contains
 <g> elements. Each <g> element should contain the markup of an SVG
-icon. The <g> element has an ID that should 
-correspond with the ID of the HTML element used on the page that should contain 
+icon. The <g> element has an ID that should
+correspond with the ID of the HTML element used on the page that should contain
 or optionally be replaced by the icon. Additionally, one empty element should be
 added at the end with id "svg_eof".
 
@@ -37,10 +39,10 @@ All options are optional and can include:
 
 - 'fallback (object literal)': List of raster images with each
 	key being the SVG icon ID to replace, and the value the image file name.
-	
+
 - 'fallback_path (string)': The path to use for all images
 	listed under "fallback"
-	
+
 - 'replace (boolean)': If set to true, HTML elements will be replaced by,
 	rather than include the SVG icon.
 
@@ -49,14 +51,14 @@ All options are optional and can include:
 
 - 'resize (object literal)': List with selectors for keys and numbers
 	as values. This allows an easy way to resize specific icons.
-	
-- 'callback (function)': A function to call when all icons have been loaded. 
-	Includes an object literal as its argument with as keys all icon IDs and the 
+
+- 'callback (function)': A function to call when all icons have been loaded.
+	Includes an object literal as its argument with as keys all icon IDs and the
 	icon as a jQuery object as its value.
 
 - 'id_match (boolean)': Automatically attempt to match SVG icon ids with
 	corresponding HTML id (default: true)
-	
+
 - 'no_img (boolean)': Prevent attempting to convert the icon into an <img>
 	element (may be faster, help for browser consistency)
 
@@ -68,17 +70,16 @@ All options are optional and can include:
 	$.getSvgIcon(id (string));
 
 This will return the icon (as jQuery object) with a given ID.
-	
+
 6. To resize icons at a later point without using the callback, use this:
 	$.resizeSvgIcons(resizeOptions) (use the same way as the "resize" parameter)
 
-
 Example usage #1:
 
 $(function() {
 	$.svgIcons('my_icon_set.svg'); // The SVG file that contains all icons
-	// No options have been set, so all icons will automatically be inserted 
-	// into HTML elements that match the same IDs. 
+	// No options have been set, so all icons will automatically be inserted
+	// into HTML elements that match the same IDs.
 });
 
 Example usage #2:
@@ -114,372 +115,372 @@ $(function() {
 		resize: function() {
 			'#save_icon .svg_icon': 64  // The "save" icon will be resized to 64 x 64px
 		},
-		
-		callback: function(icons) { // Sets background color for "close" icon 
+
+		callback: function(icons) { // Sets background color for "close" icon
 			icons['close'].css('background','red');
 		},
-		
+
 		svgz: true // Indicates that an SVGZ file is being used
-		
+
 	})
 });
-
 */
 
+(function ($) {
+var svgIcons = {}, fixIDs;
 
-(function($) {
-	var svg_icons = {}, fixIDs;
+$.svgIcons = function (file, opts) {
+	var svgns = 'http://www.w3.org/2000/svg',
+		xlinkns = 'http://www.w3.org/1999/xlink',
+		iconW = opts.w || 24,
+		iconH = opts.h || 24,
+		elems, svgdoc, testImg,
+		iconsMade = false, dataLoaded = false, loadAttempts = 0,
+		// ua = navigator.userAgent,
+		isOpera = !!window.opera,
+		// isSafari = (ua.indexOf('Safari/') > -1 && ua.indexOf('Chrome/') === -1),
+		dataPre = 'data:image/svg+xml;charset=utf-8;base64,';
 
-	$.svgIcons = function(file, opts) {
-		var svgns = "http://www.w3.org/2000/svg",
-			xlinkns = "http://www.w3.org/1999/xlink",
-			icon_w = opts.w?opts.w : 24,
-			icon_h = opts.h?opts.h : 24,
-			elems, svgdoc, testImg,
-			icons_made = false, data_loaded = false, load_attempts = 0,
-			ua = navigator.userAgent, isOpera = !!window.opera, isSafari = (ua.indexOf('Safari/') > -1 && ua.indexOf('Chrome/')==-1),
-			data_pre = 'data:image/svg+xml;charset=utf-8;base64,';
-			
-			if(opts.svgz) {
-				var data_el = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide();
-				try {
-					svgdoc = data_el[0].contentDocument;
-					data_el.load(getIcons);
-					getIcons(0, true); // Opera will not run "load" event if file is already cached
-				} catch(err1) {
-					useFallback();
-				}
-			} else {
-				var parser = new DOMParser();
-				$.ajax({
-					url: file,
-					dataType: 'string',
-					success: function(data) {
-						if(!data) {
-							$(useFallback);
-							return;
-						}
-						svgdoc = parser.parseFromString(data, "text/xml");
-						$(function() {
-							getIcons('ajax');
-						});
-					},
-					error: function(err) {
-						// TODO: Fix Opera widget icon bug
-						if(window.opera) {
-							$(function() {
-								useFallback();
-							});
-						} else {
-							if(err.responseText) {
-								svgdoc = parser.parseFromString(err.responseText, "text/xml");
-
-								if(!svgdoc.childNodes.length) {
-									$(useFallback);									
-								}
-								$(function() {
-									getIcons('ajax');
-								});							
-							} else {
-								$(useFallback);
-							}
-						}
-					}
-				});
-			}
-			
-		function getIcons(evt, no_wait) {
-			if(evt !== 'ajax') {
-				if(data_loaded) return;
-				// Webkit sometimes says svgdoc is undefined, other times
-				// it fails to load all nodes. Thus we must make sure the "eof" 
-				// element is loaded.
-				svgdoc = data_el[0].contentDocument; // Needed again for Webkit
-				var isReady = (svgdoc && svgdoc.getElementById('svg_eof'));
-				if(!isReady && !(no_wait && isReady)) {
-					load_attempts++;
-					if(load_attempts < 50) {
-						setTimeout(getIcons, 20);
-					} else {
-						useFallback();
-						data_loaded = true;
-					}
+	if (opts.svgz) {
+		var dataEl = $('<object data="' + file + '" type=image/svg+xml>').appendTo('body').hide();
+		try {
+			svgdoc = dataEl[0].contentDocument;
+			dataEl.load(getIcons);
+			getIcons(0, true); // Opera will not run "load" event if file is already cached
+		} catch (err1) {
+			useFallback();
+		}
+	} else {
+		var parser = new DOMParser();
+		$.ajax({
+			url: file,
+			dataType: 'string',
+			success: function (data) {
+				if (!data) {
+					$(useFallback);
 					return;
 				}
-				data_loaded = true;
+				svgdoc = parser.parseFromString(data, 'text/xml');
+				$(function () {
+					getIcons('ajax');
+				});
+			},
+			error: function (err) {
+				// TODO: Fix Opera widget icon bug
+				if (window.opera) {
+					$(function () {
+						useFallback();
+					});
+				} else {
+					if (err.responseText) {
+						svgdoc = parser.parseFromString(err.responseText, 'text/xml');
+
+						if (!svgdoc.childNodes.length) {
+							$(useFallback);
+						}
+						$(function () {
+							getIcons('ajax');
+						});
+					} else {
+						$(useFallback);
+					}
+				}
 			}
-			
-			elems = $(svgdoc.firstChild).children(); //.getElementsByTagName('foreignContent');
-			
-			if(!opts.no_img) {
-				var testSrc = data_pre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
-				
-				testImg = $(new Image()).attr({
-					src: testSrc,
-					width: 0,
-					height: 0
-				}).appendTo('body')
+		});
+	}
+
+	function getIcons (evt, noWait) {
+		if (evt !== 'ajax') {
+			if (dataLoaded) return;
+			// Webkit sometimes says svgdoc is undefined, other times
+			// it fails to load all nodes. Thus we must make sure the "eof"
+			// element is loaded.
+			svgdoc = dataEl[0].contentDocument; // Needed again for Webkit
+			var isReady = (svgdoc && svgdoc.getElementById('svg_eof'));
+			if (!isReady && !(noWait && isReady)) {
+				loadAttempts++;
+				if (loadAttempts < 50) {
+					setTimeout(getIcons, 20);
+				} else {
+					useFallback();
+					dataLoaded = true;
+				}
+				return;
+			}
+			dataLoaded = true;
+		}
+
+		elems = $(svgdoc.firstChild).children(); // .getElementsByTagName('foreignContent');
+
+		if (!opts.no_img) {
+			var testSrc = dataPre + 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D';
+
+			testImg = $(new Image()).attr({
+				src: testSrc,
+				width: 0,
+				height: 0
+			}).appendTo('body')
 				.load(function () {
 					// Safari 4 crashes, Opera and Chrome don't
 					makeIcons(true);
 				}).error(function () {
 					makeIcons();
 				});
-			} else {
-				setTimeout(function() {
-					if(!icons_made) makeIcons();
-				},500);
-			}
+		} else {
+			setTimeout(function () {
+				if (!iconsMade) makeIcons();
+			}, 500);
 		}
-		
-		var setIcon = function(target, icon, id, setID) {
-			if(isOpera) icon.css('visibility','hidden');
-			if(opts.replace) {
-				if(setID) icon.attr('id',id);
-				var cl = target.attr('class');
-				if(cl) icon.attr('class','svg_icon '+cl);
-				target.replaceWith(icon);
-			} else {
-				
-				target.append(icon);
-			}
-			if(isOpera) {
-				setTimeout(function() {
-					icon.removeAttr('style');
-				},1);
-			}
-		};
-		
-		var addIcon = function(icon, id) {
-			if(opts.id_match === undefined || opts.id_match !== false) {
-				setIcon(holder, icon, id, true);
-			}
-			svg_icons[id] = icon;
-		};
-		
-		function makeIcons(toImage, fallback) {
-			if(icons_made) return;
-			if(opts.no_img) toImage = false;
-			var holder, temp_holder;
-			
-			if(toImage) {
-				temp_holder = $(document.createElement('div'));
-				temp_holder.hide().appendTo('body');
-			} 
-			if(fallback) {
-				var path = opts.fallback_path?opts.fallback_path:'';
-				$.each(fallback, function(id, imgsrc) {
-					holder = $('#' + id);
-					var icon = $(new Image())
-						.attr({
-							'class':'svg_icon',
-							src: path + imgsrc,
-							'width': icon_w,
-							'height': icon_h,
-							'alt': 'icon'
-						});
-					
-					addIcon(icon, id);
-				});
-			} else {
-				var len = elems.length;
-				for(var i = 0; i < len; i++) {
-					var elem = elems[i];
-					var id = elem.id;
-					if(id === 'svg_eof') break;
-					holder = $('#' + id);
-					var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];
-					var svgroot = document.createElementNS(svgns, "svg");
-					// Per http://www.w3.org/TR/xml-names11/#defaulting, the namespace for
-					// attributes should have no value.
-					svgroot.setAttributeNS(null, 'viewBox', [0,0,icon_w,icon_h].join(' '));
-					
-					// Make flexible by converting width/height to viewBox
-					var w = svg.getAttribute('width');
-					var h = svg.getAttribute('height');
-					svg.removeAttribute('width');
-					svg.removeAttribute('height');
-					
-					var vb = svg.getAttribute('viewBox');
-					if(!vb) {
-						svg.setAttribute('viewBox', [0,0,w,h].join(' '));
-					}
-					
-					// Not using jQuery to be a bit faster
-					svgroot.setAttribute('xmlns', svgns);
-					svgroot.setAttribute('width', icon_w);
-					svgroot.setAttribute('height', icon_h);
-					svgroot.setAttribute("xmlns:xlink", xlinkns);
-					svgroot.setAttribute("class", 'svg_icon');
+	}
 
-					// Without cloning, Firefox will make another GET request.
-					// With cloning, causes issue in Opera/Win/Non-EN
-					if(!isOpera) svg = svg.cloneNode(true);
-					
-					svgroot.appendChild(svg);
-					var icon;
-					if(toImage) {
-						temp_holder.empty().append(svgroot);
-						var str = data_pre + encode64(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgroot))));
-						icon = $(new Image())
-							.attr({'class':'svg_icon', src:str});
-					} else {
-						icon = fixIDs($(svgroot), i);
-					}
-					addIcon(icon, id);
-				}
+	var setIcon = function (target, icon, id, setID) {
+		if (isOpera) icon.css('visibility', 'hidden');
+		if (opts.replace) {
+			if (setID) icon.attr('id', id);
+			var cl = target.attr('class');
+			if (cl) icon.attr('class', 'svg_icon ' + cl);
+			target.replaceWith(icon);
+		} else {
+			target.append(icon);
+		}
+		if (isOpera) {
+			setTimeout(function () {
+				icon.removeAttr('style');
+			}, 1);
+		}
+	};
 
-			}
-			
-			if(opts.placement) {
-				$.each(opts.placement, function(sel, id) {
-					if(!svg_icons[id]) return;
-					$(sel).each(function(i) {
-						var copy = svg_icons[id].clone();
-						if(i > 0 && !toImage) copy = fixIDs(copy, i, true);
-						setIcon($(this), copy, id);
+	var holder;
+	var addIcon = function (icon, id) {
+		if (opts.id_match === undefined || opts.id_match !== false) {
+			setIcon(holder, icon, id, true);
+		}
+		svgIcons[id] = icon;
+	};
+
+	function makeIcons (toImage, fallback) {
+		if (iconsMade) return;
+		if (opts.no_img) toImage = false;
+		var tempHolder;
+
+		if (toImage) {
+			tempHolder = $(document.createElement('div'));
+			tempHolder.hide().appendTo('body');
+		}
+		if (fallback) {
+			var path = opts.fallback_path || '';
+			$.each(fallback, function (id, imgsrc) {
+				holder = $('#' + id);
+				var icon = $(new Image())
+					.attr({
+						'class': 'svg_icon',
+						src: path + imgsrc,
+						'width': iconW,
+						'height': iconH,
+						'alt': 'icon'
 					});
-				});
-			}
-			if(!fallback) {
-				if(toImage) temp_holder.remove();
-				if(data_el) data_el.remove();
-				if(testImg) testImg.remove();
-			}
-			if(opts.resize) $.resizeSvgIcons(opts.resize);
-			icons_made = true;
 
-			if(opts.callback) opts.callback(svg_icons);
-		}
-		
-		fixIDs = function(svg_el, svg_num, force) {
-			var defs = svg_el.find('defs');
-			if(!defs.length) return svg_el;
-			var id_elems;
-			if(isOpera) {
-				id_elems = defs.find('*').filter(function() {
-					return !!this.id;
-				});
-			} else {
-				id_elems = defs.find('[id]');
-			}
-			
-			var all_elems = svg_el[0].getElementsByTagName('*'), len = all_elems.length;
-			
-			id_elems.each(function(i) {
-				var id = this.id;
-				var no_dupes = ($(svgdoc).find('#' + id).length <= 1);
-				if(isOpera) no_dupes = false; // Opera didn't clone svg_el, so not reliable
-				// if(!force && no_dupes) return;
-				var new_id = 'x' + id + svg_num + i;
-				this.id = new_id;
-				
-				var old_val = 'url(#' + id + ')';
-				var new_val = 'url(#' + new_id + ')';
-				
-				// Selector method, possibly faster but fails in Opera / jQuery 1.4.3
-//				svg_el.find('[fill="url(#' + id + ')"]').each(function() {
-//					this.setAttribute('fill', 'url(#' + new_id + ')');
-//				}).end().find('[stroke="url(#' + id + ')"]').each(function() {
-//					this.setAttribute('stroke', 'url(#' + new_id + ')');
-//				}).end().find('use').each(function() {
-//					if(this.getAttribute('xlink:href') == '#' + id) {
-//						this.setAttributeNS(xlinkns,'href','#' + new_id);
-//					}
-//				}).end().find('[filter="url(#' + id + ')"]').each(function() {
-//					this.setAttribute('filter', 'url(#' + new_id + ')');
-//				});
+				addIcon(icon, id);
+			});
+		} else {
+			var len = elems.length;
+			for (var i = 0; i < len; i++) {
+				var elem = elems[i];
+				var id = elem.id;
+				if (id === 'svg_eof') break;
+				holder = $('#' + id);
+				var svg = elem.getElementsByTagNameNS(svgns, 'svg')[0];
+				var svgroot = document.createElementNS(svgns, 'svg');
+				// Per http://www.w3.org/TR/xml-names11/#defaulting, the namespace for
+				// attributes should have no value.
+				svgroot.setAttributeNS(null, 'viewBox', [0, 0, iconW, iconH].join(' '));
 
-				for(i = 0; i < len; i++) {
-					var elem = all_elems[i];
-					if(elem.getAttribute('fill') === old_val) {
-						elem.setAttribute('fill', new_val);
-					}
-					if(elem.getAttribute('stroke') === old_val) {
-						elem.setAttribute('stroke', new_val);
-					}
-					if(elem.getAttribute('filter') === old_val) {
-						elem.setAttribute('filter', new_val);
-					}
+				// Make flexible by converting width/height to viewBox
+				var w = svg.getAttribute('width');
+				var h = svg.getAttribute('height');
+				svg.removeAttribute('width');
+				svg.removeAttribute('height');
+
+				var vb = svg.getAttribute('viewBox');
+				if (!vb) {
+					svg.setAttribute('viewBox', [0, 0, w, h].join(' '));
 				}
-			});
-			return svg_el;
-		};
-		
-		function useFallback() {
-			if(file.indexOf('.svgz') != -1) {
-				var reg_file = file.replace('.svgz','.svg');
-				if(window.console) {
-					console.log('.svgz failed, trying with .svg');
+
+				// Not using jQuery to be a bit faster
+				svgroot.setAttribute('xmlns', svgns);
+				svgroot.setAttribute('width', iconW);
+				svgroot.setAttribute('height', iconH);
+				svgroot.setAttribute('xmlns:xlink', xlinkns);
+				svgroot.setAttribute('class', 'svg_icon');
+
+				// Without cloning, Firefox will make another GET request.
+				// With cloning, causes issue in Opera/Win/Non-EN
+				if (!isOpera) svg = svg.cloneNode(true);
+
+				svgroot.appendChild(svg);
+				var icon;
+				if (toImage) {
+					tempHolder.empty().append(svgroot);
+					var str = dataPre + encode64(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svgroot))));
+					icon = $(new Image())
+						.attr({'class': 'svg_icon', src: str});
+				} else {
+					icon = fixIDs($(svgroot), i);
 				}
-				$.svgIcons(reg_file, opts);
-			} else if(opts.fallback) {
-				makeIcons(false, opts.fallback);
+				addIcon(icon, id);
 			}
 		}
-				
-		function encode64(input) {
-			// base64 strings are 4/3 larger than the original string
-			if(window.btoa) return window.btoa(input);
-			var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-			var output = new Array( Math.floor( (input.length + 2) / 3 ) * 4 );
-			var chr1, chr2, chr3;
-			var enc1, enc2, enc3, enc4;
-			var i = 0, p = 0;
-		
-			do {
-				chr1 = input.charCodeAt(i++);
-				chr2 = input.charCodeAt(i++);
-				chr3 = input.charCodeAt(i++);
-		
-				enc1 = chr1 >> 2;
-				enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
-				enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
-				enc4 = chr3 & 63;
-		
-				if (isNaN(chr2)) {
-					enc3 = enc4 = 64;
-				} else if (isNaN(chr3)) {
-					enc4 = 64;
-				}
-		
-				output[p++] = _keyStr.charAt(enc1);
-				output[p++] = _keyStr.charAt(enc2);
-				output[p++] = _keyStr.charAt(enc3);
-				output[p++] = _keyStr.charAt(enc4);
-			} while (i < input.length);
-		
-			return output.join('');
-		}
-	};
-	
-	$.getSvgIcon = function(id, uniqueClone) { 
-		var icon = svg_icons[id];
-		if(uniqueClone && icon) {
-			icon = fixIDs(icon, 0, true).clone(true);
-		}
-		return icon; 
-	};
-	
-	$.resizeSvgIcons = function(obj) {
-		// FF2 and older don't detect .svg_icon, so we change it detect svg elems instead
-		var change_sel = !$('.svg_icon:first').length;
-		$.each(obj, function(sel, size) {
-			var arr = $.isArray(size);
-			var w = arr?size[0]:size,
-				h = arr?size[1]:size;
-			if(change_sel) {
-				sel = sel.replace(/\.svg_icon/g,'svg');
-			}
-			$(sel).each(function() {
-				this.setAttribute('width', w);
-				this.setAttribute('height', h);
-				if(window.opera && window.widget) {
-					this.parentNode.style.width = w + 'px';
-					this.parentNode.style.height = h + 'px';
-				}
+
+		if (opts.placement) {
+			$.each(opts.placement, function (sel, id) {
+				if (!svgIcons[id]) return;
+				$(sel).each(function (i) {
+					var copy = svgIcons[id].clone();
+					if (i > 0 && !toImage) copy = fixIDs(copy, i, true);
+					setIcon($(this), copy, id);
+				});
 			});
+		}
+		if (!fallback) {
+			if (toImage) tempHolder.remove();
+			if (dataEl) dataEl.remove();
+			if (testImg) testImg.remove();
+		}
+		if (opts.resize) $.resizeSvgIcons(opts.resize);
+		iconsMade = true;
+
+		if (opts.callback) opts.callback(svgIcons);
+	}
+
+	fixIDs = function (svgEl, svgNum, force) {
+		var defs = svgEl.find('defs');
+		if (!defs.length) return svgEl;
+		var idElems;
+		if (isOpera) {
+			idElems = defs.find('*').filter(function () {
+				return !!this.id;
+			});
+		} else {
+			idElems = defs.find('[id]');
+		}
+
+		var allElems = svgEl[0].getElementsByTagName('*'), len = allElems.length;
+
+		idElems.each(function (i) {
+			var id = this.id;
+			/*
+			var noDupes = ($(svgdoc).find('#' + id).length <= 1);
+			if (isOpera) noDupes = false; // Opera didn't clone svgEl, so not reliable
+			if(!force && noDupes) return;
+			*/
+			var newId = 'x' + id + svgNum + i;
+			this.id = newId;
+
+			var oldVal = 'url(#' + id + ')';
+			var newVal = 'url(#' + newId + ')';
+
+			// Selector method, possibly faster but fails in Opera / jQuery 1.4.3
+			//	svgEl.find('[fill="url(#' + id + ')"]').each(function() {
+			//		this.setAttribute('fill', 'url(#' + newId + ')');
+			//	}).end().find('[stroke="url(#' + id + ')"]').each(function() {
+			//		this.setAttribute('stroke', 'url(#' + newId + ')');
+			//	}).end().find('use').each(function() {
+			//		if(this.getAttribute('xlink:href') == '#' + id) {
+			//			this.setAttributeNS(xlinkns,'href','#' + newId);
+			//		}
+			//	}).end().find('[filter="url(#' + id + ')"]').each(function() {
+			//		this.setAttribute('filter', 'url(#' + newId + ')');
+			//	});
+
+			for (i = 0; i < len; i++) {
+				var elem = allElems[i];
+				if (elem.getAttribute('fill') === oldVal) {
+					elem.setAttribute('fill', newVal);
+				}
+				if (elem.getAttribute('stroke') === oldVal) {
+					elem.setAttribute('stroke', newVal);
+				}
+				if (elem.getAttribute('filter') === oldVal) {
+					elem.setAttribute('filter', newVal);
+				}
+			}
 		});
+		return svgEl;
 	};
-	
-})(jQuery);
\ No newline at end of file
+
+	function useFallback () {
+		if (file.indexOf('.svgz') > -1) {
+			var regFile = file.replace('.svgz', '.svg');
+			if (window.console) {
+				console.log('.svgz failed, trying with .svg');
+			}
+			$.svgIcons(regFile, opts);
+		} else if (opts.fallback) {
+			makeIcons(false, opts.fallback);
+		}
+	}
+
+	function encode64 (input) {
+		// base64 strings are 4/3 larger than the original string
+		if (window.btoa) return window.btoa(input);
+		var _keyStr = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+		var output = new Array(Math.floor((input.length + 2) / 3) * 4);
+		var chr1, chr2, chr3;
+		var enc1, enc2, enc3, enc4;
+		var i = 0, p = 0;
+
+		do {
+			chr1 = input.charCodeAt(i++);
+			chr2 = input.charCodeAt(i++);
+			chr3 = input.charCodeAt(i++);
+
+			enc1 = chr1 >> 2;
+			enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+			enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+			enc4 = chr3 & 63;
+
+			if (isNaN(chr2)) {
+				enc3 = enc4 = 64;
+			} else if (isNaN(chr3)) {
+				enc4 = 64;
+			}
+
+			output[p++] = _keyStr.charAt(enc1);
+			output[p++] = _keyStr.charAt(enc2);
+			output[p++] = _keyStr.charAt(enc3);
+			output[p++] = _keyStr.charAt(enc4);
+		} while (i < input.length);
+
+		return output.join('');
+	}
+};
+
+$.getSvgIcon = function (id, uniqueClone) {
+	var icon = svgIcons[id];
+	if (uniqueClone && icon) {
+		icon = fixIDs(icon, 0, true).clone(true);
+	}
+	return icon;
+};
+
+$.resizeSvgIcons = function (obj) {
+	// FF2 and older don't detect .svg_icon, so we change it detect svg elems instead
+	var changeSel = !$('.svg_icon:first').length;
+	$.each(obj, function (sel, size) {
+		var arr = $.isArray(size);
+		var w = arr ? size[0] : size,
+			h = arr ? size[1] : size;
+		if (changeSel) {
+			sel = sel.replace(/\.svg_icon/g, 'svg');
+		}
+		$(sel).each(function () {
+			this.setAttribute('width', w);
+			this.setAttribute('height', h);
+			if (window.opera && window.widget) {
+				this.parentNode.style.width = w + 'px';
+				this.parentNode.style.height = h + 'px';
+			}
+		});
+	});
+};
+})(jQuery);
diff --git a/firefox-extension/content/svg-edit-overlay.js b/firefox-extension/content/svg-edit-overlay.js
index 8d1600d8..d0881397 100644
--- a/firefox-extension/content/svg-edit-overlay.js
+++ b/firefox-extension/content/svg-edit-overlay.js
@@ -1,4 +1,5 @@
-function start_svg_edit() {
-    var url = "chrome://svg-edit/content/editor/svg-editor.html";
-    window.openDialog(url, "SVG Editor", "width=1024,height=700,menubar=no,toolbar=no");
+/* eslint-disable no-var */
+function startSvgEdit () { // eslint-disable-line no-unused-vars
+	var url = 'chrome://svg-edit/content/editor/svg-editor.html';
+	window.openDialog(url, 'SVG Editor', 'width=1024,height=700,menubar=no,toolbar=no');
 }
diff --git a/firefox-extension/content/svg-edit-overlay.xul b/firefox-extension/content/svg-edit-overlay.xul
index 08fdd887..ba1c0119 100644
--- a/firefox-extension/content/svg-edit-overlay.xul
+++ b/firefox-extension/content/svg-edit-overlay.xul
@@ -11,14 +11,14 @@
 
 <menupopup id="menu_ToolsPopup">
        <menuitem insertafter="devToolsSeparator" label="SVG Editor"
-       oncommand="start_svg_edit();" />
+       oncommand="startSvgEdit();" />
 </menupopup>
 
  <!-- Firefox -->
   <statusbar id="status-bar">
-    <statusbarpanel id="svg-edit-statusbar-button" 
+    <statusbarpanel id="svg-edit-statusbar-button"
 		    class="statusbarpanel-menu-iconic"
-		    onclick="return start_svg_edit()"
+		    onclick="return startSvgEdit()"
 		    tooltip="SvgEdit">
     </statusbarpanel>
  </statusbar>
diff --git a/firefox-extension/handlers.js b/firefox-extension/handlers.js
index 1b20811f..3431f14e 100644
--- a/firefox-extension/handlers.js
+++ b/firefox-extension/handlers.js
@@ -1,55 +1,56 @@
+/* eslint-disable no-var */
+/* global $, Components, svgCanvas, netscape */
 // Note: This JavaScript file must be included as the last script on the main HTML editor page to override the open/save handlers
-$(function() {
-	if(!window.Components) return;
+$(function () {
+	if (!window.Components) return;
 
-	function moz_file_picker(readflag) {
-	    var fp = window.Components.classes["@mozilla.org/filepicker;1"].
-		createInstance(Components.interfaces.nsIFilePicker);
-	    if(readflag)
-		fp.init(window, "Pick a SVG file", fp.modeOpen);
-	    else
-		fp.init(window, "Pick a SVG file", fp.modeSave);
-	    fp.defaultExtension = "*.svg";
-	    fp.show();
-	    return fp.file;
+	function mozFilePicker (readflag) {
+		var fp = window.Components.classes['@mozilla.org/filepicker;1']
+			.createInstance(Components.interfaces.nsIFilePicker);
+		if (readflag) fp.init(window, 'Pick a SVG file', fp.modeOpen);
+		else fp.init(window, 'Pick a SVG file', fp.modeSave);
+		fp.defaultExtension = '*.svg';
+		fp.show();
+		return fp.file;
 	}
 
 	svgCanvas.setCustomHandlers({
-		'open':function() {
-		    try {
-			netscape.security.PrivilegeManager.
-			enablePrivilege("UniversalXPConnect");
-			var file = moz_file_picker(true);
-			if(!file)
-			    return(null);
-
-			var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
-			inputStream.init(file, 0x01, 00004, null);
-			var sInputStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
-			sInputStream.init(inputStream);
-			svgCanvas.setSvgString(sInputStream.
-					    read(sInputStream.available()));
-		    } catch(e) {
-                        console.log("Exception while attempting to load" + e);
-		    }
-		},
-		'save':function(svg, str) {
+		open: function () {
 			try {
-				var file = moz_file_picker(false);
-				if(!file)
+				netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
+				var file = mozFilePicker(true);
+				if (!file) {
+					return null;
+				}
+
+				var inputStream = Components.classes['@mozilla.org/network/file-input-stream;1'].createInstance(Components.interfaces.nsIFileInputStream);
+				inputStream.init(file, 0x01, parseInt('00004', 8), null);
+				var sInputStream = Components.classes['@mozilla.org/scriptableinputstream;1'].createInstance(Components.interfaces.nsIScriptableInputStream);
+				sInputStream.init(inputStream);
+				svgCanvas.setSvgString(sInputStream.read(sInputStream.available()));
+			} catch (e) {
+				console.log('Exception while attempting to load' + e);
+			}
+		},
+		save: function (svg, str) {
+			try {
+				var file = mozFilePicker(false);
+				if (!file) {
 					return;
+				}
 
-							if (!file.exists())
-					file.create(0, 0664);
+				if (!file.exists()) {
+					file.create(0, parseInt('0664', 8));
+				}
 
-				var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
-				out.init(file, 0x20 | 0x02, 00004,null);
+				var out = Components.classes['@mozilla.org/network/file-output-stream;1'].createInstance(Components.interfaces.nsIFileOutputStream);
+				out.init(file, 0x20 | 0x02, parseInt('00004', 8), null);
 				out.write(str, str.length);
 				out.flush();
 				out.close();
-				} catch(e) {
+			} catch (e) {
 				alert(e);
-		    }
+			}
 		}
 	});
 });
diff --git a/opera-widget/handlers.js b/opera-widget/handlers.js
index bb1d1385..3f5bce10 100644
--- a/opera-widget/handlers.js
+++ b/opera-widget/handlers.js
@@ -1,62 +1,59 @@
+/* eslint-disable no-var */
+/* globals $, svgCanvas */
 // Note: This JavaScript file must be included as the last script on the main HTML editor page to override the open/save handlers
-$(function() {
-	if(window.opera && window.opera.io && window.opera.io.filesystem) {
+$(function () {
+	if (window.opera && window.opera.io && window.opera.io.filesystem) {
 		svgCanvas.setCustomHandlers({
-			'open':function() {
+			open: function () {
 				try {
 					window.opera.io.filesystem.browseForFile(
 						new Date().getTime(), /* mountpoint name */
-						"", /* default location */
-						function(file) {
+						'', /* default location */
+						function (file) {
 							try {
 								if (file) {
-									fstream = file.open(file, "r");
-									var output = "";
+									var fstream = file.open(file, 'r');
+									var output = '';
 									while (!fstream.eof) {
 										output += fstream.readLine();
 									}
-									
+
 									svgCanvas.setSvgString(output); /* 'this' is bound to the filestream object here */
 								}
-							}
-							catch(e) {
-								console.log("Reading file failed.");
+							} catch (e) {
+								console.log('Reading file failed.');
 							}
 						},
 						false, /* not persistent */
 						false, /* no multiple selections */
-						"*.svg" /* file extension filter */
+						'*.svg' /* file extension filter */
 					);
+				} catch (e) {
+					console.log('Open file failed.');
 				}
-				catch(e) {
-					console.log("Open file failed.");
-				}
-
 			},
-			'save':function(window, svg) {
+			save: function (window, svg) {
 				try {
 					window.opera.io.filesystem.browseForSave(
 						new Date().getTime(), /* mountpoint name */
-						"", /* default location */
-						function(file) {
+						'', /* default location */
+						function (file) {
 							try {
 								if (file) {
-									var fstream = file.open(file, "w");
-									fstream.write(svg, "UTF-8");
+									var fstream = file.open(file, 'w');
+									fstream.write(svg, 'UTF-8');
 									fstream.close();
 								}
+							} catch (e) {
+								console.log('Write to file failed.');
 							}
-							catch(e) {
-								console.log("Write to file failed.");
-							}
-						}, 
+						},
 						false /* not persistent */
 					);
-				}
-				catch(e) {
-					console.log("Save file failed.");
+				} catch (e) {
+					console.log('Save file failed.');
 				}
 			}
 		});
 	}
-});
\ No newline at end of file
+});
diff --git a/opera-widget/index.html b/opera-widget/index.html
index ddcc803d..e61841d1 100644
--- a/opera-widget/index.html
+++ b/opera-widget/index.html
@@ -6,14 +6,12 @@
 		<link rel="stylesheet" href="style.css">
 		<script>
 			/** this method adds the script that overrides the default open/save handlers */
-			function addHandlers()
-			{
-				var cdoc = document.getElementById("container").contentDocument;
-				if(cdoc)
-				{
-					var scriptelm = cdoc.createElement("script");
-					scriptelm.src = "../handlers.js";
-					cdoc.getElementsByTagName("head")[0].appendChild(scriptelm);
+			function addHandlers () {
+				var cdoc = document.getElementById('container').contentDocument;
+				if (cdoc) {
+					var scriptelm = cdoc.createElement('script');
+					scriptelm.src = '../handlers.js';
+					cdoc.getElementsByTagName('head')[0].appendChild(scriptelm);
 				}
 			}
 		</script>
diff --git a/screencasts/svgopen2010/index.html b/screencasts/svgopen2010/index.html
index f960a9f2..fd4ce946 100644
--- a/screencasts/svgopen2010/index.html
+++ b/screencasts/svgopen2010/index.html
@@ -206,10 +206,10 @@
             <h2>Plugin Architecture</h2>
            </header>
            <pre>
-svgEditor.addExtension("Hello World", function() {
+svgEditor.addExtension("Hello World", function () {
 
         return {
-                svgicons: "extensions/helloworld-icon.xml",
+                svgicons: 'extensions/helloworld-icon.xml',
                 buttons: [{...}],
                 mouseDown: function() {
                         ...
diff --git a/screencasts/svgopen2010/script.js b/screencasts/svgopen2010/script.js
index 28f9f90f..69ddcf81 100644
--- a/screencasts/svgopen2010/script.js
+++ b/screencasts/svgopen2010/script.js
@@ -1,390 +1,375 @@
-      (function() {
-        var doc = document;
-        var disableBuilds = true;
+/* eslint-disable no-var */
+(function () {
+var doc = document;
+var disableBuilds = true;
 
-        var ctr = 0;
-        var spaces = /\s+/, a1 = [''];
+var ctr = 0;
+var spaces = /\s+/, a1 = [''];
 
-        var toArray = function(list) {
-          return Array.prototype.slice.call(list || [], 0);
-        };
+var toArray = function (list) {
+	return Array.prototype.slice.call(list || [], 0);
+};
 
-        var byId = function(id) {
-          if (typeof id == 'string') { return doc.getElementById(id); }
-          return id;
-        };
+var byId = function (id) {
+	if (typeof id === 'string') { return doc.getElementById(id); }
+	return id;
+};
 
-        var query = function(query, root) {
-          if (!query) { return []; }
-          if (typeof query != 'string') { return toArray(query); }
-          if (typeof root == 'string') {
-            root = byId(root);
-            if(!root){ return []; }
-          }
+var query = function (query, root) {
+	if (!query) { return []; }
+	if (typeof query !== 'string') { return toArray(query); }
+	if (typeof root === 'string') {
+		root = byId(root);
+		if (!root) { return []; }
+	}
 
-          root = root || document;
-          var rootIsDoc = (root.nodeType == 9);
-          var doc = rootIsDoc ? root : (root.ownerDocument || document);
+	root = root || document;
+	var rootIsDoc = (root.nodeType === 9);
+	var doc = rootIsDoc ? root : (root.ownerDocument || document);
 
-          // rewrite the query to be ID rooted
-          if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
-            root.id = root.id || ('qUnique' + (ctr++));
-            query = '#' + root.id + ' ' + query;
-          }
-          // don't choke on something like ".yada.yada >"
-          if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
+	// rewrite the query to be ID rooted
+	if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
+		root.id = root.id || ('qUnique' + (ctr++));
+		query = '#' + root.id + ' ' + query;
+	}
+	// don't choke on something like ".yada.yada >"
+	if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }
 
-          return toArray(doc.querySelectorAll(query));
-        };
+	return toArray(doc.querySelectorAll(query));
+};
 
-        var strToArray = function(s) {
-          if (typeof s == 'string' || s instanceof String) {
-            if (s.indexOf(' ') < 0) {
-              a1[0] = s;
-              return a1;
-            } else {
-              return s.split(spaces);
-            }
-          }
-          return s;
-        };
+var strToArray = function (s) {
+	if (typeof s === 'string' || s instanceof String) {
+		if (s.indexOf(' ') < 0) {
+			a1[0] = s;
+			return a1;
+		}
+		return s.split(spaces);
+	}
+	return s;
+};
 
-        var addClass = function(node, classStr) {
-          classStr = strToArray(classStr);
-          var cls = ' ' + node.className + ' ';
-          for (var i = 0, len = classStr.length, c; i < len; ++i) {
-            c = classStr[i];
-            if (c && cls.indexOf(' ' + c + ' ') < 0) {
-              cls += c + ' ';
-            }
-          }
-          node.className = cls.trim();
-        };
+var addClass = function (node, classStr) {
+	classStr = strToArray(classStr);
+	var cls = ' ' + node.className + ' ';
+	for (var i = 0, len = classStr.length, c; i < len; ++i) {
+		c = classStr[i];
+		if (c && cls.indexOf(' ' + c + ' ') < 0) {
+			cls += c + ' ';
+		}
+	}
+	node.className = cls.trim();
+};
 
-        var removeClass = function(node, classStr) {
-          var cls;
-          if (classStr !== undefined) {
-            classStr = strToArray(classStr);
-            cls = ' ' + node.className + ' ';
-            for (var i = 0, len = classStr.length; i < len; ++i) {
-              cls = cls.replace(' ' + classStr[i] + ' ', ' ');
-            }
-            cls = cls.trim();
-          } else {
-            cls = '';
-          }
-          if (node.className != cls) {
-            node.className = cls;
-          }
-        };
+var removeClass = function (node, classStr) {
+	var cls;
+	if (classStr !== undefined) {
+		classStr = strToArray(classStr);
+		cls = ' ' + node.className + ' ';
+		for (var i = 0, len = classStr.length; i < len; ++i) {
+			cls = cls.replace(' ' + classStr[i] + ' ', ' ');
+		}
+		cls = cls.trim();
+	} else {
+		cls = '';
+	}
+	if (node.className !== cls) {
+		node.className = cls;
+	}
+};
 
-        var toggleClass = function(node, classStr) {
-          var cls = ' ' + node.className + ' ';
-          if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
-            removeClass(node, classStr);
-          } else {
-            addClass(node, classStr);
-          }
-        };
+var toggleClass = function (node, classStr) {
+	var cls = ' ' + node.className + ' ';
+	if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
+		removeClass(node, classStr);
+	} else {
+		addClass(node, classStr);
+	}
+};
 
-        var ua = navigator.userAgent;
-        var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
-        var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
-        var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
+var ua = navigator.userAgent;
+var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
+var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
+var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;
 
-        var canTransition = (function() {
-          var ver = parseFloat(ua.split('Version/')[1]) || undefined;
-          // test to determine if this browser can handle CSS transitions.
-          var cachedCanTransition =
-            (isWK || (isFF && isFF > 3.6 ) || (isOpera && ver >= 10.5));
-          return function() { return cachedCanTransition; }
-        })();
+var canTransition = (function () {
+	var ver = parseFloat(ua.split('Version/')[1]) || undefined;
+	// test to determine if this browser can handle CSS transitions.
+	var cachedCanTransition =
+		(isWK || (isFF && isFF > 3.6) || (isOpera && ver >= 10.5));
+	return function () { return cachedCanTransition; };
+})();
 
-        //
-        // Slide class
-        //
-        var Slide = function(node, idx) {
-          this._node = node;
-          if (idx >= 0) {
-            this._count = idx + 1;
-          }
-          if (this._node) {
-            addClass(this._node, 'slide distant-slide');
-          }
-          this._makeCounter();
-          this._makeBuildList();
-        };
+//
+// Slide class
+//
+var Slide = function (node, idx) {
+	this._node = node;
+	if (idx >= 0) {
+		this._count = idx + 1;
+	}
+	if (this._node) {
+		addClass(this._node, 'slide distant-slide');
+	}
+	this._makeCounter();
+	this._makeBuildList();
+};
 
-        Slide.prototype = {
-          _node: null,
-          _count: 0,
-          _buildList: [],
-          _visited: false,
-          _currentState: '',
-          _states: [ 'distant-slide', 'far-past',
-                     'past', 'current', 'future',
-                     'far-future', 'distant-slide' ],
-          setState: function(state) {
-            if (typeof state != 'string') {
-              state = this._states[state];
-            }
-            if (state == 'current' && !this._visited) {
-              this._visited = true;
-              this._makeBuildList();
-            }
-            removeClass(this._node, this._states);
-            addClass(this._node, state);
-            this._currentState = state;
+Slide.prototype = {
+	_node: null,
+	_count: 0,
+	_buildList: [],
+	_visited: false,
+	_currentState: '',
+	_states: [ 'distant-slide', 'far-past',
+		'past', 'current', 'future',
+		'far-future', 'distant-slide' ],
+	setState: function (state) {
+		if (typeof state !== 'string') {
+			state = this._states[state];
+		}
+		if (state === 'current' && !this._visited) {
+			this._visited = true;
+			this._makeBuildList();
+		}
+		removeClass(this._node, this._states);
+		addClass(this._node, state);
+		this._currentState = state;
 
-            // delay first auto run. Really wish this were in CSS.
-            /*
-            this._runAutos();
-            */
-            var _t = this;
-            setTimeout(function(){ _t._runAutos(); } , 400);
-          },
-          _makeCounter: function() {
-            if(!this._count || !this._node) { return; }
-            var c = doc.createElement('span');
-            c.innerHTML = this._count;
-            c.className = 'counter';
-            this._node.appendChild(c);
-          },
-          _makeBuildList: function() {
-            this._buildList = [];
-            if (disableBuilds) { return; }
-            if (this._node) {
-              this._buildList = query('[data-build] > *', this._node);
-            }
-            this._buildList.forEach(function(el) {
-              addClass(el, 'to-build');
-            });
-          },
-          _runAutos: function() {
-            if (this._currentState != 'current') {
-              return;
-            }
-            // find the next auto, slice it out of the list, and run it
-            var idx = -1;
-            this._buildList.some(function(n, i) {
-              if (n.hasAttribute('data-auto')) {
-                idx = i;
-                return true;
-              }
-              return false;
-            });
-            if (idx >= 0) {
-              var elem = this._buildList.splice(idx, 1)[0];
-              var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
-              var _t = this;
-              if (canTransition()) {
-                var l = function(evt) {
-                  elem.parentNode.removeEventListener(transitionEnd, l, false);
-                  _t._runAutos();
-                };
-                elem.parentNode.addEventListener(transitionEnd, l, false);
-                removeClass(elem, 'to-build');
-              } else {
-                setTimeout(function() {
-                  removeClass(elem, 'to-build');
-                  _t._runAutos();
-                }, 400);
-              }
-            }
-          },
-          buildNext: function() {
-            if (!this._buildList.length) {
-              return false;
-            }
-            removeClass(this._buildList.shift(), 'to-build');
-            return true;
-          },
-        };
+		// delay first auto run. Really wish this were in CSS.
+		/*
+		this._runAutos();
+		*/
+		var _t = this;
+		setTimeout(function () { _t._runAutos(); }, 400);
+	},
+	_makeCounter: function () {
+		if (!this._count || !this._node) { return; }
+		var c = doc.createElement('span');
+		c.innerHTML = this._count;
+		c.className = 'counter';
+		this._node.appendChild(c);
+	},
+	_makeBuildList: function () {
+		this._buildList = [];
+		if (disableBuilds) { return; }
+		if (this._node) {
+			this._buildList = query('[data-build] > *', this._node);
+		}
+		this._buildList.forEach(function (el) {
+			addClass(el, 'to-build');
+		});
+	},
+	_runAutos: function () {
+		if (this._currentState !== 'current') {
+			return;
+		}
+		// find the next auto, slice it out of the list, and run it
+		var idx = -1;
+		this._buildList.some(function (n, i) {
+			if (n.hasAttribute('data-auto')) {
+				idx = i;
+				return true;
+			}
+			return false;
+		});
+		if (idx >= 0) {
+			var elem = this._buildList.splice(idx, 1)[0];
+			var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
+			var _t = this;
+			if (canTransition()) {
+				var l = function (evt) {
+					elem.parentNode.removeEventListener(transitionEnd, l, false);
+					_t._runAutos();
+				};
+				elem.parentNode.addEventListener(transitionEnd, l, false);
+				removeClass(elem, 'to-build');
+			} else {
+				setTimeout(function () {
+					removeClass(elem, 'to-build');
+					_t._runAutos();
+				}, 400);
+			}
+		}
+	},
+	buildNext: function () {
+		if (!this._buildList.length) {
+			return false;
+		}
+		removeClass(this._buildList.shift(), 'to-build');
+		return true;
+	}
+};
 
-        //
-        // SlideShow class
-        //
-        var SlideShow = function(slides) {
-          this._slides = (slides || []).map(function(el, idx) {
-            return new Slide(el, idx);
-          });
+//
+// SlideShow class
+//
+var SlideShow = function (slides) {
+	this._slides = (slides || []).map(function (el, idx) {
+		return new Slide(el, idx);
+	});
 
-          var h = window.location.hash;
-          try {
-            this.current = parseInt(h.split('#slide')[1], 10);
-          }catch (e) { /* squeltch */ }
-          this.current = isNaN(this.current) ? 1 : this.current;
-          var _t = this;
-          doc.addEventListener('keydown',
-              function(e) { _t.handleKeys(e); }, false);
-          doc.addEventListener('mousewheel',
-              function(e) { _t.handleWheel(e); }, false);
-          doc.addEventListener('DOMMouseScroll',
-              function(e) { _t.handleWheel(e); }, false);
-          doc.addEventListener('touchstart',
-              function(e) { _t.handleTouchStart(e); }, false);
-          doc.addEventListener('touchend',
-              function(e) { _t.handleTouchEnd(e); }, false);
-          window.addEventListener('popstate',
-              function(e) { _t.go(e.state); }, false);
-          this._update();
-        };
+	var h = window.location.hash;
+	try {
+		this.current = parseInt(h.split('#slide')[1], 10);
+	} catch (e) { /* squeltch */ }
+	this.current = isNaN(this.current) ? 1 : this.current;
+	var _t = this;
+	doc.addEventListener('keydown',
+		function (e) { _t.handleKeys(e); }, false);
+	doc.addEventListener('mousewheel',
+		function (e) { _t.handleWheel(e); }, false);
+	doc.addEventListener('DOMMouseScroll',
+		function (e) { _t.handleWheel(e); }, false);
+	doc.addEventListener('touchstart',
+		function (e) { _t.handleTouchStart(e); }, false);
+	doc.addEventListener('touchend',
+		function (e) { _t.handleTouchEnd(e); }, false);
+	window.addEventListener('popstate',
+		function (e) { _t.go(e.state); }, false);
+	this._update();
+};
 
-        SlideShow.prototype = {
-          _slides: [],
-          _update: function(dontPush) {
-            document.querySelector('#presentation-counter').innerText = this.current;
-            if (history.pushState) {
-              if (!dontPush) {
-                history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
-              }
-            } else {
-              window.location.hash = 'slide' + this.current;
-            }
-            for (var x = this.current-1; x < this.current + 7; x++) {
-              if (this._slides[x-4]) {
-                this._slides[x-4].setState(Math.max(0, x-this.current));
-              }
-            }
-          },
+SlideShow.prototype = {
+	_slides: [],
+	_update: function (dontPush) {
+		document.querySelector('#presentation-counter').innerText = this.current;
+		if (history.pushState) {
+			if (!dontPush) {
+				history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
+			}
+		} else {
+			window.location.hash = 'slide' + this.current;
+		}
+		for (var x = this.current - 1; x < this.current + 7; x++) {
+			if (this._slides[x - 4]) {
+				this._slides[x - 4].setState(Math.max(0, x - this.current));
+			}
+		}
+	},
 
-          current: 0,
-          next: function() {
-            if (!this._slides[this.current-1].buildNext()) {
-              this.current = Math.min(this.current + 1, this._slides.length);
-              this._update();
-            }
-          },
-          prev: function() {
-            this.current = Math.max(this.current-1, 1);
-            this._update();
-          },
-          go: function(num) {
-            if (history.pushState && this.current != num) {
-              history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
-            }
-            this.current = num;
-            this._update(true);
-          },
+	current: 0,
+	next: function () {
+		if (!this._slides[this.current - 1].buildNext()) {
+			this.current = Math.min(this.current + 1, this._slides.length);
+			this._update();
+		}
+	},
+	prev: function () {
+		this.current = Math.max(this.current - 1, 1);
+		this._update();
+	},
+	go: function (num) {
+		if (history.pushState && this.current !== num) {
+			history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
+		}
+		this.current = num;
+		this._update(true);
+	},
 
-          _notesOn: false,
-          showNotes: function() {
-            var isOn = this._notesOn = !this._notesOn;
-            query('.notes').forEach(function(el) {
-              el.style.display = (notesOn) ? 'block' : 'none';
-            });
-          },
-          switch3D: function() {
-            toggleClass(document.body, 'three-d');
-          },
-          handleWheel: function(e) {
-            var delta = 0;
-            if (e.wheelDelta) {
-              delta = e.wheelDelta/120;
-              if (isOpera) {
-                delta = -delta;
-              }
-            } else if (e.detail) {
-              delta = -e.detail/3;
-            }
+	_notesOn: false,
+	showNotes: function () {
+		var notesOn = this._notesOn = !this._notesOn;
+		query('.notes').forEach(function (el) {
+			el.style.display = (notesOn) ? 'block' : 'none';
+		});
+	},
+	switch3D: function () {
+		toggleClass(document.body, 'three-d');
+	},
+	handleWheel: function (e) {
+		var delta = 0;
+		if (e.wheelDelta) {
+			delta = e.wheelDelta / 120;
+			if (isOpera) {
+				delta = -delta;
+			}
+		} else if (e.detail) {
+			delta = -e.detail / 3;
+		}
 
-            if (delta > 0 ) {
-              this.prev();
-              return;
-            }
-            if (delta < 0 ) {
-              this.next();
-              return;
-            }
-          },
-          handleKeys: function(e) {
+		if (delta > 0) {
+			this.prev();
+			return;
+		}
+		if (delta < 0) {
+			this.next();
+		}
+	},
+	handleKeys: function (e) {
+		if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
 
-            if (/^(input|textarea)$/i.test(e.target.nodeName)) return;
+		switch (e.keyCode) {
+		case 37: // left arrow
+			this.prev(); break;
+		case 39: // right arrow
+		case 32: // space
+			this.next(); break;
+		case 50: // 2
+			this.showNotes(); break;
+		case 51: // 3
+			this.switch3D(); break;
+		}
+	},
+	_touchStartX: 0,
+	handleTouchStart: function (e) {
+		this._touchStartX = e.touches[0].pageX;
+	},
+	handleTouchEnd: function (e) {
+		var delta = this._touchStartX - e.changedTouches[0].pageX;
+		var SWIPE_SIZE = 150;
+		if (delta > SWIPE_SIZE) {
+			this.next();
+		} else if (delta < -SWIPE_SIZE) {
+			this.prev();
+		}
+	}
+};
 
-            switch (e.keyCode) {
-              case 37: // left arrow
-                this.prev(); break;
-              case 39: // right arrow
-              case 32: // space
-                this.next(); break;
-              case 50: // 2
-                this.showNotes(); break;
-              case 51: // 3
-                this.switch3D(); break;
-            }
-          },
-          _touchStartX: 0,
-          handleTouchStart: function(e) {
-            this._touchStartX = e.touches[0].pageX;
-          },
-          handleTouchEnd: function(e) {
-            var delta = this._touchStartX - e.changedTouches[0].pageX;
-            var SWIPE_SIZE = 150;
-            if (delta > SWIPE_SIZE) {
-              this.next();
-            } else if (delta< -SWIPE_SIZE) {
-              this.prev();
-            }
-          },
-        };
+// Initialize
+var slideshow = new SlideShow(query('.slide')); // eslint-disable-line no-unused-vars
 
-        // Initialize
-        var slideshow = new SlideShow(query('.slide'));
+document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
+document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
+document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
+document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);
 
+var counters = document.querySelectorAll('.counter');
+var slides = document.querySelectorAll('.slide');
 
+function toggleCounter () {
+	toArray(counters).forEach(function (el) {
+		el.style.display = (el.offsetHeight) ? 'none' : 'block';
+	});
+}
 
+function toggleSize () {
+	toArray(slides).forEach(function (el) {
+		if (!/reduced/.test(el.className)) {
+			addClass(el, 'reduced');
+		} else {
+			removeClass(el, 'reduced');
+		}
+	});
+}
 
+function toggleTransitions () {
+	toArray(slides).forEach(function (el) {
+		if (!/no-transitions/.test(el.className)) {
+			addClass(el, 'no-transitions');
+		} else {
+			removeClass(el, 'no-transitions');
+		}
+	});
+}
 
-        document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
-        document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
-        document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
-        document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);
-
-
-        var counters = document.querySelectorAll('.counter');
-        var slides = document.querySelectorAll('.slide');
-
-        function toggleCounter() {
-          toArray(counters).forEach(function(el) {
-            el.style.display = (el.offsetHeight) ? 'none' : 'block';
-          });
-        }
-
-        function toggleSize() {
-          toArray(slides).forEach(function(el) {
-            if (!/reduced/.test(el.className)) {
-              addClass(el, 'reduced');
-            }
-            else {
-              removeClass(el, 'reduced');
-            }
-          });
-        }
-
-        function toggleTransitions() {
-          toArray(slides).forEach(function(el) {
-            if (!/no-transitions/.test(el.className)) {
-              addClass(el, 'no-transitions');
-            }
-            else {
-              removeClass(el, 'no-transitions');
-            }
-          });
-        }
-
-        function toggleGradients() {
-          toArray(slides).forEach(function(el) {
-            if (!/no-gradients/.test(el.className)) {
-              addClass(el, 'no-gradients');
-            }
-            else {
-              removeClass(el, 'no-gradients');
-            }
-          });
-        }
-
-
-
-
-
-      })();
+function toggleGradients () {
+	toArray(slides).forEach(function (el) {
+		if (!/no-gradients/.test(el.className)) {
+			addClass(el, 'no-gradients');
+		} else {
+			removeClass(el, 'no-gradients');
+		}
+	});
+}
+})();
diff --git a/wave/wave.js b/wave/wave.js
index c3723f77..aa48cc62 100644
--- a/wave/wave.js
+++ b/wave/wave.js
@@ -1,147 +1,138 @@
+/* eslint-disable no-var */
+/* globals wave, $, svgCanvas */
 var shapetime = {};
 var nodelete = false;
 
-function stateUpdated() {
+function stateUpdated () {
+	// 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements
+	// 'keys' is an array of all the keys in the state
+	var state = wave.getState();
+	var keys = state.getKeys();
+	svgCanvas.each(function (e) {
+		// 'this' is the SVG DOM element node (ellipse, rect, etc)
+		// 'e' is an integer describing the position within the document
+		var k = this.id;
+		var v = state.get(k);
+		if (k === 'selectorParentGroup' || k === 'svgcontent') {
+			// meh
+		} else if (v) {
+			var ob = JSON.parse(v);
+			if (ob) {
+				// do nothing
+			} else {
+				// var node = document.getElementById(k);
+				// if (node) node.parentNode.removeChild(node);
+			}
+			// keys.remove(k);
+		} else if (!nodelete) {
+			this.parentNode.removeChild(this);
+		}
+	});
 
-  // 'state' is an object of key-value pairs that map ids to JSON serialization of SVG elements
-  // 'keys' is an array of all the keys in the state
-  var state = wave.getState();
-  var keys = state.getKeys();
-  svgCanvas.each(function(e) {
-    // 'this' is the SVG DOM element node (ellipse, rect, etc)
-    // 'e' is an integer describing the position within the document
-    var k = this.id;
-    var v = state.get(k);
-    if(k == "selectorParentGroup" || k == "svgcontent"){
-      //meh
-    }else if (v) {
-      var ob = JSON.parse(v);
-      if (ob) {
-        // do nothing
-      } else {
-        //var node = document.getElementById(k);
-        //if (node) node.parentNode.removeChild(node);
-      }
-      //keys.remove(k);
-      
-    } else if(!nodelete){
-    
-      this.parentNode.removeChild(this);
-    }
-  });
-
-  // New nodes
-  for (var k in keys) {
-    var v = state.get(keys[k]);
-    var ob = JSON.parse(v);
-    if (ob){
-      if(!shapetime[k] || ob.time > shapetime[k]){
-        var a;
-        if(a = document.getElementById(k)){
-          var attrs = get_attrs(a);
-          if(JSON.stringify(attrs) != JSON.stringify(ob.attr)){
-            shapetime[k] = ob.time
-            svgCanvas.updateElementFromJson(ob)
-          }
-        }else{
-          shapetime[k] = ob.time
-          svgCanvas.updateElementFromJson(ob)
-        }
-
-      }
-    }
-  }
+	// New nodes
+	for (var k in keys) {
+		var v = state.get(keys[k]);
+		var ob = JSON.parse(v);
+		if (ob) {
+			if (!shapetime[k] || ob.time > shapetime[k]) {
+				var a = document.getElementById(k);
+				if (a) {
+					var attrs = getAttrs(a);
+					if (JSON.stringify(attrs) !== JSON.stringify(ob.attr)) {
+						shapetime[k] = ob.time;
+						svgCanvas.updateElementFromJson(ob);
+					}
+				} else {
+					shapetime[k] = ob.time;
+					svgCanvas.updateElementFromJson(ob);
+				}
+			}
+		}
+	}
 }
 
-
-function getId(canvas, objnum) {
-  var id = wave.getViewer().getId().split("@")[0];
-  var extra = SHA256(wave.getViewer().getId()); //in case the next step kills all the characters
-  for(var i = 0, l = id.length, n = ""; i < l; i++){
-    if("abcdefghijklmnopqrstuvwxyz0123456789".indexOf(id[i]) != -1){
-      n+=id[i];
-    }
-  }
-  return "svg_"+n+"_"+extra.substr(0,5)+"_"+objnum;
+function getId (canvas, objnum) {
+	var id = wave.getViewer().getId().split('@')[0];
+	var extra = SHA256(wave.getViewer().getId()); // in case the next step kills all the characters
+	for (var i = 0, l = id.length, n = ''; i < l; i++) {
+		if ('abcdefghijklmnopqrstuvwxyz0123456789'.indexOf(id[i]) > -1) {
+			n += id[i];
+		}
+	}
+	return 'svg_' + n + '_' + extra.substr(0, 5) + '_' + objnum;
 }
 
-function get_attrs(a){
-  var attrs = {};
-    for(var i = a.length; i--;){
-      var attr = a.item(i).nodeName;
-      if(",style,".indexOf(","+attr+",") == -1){
-        attrs[attr] = a.item(i).nodeValue;
-      }
-    }
-    return attrs
+function getAttrs (a) {
+	var attrs = {};
+	for (var i = a.length; i--;) {
+		var attr = a.item(i).nodeName;
+		if (',style,'.indexOf(',' + attr + ',') === -1) {
+			attrs[attr] = a.item(i).nodeValue;
+		}
+	}
+	return attrs;
 }
 
-function main() {
-  $(document).ready(function(){
-    if (wave && wave.isInWaveContainer()) {
-      wave.setStateCallback(function(){setTimeout(stateUpdated,10)});
-    }
-    
-    var oldchanged = svgCanvas.bind("changed", function(canvas, elem){
-      if(oldchanged)oldchanged.apply(this, [canvas,elem]);
-      
-      var delta = {}
-      $.each(elem, function(){
-        
-        var attrs = {};
-        var a = this.attributes;
-        if(a){
-          var attrs = get_attrs(a)
-          var ob = {element: this.nodeName, attr: attrs};
-          
-          ob.time = shapetime[this.id] = (new Date).getTime()
-          delta[this.id] = JSON.stringify(ob);
-        }
-      })
-      
-      wave.getState().submitDelta(delta)
-      //sendDelta(canvas, elem)
-      
-    });
-    //*
-    
-    var oldselected = svgCanvas.bind("selected", function(canvas, elem){
-      
-      if(oldselected)oldselected.apply(this, [canvas,elem]);
-      
-      
-      var delta = {}
-      var deletions = 0;
-      $.each(elem, function(){
-        if(!this.parentNode && this != window){
-          delta[this.id] = null;
-          deletions ++
-        }
-      });
-      if(deletions > 0){
-        wave.getState().submitDelta(delta)
-      }
-    });
-    ///
-    svgCanvas.bind("cleared", function(){
-      //alert("cleared")
-        var state = {}, keys = wave.getState().getKeys()
-        for(var i = 0; i < keys.length; i++){
-          state[keys[i]] = null;
-        }
-        wave.getState().submitDelta(state)
-    });
-    //*/
-    svgCanvas.bind("getid", getId);
-  })
+function main () {
+	$(document).ready(function () {
+		if (wave && wave.isInWaveContainer()) {
+			wave.setStateCallback(function () {
+				setTimeout(stateUpdated, 10);
+			});
+		}
+
+		var oldchanged = svgCanvas.bind('changed', function (canvas, elem) {
+			if (oldchanged) oldchanged.apply(this, [canvas, elem]);
+
+			var delta = {};
+			$.each(elem, function () {
+				var a = this.attributes;
+				if (a) {
+					var attrs = getAttrs(a);
+					var ob = {element: this.nodeName, attr: attrs};
+
+					ob.time = shapetime[this.id] = new Date().getTime();
+					delta[this.id] = JSON.stringify(ob);
+				}
+			});
+
+			wave.getState().submitDelta(delta);
+			// sendDelta(canvas, elem)
+		});
+		// *
+		var oldselected = svgCanvas.bind('selected', function (canvas, elem) {
+			if (oldselected) oldselected.apply(this, [canvas, elem]);
+
+			var delta = {};
+			var deletions = 0;
+			$.each(elem, function () {
+				if (!this.parentNode && this !== window) {
+					delta[this.id] = null;
+					deletions++;
+				}
+			});
+			if (deletions > 0) {
+				wave.getState().submitDelta(delta);
+			}
+		});
+		//
+		svgCanvas.bind('cleared', function () {
+			// alert("cleared")
+			var state = {}, keys = wave.getState().getKeys();
+			for (var i = 0; i < keys.length; i++) {
+				state[keys[i]] = null;
+			}
+			wave.getState().submitDelta(state);
+		});
+		// */
+		svgCanvas.bind('getid', getId);
+	});
 }
 
+if (window.gadgets) window.gadgets.util.registerOnLoadHandler(main);
 
+// $(main)
 
-if(window.gadgets) gadgets.util.registerOnLoadHandler(main);
-
-//$(main)
-
-//and why not use my stuff?
+/* eslint-disable */
+// and why not use my stuff?
 function SHA256(b){function h(j,k){return(j>>e)+(k>>e)+((p=(j&o)+(k&o))>>e)<<e|p&o}function f(j,k){return j>>>k|j<<32-k}var g=[],d,c=3,l=[2],p,i,q,a,m=[],n=[];i=b.length*8;for(var e=16,o=65535,r="";c<312;c++){for(d=l.length;d--&&c%l[d]!=0;);d<0&&l.push(c)}b+="\u0080";for(c=0;c<=i;c+=8)n[c>>5]|=(b.charCodeAt(c/8)&255)<<24-c%32;n[(i+64>>9<<4)+15]=i;for(c=8;c--;)m[c]=parseInt(Math.pow(l[c],0.5).toString(e).substr(2,8),e);for(c=0;c<n.length;c+=e){a=m.slice(0);for(b=0;b<64;b++){g[b]=b<e?n[b+c]:h(h(h(f(g[b-2],17)^f(g[b-2],19)^g[b-2]>>>10,g[b-7]),f(g[b-15],7)^f(g[b-15],18)^g[b-15]>>>3),g[b-e]);i=h(h(h(h(a[7],f(a[4],6)^f(a[4],11)^f(a[4],25)),a[4]&a[5]^~a[4]&a[6]),parseInt(Math.pow(l[b],1/3).toString(e).substr(2,8),e)),g[b]);q=(f(a[0],2)^f(a[0],13)^f(a[0],22))+(a[0]&a[1]^a[0]&a[2]^a[1]&a[2]);for(d=8;--d;)a[d]=d==4?h(a[3],i):a[d-1];a[0]=h(i,q)}for(d=8;d--;)m[d]+=a[d]}for(c=0;c<8;c++)for(b=8;b--;)r+=(m[c]>>>b*4&15).toString(e);return r}
-