text: /*
  Holder.js - client side image placeholders
  © 2012-2014 Ivan Malopinsky - http://imsky.co
  */
  (function (register, global, undefined) {
  
      //Constants and definitions
  
      var SVG_NS = 'http://www.w3.org/2000/svg';
      var document = global.document;
  
      var Holder = {
          /**
           * Adds a theme to default settings
           *
           * @param {string} name Theme name
           * @param {Object} theme Theme object, with foreground, background, size, font, and fontweight properties.
           */
          addTheme: function (name, theme) {
              name != null && theme != null && (App.settings.themes[name] = theme);
              delete App.vars.cache.themeKeys;
              return this;
          },
  
          /**
           * Appends a placeholder to an element
           *
           * @param {string} src Placeholder URL string
           * @param {string} el Selector of target element(s)
           */
          addImage: function (src, el) {
              var node = document.querySelectorAll(el);
              if (node.length) {
                  for (var i = 0, l = node.length; i < l; i++) {
                      var img = newEl('img');
                      setAttr(img, {
                          'data-src': src
                      });
                      node[i].appendChild(img);
                  }
              }
              return this;
          },
  
          /**
           * Runs Holder with options. By default runs Holder on all images with "holder.js" in their source attributes.
           *
           * @param {Object} userOptions Options object, can contain domain, themes, images, and bgnodes properties
           */
          run: function (userOptions) {
              userOptions = userOptions || {};
              var renderSettings = {};
  
              App.vars.preempted = true;
  
              var options = extend(App.settings, userOptions);
  
              renderSettings.renderer = options.renderer ? options.renderer : App.setup.renderer;
              if (App.setup.renderers.join(',').indexOf(renderSettings.renderer) === -1) {
                  renderSettings.renderer = App.setup.supportsSVG ? 'svg' : (App.setup.supportsCanvas ? 'canvas' : 'html');
              }
  
              //< v2.4 API compatibility
              if (options.use_canvas) {
                  renderSettings.renderer = 'canvas';
              } else if (options.use_svg) {
                  renderSettings.renderer = 'svg';
              }
  
              var images = getNodeArray(options.images);
              var bgnodes = getNodeArray(options.bgnodes);
              var stylenodes = getNodeArray(options.stylenodes);
              var objects = getNodeArray(options.objects);
  
              renderSettings.stylesheets = [];
              renderSettings.svgXMLStylesheet = true;
              renderSettings.noFontFallback = options.noFontFallback ? options.noFontFallback : false;
  
              for (var i = 0; i < stylenodes.length; i++) {
                  var styleNode = stylenodes[i];
                  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');
                      proxyLink.href = href;
                      var stylesheetURL = proxyLink.protocol + '//' + proxyLink.host + proxyLink.pathname + proxyLink.search;
                      renderSettings.stylesheets.push(stylesheetURL);
                  }
              }
  
              for (i = 0; i < bgnodes.length; i++) {
                  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 holderURL = null;
                  var holderString = '?' + options.domain + '/';
  
                  if (rawURL.indexOf(holderString) === 0) {
                      holderURL = rawURL.slice(1);
                  } else if (rawURL.indexOf(holderString) != -1) {
                      var fragment = rawURL.substr(rawURL.indexOf(holderString)).slice(1);
                      var fragmentMatch = fragment.match(/([^\"]*)"?\)/);
  
                      if (fragmentMatch != null) {
                          holderURL = fragmentMatch[1];
                      }
                  }
  
                  if (holderURL != null) {
                      var holderFlags = parseURL(holderURL, options);
                      if (holderFlags) {
                          prepareDOMElement('background', bgnodes[i], holderFlags, renderSettings);
                      }
                  }
              }
  
              for (i = 0; i < objects.length; i++) {
                  var object = objects[i];
                  var objectAttr = {};
  
                  try {
                      objectAttr.data = object.getAttribute('data');
                      objectAttr.dataSrc = object.getAttribute('data-src');
                  } catch (e) {
                  }
  
                  var objectHasSrcURL = objectAttr.data != null && objectAttr.data.indexOf(options.domain) === 0;
                  var objectHasDataSrcURL = objectAttr.dataSrc != null && objectAttr.dataSrc.indexOf(options.domain) === 0;
  
                  if (objectHasSrcURL) {
                      prepareImageElement(options, renderSettings, objectAttr.data, object);
                  } else if (objectHasDataSrcURL) {
                      prepareImageElement(options, renderSettings, objectAttr.dataSrc, object);
                  }
              }
  
              for (i = 0; i < images.length; i++) {
                  var image = images[i];
                  var imageAttr = {};
  
                  try {
                      imageAttr.src = image.getAttribute('src');
                      imageAttr.dataSrc = image.getAttribute('data-src');
                      imageAttr.rendered = image.getAttribute('data-holder-rendered');
                  } catch (e) {
                  }
  
                  var imageHasSrc = imageAttr.src != null;
                  var imageHasDataSrcURL = imageAttr.dataSrc != null && imageAttr.dataSrc.indexOf(options.domain) === 0;
                  var imageRendered = imageAttr.rendered != null && imageAttr.rendered == 'true';
  
                  if (imageHasSrc) {
                      if (imageAttr.src.indexOf(options.domain) === 0) {
                          prepareImageElement(options, renderSettings, imageAttr.src, image);
                      } else if (imageHasDataSrcURL) {
                          //Image has a valid data-src and an invalid src
                          if (imageRendered) {
                              //If the placeholder has already been render, re-render it
                              prepareImageElement(options, renderSettings, imageAttr.dataSrc, image);
                          } else {
                              //If the placeholder has not been rendered, check if the image exists and render a fallback if it doesn't
                              (function (src, options, renderSettings, dataSrc, image) {
                                  imageExists(src, function (exists) {
                                      if (!exists) {
                                          prepareImageElement(options, renderSettings, dataSrc, image);
                                      }
                                  });
                              })(imageAttr.src, options, renderSettings, imageAttr.dataSrc, image);
                          }
                      }
                  } else if (imageHasDataSrcURL) {
                      prepareImageElement(options, renderSettings, imageAttr.dataSrc, image);
                  }
              }
  
              return this;
          },
          //todo: remove invisibleErrorFn for 2.5
          invisibleErrorFn: function (fn) {
              return function (el) {
                  if (el.hasAttribute('data-holder-invisible')) {
                      throw 'Holder: invisible placeholder';
                  }
              };
          }
      };
  
      //< v2.4 API compatibility
  
      Holder.add_theme = Holder.addTheme;
      Holder.add_image = Holder.addImage;
      Holder.invisible_error_fn = Holder.invisibleErrorFn;
  
      var App = {
          settings: {
              domain: 'holder.js',
              images: 'img',
              objects: 'object',
              bgnodes: 'body .holderjs',
              stylenodes: 'head link.holderjs',
              stylesheets: [],
              themes: {
                  'gray': {
                      background: '#EEEEEE',
                      foreground: '#AAAAAA'
                  },
                  'social': {
                      background: '#3a5a97',
                      foreground: '#FFFFFF'
                  },
                  'industrial': {
                      background: '#434A52',
                      foreground: '#C2F200'
                  },
                  'sky': {
                      background: '#0D8FDB',
                      foreground: '#FFFFFF'
                  },
                  'vine': {
                      background: '#39DBAC',
                      foreground: '#1E292C'
                  },
                  'lava': {
                      background: '#F8591A',
                      foreground: '#1C2846'
                  }
              }
          },
          defaults: {
              size: 10,
              units: 'pt',
              scale: 1 / 16
          },
          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$/
              }
          }
      };
  
      /**
       * Processes provided source attribute and sets up the appropriate rendering workflow
       *
       * @private
       * @param options Instance options from Holder.run
       * @param renderSettings Instance configuration
       * @param src Image URL
       * @param el Image DOM element
       */
      function prepareImageElement(options, renderSettings, src, el) {
          var holderFlags = parseURL(src.substr(src.lastIndexOf(options.domain)), options);
          if (holderFlags) {
              prepareDOMElement(null, el, holderFlags, renderSettings);
          }
      }
  
      /**
       * Processes a Holder URL and extracts flags
       *
       * @private
       * @param url URL
       * @param options Instance options from Holder.run
       */
      function parseURL(url, options) {
          var ret = {
              theme: extend(App.settings.themes.gray, null),
              stylesheets: options.stylesheets,
              holderURL: []
          };
          var render = false;
          var vtab = String.fromCharCode(11);
          var flags = url.replace(/([^\\])\//g, '$1' + vtab).split(vtab);
          var uriRegex = /%[0-9a-f]{2}/gi;
          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;
                  ret.dimensions = App.flags.dimensions.output(flag);
                  push = true;
              } else if (App.flags.fluid.match(flag)) {
                  render = true;
                  ret.dimensions = App.flags.fluid.output(flag);
                  ret.fluid = true;
                  push = true;
              } else if (App.flags.textmode.match(flag)) {
                  ret.textmode = App.flags.textmode.output(flag);
                  push = true;
              } else if (App.flags.colors.match(flag)) {
                  var colors = App.flags.colors.output(flag);
                  ret.theme = extend(ret.theme, colors);
                  //todo: convert implicit theme use to a theme: flag
                  push = true;
              } else if (options.themes[flag]) {
                  //If a theme is specified, it will override custom colors
                  if (options.themes.hasOwnProperty(flag)) {
                      ret.theme = extend(options.themes[flag], null);
                  }
                  push = true;
              } else if (App.flags.font.match(flag)) {
                  ret.font = App.flags.font.output(flag);
                  push = true;
              } else if (App.flags.auto.match(flag)) {
                  ret.auto = true;
                  push = true;
              } else if (App.flags.text.match(flag)) {
                  ret.text = App.flags.text.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];
                  ret.theme = extend(options.themes[theme], null);
                  push = true;
              }
  
              if (push) {
                  ret.holderURL.push(flag);
              }
          }
          ret.holderURL.unshift(options.domain);
          ret.holderURL = ret.holderURL.join('/');
          return render ? ret : false;
      }
  
      /**
       * Modifies the DOM to fit placeholders and sets up resizable image callbacks (for fluid and automatically sized placeholders)
       *
       * @private
       * @param el Image DOM element
       * @param flags Placeholder-specific configuration
       * @param _renderSettings Instance configuration
       */
      function prepareDOMElement(mode, el, flags, _renderSettings) {
          var dimensions = flags.dimensions,
              theme = flags.theme;
          var dimensionsCaption = dimensions.width + 'x' + dimensions.height;
          mode = mode == null ? (flags.fluid ? 'fluid' : 'image') : mode;
  
          if (flags.text != null) {
              theme.text = flags.text;
  
              //<object> SVG embedding doesn't parse Unicode properly
              if (el.nodeName.toLowerCase() === 'object') {
                  var textLines = theme.text.split('\\n');
                  for (var k = 0; k < textLines.length; k++) {
                      textLines[k] = encodeHtmlEntity(textLines[k]);
                  }
                  theme.text = textLines.join('\\n');
              }
          }
  
          var holderURL = flags.holderURL;
          var renderSettings = extend(_renderSettings, null);
  
          if (flags.font) {
              theme.font = flags.font;
              //Only run the <canvas> webfont fallback if noFontFallback is false, if the node is not an image, and if canvas is supported
              if (!renderSettings.noFontFallback && el.nodeName.toLowerCase() === 'img' && App.setup.supportsCanvas && renderSettings.renderer === 'svg') {
                  renderSettings = extend(renderSettings, {
                      renderer: 'canvas'
                  });
              }
          }
  
          //Chrome and Opera require a quick 10ms re-render if web fonts are used with canvas
          if (flags.font && renderSettings.renderer == 'canvas') {
              renderSettings.reRender = true;
          }
  
          if (mode == 'background') {
              if (el.getAttribute('data-background-src') == null) {
                  setAttr(el, {
                      'data-background-src': holderURL
                  });
              }
          } else {
              setAttr(el, {
                  'data-src': holderURL
              });
          }
  
          flags.theme = theme;
  
          el.holderData = {
              flags: flags,
              renderSettings: renderSettings
          };
  
          if (mode == 'image' || mode == 'fluid') {
              setAttr(el, {
                  'alt': (theme.text ? (theme.text.length > 16 ? theme.text.substring(0, 16) + '…' : theme.text) + ' [' + dimensionsCaption + ']' : dimensionsCaption)
              });
          }
  
          if (mode == 'image') {
              if (renderSettings.renderer == 'html' || !flags.auto) {
                  el.style.width = dimensions.width + 'px';
                  el.style.height = dimensions.height + 'px';
              }
              if (renderSettings.renderer == 'html') {
                  el.style.backgroundColor = theme.background;
              } else {
                  render(mode, {
                      dimensions: dimensions,
                      theme: theme,
                      flags: flags
                  }, el, renderSettings);
  
                  if (flags.textmode && flags.textmode == 'exact') {
                      App.vars.resizableImages.push(el);
                      updateResizableElements(el);
                  }
              }
          } else if (mode == 'background' && renderSettings.renderer != 'html') {
              render(mode, {
                      dimensions: dimensions,
                      theme: theme,
                      flags: flags
                  },
                  el, renderSettings);
          } else if (mode == 'fluid') {
              if (dimensions.height.slice(-1) == '%') {
                  el.style.height = dimensions.height;
              } else if (flags.auto == null || !flags.auto) {
                  el.style.height = dimensions.height + 'px';
              }
              if (dimensions.width.slice(-1) == '%') {
                  el.style.width = dimensions.width;
              } else if (flags.auto == null || !flags.auto) {
                  el.style.width = dimensions.width + 'px';
              }
              if (el.style.display == 'inline' || el.style.display === '' || el.style.display == 'none') {
                  el.style.display = 'block';
              }
  
              setInitialDimensions(el);
  
              if (renderSettings.renderer == 'html') {
                  el.style.backgroundColor = theme.background;
              } else {
                  App.vars.resizableImages.push(el);
                  updateResizableElements(el);
              }
          }
      }
  
      /**
       * Core function that takes output from renderers and sets it as the source or background-image of the target element
       *
       * @private
       * @param mode Placeholder mode, either background or image
       * @param params Placeholder-specific parameters
       * @param el Image DOM element
       * @param renderSettings Instance configuration
       */
  
      function render(mode, params, el, renderSettings) {
          var image = null;
  
          switch (renderSettings.renderer) {
              case 'svg':
                  if (!App.setup.supportsSVG) return;
                  break;
              case 'canvas':
                  if (!App.setup.supportsCanvas) return;
                  break;
              default:
                  return;
          }
  
          //todo: move generation of scene up to flag generation to reduce extra object creation
          var scene = {
              width: params.dimensions.width,
              height: params.dimensions.height,
              theme: params.theme,
              flags: params.flags
          };
  
          var sceneGraph = buildSceneGraph(scene);
  
          var rendererParams = {
              text: scene.text,
              width: scene.width,
              height: scene.height,
              textHeight: scene.font.size,
              font: scene.font.family,
              fontWeight: scene.font.weight,
              template: scene.theme
          };
  
          function getRenderedImage() {
              var image = null;
              switch (renderSettings.renderer) {
                  case 'canvas':
                      image = sgCanvasRenderer(sceneGraph);
                      break;
                  case 'svg':
                      image = sgSVGRenderer(sceneGraph, renderSettings);
                      break;
                  default:
                      throw 'Holder: invalid renderer: ' + renderSettings.renderer;
              }
              return image;
          }
  
          image = getRenderedImage();
  
          if (image == null) {
              throw 'Holder: couldn\'t render placeholder';
          }
  
          //todo: add <object> canvas rendering
          if (mode == 'background') {
              el.style.backgroundImage = 'url(' + image + ')';
              el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';
          } else {
              if (el.nodeName.toLowerCase() === 'img') {
                  setAttr(el, {
                      'src': image
                  });
              } else if (el.nodeName.toLowerCase() === 'object') {
                  setAttr(el, {
                      'data': image
                  });
                  setAttr(el, {
                      'type': 'image/svg+xml'
                  });
              }
              if (renderSettings.reRender) {
                  setTimeout(function () {
                      var image = getRenderedImage();
                      if (image == null) {
                          throw 'Holder: couldn\'t render placeholder';
                      }
                      if (el.nodeName.toLowerCase() === 'img') {
                          setAttr(el, {
                              'src': image
                          });
                      } else if (el.nodeName.toLowerCase() === 'object') {
                          setAttr(el, {
                              'data': image
                          });
                          setAttr(el, {
                              'type': 'image/svg+xml'
                          });
                      }
                  }, 100);
              }
          }
          setAttr(el, {
              'data-holder-rendered': true
          });
      }
  
      /**
       * Core function that takes a Holder scene description and builds a scene graph
       *
       * @private
       * @param scene Holder scene object
       */
      function buildSceneGraph(scene) {
          scene.font = {
              family: scene.theme.font ? scene.theme.font : 'Arial, Helvetica, Open Sans, sans-serif',
              size: textSize(scene.width, scene.height, scene.theme.size ? scene.theme.size : App.defaults.size),
              units: scene.theme.units ? scene.theme.units : App.defaults.units,
              weight: scene.theme.fontweight ? scene.theme.fontweight : 'bold'
          };
          scene.text = scene.theme.text ? scene.theme.text : Math.floor(scene.width) + 'x' + Math.floor(scene.height);
  
          switch (scene.flags.textmode) {
              case 'literal':
                  scene.text = scene.flags.dimensions.width + 'x' + scene.flags.dimensions.height;
                  break;
              case 'exact':
                  if (!scene.flags.exactDimensions) break;
                  scene.text = Math.floor(scene.flags.exactDimensions.width) + 'x' + Math.floor(scene.flags.exactDimensions.height);
                  break;
          }
  
          var sceneGraph = new SceneGraph({
              width: scene.width,
              height: scene.height
          });
  
          var Shape = sceneGraph.Shape;
  
          var holderBg = new Shape.Rect('holderBg', {
              fill: scene.theme.background
          });
  
          holderBg.resize(scene.width, scene.height);
          sceneGraph.root.add(holderBg);
  
          var holderTextGroup = new Shape.Group('holderTextGroup', {
              text: scene.text,
              align: 'center',
              font: scene.font,
              fill: scene.theme.foreground
          });
  
          holderTextGroup.moveTo(null, null, 1);
          sceneGraph.root.add(holderTextGroup);
  
          var tpdata = holderTextGroup.textPositionData = stagingRenderer(sceneGraph);
          if (!tpdata) {
              throw 'Holder: staging fallback not supported yet.';
          }
          holderTextGroup.properties.leading = tpdata.boundingBox.height;
  
          //todo: alignment: TL, TC, TR, CL, CR, BL, BC, BR
          var textNode = null;
          var line = null;
  
          function finalizeLine(parent, line, width, height) {
              line.width = width;
              line.height = height;
              parent.width = Math.max(parent.width, line.width);
              parent.height += line.height;
              parent.add(line);
          }
  
          if (tpdata.lineCount > 1) {
              var offsetX = 0;
              var offsetY = 0;
              var maxLineWidth = scene.width * App.setup.lineWrapRatio;
              var lineIndex = 0;
              line = new Shape.Group('line' + lineIndex);
  
              for (var i = 0; i < tpdata.words.length; i++) {
                  var word = tpdata.words[i];
                  textNode = new Shape.Text(word.text);
                  var newline = word.text == '\\n';
                  if (offsetX + word.width >= maxLineWidth || newline === true) {
                      finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);
                      offsetX = 0;
                      offsetY += holderTextGroup.properties.leading;
                      lineIndex += 1;
                      line = new Shape.Group('line' + lineIndex);
                      line.y = offsetY;
                  }
                  if (newline === true) {
                      continue;
                  }
                  textNode.moveTo(offsetX, 0);
                  offsetX += tpdata.spaceWidth + word.width;
                  line.add(textNode);
              }
  
              finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);
  
              for (var lineKey in holderTextGroup.children) {
                  line = holderTextGroup.children[lineKey];
                  line.moveTo(
                      (holderTextGroup.width - line.width) / 2,
                      null,
                      null);
              }
  
              holderTextGroup.moveTo(
                  (scene.width - holderTextGroup.width) / 2, (scene.height - holderTextGroup.height) / 2,
                  null);
  
              //If the text exceeds vertical space, move it down so the first line is visible
              if ((scene.height - holderTextGroup.height) / 2 < 0) {
                  holderTextGroup.moveTo(null, 0, null);
              }
          } else {
              textNode = new Shape.Text(scene.text);
              line = new Shape.Group('line0');
              line.add(textNode);
              holderTextGroup.add(line);
  
              holderTextGroup.moveTo(
                  (scene.width - tpdata.boundingBox.width) / 2, (scene.height - tpdata.boundingBox.height) / 2,
                  null);
          }
  
          //todo: renderlist
  
          return sceneGraph;
      }
  
      /**
       * Adaptive text sizing function
       *
       * @private
       * @param width Parent width
       * @param height Parent height
       * @param fontSize Requested text size
       */
      function textSize(width, height, fontSize) {
          height = parseInt(height, 10);
          width = parseInt(width, 10);
          var bigSide = Math.max(height, width);
          var smallSide = Math.min(height, width);
          var scale = App.defaults.scale;
          var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
          return Math.round(Math.max(fontSize, newHeight));
      }
  
      /**
       * Iterates over resizable (fluid or auto) placeholders and renders them
       *
       * @private
       * @param element Optional element selector, specified only if a specific element needs to be re-rendered
       */
      function updateResizableElements(element) {
          var images;
          if (element == null || element.nodeType == null) {
              images = App.vars.resizableImages;
          } else {
              images = [element];
          }
          for (var i in images) {
              if (!images.hasOwnProperty(i)) {
                  continue;
              }
              var el = images[i];
              if (el.holderData) {
                  var flags = el.holderData.flags;
                  var dimensions = dimensionCheck(el, Holder.invisibleErrorFn(updateResizableElements));
                  if (dimensions) {
                      if (flags.fluid && flags.auto) {
                          var fluidConfig = el.holderData.fluidConfig;
                          switch (fluidConfig.mode) {
                              case 'width':
                                  dimensions.height = dimensions.width / fluidConfig.ratio;
                                  break;
                              case 'height':
                                  dimensions.width = dimensions.height * fluidConfig.ratio;
                                  break;
                          }
                      }
  
                      var drawParams = {
                          dimensions: dimensions,
                          theme: flags.theme,
                          flags: flags
                      };
  
                      if (flags.textmode && flags.textmode == 'exact') {
                          flags.exactDimensions = dimensions;
                          drawParams.dimensions = flags.dimensions;
                      }
  
                      render('image', drawParams, el, el.holderData.renderSettings);
                  }
              }
          }
      }
  
      /**
       * Checks if an element is visible
       *
       * @private
       * @param el DOM element
       * @param callback Callback function executed if the element is invisible
       */
      function dimensionCheck(el, callback) {
          var dimensions = {
              height: el.clientHeight,
              width: el.clientWidth
          };
          if (!dimensions.height && !dimensions.width) {
              setAttr(el, {
                  'data-holder-invisible': true
              });
              callback.call(this, el);
          } else {
              el.removeAttribute('data-holder-invisible');
              return dimensions;
          }
      }
  
      /**
       * Sets up aspect ratio metadata for fluid placeholders, in order to preserve proportions when resizing
       *
       * @private
       * @param el Image DOM element
       */
      function setInitialDimensions(el) {
          if (el.holderData) {
              var dimensions = dimensionCheck(el, Holder.invisibleErrorFn(setInitialDimensions));
              if (dimensions) {
                  var flags = el.holderData.flags;
  
                  var fluidConfig = {
                      fluidHeight: flags.dimensions.height.slice(-1) == '%',
                      fluidWidth: flags.dimensions.width.slice(-1) == '%',
                      mode: null,
                      initialDimensions: dimensions
                  };
  
                  if (fluidConfig.fluidWidth && !fluidConfig.fluidHeight) {
                      fluidConfig.mode = 'width';
                      fluidConfig.ratio = fluidConfig.initialDimensions.width / parseFloat(flags.dimensions.height);
                  } else if (!fluidConfig.fluidWidth && fluidConfig.fluidHeight) {
                      fluidConfig.mode = 'height';
                      fluidConfig.ratio = parseFloat(flags.dimensions.width) / fluidConfig.initialDimensions.height;
                  }
  
                  el.holderData.fluidConfig = fluidConfig;
              }
          }
      }
  
      //todo: see if possible to convert stagingRenderer to use HTML only
      var stagingRenderer = (function () {
          var svg = null,
              stagingText = null,
              stagingTextNode = null;
          return function (graph) {
              var rootNode = graph.root;
              if (App.setup.supportsSVG) {
                  var firstTimeSetup = false;
                  var tnode = function (text) {
                      return document.createTextNode(text);
                  };
                  if (svg == null) {
                      firstTimeSetup = true;
                  }
                  svg = initSVG(svg, rootNode.properties.width, rootNode.properties.height);
                  if (firstTimeSetup) {
                      stagingText = newEl('text', SVG_NS);
                      stagingTextNode = tnode(null);
                      setAttr(stagingText, {
                          x: 0
                      });
                      stagingText.appendChild(stagingTextNode);
                      svg.appendChild(stagingText);
                      document.body.appendChild(svg);
                      svg.style.visibility = 'hidden';
                      svg.style.position = 'absolute';
                      svg.style.top = '-100%';
                      svg.style.left = '-100%';
                      //todo: workaround for zero-dimension <svg> tag in Opera 12
                      //svg.setAttribute('width', 0);
                      //svg.setAttribute('height', 0);
                  }
  
                  var holderTextGroup = rootNode.children.holderTextGroup;
                  var htgProps = holderTextGroup.properties;
                  setAttr(stagingText, {
                      'y': htgProps.font.size,
                      'style': cssProps({
                          'font-weight': htgProps.font.weight,
                          'font-size': htgProps.font.size + htgProps.font.units,
                          'font-family': htgProps.font.family,
                          'dominant-baseline': 'middle'
                      })
                  });
  
                  //Get bounding box for the whole string (total width and height)
                  stagingTextNode.nodeValue = htgProps.text;
                  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 words = htgProps.text.split(' ');
                  var newlines = htgProps.text.match(/\\n/g);
                  lineCount += newlines == null ? 0 : newlines.length;
  
                  //Get bounding box for the string with spaces removed
                  stagingTextNode.nodeValue = htgProps.text.replace(/[ ]+/g, '');
                  var computedNoSpaceLength = stagingText.getComputedTextLength();
  
                  //Compute average space width
                  var diffLength = stagingTextBBox.width - computedNoSpaceLength;
                  var spaceWidth = Math.round(diffLength / Math.max(1, words.length - 1));
  
                  //Get widths for every word with space only if there is more than one line
                  var wordWidths = [];
                  if (lineCount > 1) {
                      stagingTextNode.nodeValue = '';
                      for (var i = 0; i < words.length; i++) {
                          if (words[i].length === 0) continue;
                          stagingTextNode.nodeValue = decodeHtmlEntity(words[i]);
                          var bbox = stagingText.getBBox();
                          wordWidths.push({
                              text: words[i],
                              width: bbox.width
                          });
                      }
                  }
  
                  return {
                      spaceWidth: spaceWidth,
                      lineCount: lineCount,
                      boundingBox: stagingTextBBox,
                      words: wordWidths
                  };
              } else {
                  //todo: canvas fallback for measuring text on android 2.3
                  return false;
              }
          };
      })();
  
      var sgCanvasRenderer = (function () {
          var canvas = newEl('canvas');
          var ctx = null;
  
          return function (sceneGraph) {
              if (ctx == null) {
                  ctx = canvas.getContext('2d');
              }
              var root = sceneGraph.root;
              canvas.width = App.dpr(root.properties.width);
              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 textGroup = root.children.holderTextGroup;
              var tgProps = textGroup.properties;
              ctx.font = textGroup.properties.font.weight + ' ' + App.dpr(textGroup.properties.font.size) + textGroup.properties.font.units + ' ' + textGroup.properties.font.family + ', monospace';
              ctx.fillStyle = textGroup.properties.fill;
  
              for (var lineKey in textGroup.children) {
                  var line = textGroup.children[lineKey];
                  for (var wordKey in line.children) {
                      var word = line.children[wordKey];
                      var x = App.dpr(textGroup.x + line.x + word.x);
                      var y = App.dpr(textGroup.y + line.y + word.y + (textGroup.properties.leading / 2));
  
                      ctx.fillText(word.properties.text, x, y);
                  }
              }
  
              return canvas.toDataURL('image/png');
          };
      })();
  
      var sgSVGRenderer = (function () {
          //Prevent IE <9 from initializing SVG renderer
          if (!global.XMLSerializer) return;
          var svg = initSVG(null, 0, 0);
          var bgEl = newEl('rect', SVG_NS);
          svg.appendChild(bgEl);
  
          //todo: create a reusable pool for textNodes, resize if more words present
  
          return function (sceneGraph, renderSettings) {
              var root = sceneGraph.root;
  
              initSVG(svg, root.properties.width, root.properties.height);
              var groups = svg.querySelectorAll('g');
  
              for (var i = 0; i < groups.length; i++) {
                  groups[i].parentNode.removeChild(groups[i]);
              }
  
              setAttr(bgEl, {
                  'width': root.children.holderBg.width,
                  'height': root.children.holderBg.height,
                  'fill': root.children.holderBg.properties.fill
              });
  
              var textGroup = root.children.holderTextGroup;
              var tgProps = textGroup.properties;
              var textGroupEl = newEl('g', SVG_NS);
              svg.appendChild(textGroupEl);
  
              for (var lineKey in textGroup.children) {
                  var line = textGroup.children[lineKey];
                  for (var wordKey in line.children) {
                      var word = line.children[wordKey];
                      var x = textGroup.x + line.x + word.x;
                      var y = textGroup.y + line.y + word.y + (textGroup.properties.leading / 2);
  
                      var textEl = newEl('text', SVG_NS);
                      var textNode = document.createTextNode(null);
  
                      setAttr(textEl, {
                          'x': x,
                          'y': y,
                          'style': cssProps({
                              'fill': tgProps.fill,
                              'font-weight': tgProps.font.weight,
                              'font-family': tgProps.font.family + ', monospace',
                              'font-size': tgProps.font.size + tgProps.font.units,
                              'dominant-baseline': 'central'
                          })
                      });
  
                      textNode.nodeValue = word.properties.text;
                      textEl.appendChild(textNode);
                      textGroupEl.appendChild(textEl);
                  }
              }
  
              var svgString = 'data:image/svg+xml;base64,' +
                  btoa(unescape(encodeURIComponent(serializeSVG(svg, renderSettings))));
              return svgString;
          };
      })();
  
      //Helpers
  
      /**
       * 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) {
          if (svg == null) {
              svg = newEl('svg', SVG_NS);
              var defs = newEl('defs', SVG_NS);
              svg.appendChild(defs);
          }
          //IE throws an exception if this is set and Chrome requires it to be set
          if (svg.webkitMatchesSelector) {
              svg.setAttribute('xmlns', SVG_NS);
          }
  
          setAttr(svg, {
              'width': width,
              'height': height,
              'viewBox': '0 0 ' + width + ' ' + height,
              'preserveAspectRatio': 'none'
          });
          return svg;
      }
  
      /**
       * Generic SVG serialization function
       *
       * @private
       * @param svg SVG context
       * @param stylesheets CSS stylesheets to include
       */
      function serializeSVG(svg, renderSettings) {
          if (!global.XMLSerializer) return;
          var serializer = new XMLSerializer();
          var svgCSS = '';
          var stylesheets = renderSettings.stylesheets;
          var defs = svg.querySelector('defs');
  
          //External stylesheets: Processing Instruction method
          if (renderSettings.svgXMLStylesheet) {
              var xml = new DOMParser().parseFromString('<xml />', 'application/xml');
              //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);
              }
  
              //Add <?xml ... ?> UTF-8 directive
              var xmlpi = xml.createProcessingInstruction('xml', 'version="1.0" encoding="UTF-8" standalone="yes"');
              xml.insertBefore(xmlpi, xml.firstChild);
              xml.removeChild(xml.documentElement);
              svgCSS = serializer.serializeToString(xml);
          }
  
          /*
  
          //External stylesheets: <link> method
          if (renderSettings.svgLinkStylesheet) {
  
              defs.removeChild(defs.firstChild);
              for (i = 0; i < stylesheets.length; i++) {
                  var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'link');
                  link.setAttribute('href', stylesheets[i]);
                  link.setAttribute('rel', 'stylesheet');
                  link.setAttribute('type', 'text/css');
                  defs.appendChild(link);
              }
          }
  
          //External stylesheets: <style> and @import method
          if (renderSettings.svgImportStylesheet) {
              var style = document.createElementNS(SVG_NS, 'style');
              var styleText = [];
  
              for (i = 0; i < stylesheets.length; i++) {
                  styleText.push('@import url(' + stylesheets[i] + ');');
              }
  
              var styleTextNode = document.createTextNode(styleText.join('\n'));
              style.appendChild(styleTextNode);
              defs.appendChild(style);
          }
  
          */
  
          var svgText = serializer.serializeToString(svg);
          svgText = svgText.replace(/\&amp;(\#[0-9]{2,}\;)/g, '&$1');
          return svgCSS + svgText;
      }
  
      /**
       * Shallow object clone and merge
       *
       * @param a Object A
       * @param b Object B
       * @returns {Object} New object with all of A's properties, and all of B's properties, overwriting A's properties
       */
      function extend(a, b) {
          var c = {};
          for (var x in a) {
              if (a.hasOwnProperty(x)) {
                  c[x] = a[x];
              }
          }
          if (b != null) {
              for (var y in b) {
                  if (b.hasOwnProperty(y)) {
                      c[y] = b[y];
                  }
              }
          }
          return c;
      }
  
      /**
       * Takes a k/v list of CSS properties and returns a rule
       *
       * @param props CSS properties object
       */
      function cssProps(props) {
          var ret = [];
          for (var p in props) {
              if (props.hasOwnProperty(p)) {
                  ret.push(p + ':' + props[p]);
              }
          }
          return ret.join(';');
      }
  
      /**
       * Prevents a function from being called too often, waits until a timer elapses to call it again
       *
       * @param fn Function to call
       */
      function debounce(fn) {
          if (!App.vars.debounceTimer) fn.call(this);
          if (App.vars.debounceTimer) clearTimeout(App.vars.debounceTimer);
          App.vars.debounceTimer = setTimeout(function () {
              App.vars.debounceTimer = null;
              fn.call(this);
          }, App.setup.debounce);
      }
  
      /**
       * Holder-specific resize/orientation change callback, debounced to prevent excessive execution
       */
      function resizeEvent() {
          debounce(function () {
              updateResizableElements(null);
          });
      }
  
      /**
       * Converts a value into an array of DOM nodes
       *
       * @param val A string, a NodeList, a Node, or an HTMLCollection
       */
      function getNodeArray(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 === null) {
              retval = [];
          }
          return retval;
      }
  
      /**
       * Checks if an image exists
       *
       * @param params Configuration object, must specify at least a src key
       * @param callback Callback to call once image status has been found
       */
      function imageExists(src, callback) {
          var image = new Image();
          image.onerror = function () {
              callback.call(this, false);
          };
          image.onload = function () {
              callback.call(this, true);
          };
          image.src = src;
      }
  
      /**
       * Encodes HTML entities in a string
       *
       * @param str Input string
       */
      function encodeHtmlEntity(str) {
          var buf = [];
          var charCode = 0;
          for (var i = str.length - 1; i >= 0; i--) {
              charCode = str.charCodeAt(i);
              if (charCode > 128) {
                  buf.unshift(['&#', charCode, ';'].join(''));
              } else {
                  buf.unshift(str[i]);
              }
          }
          return buf.join('');
      }
  
      /**
       * Decodes HTML entities in a stirng
       *
       * @param str Input string
       */
      function decodeHtmlEntity(str) {
          return str.replace(/&#(\d+);/g, function (match, dec) {
              return String.fromCharCode(dec);
          });
      }
  
      // Scene graph
  
      var SceneGraph = function (sceneProperties) {
          var nodeCount = 1;
  
          //todo: move merge to helpers section
          function merge(parent, child) {
              for (var prop in child) {
                  parent[prop] = child[prop];
              }
              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;
                  }
              }
              /*,	// probably unnecessary in Holder
              remove: function(name){
                  if(this.children[name] == null){
                      throw 'SceneGraph: child with that name doesn\'t exist: '+name;
                  }
                  else{
                      child.parent = null;
                      delete this.children[name];
                  }
              },
              removeAll: function(){
                  for(var child in this.children){
                      this.remove(child);
                  }
              }*/
          });
  
          var RootNode = augment(SceneNode, function (uber) {
              this.constructor = function () {
                  uber.constructor.call(this, 'root');
                  this.properties = sceneProperties;
              };
          });
  
          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';
                  }
              }
  
              this.Group = augment.extend(this, {
                  constructor: constructor,
                  type: 'group'
              });
  
              this.Rect = augment.extend(this, {
                  constructor: constructor,
                  type: 'rect'
              });
  
              this.Text = augment.extend(this, {
                  constructor: function (text) {
                      constructor.call(this);
                      this.properties.text = text;
                  },
                  type: 'text'
              });
          });
  
          var root = new RootNode();
  
          this.Shape = Shape;
          this.root = root;
  
          return this;
      };
  
      //Set up flags
  
      for (var flag in App.flags) {
          if (!App.flags.hasOwnProperty(flag)) continue;
          App.flags[flag].match = function (val) {
              return val.match(this.regex);
          };
      }
  
      //Properties set once on setup
  
      App.setup = {
          renderer: 'html',
          debounce: 100,
          ratio: 1,
          supportsCanvas: false,
          supportsSVG: false,
          lineWrapRatio: 0.9,
          renderers: ['html', 'canvas', 'svg']
      };
  
      App.dpr = function (val) {
          return val * App.setup.ratio;
      };
  
      //Properties modified during runtime
  
      App.vars = {
          preempted: false,
          resizableImages: [],
          debounceTimer: null,
          cache: {}
      };
  
      //Pre-flight
  
      (function () {
          var devicePixelRatio = 1,
              backingStoreRatio = 1;
  
          var canvas = newEl('canvas');
          var ctx = null;
  
          if (canvas.getContext) {
              if (canvas.toDataURL('image/png').indexOf('data:image/png') != -1) {
                  App.setup.renderer = 'canvas';
                  ctx = canvas.getContext('2d');
                  App.setup.supportsCanvas = true;
              }
          }
  
          if (App.setup.supportsCanvas) {
              devicePixelRatio = global.devicePixelRatio || 1;
              backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
          }
  
          App.setup.ratio = devicePixelRatio / backingStoreRatio;
  
          if (!!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect) {
              App.setup.renderer = 'svg';
              App.setup.supportsSVG = true;
          }
      })();
  
      //Exposing to environment and setting up listeners
      register(Holder, 'Holder', global);
  
      if (global.onDomReady) {
          global.onDomReady(function () {
              if (!App.vars.preempted) {
                  Holder.run();
              }
              if (global.addEventListener) {
                  global.addEventListener('resize', resizeEvent, false);
                  global.addEventListener('orientationchange', resizeEvent, false);
              } else {
                  global.attachEvent('onresize', resizeEvent);
              }
  
              if (typeof global.Turbolinks == 'object') {
                  global.document.addEventListener('page:change', function () {
                      Holder.run();
                  });
              }
          });
      }
  
  })(function (fn, name, global) {
      var isAMD = (typeof define === 'function' && define.amd);
      var isNode = (typeof exports === 'object');
      var isWeb = !isNode;
  
      if (isAMD) {
          define(fn);
      } else {
          //todo: npm/browserify registration
          global[name] = fn;
      }
  }, this);