holder_rails 2.7.1 → 2.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 79563e575da1d9d7c264c59a17d32a8915167871
-  data.tar.gz: a5ddf864af6375f97cc327af3ed3418d172fe567
+  metadata.gz: 3ce17582d2875c6a55f69eb0b88df95057f05b0e
+  data.tar.gz: 3f98323d52721e5e86f86abb1ed8c6c62012a40e
 SHA512:
-  metadata.gz: 2df3996873ccde136425e8c6f662a53ccc604932867e2c55b9b5c0df97d4c9fad26b44967c538511d3b7605a16c25ffa90233e377c56e7b3787057222285c73b
-  data.tar.gz: 715971f18e1c94b6702112e34c3e3cd7a79e9c906cb49d835f7e317a22d65fba497e4fc9f6c595e3987a70ede1a8f7a052bbff1c219196de272d952d5ee48a59
+  metadata.gz: bcb36fed3e0cbd0c46ff569e3d249f08d790da9fd143eddb0189da38f6e7aa48985245a444ff7dcff0cd4147e522ba13d38034fcb5832860372aec055d4e4c4b
+  data.tar.gz: ab5cca3f708a29f01abf1309ae402eac2eb12e9ea180af710acdb061a34c46abe9ac1731609b3dd63422404b6dce8742973816d22e2563a101a9a13daad5d3af

data/lib/holder_rails/version.rb

@@ -1,3 +1,3 @@
 module HolderRails
-  VERSION = "2.7.1"
+  VERSION = "2.8.0"
 end

data/vendor/assets/javascripts/holder.js

@@ -1,12 +1,12 @@
 /*!
 
 Holder - client side image placeholders
-Version 2.7.1+6hydf
+Version 2.8.0+7srgw
 © 2015 Ivan Malopinsky - http://imsky.co
 
 Site:     http://holderjs.com
 Issues:   https://github.com/imsky/holder/issues
-License:  http://opensource.org/licenses/MIT
+License:  MIT
 
 */
 (function (window) {
@@ -283,27 +283,42 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ([
 /* 0 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/*
+	Holder.js - client side image placeholders
+	(c) 2012-2015 Ivan Malopinsky - http://imsky.co
+	*/
+
+	module.exports = __webpack_require__(1);
+
+
+/***/ },
+/* 1 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/* WEBPACK VAR INJECTION */(function(global) {/*
 	Holder.js - client side image placeholders
-	© 2012-2015 Ivan Malopinsky - http://imsky.co
+	(c) 2012-2015 Ivan Malopinsky - http://imsky.co
 	*/
 
 	//Libraries and functions
-	var onDomReady = __webpack_require__(1);
-	var SceneGraph = __webpack_require__(2);
-	var utils = __webpack_require__(3);
-	var querystring = __webpack_require__(4);
+	var onDomReady = __webpack_require__(3);
+	var querystring = __webpack_require__(2);
+
+	var SceneGraph = __webpack_require__(4);
+	var utils = __webpack_require__(5);
+	var SVG = __webpack_require__(6);
+	var DOM = __webpack_require__(7);
+	var Color = __webpack_require__(8);
 
 	var extend = utils.extend;
-	var getNodeArray = utils.getNodeArray;
 	var dimensionCheck = utils.dimensionCheck;
 
 	//Constants and definitions
 	var SVG_NS = 'http://www.w3.org/2000/svg';
 	var NODE_TYPE_COMMENT = 8;
-	var version = '2.7.1';
+	var version = '2.8.0';
 	var generatorComment = '\n' +
 	    'Created with Holder.js ' + version + '.\n' +
 	    'Learn more at http://holderjs.com\n' +
@@ -328,16 +343,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * Appends a placeholder to an element
 	     *
 	     * @param {string} src Placeholder URL string
-	     * @param {string} el Selector of target element(s)
+	     * @param el A selector or a reference to a DOM node
 	     */
 	    addImage: function(src, el) {
-	        var node = document.querySelectorAll(el);
+	        //todo: use jquery fallback if available for all QSA references
+	        var node = DOM.getNodeArray(el);
 	        if (node.length) {
 	            for (var i = 0, l = node.length; i < l; i++) {
-	                var img = newEl('img');
+	                var img = DOM.newEl('img');
 	                var domProps = {};
-	                domProps[App.vars.dataAttr] = src;
-	                setAttr(img, domProps);
+	                domProps[App.setup.dataAttr] = src;
+	                DOM.setAttr(img, domProps);
 	                node[i].appendChild(img);
 	            }
 	        }
@@ -366,22 +382,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {Object} userOptions Options object, can contain domain, themes, images, and bgnodes properties
 	     */
 	    run: function(userOptions) {
+	        //todo: split processing into separate queues
 	        userOptions = userOptions || {};
 	        var engineSettings = {};
 	        var options = extend(App.settings, userOptions);
 
 	        App.vars.preempted = true;
-	        App.vars.dataAttr = options.dataAttr || App.vars.dataAttr;
+	        App.vars.dataAttr = options.dataAttr || App.setup.dataAttr;
+	        App.vars.lineWrapRatio = options.lineWrapRatio || App.setup.lineWrapRatio;
 
 	        engineSettings.renderer = options.renderer ? options.renderer : App.setup.renderer;
 	        if (App.setup.renderers.join(',').indexOf(engineSettings.renderer) === -1) {
 	            engineSettings.renderer = App.setup.supportsSVG ? 'svg' : (App.setup.supportsCanvas ? 'canvas' : 'html');
 	        }
 
-	        var images = getNodeArray(options.images);
-	        var bgnodes = getNodeArray(options.bgnodes);
-	        var stylenodes = getNodeArray(options.stylenodes);
-	        var objects = getNodeArray(options.objects);
+	        var images = DOM.getNodeArray(options.images);
+	        var bgnodes = DOM.getNodeArray(options.bgnodes);
+	        var stylenodes = DOM.getNodeArray(options.stylenodes);
+	        var objects = DOM.getNodeArray(options.objects);
 
 	        engineSettings.stylesheets = [];
 	        engineSettings.svgXMLStylesheet = true;
@@ -392,7 +410,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            if (styleNode.attributes.rel && styleNode.attributes.href && styleNode.attributes.rel.value == 'stylesheet') {
 	                var href = styleNode.attributes.href.value;
 	                //todo: write isomorphic relative-to-absolute URL function
-	                var proxyLink = newEl('a');
+	                var proxyLink = DOM.newEl('a');
 	                proxyLink.href = href;
 	                var stylesheetURL = proxyLink.protocol + '//' + proxyLink.host + proxyLink.pathname + proxyLink.search;
 	                engineSettings.stylesheets.push(stylesheetURL);
@@ -404,13 +422,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            if (!global.getComputedStyle) continue;
 	            var backgroundImage = global.getComputedStyle(bgnodes[i], null).getPropertyValue('background-image');
 	            var dataBackgroundImage = bgnodes[i].getAttribute('data-background-src');
-	            var rawURL = null;
-
-	            if (dataBackgroundImage == null) {
-	                rawURL = backgroundImage;
-	            } else {
-	                rawURL = dataBackgroundImage;
-	            }
+	            var rawURL = dataBackgroundImage || backgroundImage;
 
 	            var holderURL = null;
 	            var holderString = '?' + options.domain + '/';
@@ -507,7 +519,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        objects: 'object',
 	        bgnodes: 'body .holderjs',
 	        stylenodes: 'head link.holderjs',
-	        stylesheets: [],
 	        themes: {
 	            'gray': {
 	                background: '#EEEEEE',
@@ -539,69 +550,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        size: 10,
 	        units: 'pt',
 	        scale: 1 / 16
-	    },
-	    //todo: remove in 2.8
-	    flags: {
-	        dimensions: {
-	            regex: /^(\d+)x(\d+)$/,
-	            output: function(val) {
-	                var exec = this.regex.exec(val);
-	                return {
-	                    width: +exec[1],
-	                    height: +exec[2]
-	                };
-	            }
-	        },
-	        fluid: {
-	            regex: /^([0-9]+%?)x([0-9]+%?)$/,
-	            output: function(val) {
-	                var exec = this.regex.exec(val);
-	                return {
-	                    width: exec[1],
-	                    height: exec[2]
-	                };
-	            }
-	        },
-	        colors: {
-	            regex: /(?:#|\^)([0-9a-f]{3,})\:(?:#|\^)([0-9a-f]{3,})/i,
-	            output: function(val) {
-	                var exec = this.regex.exec(val);
-	                return {
-	                    foreground: '#' + exec[2],
-	                    background: '#' + exec[1]
-	                };
-	            }
-	        },
-	        text: {
-	            regex: /text\:(.*)/,
-	            output: function(val) {
-	                return this.regex.exec(val)[1].replace('\\/', '/');
-	            }
-	        },
-	        font: {
-	            regex: /font\:(.*)/,
-	            output: function(val) {
-	                return this.regex.exec(val)[1];
-	            }
-	        },
-	        auto: {
-	            regex: /^auto$/
-	        },
-	        textmode: {
-	            regex: /textmode\:(.*)/,
-	            output: function(val) {
-	                return this.regex.exec(val)[1];
-	            }
-	        },
-	        random: {
-	            regex: /^random$/
-	        },
-	        size: {
-	            regex: /size\:(\d+)/,
-	            output: function(val) {
-	                return this.regex.exec(val)[1];
-	            }
-	        }
 	    }
 	};
 
@@ -640,11 +588,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        instanceOptions: options
 	    };
 
-	    if (url.match(/([\d]+p?)x([\d]+p?)(?:\?|$)/)) {
-	        return parseQueryString(url, holder);
-	    } else {
-	        return parseFlags(url, holder);
-	    }
+	    return parseQueryString(url, holder);
 	}
 
 	/**
@@ -685,6 +629,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	            holder.theme.foreground = (options.fg.indexOf('#') === -1 ? '#' : '') + options.fg;
 	        }
 
+	        //todo: add automatic foreground to themes without foreground
+	        if (options.bg && !options.fg) {
+	            holder.autoFg = true;
+	        }
+
 	        if (options.theme && holder.instanceOptions.themes.hasOwnProperty(options.theme)) {
 	            holder.theme = extend(holder.instanceOptions.themes[options.theme], null);
 	        }
@@ -717,6 +666,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        holder.auto = utils.truthy(options.auto);
 
+	        holder.outline = utils.truthy(options.outline);
+
 	        if (utils.truthy(options.random)) {
 	            App.vars.cache.themeKeys = App.vars.cache.themeKeys || Object.keys(holder.instanceOptions.themes);
 	            var _theme = App.vars.cache.themeKeys[0 | Math.random() * App.vars.cache.themeKeys.length];
@@ -727,88 +678,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return holder;
 	}
 
-	//todo: remove in 2.8
-	/**
-	 * Processes a Holder URL and extracts flags
-	 *
-	 * @private
-	 * @deprecated
-	 * @param url URL
-	 * @param holder Staging Holder object
-	 */
-	function parseFlags(url, holder) {
-	    var render = false;
-	    var vtab = String.fromCharCode(11);
-	    var flags = url.replace(/([^\\])\//g, '$1' + vtab).split(vtab);
-	    var uriRegex = /%[0-9a-f]{2}/gi;
-	    var options = holder.instanceOptions;
-
-	    holder.holderURL = [];
-
-	    for (var fl = flags.length, j = 0; j < fl; j++) {
-	        var flag = flags[j];
-	        if (flag.match(uriRegex)) {
-	            try {
-	                flag = decodeURIComponent(flag);
-	            } catch (e) {
-	                flag = flags[j];
-	            }
-	        }
-
-	        var push = false;
-
-	        if (App.flags.dimensions.match(flag)) {
-	            render = true;
-	            holder.dimensions = App.flags.dimensions.output(flag);
-	            push = true;
-	        } else if (App.flags.fluid.match(flag)) {
-	            render = true;
-	            holder.dimensions = App.flags.fluid.output(flag);
-	            holder.fluid = true;
-	            push = true;
-	        } else if (App.flags.textmode.match(flag)) {
-	            holder.textmode = App.flags.textmode.output(flag);
-	            push = true;
-	        } else if (App.flags.colors.match(flag)) {
-	            var colors = App.flags.colors.output(flag);
-	            holder.theme = extend(holder.theme, colors);
-	            push = true;
-	        } else if (options.themes[flag]) {
-	            //If a theme is specified, it will override custom colors
-	            if (options.themes.hasOwnProperty(flag)) {
-	                holder.theme = extend(options.themes[flag], null);
-	            }
-	            push = true;
-	        } else if (App.flags.font.match(flag)) {
-	            holder.font = App.flags.font.output(flag);
-	            push = true;
-	        } else if (App.flags.auto.match(flag)) {
-	            holder.auto = true;
-	            push = true;
-	        } else if (App.flags.text.match(flag)) {
-	            holder.text = App.flags.text.output(flag);
-	            push = true;
-	        } else if (App.flags.size.match(flag)) {
-	            holder.size = App.flags.size.output(flag);
-	            push = true;
-	        } else if (App.flags.random.match(flag)) {
-	            if (App.vars.cache.themeKeys == null) {
-	                App.vars.cache.themeKeys = Object.keys(options.themes);
-	            }
-	            var theme = App.vars.cache.themeKeys[0 | Math.random() * App.vars.cache.themeKeys.length];
-	            holder.theme = extend(options.themes[theme], null);
-	            push = true;
-	        }
-
-	        if (push) {
-	            holder.holderURL.push(flag);
-	        }
-	    }
-	    holder.holderURL.unshift(options.domain);
-	    holder.holderURL = holder.holderURL.join('/');
-	    return render ? holder : false;
-	}
-
 	/**
 	 * Modifies the DOM to fit placeholders and sets up resizable image callbacks (for fluid and automatically sized placeholders)
 	 *
@@ -858,14 +727,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    if (mode == 'background') {
 	        if (el.getAttribute('data-background-src') == null) {
-	            setAttr(el, {
+	            DOM.setAttr(el, {
 	                'data-background-src': holderURL
 	            });
 	        }
 	    } else {
 	        var domProps = {};
 	        domProps[App.vars.dataAttr] = holderURL;
-	        setAttr(el, domProps);
+	        DOM.setAttr(el, domProps);
 	    }
 
 	    flags.theme = theme;
@@ -877,7 +746,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 
 	    if (mode == 'image' || mode == 'fluid') {
-	        setAttr(el, {
+	        DOM.setAttr(el, {
 	            'alt': (theme.text ? theme.text + ' [' + dimensionsCaption + ']' : dimensionsCaption)
 	        });
 	    }
@@ -948,8 +817,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	function render(renderSettings) {
 	    var image = null;
 	    var mode = renderSettings.mode;
-	    var holderSettings = renderSettings.holderSettings;
 	    var el = renderSettings.el;
+	    var holderSettings = renderSettings.holderSettings;
 	    var engineSettings = renderSettings.engineSettings;
 
 	    switch (engineSettings.renderer) {
@@ -1001,14 +870,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';
 	    } else {
 	        if (el.nodeName.toLowerCase() === 'img') {
-	            setAttr(el, {
+	            DOM.setAttr(el, {
 	                'src': image
 	            });
 	        } else if (el.nodeName.toLowerCase() === 'object') {
-	            setAttr(el, {
+	            DOM.setAttr(el, {
 	                'data': image
 	            });
-	            setAttr(el, {
+	            DOM.setAttr(el, {
 	                'type': 'image/svg+xml'
 	            });
 	        }
@@ -1020,22 +889,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	                //todo: refactor this code into a function
 	                if (el.nodeName.toLowerCase() === 'img') {
-	                    setAttr(el, {
+	                    DOM.setAttr(el, {
 	                        'src': image
 	                    });
 	                } else if (el.nodeName.toLowerCase() === 'object') {
-	                    setAttr(el, {
+	                    DOM.setAttr(el, {
 	                        'data': image
 	                    });
-	                    setAttr(el, {
+	                    DOM.setAttr(el, {
 	                        'type': 'image/svg+xml'
 	                    });
 	                }
-	            }, 100);
+	            }, 150);
 	        }
 	    }
 	    //todo: account for re-rendering
-	    setAttr(el, {
+	    DOM.setAttr(el, {
 	        'data-holder-rendered': true
 	    });
 	}
@@ -1093,11 +962,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	    holderBg.resize(scene.width, scene.height);
 	    sceneGraph.root.add(holderBg);
 
+	    if (scene.flags.outline) {
+	        //todo: generalize darken/lighten to more than RRGGBB hex values
+	        var outlineColor = new Color(holderBg.properties.fill);
+
+	        outlineColor = outlineColor.lighten(outlineColor.lighterThan('7f7f7f') ? -0.1 : 0.1);
+
+	        holderBg.properties.outline = {
+	            fill: outlineColor.toHex(true),
+	            width: 2
+	        };
+	    }
+
+	    var holderTextColor = scene.theme.foreground;
+
+	    if (scene.flags.autoFg) {
+	        var holderBgColor = new Color(holderBg.properties.fill);
+	        var lightColor = new Color('fff');
+	        var darkColor = new Color('000', { 'alpha': 0.285714 });
+
+	        holderTextColor = holderBgColor.blendAlpha(holderBgColor.lighterThan('7f7f7f') ? darkColor : lightColor).toHex(true);
+	    }
+
 	    var holderTextGroup = new Shape.Group('holderTextGroup', {
 	        text: scene.text,
 	        align: scene.align,
 	        font: scene.font,
-	        fill: scene.theme.foreground
+	        fill: holderTextColor
 	    });
 
 	    holderTextGroup.moveTo(null, null, 1);
@@ -1119,7 +1010,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        parent.height += line.height;
 	    }
 
-	    var sceneMargin = scene.width * App.setup.lineWrapRatio;
+	    var sceneMargin = scene.width * App.vars.lineWrapRatio;
 	    var maxLineWidth = sceneMargin;
 
 	    if (tpdata.lineCount > 1) {
@@ -1131,7 +1022,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        //Double margin so that left/right-aligned next is not flush with edge of image
 	        if (scene.align === 'left' || scene.align === 'right') {
-	            maxLineWidth = scene.width * (1 - (1 - (App.setup.lineWrapRatio)) * 2);
+	            maxLineWidth = scene.width * (1 - (1 - (App.vars.lineWrapRatio)) * 2);
 	        }
 
 	        for (var i = 0; i < tpdata.words.length; i++) {
@@ -1200,7 +1091,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    //todo: renderlist
-
 	    return sceneGraph;
 	}
 
@@ -1384,14 +1274,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	                firstTimeSetup = true;
 	            }
 
-	            svg = initSVG(svg, rootNode.properties.width, rootNode.properties.height);
+	            svg = SVG.initSVG(svg, rootNode.properties.width, rootNode.properties.height);
 	            //Show staging element before staging
 	            svg.style.display = 'block';
 
 	            if (firstTimeSetup) {
-	                stagingText = newEl('text', SVG_NS);
+	                stagingText = DOM.newEl('text', SVG_NS);
 	                stagingTextNode = tnode(null);
-	                setAttr(stagingText, {
+	                DOM.setAttr(stagingText, {
 	                    x: 0
 	                });
 	                stagingText.appendChild(stagingTextNode);
@@ -1408,7 +1298,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            var holderTextGroup = rootNode.children.holderTextGroup;
 	            var htgProps = holderTextGroup.properties;
-	            setAttr(stagingText, {
+	            DOM.setAttr(stagingText, {
 	                'y': htgProps.font.size,
 	                'style': utils.cssProps({
 	                    'font-weight': htgProps.font.weight,
@@ -1422,7 +1312,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var stagingTextBBox = stagingText.getBBox();
 
 	            //Get line count and split the string into words
-	            var lineCount = Math.ceil(stagingTextBBox.width / (rootNode.properties.width * App.setup.lineWrapRatio));
+	            var lineCount = Math.ceil(stagingTextBBox.width / (rootNode.properties.width * App.vars.lineWrapRatio));
 	            var words = htgProps.text.split(' ');
 	            var newlines = htgProps.text.match(/\\n/g);
 	            lineCount += newlines == null ? 0 : newlines.length;
@@ -1467,7 +1357,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	})();
 
 	var sgCanvasRenderer = (function() {
-	    var canvas = newEl('canvas');
+	    var canvas = DOM.newEl('canvas');
 	    var ctx = null;
 
 	    return function(sceneGraph) {
@@ -1479,8 +1369,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	        canvas.height = App.dpr(root.properties.height);
 	        ctx.textBaseline = 'middle';
 
-	        ctx.fillStyle = root.children.holderBg.properties.fill;
-	        ctx.fillRect(0, 0, App.dpr(root.children.holderBg.width), App.dpr(root.children.holderBg.height));
+	        var bg = root.children.holderBg;
+	        var bgWidth = App.dpr(bg.width);
+	        var bgHeight = App.dpr(bg.height);
+	        //todo: parametrize outline width (e.g. in scene object)
+	        var outlineWidth = 2;
+	        var outlineOffsetWidth = outlineWidth / 2;
+
+	        ctx.fillStyle = bg.properties.fill;
+	        ctx.fillRect(0, 0, bgWidth, bgHeight);
+
+	        if (bg.properties.outline) {
+	            //todo: abstract this into a method
+	            ctx.strokeStyle = bg.properties.outline.fill;
+	            ctx.lineWidth = bg.properties.outline.width;
+	            ctx.moveTo(outlineOffsetWidth, outlineOffsetWidth);
+	            // TL, TR, BR, BL
+	            ctx.lineTo(bgWidth - outlineOffsetWidth, outlineOffsetWidth);
+	            ctx.lineTo(bgWidth - outlineOffsetWidth, bgHeight - outlineOffsetWidth);
+	            ctx.lineTo(outlineOffsetWidth, bgHeight - outlineOffsetWidth);
+	            ctx.lineTo(outlineOffsetWidth, outlineOffsetWidth);
+	            // Diagonals
+	            ctx.moveTo(0, outlineOffsetWidth);
+	            ctx.lineTo(bgWidth, bgHeight - outlineOffsetWidth);
+	            ctx.moveTo(0, bgHeight - outlineOffsetWidth);
+	            ctx.lineTo(bgWidth, outlineOffsetWidth);
+	            ctx.stroke();
+	        }
 
 	        var textGroup = root.children.holderTextGroup;
 	        var tgProps = textGroup.properties;
@@ -1505,9 +1420,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	var sgSVGRenderer = (function() {
 	    //Prevent IE <9 from initializing SVG renderer
 	    if (!global.XMLSerializer) return;
-	    var xml = createXML();
-	    var svg = initSVG(null, 0, 0);
-	    var bgEl = newEl('rect', SVG_NS);
+	    var xml = DOM.createXML();
+	    var svg = SVG.initSVG(null, 0, 0);
+	    var bgEl = DOM.newEl('rect', SVG_NS);
 	    svg.appendChild(bgEl);
 
 	    //todo: create a reusable pool for textNodes, resize if more words present
@@ -1515,7 +1430,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return function(sceneGraph, renderSettings) {
 	        var root = sceneGraph.root;
 
-	        initSVG(svg, root.properties.width, root.properties.height);
+	        SVG.initSVG(svg, root.properties.width, root.properties.height);
 
 	        var groups = svg.querySelectorAll('g');
 
@@ -1525,10 +1440,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        var holderURL = renderSettings.holderSettings.flags.holderURL;
 	        var holderId = 'holder_' + (Number(new Date()) + 32768 + (0 | Math.random() * 32768)).toString(16);
-	        var sceneGroupEl = newEl('g', SVG_NS);
+	        var sceneGroupEl = DOM.newEl('g', SVG_NS);
 	        var textGroup = root.children.holderTextGroup;
 	        var tgProps = textGroup.properties;
-	        var textGroupEl = newEl('g', SVG_NS);
+	        var textGroupEl = DOM.newEl('g', SVG_NS);
 	        var tpdata = textGroup.textPositionData;
 	        var textCSSRule = '#' + holderId + ' text { ' +
 	            utils.cssProps({
@@ -1540,8 +1455,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var commentNode = xml.createComment('\n' + 'Source URL: ' + holderURL + generatorComment);
 	        var holderCSS = xml.createCDATASection(textCSSRule);
 	        var styleEl = svg.querySelector('style');
+	        var bg = root.children.holderBg;
 
-	        setAttr(sceneGroupEl, {
+	        DOM.setAttr(sceneGroupEl, {
 	            id: holderId
 	        });
 
@@ -1549,13 +1465,38 @@ return /******/ (function(modules) { // webpackBootstrap
 	        styleEl.appendChild(holderCSS);
 
 	        sceneGroupEl.appendChild(bgEl);
+
+	        //todo: abstract this into a cross-browser SVG outline method
+	        if (bg.properties.outline) {
+	            var outlineEl = DOM.newEl('path', SVG_NS);
+	            var outlineWidth = bg.properties.outline.width;
+	            var outlineOffsetWidth = outlineWidth / 2;
+	            DOM.setAttr(outlineEl, {
+	                'd': [
+	                    'M', outlineOffsetWidth, outlineOffsetWidth,
+	                    'H', bg.width - outlineOffsetWidth,
+	                    'V', bg.height - outlineOffsetWidth,
+	                    'H', outlineOffsetWidth,
+	                    'V', 0,
+	                    'M', 0, outlineOffsetWidth,
+	                    'L', bg.width, bg.height - outlineOffsetWidth,
+	                    'M', 0, bg.height - outlineOffsetWidth,
+	                    'L', bg.width, outlineOffsetWidth
+	                ].join(' '),
+	                'stroke-width': bg.properties.outline.width,
+	                'stroke': bg.properties.outline.fill,
+	                'fill': 'none'
+	            });
+	            sceneGroupEl.appendChild(outlineEl);
+	        }
+
 	        sceneGroupEl.appendChild(textGroupEl);
 	        svg.appendChild(sceneGroupEl);
 
-	        setAttr(bgEl, {
-	            'width': root.children.holderBg.width,
-	            'height': root.children.holderBg.height,
-	            'fill': root.children.holderBg.properties.fill
+	        DOM.setAttr(bgEl, {
+	            'width': bg.width,
+	            'height': bg.height,
+	            'fill': bg.properties.fill
 	        });
 
 	        textGroup.y += tpdata.boundingBox.height * 0.8;
@@ -1567,10 +1508,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	                var x = textGroup.x + line.x + word.x;
 	                var y = textGroup.y + line.y + word.y;
 
-	                var textEl = newEl('text', SVG_NS);
+	                var textEl = DOM.newEl('text', SVG_NS);
 	                var textNode = document.createTextNode(null);
 
-	                setAttr(textEl, {
+	                DOM.setAttr(textEl, {
 	                    'x': x,
 	                    'y': y
 	                });
@@ -1582,152 +1523,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        //todo: factor the background check up the chain, perhaps only return reference
-	        var svgString = svgStringToDataURI(serializeSVG(svg, renderSettings.engineSettings), renderSettings.mode === 'background');
+	        var svgString = SVG.svgStringToDataURI(SVG.serializeSVG(svg, renderSettings.engineSettings), renderSettings.mode === 'background');
 	        return svgString;
 	    };
 	})();
 
 	//Helpers
 
-	//todo: move svg-related helpers to a dedicated file
-
-	/**
-	 * Converts serialized SVG to a string suitable for data URI use
-	 * @param svgString Serialized SVG string
-	 * @param [base64] Use base64 encoding for data URI
-	 */
-	var svgStringToDataURI = function() {
-	    var rawPrefix = 'data:image/svg+xml;charset=UTF-8,';
-	    var base64Prefix = 'data:image/svg+xml;charset=UTF-8;base64,';
-
-	    return function(svgString, base64) {
-	        if (base64) {
-	            return base64Prefix + btoa(unescape(encodeURIComponent(svgString)));
-	        } else {
-	            return rawPrefix + encodeURIComponent(svgString);
-	        }
-	    };
-	}();
-
-	/**
-	 * Generic new DOM element function
-	 *
-	 * @private
-	 * @param tag Tag to create
-	 * @param namespace Optional namespace value
-	 */
-	function newEl(tag, namespace) {
-	    if (namespace == null) {
-	        return document.createElement(tag);
-	    } else {
-	        return document.createElementNS(namespace, tag);
-	    }
-	}
-
-	/**
-	 * Generic setAttribute function
-	 *
-	 * @private
-	 * @param el Reference to DOM element
-	 * @param attrs Object with attribute keys and values
-	 */
-	function setAttr(el, attrs) {
-	    for (var a in attrs) {
-	        el.setAttribute(a, attrs[a]);
-	    }
-	}
-
-	/**
-	 * Generic SVG element creation function
-	 *
-	 * @private
-	 * @param svg SVG context, set to null if new
-	 * @param width Document width
-	 * @param height Document height
-	 */
-	function initSVG(svg, width, height) {
-	    var defs, style;
-
-	    if (svg == null) {
-	        svg = newEl('svg', SVG_NS);
-	        defs = newEl('defs', SVG_NS);
-	        style = newEl('style', SVG_NS);
-	        setAttr(style, {
-	            'type': 'text/css'
-	        });
-	        defs.appendChild(style);
-	        svg.appendChild(defs);
-	    } else {
-	        style = svg.querySelector('style');
-	    }
-
-	    //IE throws an exception if this is set and Chrome requires it to be set
-	    if (svg.webkitMatchesSelector) {
-	        svg.setAttribute('xmlns', SVG_NS);
-	    }
-
-	    //Remove comment nodes
-	    for (var i = 0; i < svg.childNodes.length; i++) {
-	        if (svg.childNodes[i].nodeType === NODE_TYPE_COMMENT) {
-	            svg.removeChild(svg.childNodes[i]);
-	        }
-	    }
-
-	    //Remove CSS
-	    while (style.childNodes.length) {
-	        style.removeChild(style.childNodes[0]);
-	    }
-
-	    setAttr(svg, {
-	        'width': width,
-	        'height': height,
-	        'viewBox': '0 0 ' + width + ' ' + height,
-	        'preserveAspectRatio': 'none'
-	    });
-
-	    return svg;
-	}
-
-	/**
-	 * Returns serialized SVG with XML processing instructions
-	 *
-	 * @private
-	 * @param svg SVG context
-	 * @param stylesheets CSS stylesheets to include
-	 */
-	function serializeSVG(svg, engineSettings) {
-	    if (!global.XMLSerializer) return;
-	    var serializer = new XMLSerializer();
-	    var svgCSS = '';
-	    var stylesheets = engineSettings.stylesheets;
-
-	    //External stylesheets: Processing Instruction method
-	    if (engineSettings.svgXMLStylesheet) {
-	        var xml = createXML();
-	        //Add <?xml-stylesheet ?> directives
-	        for (var i = stylesheets.length - 1; i >= 0; i--) {
-	            var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"');
-	            xml.insertBefore(csspi, xml.firstChild);
-	        }
-
-	        xml.removeChild(xml.documentElement);
-	        svgCSS = serializer.serializeToString(xml);
-	    }
-
-	    var svgText = serializer.serializeToString(svg);
-	    svgText = svgText.replace(/\&amp;(\#[0-9]{2,}\;)/g, '&$1');
-	    return svgCSS + svgText;
-	}
-
-	/**
-	 * Creates a XML document
-	 * @private
-	 */
-	function createXML() {
-	    if (!global.DOMParser) return;
-	    return new DOMParser().parseFromString('<xml />', 'application/xml');
-	}
-
 	/**
 	 * Prevents a function from being called too often, waits until a timer elapses to call it again
 	 *
@@ -1769,6 +1571,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    supportsCanvas: false,
 	    supportsSVG: false,
 	    lineWrapRatio: 0.9,
+	    dataAttr: 'data-src',
 	    renderers: ['html', 'canvas', 'svg']
 	};
 
@@ -1785,8 +1588,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    invisibleId: 0,
 	    visibilityCheckStarted: false,
 	    debounceTimer: null,
-	    cache: {},
-	    dataAttr: 'data-src'
+	    cache: {}
 	};
 
 	//Pre-flight
@@ -1795,7 +1597,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var devicePixelRatio = 1,
 	        backingStoreRatio = 1;
 
-	    var canvas = newEl('canvas');
+	    var canvas = DOM.newEl('canvas');
 	    var ctx = null;
 
 	    if (canvas.getContext) {
@@ -1847,34 +1649,142 @@ return /******/ (function(modules) { // webpackBootstrap
 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
 /***/ },
-/* 1 */
+/* 2 */
 /***/ function(module, exports, __webpack_require__) {
 
-	/*!
-	 * onDomReady.js 1.4.0 (c) 2013 Tubal Martin - MIT license
+	//Modified version of component/querystring
+	//Changes: updated dependencies, dot notation parsing, JSHint fixes
+	//Fork at https://github.com/imsky/querystring
+
+	/**
+	 * Module dependencies.
+	 */
+
+	var encode = encodeURIComponent;
+	var decode = decodeURIComponent;
+	var trim = __webpack_require__(10);
+	var type = __webpack_require__(9);
+
+	var arrayRegex = /(\w+)\[(\d+)\]/;
+	var objectRegex = /\w+\.\w+/;
+
+	/**
+	 * Parse the given query `str`.
 	 *
-	 * Specially modified to work with Holder.js
+	 * @param {String} str
+	 * @return {Object}
+	 * @api public
 	 */
 
-	function _onDomReady(win) {
-	    //Lazy loading fix for Firefox < 3.6
-	    //http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html
-	    if (document.readyState == null && document.addEventListener) {
-	        document.addEventListener("DOMContentLoaded", function DOMContentLoaded() {
-	            document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
-	            document.readyState = "complete";
-	        }, false);
-	        document.readyState = "loading";
+	exports.parse = function(str){
+	  if ('string' !== typeof str) return {};
+
+	  str = trim(str);
+	  if ('' === str) return {};
+	  if ('?' === str.charAt(0)) str = str.slice(1);
+
+	  var obj = {};
+	  var pairs = str.split('&');
+	  for (var i = 0; i < pairs.length; i++) {
+	    var parts = pairs[i].split('=');
+	    var key = decode(parts[0]);
+	    var m, ctx, prop;
+
+	    if (m = arrayRegex.exec(key)) {
+	      obj[m[1]] = obj[m[1]] || [];
+	      obj[m[1]][m[2]] = decode(parts[1]);
+	      continue;
 	    }
-	    
-	    var doc = win.document,
-	        docElem = doc.documentElement,
-	    
-	        LOAD = "load",
-	        FALSE = false,
-	        ONLOAD = "on"+LOAD,
-	        COMPLETE = "complete",
-	        READYSTATE = "readyState",
+
+	    if (m = objectRegex.test(key)) {
+	      m = key.split('.');
+	      ctx = obj;
+	      
+	      while (m.length) {
+	        prop = m.shift();
+
+	        if (!prop.length) continue;
+
+	        if (!ctx[prop]) {
+	          ctx[prop] = {};
+	        } else if (ctx[prop] && typeof ctx[prop] !== 'object') {
+	          break;
+	        }
+
+	        if (!m.length) {
+	          ctx[prop] = decode(parts[1]);
+	        }
+
+	        ctx = ctx[prop];
+	      }
+
+	      continue;
+	    }
+
+	    obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);
+	  }
+
+	  return obj;
+	};
+
+	/**
+	 * Stringify the given `obj`.
+	 *
+	 * @param {Object} obj
+	 * @return {String}
+	 * @api public
+	 */
+
+	exports.stringify = function(obj){
+	  if (!obj) return '';
+	  var pairs = [];
+
+	  for (var key in obj) {
+	    var value = obj[key];
+
+	    if ('array' == type(value)) {
+	      for (var i = 0; i < value.length; ++i) {
+	        pairs.push(encode(key + '[' + i + ']') + '=' + encode(value[i]));
+	      }
+	      continue;
+	    }
+
+	    pairs.push(encode(key) + '=' + encode(obj[key]));
+	  }
+
+	  return pairs.join('&');
+	};
+
+
+/***/ },
+/* 3 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/*!
+	 * onDomReady.js 1.4.0 (c) 2013 Tubal Martin - MIT license
+	 *
+	 * Specially modified to work with Holder.js
+	 */
+
+	function _onDomReady(win) {
+	    //Lazy loading fix for Firefox < 3.6
+	    //http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html
+	    if (document.readyState == null && document.addEventListener) {
+	        document.addEventListener("DOMContentLoaded", function DOMContentLoaded() {
+	            document.removeEventListener("DOMContentLoaded", DOMContentLoaded, false);
+	            document.readyState = "complete";
+	        }, false);
+	        document.readyState = "loading";
+	    }
+	    
+	    var doc = win.document,
+	        docElem = doc.documentElement,
+	    
+	        LOAD = "load",
+	        FALSE = false,
+	        ONLOAD = "on"+LOAD,
+	        COMPLETE = "complete",
+	        READYSTATE = "readyState",
 	        ATTACHEVENT = "attachEvent",
 	        DETACHEVENT = "detachEvent",
 	        ADDEVENTLISTENER = "addEventListener",
@@ -2007,11 +1917,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	module.exports = typeof window !== "undefined" && _onDomReady(window);
 
 /***/ },
-/* 2 */
+/* 4 */
 /***/ function(module, exports, __webpack_require__) {
 
-	var augment = __webpack_require__(5);
-
 	var SceneGraph = function(sceneProperties) {
 	    var nodeCount = 1;
 
@@ -2023,90 +1931,96 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return parent;
 	    }
 
-	    var SceneNode = augment.defclass({
-	        constructor: function(name) {
-	            nodeCount++;
-	            this.parent = null;
-	            this.children = {};
-	            this.id = nodeCount;
-	            this.name = 'n' + nodeCount;
-	            if (name != null) {
-	                this.name = name;
-	            }
-	            this.x = 0;
-	            this.y = 0;
-	            this.z = 0;
-	            this.width = 0;
-	            this.height = 0;
-	        },
-	        resize: function(width, height) {
-	            if (width != null) {
-	                this.width = width;
-	            }
-	            if (height != null) {
-	                this.height = height;
-	            }
-	        },
-	        moveTo: function(x, y, z) {
-	            this.x = x != null ? x : this.x;
-	            this.y = y != null ? y : this.y;
-	            this.z = z != null ? z : this.z;
-	        },
-	        add: function(child) {
-	            var name = child.name;
-	            if (this.children[name] == null) {
-	                this.children[name] = child;
-	                child.parent = this;
-	            } else {
-	                throw 'SceneGraph: child with that name already exists: ' + name;
-	            }
+	    var SceneNode = function(name) {
+	        nodeCount++;
+	        this.parent = null;
+	        this.children = {};
+	        this.id = nodeCount;
+	        this.name = 'n' + nodeCount;
+	        if (typeof name !== 'undefined') {
+	            this.name = name;
+	        }
+	        this.x = this.y = this.z = 0;
+	        this.width = this.height = 0;
+	    };
+
+	    SceneNode.prototype.resize = function(width, height) {
+	        if (width != null) {
+	            this.width = width;
 	        }
-	    });
+	        if (height != null) {
+	            this.height = height;
+	        }
+	    };
 
-	    var RootNode = augment(SceneNode, function(uber) {
-	        this.constructor = function() {
-	            uber.constructor.call(this, 'root');
-	            this.properties = sceneProperties;
-	        };
-	    });
+	    SceneNode.prototype.moveTo = function(x, y, z) {
+	        this.x = x != null ? x : this.x;
+	        this.y = y != null ? y : this.y;
+	        this.z = z != null ? z : this.z;
+	    };
 
-	    var Shape = augment(SceneNode, function(uber) {
-	        function constructor(name, props) {
-	            uber.constructor.call(this, name);
-	            this.properties = {
-	                fill: '#000'
-	            };
-	            if (props != null) {
-	                merge(this.properties, props);
-	            } else if (name != null && typeof name !== 'string') {
-	                throw 'SceneGraph: invalid node name';
-	            }
+	    SceneNode.prototype.add = function(child) {
+	        var name = child.name;
+	        if (typeof this.children[name] === 'undefined') {
+	            this.children[name] = child;
+	            child.parent = this;
+	        } else {
+	            throw 'SceneGraph: child already exists: ' + name;
 	        }
+	    };
 
-	        this.Group = augment.extend(this, {
-	            constructor: constructor,
-	            type: 'group'
-	        });
+	    var RootNode = function() {
+	        SceneNode.call(this, 'root');
+	        this.properties = sceneProperties;
+	    };
 
-	        this.Rect = augment.extend(this, {
-	            constructor: constructor,
-	            type: 'rect'
-	        });
+	    RootNode.prototype = new SceneNode();
 
-	        this.Text = augment.extend(this, {
-	            constructor: function(text) {
-	                constructor.call(this);
-	                this.properties.text = text;
-	            },
-	            type: 'text'
-	        });
-	    });
+	    var Shape = function(name, props) {
+	        SceneNode.call(this, name);
+	        this.properties = {
+	            'fill': '#000000'
+	        };
+	        if (typeof props !== 'undefined') {
+	            merge(this.properties, props);
+	        } else if (typeof name !== 'undefined' && typeof name !== 'string') {
+	            throw 'SceneGraph: invalid node name';
+	        }
+	    };
+
+	    Shape.prototype = new SceneNode();
+
+	    var Group = function() {
+	        Shape.apply(this, arguments);
+	        this.type = 'group';
+	    };
+
+	    Group.prototype = new Shape();
+
+	    var Rect = function() {
+	        Shape.apply(this, arguments);
+	        this.type = 'rect';
+	    };
+
+	    Rect.prototype = new Shape();
+
+	    var Text = function(text) {
+	        Shape.call(this);
+	        this.type = 'text';
+	        this.properties.text = text;
+	    };
+
+	    Text.prototype = new Shape();
 
 	    var root = new RootNode();
 
-	    this.Shape = Shape;
-	    this.root = root;
+	    this.Shape = {
+	        'Rect': Rect,
+	        'Text': Text,
+	        'Group': Group
+	    };
 
+	    this.root = root;
 	    return this;
 	};
 
@@ -2114,10 +2028,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 3 */
+/* 5 */
 /***/ function(module, exports, __webpack_require__) {
 
-	/* WEBPACK VAR INJECTION */(function(global) {/**
+	/**
 	 * Shallow object clone and merge
 	 *
 	 * @param a Object A
@@ -2175,30 +2089,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return buf.join('');
 	};
 
-
-	/**
-	 * Converts a value into an array of DOM nodes
-	 *
-	 * @param val A string, a NodeList, a Node, or an HTMLCollection
-	 */
-	exports.getNodeArray = function(val) {
-	    var retval = null;
-	    if (typeof(val) == 'string') {
-	        retval = document.querySelectorAll(val);
-	    } else if (global.NodeList && val instanceof global.NodeList) {
-	        retval = val;
-	    } else if (global.Node && val instanceof global.Node) {
-	        retval = [val];
-	    } else if (global.HTMLCollection && val instanceof global.HTMLCollection) {
-	        retval = val;
-	    } else if (val instanceof Array) {
-	        retval = val;
-	    } else if (val === null) {
-	        retval = [];
-	    }
-	    return retval;
-	};
-
 	/**
 	 * Checks if an image exists
 	 *
@@ -2258,170 +2148,339 @@ return /******/ (function(modules) { // webpackBootstrap
 	    return !!val;
 	};
 
-	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
 /***/ },
-/* 4 */
+/* 6 */
 /***/ function(module, exports, __webpack_require__) {
 
-	//Modified version of component/querystring
-	//Changes: updated dependencies, dot notation parsing, JSHint fixes
-	//Fork at https://github.com/imsky/querystring
-
-	/**
-	 * Module dependencies.
-	 */
-
-	var encode = encodeURIComponent;
-	var decode = decodeURIComponent;
-	var trim = __webpack_require__(6);
-	var type = __webpack_require__(7);
+	/* WEBPACK VAR INJECTION */(function(global) {var DOM = __webpack_require__(7);
 
-	var arrayRegex = /(\w+)\[(\d+)\]/;
-	var objectRegex = /\w+\.\w+/;
+	var SVG_NS = 'http://www.w3.org/2000/svg';
+	var NODE_TYPE_COMMENT = 8;
 
 	/**
-	 * Parse the given query `str`.
+	 * Generic SVG element creation function
 	 *
-	 * @param {String} str
-	 * @return {Object}
-	 * @api public
+	 * @private
+	 * @param svg SVG context, set to null if new
+	 * @param width Document width
+	 * @param height Document height
 	 */
+	exports.initSVG = function(svg, width, height) {
+	    var defs, style, initialize = false;
 
-	exports.parse = function(str){
-	  if ('string' !== typeof str) return {};
+	    if (svg && svg.querySelector) {
+	        style = svg.querySelector('style');
+	        if (style === null) {
+	            initialize = true;
+	        }
+	    } else {
+	        svg = DOM.newEl('svg', SVG_NS);
+	        initialize = true;
+	    }
 
-	  str = trim(str);
-	  if ('' === str) return {};
-	  if ('?' === str.charAt(0)) str = str.slice(1);
+	    if (initialize) {
+	        defs = DOM.newEl('defs', SVG_NS);
+	        style = DOM.newEl('style', SVG_NS);
+	        DOM.setAttr(style, {
+	            'type': 'text/css'
+	        });
+	        defs.appendChild(style);
+	        svg.appendChild(defs);
+	    }
 
-	  var obj = {};
-	  var pairs = str.split('&');
-	  for (var i = 0; i < pairs.length; i++) {
-	    var parts = pairs[i].split('=');
-	    var key = decode(parts[0]);
-	    var m, ctx, prop;
+	    //IE throws an exception if this is set and Chrome requires it to be set
+	    if (svg.webkitMatchesSelector) {
+	        svg.setAttribute('xmlns', SVG_NS);
+	    }
 
-	    if (m = arrayRegex.exec(key)) {
-	      obj[m[1]] = obj[m[1]] || [];
-	      obj[m[1]][m[2]] = decode(parts[1]);
-	      continue;
+	    //Remove comment nodes
+	    for (var i = 0; i < svg.childNodes.length; i++) {
+	        if (svg.childNodes[i].nodeType === NODE_TYPE_COMMENT) {
+	            svg.removeChild(svg.childNodes[i]);
+	        }
 	    }
 
-	    if (m = objectRegex.test(key)) {
-	      m = key.split('.');
-	      ctx = obj;
-	      
-	      while (m.length) {
-	        prop = m.shift();
+	    //Remove CSS
+	    while (style.childNodes.length) {
+	        style.removeChild(style.childNodes[0]);
+	    }
 
-	        if (!prop.length) continue;
+	    DOM.setAttr(svg, {
+	        'width': width,
+	        'height': height,
+	        'viewBox': '0 0 ' + width + ' ' + height,
+	        'preserveAspectRatio': 'none'
+	    });
 
-	        if (!ctx[prop]) {
-	          ctx[prop] = {};
-	        } else if (ctx[prop] && typeof ctx[prop] !== 'object') {
-	          break;
+	    return svg;
+	};
+
+	/**
+	 * Converts serialized SVG to a string suitable for data URI use
+	 * @param svgString Serialized SVG string
+	 * @param [base64] Use base64 encoding for data URI
+	 */
+	exports.svgStringToDataURI = function() {
+	    var rawPrefix = 'data:image/svg+xml;charset=UTF-8,';
+	    var base64Prefix = 'data:image/svg+xml;charset=UTF-8;base64,';
+
+	    return function(svgString, base64) {
+	        if (base64) {
+	            return base64Prefix + btoa(unescape(encodeURIComponent(svgString)));
+	        } else {
+	            return rawPrefix + encodeURIComponent(svgString);
 	        }
+	    };
+	}();
 
-	        if (!m.length) {
-	          ctx[prop] = decode(parts[1]);
+	/**
+	 * Returns serialized SVG with XML processing instructions
+	 *
+	 * @private
+	 * @param svg SVG context
+	 * @param stylesheets CSS stylesheets to include
+	 */
+	exports.serializeSVG = function(svg, engineSettings) {
+	    if (!global.XMLSerializer) return;
+	    var serializer = new XMLSerializer();
+	    var svgCSS = '';
+	    var stylesheets = engineSettings.stylesheets;
+
+	    //External stylesheets: Processing Instruction method
+	    if (engineSettings.svgXMLStylesheet) {
+	        var xml = DOM.createXML();
+	        //Add <?xml-stylesheet ?> directives
+	        for (var i = stylesheets.length - 1; i >= 0; i--) {
+	            var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href="' + stylesheets[i] + '" rel="stylesheet"');
+	            xml.insertBefore(csspi, xml.firstChild);
 	        }
 
-	        ctx = ctx[prop];
-	      }
+	        xml.removeChild(xml.documentElement);
+	        svgCSS = serializer.serializeToString(xml);
+	    }
 
-	      continue;
+	    var svgText = serializer.serializeToString(svg);
+	    svgText = svgText.replace(/\&amp;(\#[0-9]{2,}\;)/g, '&$1');
+	    return svgCSS + svgText;
+	};
+
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
+
+/***/ },
+/* 7 */
+/***/ function(module, exports, __webpack_require__) {
+
+	/* WEBPACK VAR INJECTION */(function(global) {/**
+	 * Generic new DOM element function
+	 *
+	 * @private
+	 * @param tag Tag to create
+	 * @param namespace Optional namespace value
+	 */
+	exports.newEl = function(tag, namespace) {
+	    if (!global.document) return;
+
+	    if (namespace == null) {
+	        return document.createElement(tag);
+	    } else {
+	        return document.createElementNS(namespace, tag);
 	    }
+	};
 
-	    obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);
-	  }
+	/**
+	 * Generic setAttribute function
+	 *
+	 * @private
+	 * @param el Reference to DOM element
+	 * @param attrs Object with attribute keys and values
+	 */
+	exports.setAttr = function(el, attrs) {
+	    for (var a in attrs) {
+	        el.setAttribute(a, attrs[a]);
+	    }
+	};
 
-	  return obj;
+	/**
+	 * Creates a XML document
+	 * @private
+	 */
+	exports.createXML = function() {
+	    if (!global.DOMParser) return;
+	    return new DOMParser().parseFromString('<xml />', 'application/xml');
 	};
 
 	/**
-	 * Stringify the given `obj`.
+	 * Converts a value into an array of DOM nodes
 	 *
-	 * @param {Object} obj
-	 * @return {String}
-	 * @api public
+	 * @param val A string, a NodeList, a Node, or an HTMLCollection
 	 */
+	exports.getNodeArray = function(val) {
+	    var retval = null;
+	    if (typeof(val) == 'string') {
+	        retval = document.querySelectorAll(val);
+	    } else if (global.NodeList && val instanceof global.NodeList) {
+	        retval = val;
+	    } else if (global.Node && val instanceof global.Node) {
+	        retval = [val];
+	    } else if (global.HTMLCollection && val instanceof global.HTMLCollection) {
+	        retval = val;
+	    } else if (val instanceof Array) {
+	        retval = val;
+	    } else if (val === null) {
+	        retval = [];
+	    }
+	    return retval;
+	};
 
-	exports.stringify = function(obj){
-	  if (!obj) return '';
-	  var pairs = [];
+	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
-	  for (var key in obj) {
-	    var value = obj[key];
+/***/ },
+/* 8 */
+/***/ function(module, exports, __webpack_require__) {
 
-	    if ('array' == type(value)) {
-	      for (var i = 0; i < value.length; ++i) {
-	        pairs.push(encode(key + '[' + i + ']') + '=' + encode(value[i]));
-	      }
-	      continue;
+	var Color = function (color, options) {
+	    //todo: support array->color conversion
+	    //todo: support rgba, hsla, and rrggbbaa notation
+	    if (typeof color !== 'string') return;
+
+	    if (color.charAt(0) === '#') {
+	        color = color.slice(1);
 	    }
 
-	    pairs.push(encode(key) + '=' + encode(obj[key]));
-	  }
+	    if (/[^a-f0-9]+/i.test(color)) return;
 
-	  return pairs.join('&');
+	    if (color.length === 3) {
+	        color = color.replace(/./g, '$&$&');
+	    }
+
+	    if (color.length !== 6) return;
+
+	    this.alpha = 1;
+
+	    if (options) {
+	        this.alpha = options.alpha || this.alpha;
+	    }
+
+	    colorSet.call(this, parseInt(color, 16));
 	};
 
+	Color.rgbToHex = function (r, g, b) {
+	    return (((r | 0) << 16) + ((g | 0) << 8) + (b | 0)).toString(16);
+	};
 
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
+	/**
+	 * Sets the color from a raw RGB888 integer
+	 * @param raw RGB888 representation of color
+	 */
+	 //todo: refactor into a more generic method
+	function colorSet (raw) {
+	    this.rgb = {};
+	    this.yuv = {};
+	    this.raw = raw;
+
+	    this.rgb.r = (raw & 0xFF0000) >> 16;
+	    this.rgb.g = (raw & 0x00FF00) >> 8;
+	    this.rgb.b = (raw & 0x0000FF);
+
+	    // BT.709
+	    this.yuv.y = 0.2126 * this.rgb.r + 0.7152 * this.rgb.g + 0.0722 * this.rgb.b;
+	    this.yuv.u = -0.09991 * this.rgb.r - 0.33609 * this.rgb.g + 0.436 * this.rgb.b;
+	    this.yuv.v = 0.615 * this.rgb.r - 0.55861 * this.rgb.g - 0.05639 * this.rgb.b;
+
+	    return this;
+	}
 
-	var Factory = function () {};
-	var slice = Array.prototype.slice;
-
-	var augment = function (base, body) {
-		var uber = Factory.prototype = typeof base === "function" ? base.prototype : base;
-		var prototype = new Factory(), properties = body.apply(prototype, slice.call(arguments, 2).concat(uber));
-		if (typeof properties === "object") for (var key in properties) prototype[key] = properties[key];
-		if (!prototype.hasOwnProperty("constructor")) return prototype;
-		var constructor = prototype.constructor;
-		constructor.prototype = prototype;
-		return constructor;
+	/**
+	 * Lighten or darken a color
+	 * @param multiplier Amount to lighten or darken (-1 to 1)
+	 */
+	Color.prototype.lighten = function (multiplier) {
+	    var r = this.rgb.r;
+	    var g = this.rgb.g;
+	    var b = this.rgb.b;
+
+	    var m = (255 * multiplier) | 0;
+
+	    return new Color(Color.rgbToHex(r + m, g + m, b + m));
 	};
 
-	augment.defclass = function (prototype) {
-		var constructor = prototype.constructor;
-		constructor.prototype = prototype;
-		return constructor;
+	/**
+	 * Output color in hex format
+	 * @param addHash Add a hash character to the beginning of the output
+	 */ 
+	Color.prototype.toHex = function (addHash) {
+	    return (addHash ? '#' : '') + this.raw.toString(16);
 	};
 
-	augment.extend = function (base, body) {
-		return augment(base, function (uber) {
-			this.uber = uber;
-			return body;
-		});
+	/**
+	 * Returns whether or not current color is lighter than another color
+	 * @param color Color to compare against
+	 */
+	Color.prototype.lighterThan = function (color) {
+	    if (!(color instanceof Color)) {
+	        color = new Color(color);
+	    }
+
+	    return this.yuv.y > color.yuv.y;
 	};
 
-	module.exports = augment;
+	/**
+	 * Returns the result of mixing current color with another color
+	 * @param color Color to mix with
+	 * @param multiplier How much to mix with the other color
+	 */
+	 /*
+	Color.prototype.mix = function (color, multiplier) {
+	    if (!(color instanceof Color)) {
+	        color = new Color(color);
+	    }
 
-/***/ },
-/* 6 */
-/***/ function(module, exports, __webpack_require__) {
+	    var r = this.rgb.r;
+	    var g = this.rgb.g;
+	    var b = this.rgb.b;
+	    var a = this.alpha;
 
-	
-	exports = module.exports = trim;
+	    var m = typeof multiplier !== 'undefined' ? multiplier : 0.5;
 
-	function trim(str){
-	  return str.replace(/^\s*|\s*$/g, '');
-	}
+	    //todo: write a lerp function
+	    r = r + m * (color.rgb.r - r);
+	    g = g + m * (color.rgb.g - g);
+	    b = b + m * (color.rgb.b - b);
+	    a = a + m * (color.alpha - a);
 
-	exports.left = function(str){
-	  return str.replace(/^\s*/, '');
+	    return new Color(Color.rgbToHex(r, g, b), {
+	        'alpha': a
+	    });
 	};
+	*/
 
-	exports.right = function(str){
-	  return str.replace(/\s*$/, '');
+	/**
+	 * Returns the result of blending another color on top of current color with alpha
+	 * @param color Color to blend on top of current color, i.e. "Ca"
+	 */
+	 //todo: see if .blendAlpha can be merged into .mix
+	Color.prototype.blendAlpha = function (color) {
+	    if (!(color instanceof Color)) {
+	        color = new Color(color);
+	    }
+
+	    var Ca = color;
+	    var Cb = this;
+
+	    //todo: write alpha blending function
+	    var r = Ca.alpha * Ca.rgb.r + (1 - Ca.alpha) * Cb.rgb.r;
+	    var g = Ca.alpha * Ca.rgb.g + (1 - Ca.alpha) * Cb.rgb.g;
+	    var b = Ca.alpha * Ca.rgb.b + (1 - Ca.alpha) * Cb.rgb.b;
+
+	    return new Color(Color.rgbToHex(r, g, b));
 	};
 
+	module.exports = Color;
+
 
 /***/ },
-/* 7 */
+/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -2460,6 +2519,26 @@ return /******/ (function(modules) { // webpackBootstrap
 	};
 
 
+/***/ },
+/* 10 */
+/***/ function(module, exports, __webpack_require__) {
+
+	
+	exports = module.exports = trim;
+
+	function trim(str){
+	  return str.replace(/^\s*|\s*$/g, '');
+	}
+
+	exports.left = function(str){
+	  return str.replace(/^\s*/, '');
+	};
+
+	exports.right = function(str){
+	  return str.replace(/\s*$/, '');
+	};
+
+
 /***/ }
 /******/ ])
 });