text: /**
   * Copyright 2013 vtt.js Contributors
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *   http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
  /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */
  
  (function(global) {
    function makeColorSet(color, opacity) {
      if(opacity === undefined) {
        opacity = 1;
      }
      return "rgba(" + [parseInt(color.substring(0, 2), 16),
                        parseInt(color.substring(2, 4), 16),
                        parseInt(color.substring(4, 6), 16),
                        opacity].join(",") + ")";
    }
  
    var WebVTTPrefs = ['webvtt.font.color', 'webvtt.font.opacity', 'webvtt.font.scale',
                       'webvtt.bg.color', 'webvtt.bg.opacity',
                       'webvtt.edge.color', 'webvtt.edge.type'];
  
    var fontScale = 1;
  
    function observe(subject, topic, data) {
      switch (data) {
        case "webvtt.font.color":
        case "webvtt.font.opacity":
          var fontColor = Services.prefs.getCharPref("webvtt.font.color");
          var fontOpacity = Services.prefs.getIntPref("webvtt.font.opacity") / 100;
          WebVTTSet.fontSet = makeColorSet(fontColor, fontOpacity);
          break;
        case "webvtt.font.scale":
          fontScale = Services.prefs.getIntPref("webvtt.font.scale") / 100;
          break;
        case "webvtt.bg.color":
        case "webvtt.bg.opacity":
          var backgroundColor = Services.prefs.getCharPref("webvtt.bg.color");
          var backgroundOpacity = Services.prefs.getIntPref("webvtt.bg.opacity") / 100;
          WebVTTSet.backgroundSet = makeColorSet(backgroundColor, backgroundOpacity);
          break;
        case "webvtt.edge.color":
        case "webvtt.edge.type":
          var edgeTypeList = ["", "0px 0px ", "4px 4px 4px ", "-2px -2px ", "2px 2px "];
          var edgeType = Services.prefs.getIntPref("webvtt.edge.type");
          var edgeColor = Services.prefs.getCharPref("webvtt.edge.color");
          WebVTTSet.edgeSet = edgeTypeList[edgeType] + makeColorSet(edgeColor);
          break;
      }
    }
  
    if(typeof Services !== "undefined") {
      var WebVTTSet = {};
      WebVTTPrefs.forEach(function (pref) {
        observe(undefined, undefined, pref);
        Services.prefs.addObserver(pref, observe, false);
      });
    }
  
    var _objCreate = Object.create || (function() {
      function F() {}
      return function(o) {
        if (arguments.length !== 1) {
          throw new Error('Object.create shim only accepts one parameter.');
        }
        F.prototype = o;
        return new F();
      };
    })();
  
    // Creates a new ParserError object from an errorData object. The errorData
    // object should have default code and message properties. The default message
    // property can be overriden by passing in a message parameter.
    // See ParsingError.Errors below for acceptable errors.
    function ParsingError(errorData, message) {
      this.name = "ParsingError";
      this.code = errorData.code;
      this.message = message || errorData.message;
    }
    ParsingError.prototype = _objCreate(Error.prototype);
    ParsingError.prototype.constructor = ParsingError;
  
    // ParsingError metadata for acceptable ParsingErrors.
    ParsingError.Errors = {
      BadSignature: {
        code: 0,
        message: "Malformed WebVTT signature."
      },
      BadTimeStamp: {
        code: 1,
        message: "Malformed time stamp."
      }
    };
  
    // Try to parse input as a time stamp.
    function parseTimeStamp(input) {
  
      function computeSeconds(h, m, s, f) {
        return (h | 0) * 3600 + (m | 0) * 60 + (s | 0) + (f | 0) / 1000;
      }
  
      var m = input.match(/^(\d+):(\d{2})(:\d{2})?\.(\d{3})/);
      if (!m) {
        return null;
      }
  
      if (m[3]) {
        // Timestamp takes the form of [hours]:[minutes]:[seconds].[milliseconds]
        return computeSeconds(m[1], m[2], m[3].replace(":", ""), m[4]);
      } else if (m[1] > 59) {
        // Timestamp takes the form of [hours]:[minutes].[milliseconds]
        // First position is hours as it's over 59.
        return computeSeconds(m[1], m[2], 0,  m[4]);
      } else {
        // Timestamp takes the form of [minutes]:[seconds].[milliseconds]
        return computeSeconds(0, m[1], m[2], m[4]);
      }
    }
  
    // A settings object holds key/value pairs and will ignore anything but the first
    // assignment to a specific key.
    function Settings() {
      this.values = _objCreate(null);
    }
  
    Settings.prototype = {
      // Only accept the first assignment to any key.
      set: function(k, v) {
        if (!this.get(k) && v !== "") {
          this.values[k] = v;
        }
      },
      // Return the value for a key, or a default value.
      // If 'defaultKey' is passed then 'dflt' is assumed to be an object with
      // a number of possible default values as properties where 'defaultKey' is
      // the key of the property that will be chosen; otherwise it's assumed to be
      // a single value.
      get: function(k, dflt, defaultKey) {
        if (defaultKey) {
          return this.has(k) ? this.values[k] : dflt[defaultKey];
        }
        return this.has(k) ? this.values[k] : dflt;
      },
      // Check whether we have a value for a key.
      has: function(k) {
        return k in this.values;
      },
      // Accept a setting if its one of the given alternatives.
      alt: function(k, v, a) {
        for (var n = 0; n < a.length; ++n) {
          if (v === a[n]) {
            this.set(k, v);
            break;
          }
        }
      },
      // Accept a setting if its a valid (signed) integer.
      integer: function(k, v) {
        if (/^-?\d+$/.test(v)) { // integer
          this.set(k, parseInt(v, 10));
        }
      },
      // Accept a setting if its a valid percentage.
      percent: function(k, v) {
        var m;
        if ((m = v.match(/^([\d]{1,3})(\.[\d]*)?%$/))) {
          v = parseFloat(v);
          if (v >= 0 && v <= 100) {
            this.set(k, v);
            return true;
          }
        }
        return false;
      }
    };
  
    // Helper function to parse input into groups separated by 'groupDelim', and
    // interprete each group as a key/value pair separated by 'keyValueDelim'.
    function parseOptions(input, callback, keyValueDelim, groupDelim) {
      var groups = groupDelim ? input.split(groupDelim) : [input];
      for (var i in groups) {
        if (typeof groups[i] !== "string") {
          continue;
        }
        var kv = groups[i].split(keyValueDelim);
        if (kv.length !== 2) {
          continue;
        }
        var k = kv[0];
        var v = kv[1];
        callback(k, v);
      }
    }
  
    function parseCue(input, cue, regionList, successCb, errCb) {
      // Remember the original input if we need to throw an error.
      var oInput = input;
      // 4.1 WebVTT timestamp
      function consumeTimeStamp() {
        var ts = parseTimeStamp(input);
        if (ts === null) {
          if (errCb) {
            errCb(new ParsingError(ParsingError.Errors.BadTimeStamp,
                                  "Malformed timestamp: " + oInput));
            return;
          }
        }
        // Remove time stamp from input.
        input = input.replace(/^[^\sa-zA-Z-]+/, "");
        return ts;
      }
  
      // 4.4.2 WebVTT cue settings
      function consumeCueSettings(input, cue) {
        var settings = new Settings();
  
        parseOptions(input, function (k, v) {
          switch (k) {
          case "region":
            // Find the last region we parsed with the same region id.
            for (var i = regionList.length - 1; i >= 0; i--) {
              if (regionList[i].id === v) {
                settings.set(k, regionList[i].region);
                break;
              }
            }
            break;
          case "vertical":
            settings.alt(k, v, ["rl", "lr"]);
            break;
          case "line":
            var vals = v.split(","),
                vals0 = vals[0];
            settings.integer(k, vals0);
            settings.percent(k, vals0) ? settings.set("snapToLines", false) : null;
            settings.alt(k, vals0, ["auto"]);
            if (vals.length === 2) {
              settings.alt("lineAlign", vals[1], ["start", "middle", "end"]);
            }
            break;
          case "position":
            vals = v.split(",");
            settings.percent(k, vals[0]);
            if (vals.length === 2) {
              settings.alt("positionAlign", vals[1], ["start", "middle", "end"]);
            }
            break;
          case "size":
            settings.percent(k, v);
            break;
          case "align":
            settings.alt(k, v, ["start", "middle", "end", "left", "right"]);
            break;
          }
        }, /:/, /\s/);
  
        // Apply default values for any missing fields.
        cue.region = settings.get("region", null);
        cue.vertical = settings.get("vertical", "");
        cue.line = settings.get("line", "auto");
        cue.lineAlign = settings.get("lineAlign", "start");
        cue.snapToLines = settings.get("snapToLines", true);
        cue.size = settings.get("size", 100);
        cue.align = settings.get("align", "center");
        cue.position = settings.get("position", "auto");
        cue.positionAlign = settings.get("positionAlign", {
          start: "start",
          left: "start",
          middle: "middle",
          end: "end",
          right: "end"
        }, cue.align);
  
        successCb();
      }
  
      function skipWhitespace() {
        input = input.replace(/^\s+/, "");
      }
  
      // 4.1 WebVTT cue timings.
      skipWhitespace();
  
      var timestamp = consumeTimeStamp()
      if (timestamp === undefined) return
      cue.startTime = timestamp; // (1) collect cue start time
      skipWhitespace();
      if (input.substr(0, 3) !== "-->") {
        // (3) next characters must match "-->"
        errCb(new ParsingError(ParsingError.Errors.BadTimeStamp,
                               "Malformed time stamp (time stamps must be separated by '-->'): " +
                               oInput));
        return;
      }
      input = input.substr(3);
      skipWhitespace();
      var timestamp = consumeTimeStamp()
      if (timestamp === undefined) return
      cue.endTime = timestamp; // (5) collect cue end time
  
      // 4.1 WebVTT cue settings list.
      skipWhitespace();
      consumeCueSettings(input, cue);
    }
  
    var ESCAPE = {
      "&amp;": "&",
      "&lt;": "<",
      "&gt;": ">",
      "&lrm;": "\u200e",
      "&rlm;": "\u200f",
      "&nbsp;": "\u00a0"
    };
  
    var TAG_NAME = {
      c: "span",
      i: "i",
      b: "b",
      u: "u",
      ruby: "ruby",
      rt: "rt",
      v: "span",
      lang: "span"
    };
  
    var TAG_ANNOTATION = {
      v: "title",
      lang: "lang"
    };
  
    var NEEDS_PARENT = {
      rt: "ruby"
    };
  
    // Parse content into a document fragment.
    function parseContent(window, input) {
      function nextToken() {
        // Check for end-of-string.
        if (!input) {
          return null;
        }
  
        // Consume 'n' characters from the input.
        function consume(result) {
          input = input.substr(result.length);
          return result;
        }
  
        var m = input.match(/^([^<]*)(<[^>]+>?)?/);
        // If there is some text before the next tag, return it, otherwise return
        // the tag.
        return consume(m[1] ? m[1] : m[2]);
      }
  
      // Unescape a string 's'.
      function unescape1(e) {
        return ESCAPE[e];
      }
      function unescape(s) {
        while ((m = s.match(/&(amp|lt|gt|lrm|rlm|nbsp);/))) {
          s = s.replace(m[0], unescape1);
        }
        return s;
      }
  
      function shouldAdd(current, element) {
        return !NEEDS_PARENT[element.localName] ||
               NEEDS_PARENT[element.localName] === current.localName;
      }
  
      // Create an element for this tag.
      function createElement(type, annotation) {
        var tagName = TAG_NAME[type];
        if (!tagName) {
          return null;
        }
        var element = window.document.createElement(tagName);
        element.localName = tagName;
        var name = TAG_ANNOTATION[type];
        if (name && annotation) {
          element[name] = annotation.trim();
        }
        return element;
      }
  
      var rootDiv = window.document.createElement("div"),
          current = rootDiv,
          t,
          tagStack = [];
  
      while ((t = nextToken()) !== null) {
        if (t[0] === '<') {
          if (t[1] === "/") {
            // If the closing tag matches, move back up to the parent node.
            if (tagStack.length &&
                tagStack[tagStack.length - 1] === t.substr(2).replace(">", "")) {
              tagStack.pop();
              current = current.parentNode;
            }
            // Otherwise just ignore the end tag.
            continue;
          }
          var ts = parseTimeStamp(t.substr(1, t.length - 2));
          var node;
          if (ts) {
            // Timestamps are lead nodes as well.
            node = window.document.createProcessingInstruction("timestamp", ts);
            current.appendChild(node);
            continue;
          }
          var m = t.match(/^<([^.\s/0-9>]+)(\.[^\s\\>]+)?([^>\\]+)?(\\?)>?$/);
          // If we can't parse the tag, skip to the next tag.
          if (!m) {
            continue;
          }
          // Try to construct an element, and ignore the tag if we couldn't.
          node = createElement(m[1], m[3]);
          if (!node) {
            continue;
          }
          // Determine if the tag should be added based on the context of where it
          // is placed in the cuetext.
          if (!shouldAdd(current, node)) {
            continue;
          }
          // Set the class list (as a list of classes, separated by space).
          if (m[2]) {
            node.className = m[2].substr(1).replace('.', ' ');
          }
          // Append the node to the current node, and enter the scope of the new
          // node.
          tagStack.push(m[1]);
          current.appendChild(node);
          current = node;
          continue;
        }
  
        // Text nodes are leaf nodes.
        current.appendChild(window.document.createTextNode(unescape(t)));
      }
  
      return rootDiv;
    }
  
    // This is a list of all the Unicode characters that have a strong
    // right-to-left category. What this means is that these characters are
    // written right-to-left for sure. It was generated by pulling all the strong
    // right-to-left characters out of the Unicode data table. That table can
    // found at: http://www.unicode.org/Public/UNIDATA/UnicodeData.txt
    var strongRTLRanges = [[0x5be, 0x5be], [0x5c0, 0x5c0], [0x5c3, 0x5c3], [0x5c6, 0x5c6],
     [0x5d0, 0x5ea], [0x5f0, 0x5f4], [0x608, 0x608], [0x60b, 0x60b], [0x60d, 0x60d],
     [0x61b, 0x61b], [0x61e, 0x64a], [0x66d, 0x66f], [0x671, 0x6d5], [0x6e5, 0x6e6],
     [0x6ee, 0x6ef], [0x6fa, 0x70d], [0x70f, 0x710], [0x712, 0x72f], [0x74d, 0x7a5],
     [0x7b1, 0x7b1], [0x7c0, 0x7ea], [0x7f4, 0x7f5], [0x7fa, 0x7fa], [0x800, 0x815],
     [0x81a, 0x81a], [0x824, 0x824], [0x828, 0x828], [0x830, 0x83e], [0x840, 0x858],
     [0x85e, 0x85e], [0x8a0, 0x8a0], [0x8a2, 0x8ac], [0x200f, 0x200f],
     [0xfb1d, 0xfb1d], [0xfb1f, 0xfb28], [0xfb2a, 0xfb36], [0xfb38, 0xfb3c],
     [0xfb3e, 0xfb3e], [0xfb40, 0xfb41], [0xfb43, 0xfb44], [0xfb46, 0xfbc1],
     [0xfbd3, 0xfd3d], [0xfd50, 0xfd8f], [0xfd92, 0xfdc7], [0xfdf0, 0xfdfc],
     [0xfe70, 0xfe74], [0xfe76, 0xfefc], [0x10800, 0x10805], [0x10808, 0x10808],
     [0x1080a, 0x10835], [0x10837, 0x10838], [0x1083c, 0x1083c], [0x1083f, 0x10855],
     [0x10857, 0x1085f], [0x10900, 0x1091b], [0x10920, 0x10939], [0x1093f, 0x1093f],
     [0x10980, 0x109b7], [0x109be, 0x109bf], [0x10a00, 0x10a00], [0x10a10, 0x10a13],
     [0x10a15, 0x10a17], [0x10a19, 0x10a33], [0x10a40, 0x10a47], [0x10a50, 0x10a58],
     [0x10a60, 0x10a7f], [0x10b00, 0x10b35], [0x10b40, 0x10b55], [0x10b58, 0x10b72],
     [0x10b78, 0x10b7f], [0x10c00, 0x10c48], [0x1ee00, 0x1ee03], [0x1ee05, 0x1ee1f],
     [0x1ee21, 0x1ee22], [0x1ee24, 0x1ee24], [0x1ee27, 0x1ee27], [0x1ee29, 0x1ee32],
     [0x1ee34, 0x1ee37], [0x1ee39, 0x1ee39], [0x1ee3b, 0x1ee3b], [0x1ee42, 0x1ee42],
     [0x1ee47, 0x1ee47], [0x1ee49, 0x1ee49], [0x1ee4b, 0x1ee4b], [0x1ee4d, 0x1ee4f],
     [0x1ee51, 0x1ee52], [0x1ee54, 0x1ee54], [0x1ee57, 0x1ee57], [0x1ee59, 0x1ee59],
     [0x1ee5b, 0x1ee5b], [0x1ee5d, 0x1ee5d], [0x1ee5f, 0x1ee5f], [0x1ee61, 0x1ee62],
     [0x1ee64, 0x1ee64], [0x1ee67, 0x1ee6a], [0x1ee6c, 0x1ee72], [0x1ee74, 0x1ee77],
     [0x1ee79, 0x1ee7c], [0x1ee7e, 0x1ee7e], [0x1ee80, 0x1ee89], [0x1ee8b, 0x1ee9b],
     [0x1eea1, 0x1eea3], [0x1eea5, 0x1eea9], [0x1eeab, 0x1eebb], [0x10fffd, 0x10fffd]];
  
    function isStrongRTLChar(charCode) {
      for (var i = 0; i < strongRTLRanges.length; i++) {
        var currentRange = strongRTLRanges[i];
        if (charCode >= currentRange[0] && charCode <= currentRange[1]) {
          return true;
        }
      }
  
      return false;
    }
  
    function determineBidi(cueDiv) {
      var nodeStack = [],
          text = "",
          charCode;
  
      if (!cueDiv || !cueDiv.childNodes) {
        return "ltr";
      }
  
      function pushNodes(nodeStack, node) {
        for (var i = node.childNodes.length - 1; i >= 0; i--) {
          nodeStack.push(node.childNodes[i]);
        }
      }
  
      function nextTextNode(nodeStack) {
        if (!nodeStack || !nodeStack.length) {
          return null;
        }
  
        var node = nodeStack.pop(),
            text = node.textContent || node.innerText;
        if (text) {
          // TODO: This should match all unicode type B characters (paragraph
          // separator characters). See issue #115.
          var m = text.match(/^.*(\n|\r)/);
          if (m) {
            nodeStack.length = 0;
            return m[0];
          }
          return text;
        }
        if (node.tagName === "ruby") {
          return nextTextNode(nodeStack);
        }
        if (node.childNodes) {
          pushNodes(nodeStack, node);
          return nextTextNode(nodeStack);
        }
      }
  
      pushNodes(nodeStack, cueDiv);
      while ((text = nextTextNode(nodeStack))) {
        for (var i = 0; i < text.length; i++) {
          charCode = text.charCodeAt(i);
          if (isStrongRTLChar(charCode)) {
            return "rtl";
          }
        }
      }
      return "ltr";
    }
  
    function computeLinePos(cue) {
      if (typeof cue.line === "number" &&
          (cue.snapToLines || (cue.line >= 0 && cue.line <= 100))) {
        return cue.line;
      }
      if (!cue.track || !cue.track.textTrackList ||
          !cue.track.textTrackList.mediaElement) {
        return -1;
      }
      var track = cue.track,
          trackList = track.textTrackList,
          count = 0;
      for (var i = 0; i < trackList.length && trackList[i] !== track; i++) {
        if (trackList[i].mode === "showing") {
          count++;
        }
      }
      return ++count * -1;
    }
  
    function StyleBox() {
    }
  
    // Apply styles to a div. If there is no div passed then it defaults to the
    // div on 'this'.
    StyleBox.prototype.applyStyles = function(styles, div) {
      div = div || this.div;
      for (var prop in styles) {
        if (styles.hasOwnProperty(prop)) {
          div.style[prop] = styles[prop];
        }
      }
    };
  
    StyleBox.prototype.formatStyle = function(val, unit) {
      return val === 0 ? 0 : val + unit;
    };
  
    // Constructs the computed display state of the cue (a div). Places the div
    // into the overlay which should be a block level element (usually a div).
    function CueStyleBox(window, cue, styleOptions) {
      var isIE8 = (typeof navigator !== "undefined") &&
        (/MSIE\s8\.0/).test(navigator.userAgent);
      var color = "rgba(255, 255, 255, 1)";
      var backgroundColor = "rgba(0, 0, 0, 0.8)";
      var textShadow = "";
  
      if(typeof WebVTTSet !== "undefined") {
        color = WebVTTSet.fontSet;
        backgroundColor = WebVTTSet.backgroundSet;
        textShadow = WebVTTSet.edgeSet;
      }
  
      if (isIE8) {
        color = "rgb(255, 255, 255)";
        backgroundColor = "rgb(0, 0, 0)";
      }
  
      StyleBox.call(this);
      this.cue = cue;
  
      // Parse our cue's text into a DOM tree rooted at 'cueDiv'. This div will
      // have inline positioning and will function as the cue background box.
      this.cueDiv = parseContent(window, cue.text);
      var styles = {
        color: color,
        backgroundColor: backgroundColor,
        textShadow: textShadow,
        position: "relative",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        display: "inline"
      };
  
      if (!isIE8) {
        styles.writingMode = cue.vertical === "" ? "horizontal-tb"
                                                 : cue.vertical === "lr" ? "vertical-lr"
                                                                         : "vertical-rl";
        styles.unicodeBidi = "plaintext";
      }
      this.applyStyles(styles, this.cueDiv);
  
      // Create an absolutely positioned div that will be used to position the cue
      // div. Note, all WebVTT cue-setting alignments are equivalent to the CSS
      // mirrors of them except "middle" which is "center" in CSS.
      this.div = window.document.createElement("div");
      styles = {
        textAlign: cue.align === "middle" ? "center" : cue.align,
        font: styleOptions.font,
        whiteSpace: "pre-line",
        position: "absolute"
      };
  
      if (!isIE8) {
        styles.direction = determineBidi(this.cueDiv);
        styles.writingMode = cue.vertical === "" ? "horizontal-tb"
                                                 : cue.vertical === "lr" ? "vertical-lr"
                                                                         : "vertical-rl".
        stylesunicodeBidi =  "plaintext";
      }
  
      this.applyStyles(styles);
  
      this.div.appendChild(this.cueDiv);
  
      // Calculate the distance from the reference edge of the viewport to the text
      // position of the cue box. The reference edge will be resolved later when
      // the box orientation styles are applied.
      var textPos = 0;
      switch (cue.positionAlign) {
      case "start":
        textPos = cue.position;
        break;
      case "middle":
        textPos = cue.position - (cue.size / 2);
        break;
      case "end":
        textPos = cue.position - cue.size;
        break;
      }
  
      // Horizontal box orientation; textPos is the distance from the left edge of the
      // area to the left edge of the box and cue.size is the distance extending to
      // the right from there.
      if (cue.vertical === "") {
        this.applyStyles({
          left:  this.formatStyle(textPos, "%"),
          width: this.formatStyle(cue.size, "%")
        });
      // Vertical box orientation; textPos is the distance from the top edge of the
      // area to the top edge of the box and cue.size is the height extending
      // downwards from there.
      } else {
        this.applyStyles({
          top: this.formatStyle(textPos, "%"),
          height: this.formatStyle(cue.size, "%")
        });
      }
  
      this.move = function(box) {
        this.applyStyles({
          top: this.formatStyle(box.top, "px"),
          bottom: this.formatStyle(box.bottom, "px"),
          left: this.formatStyle(box.left, "px"),
          right: this.formatStyle(box.right, "px"),
          height: this.formatStyle(box.height, "px"),
          width: this.formatStyle(box.width, "px")
        });
      };
    }
    CueStyleBox.prototype = _objCreate(StyleBox.prototype);
    CueStyleBox.prototype.constructor = CueStyleBox;
  
    // Represents the co-ordinates of an Element in a way that we can easily
    // compute things with such as if it overlaps or intersects with another Element.
    // Can initialize it with either a StyleBox or another BoxPosition.
    function BoxPosition(obj) {
      var isIE8 = (typeof navigator !== "undefined") &&
        (/MSIE\s8\.0/).test(navigator.userAgent);
  
      // Either a BoxPosition was passed in and we need to copy it, or a StyleBox
      // was passed in and we need to copy the results of 'getBoundingClientRect'
      // as the object returned is readonly. All co-ordinate values are in reference
      // to the viewport origin (top left).
      var lh, height, width, top;
      if (obj.div) {
        height = obj.div.offsetHeight;
        width = obj.div.offsetWidth;
        top = obj.div.offsetTop;
  
        var rects = (rects = obj.div.childNodes) && (rects = rects[0]) &&
                    rects.getClientRects && rects.getClientRects();
        obj = obj.div.getBoundingClientRect();
        // In certain cases the outter div will be slightly larger then the sum of
        // the inner div's lines. This could be due to bold text, etc, on some platforms.
        // In this case we should get the average line height and use that. This will
        // result in the desired behaviour.
        lh = rects ? Math.max((rects[0] && rects[0].height) || 0, obj.height / rects.length)
                   : 0;
  
      }
      this.left = obj.left;
      this.right = obj.right;
      this.top = obj.top || top;
      this.height = obj.height || height;
      this.bottom = obj.bottom || (top + (obj.height || height));
      this.width = obj.width || width;
      this.lineHeight = lh !== undefined ? lh : obj.lineHeight;
  
      if (isIE8 && !this.lineHeight) {
        this.lineHeight = 13;
      }
    }
  
    // Move the box along a particular axis. Optionally pass in an amount to move
    // the box. If no amount is passed then the default is the line height of the
    // box.
    BoxPosition.prototype.move = function(axis, toMove) {
      toMove = toMove !== undefined ? toMove : this.lineHeight;
      switch (axis) {
      case "+x":
        this.left += toMove;
        this.right += toMove;
        break;
      case "-x":
        this.left -= toMove;
        this.right -= toMove;
        break;
      case "+y":
        this.top += toMove;
        this.bottom += toMove;
        break;
      case "-y":
        this.top -= toMove;
        this.bottom -= toMove;
        break;
      }
    };
  
    // Check if this box overlaps another box, b2.
    BoxPosition.prototype.overlaps = function(b2) {
      return this.left < b2.right &&
             this.right > b2.left &&
             this.top < b2.bottom &&
             this.bottom > b2.top;
    };
  
    // Check if this box overlaps any other boxes in boxes.
    BoxPosition.prototype.overlapsAny = function(boxes) {
      for (var i = 0; i < boxes.length; i++) {
        if (this.overlaps(boxes[i])) {
          return true;
        }
      }
      return false;
    };
  
    // Check if this box is within another box.
    BoxPosition.prototype.within = function(container) {
      return this.top >= container.top &&
             this.bottom <= container.bottom &&
             this.left >= container.left &&
             this.right <= container.right;
    };
  
    // Check if this box is entirely within the container or it is overlapping
    // on the edge opposite of the axis direction passed. For example, if "+x" is
    // passed and the box is overlapping on the left edge of the container, then
    // return true.
    BoxPosition.prototype.overlapsOppositeAxis = function(container, axis) {
      switch (axis) {
      case "+x":
        return this.left < container.left;
      case "-x":
        return this.right > container.right;
      case "+y":
        return this.top < container.top;
      case "-y":
        return this.bottom > container.bottom;
      }
    };
  
    // Find the percentage of the area that this box is overlapping with another
    // box.
    BoxPosition.prototype.intersectPercentage = function(b2) {
      var x = Math.max(0, Math.min(this.right, b2.right) - Math.max(this.left, b2.left)),
          y = Math.max(0, Math.min(this.bottom, b2.bottom) - Math.max(this.top, b2.top)),
          intersectArea = x * y;
      return intersectArea / (this.height * this.width);
    };
  
    // Convert the positions from this box to CSS compatible positions using
    // the reference container's positions. This has to be done because this
    // box's positions are in reference to the viewport origin, whereas, CSS
    // values are in referecne to their respective edges.
    BoxPosition.prototype.toCSSCompatValues = function(reference) {
      return {
        top: this.top - reference.top,
        bottom: reference.bottom - this.bottom,
        left: this.left - reference.left,
        right: reference.right - this.right,
        height: this.height,
        width: this.width
      };
    };
  
    // Get an object that represents the box's position without anything extra.
    // Can pass a StyleBox, HTMLElement, or another BoxPositon.
    BoxPosition.getSimpleBoxPosition = function(obj) {
      var height = obj.div ? obj.div.offsetHeight : obj.tagName ? obj.offsetHeight : 0;
      var width = obj.div ? obj.div.offsetWidth : obj.tagName ? obj.offsetWidth : 0;
      var top = obj.div ? obj.div.offsetTop : obj.tagName ? obj.offsetTop : 0;
  
      obj = obj.div ? obj.div.getBoundingClientRect() :
                    obj.tagName ? obj.getBoundingClientRect() : obj;
      var ret = {
        left: obj.left,
        right: obj.right,
        top: obj.top || top,
        height: obj.height || height,
        bottom: obj.bottom || (top + (obj.height || height)),
        width: obj.width || width
      };
      return ret;
    };
  
    // Move a StyleBox to its specified, or next best, position. The containerBox
    // is the box that contains the StyleBox, such as a div. boxPositions are
    // a list of other boxes that the styleBox can't overlap with.
    function moveBoxToLinePosition(window, styleBox, containerBox, boxPositions) {
  
      // Find the best position for a cue box, b, on the video. The axis parameter
      // is a list of axis, the order of which, it will move the box along. For example:
      // Passing ["+x", "-x"] will move the box first along the x axis in the positive
      // direction. If it doesn't find a good position for it there it will then move
      // it along the x axis in the negative direction.
      function findBestPosition(b, axis) {
        var bestPosition,
            specifiedPosition = new BoxPosition(b),
            percentage = 1; // Highest possible so the first thing we get is better.
  
        for (var i = 0; i < axis.length; i++) {
          while (b.overlapsOppositeAxis(containerBox, axis[i]) ||
                 (b.within(containerBox) && b.overlapsAny(boxPositions))) {
            b.move(axis[i]);
          }
          // We found a spot where we aren't overlapping anything. This is our
          // best position.
          if (b.within(containerBox)) {
            return b;
          }
          var p = b.intersectPercentage(containerBox);
          // If we're outside the container box less then we were on our last try
          // then remember this position as the best position.
          if (percentage > p) {
            bestPosition = new BoxPosition(b);
            percentage = p;
          }
          // Reset the box position to the specified position.
          b = new BoxPosition(specifiedPosition);
        }
        return bestPosition || specifiedPosition;
      }
  
      var boxPosition = new BoxPosition(styleBox),
          cue = styleBox.cue,
          linePos = computeLinePos(cue),
          axis = [];
  
      // If we have a line number to align the cue to.
      if (cue.snapToLines) {
        var size;
        switch (cue.vertical) {
        case "":
          axis = [ "+y", "-y" ];
          size = "height";
          break;
        case "rl":
          axis = [ "+x", "-x" ];
          size = "width";
          break;
        case "lr":
          axis = [ "-x", "+x" ];
          size = "width";
          break;
        }
  
        var step = boxPosition.lineHeight,
            position = step * Math.round(linePos),
            maxPosition = containerBox[size] + step,
            initialAxis = axis[0];
  
        // If the specified intial position is greater then the max position then
        // clamp the box to the amount of steps it would take for the box to
        // reach the max position.
        if (Math.abs(position) > maxPosition) {
          position = position < 0 ? -1 : 1;
          position *= Math.ceil(maxPosition / step) * step;
        }
  
        // If computed line position returns negative then line numbers are
        // relative to the bottom of the video instead of the top. Therefore, we
        // need to increase our initial position by the length or width of the
        // video, depending on the writing direction, and reverse our axis directions.
        if (linePos < 0) {
          position += cue.vertical === "" ? containerBox.height : containerBox.width;
          axis = axis.reverse();
        }
  
        // Move the box to the specified position. This may not be its best
        // position.
        boxPosition.move(initialAxis, position);
  
      } else {
        // If we have a percentage line value for the cue.
        var calculatedPercentage = (boxPosition.lineHeight / containerBox.height) * 100;
  
        switch (cue.lineAlign) {
        case "middle":
          linePos -= (calculatedPercentage / 2);
          break;
        case "end":
          linePos -= calculatedPercentage;
          break;
        }
  
        // Apply initial line position to the cue box.
        switch (cue.vertical) {
        case "":
          styleBox.applyStyles({
            top: styleBox.formatStyle(linePos, "%")
          });
          break;
        case "rl":
          styleBox.applyStyles({
            left: styleBox.formatStyle(linePos, "%")
          });
          break;
        case "lr":
          styleBox.applyStyles({
            right: styleBox.formatStyle(linePos, "%")
          });
          break;
        }
  
        axis = [ "+y", "-x", "+x", "-y" ];
  
        // Get the box position again after we've applied the specified positioning
        // to it.
        boxPosition = new BoxPosition(styleBox);
      }
  
      var bestPosition = findBestPosition(boxPosition, axis);
      styleBox.move(bestPosition.toCSSCompatValues(containerBox));
    }
  
    function WebVTT() {
      // Nothing
    }
  
    // Helper to allow strings to be decoded instead of the default binary utf8 data.
    WebVTT.StringDecoder = function() {
      return {
        decode: function(data) {
          if (!data) {
            return "";
          }
          if (typeof data !== "string") {
            throw new Error("Error - expected string data.");
          }
          return decodeURIComponent(encodeURIComponent(data));
        }
      };
    };
  
    WebVTT.convertCueToDOMTree = function(window, cuetext) {
      if (!window || !cuetext) {
        return null;
      }
      return parseContent(window, cuetext);
    };
  
    var FONT_SIZE_PERCENT = 0.05;
    var FONT_STYLE = "sans-serif";
    var CUE_BACKGROUND_PADDING = "1.5%";
  
    // Runs the processing model over the cues and regions passed to it.
    // @param overlay A block level element (usually a div) that the computed cues
    //                and regions will be placed into.
    WebVTT.processCues = function(window, cues, overlay) {
      if (!window || !cues || !overlay) {
        return null;
      }
  
      // Remove all previous children.
      while (overlay.firstChild) {
        overlay.removeChild(overlay.firstChild);
      }
  
      var paddedOverlay = window.document.createElement("div");
      paddedOverlay.style.position = "absolute";
      paddedOverlay.style.left = "0";
      paddedOverlay.style.right = "0";
      paddedOverlay.style.top = "0";
      paddedOverlay.style.bottom = "0";
      paddedOverlay.style.margin = CUE_BACKGROUND_PADDING;
      overlay.appendChild(paddedOverlay);
  
      // Determine if we need to compute the display states of the cues. This could
      // be the case if a cue's state has been changed since the last computation or
      // if it has not been computed yet.
      function shouldCompute(cues) {
        for (var i = 0; i < cues.length; i++) {
          if (cues[i].hasBeenReset || !cues[i].displayState) {
            return true;
          }
        }
        return false;
      }
  
      // We don't need to recompute the cues' display states. Just reuse them.
      if (!shouldCompute(cues)) {
        for (var i = 0; i < cues.length; i++) {
          paddedOverlay.appendChild(cues[i].displayState);
        }
        return;
      }
  
      var boxPositions = [],
          containerBox = BoxPosition.getSimpleBoxPosition(paddedOverlay),
          fontSize = Math.round(containerBox.height * FONT_SIZE_PERCENT * 100) / 100;
      var styleOptions = {
        font: (fontSize * fontScale) + "px " + FONT_STYLE
      };
  
      (function() {
        var styleBox, cue;
  
        for (var i = 0; i < cues.length; i++) {
          cue = cues[i];
  
          // Compute the intial position and styles of the cue div.
          styleBox = new CueStyleBox(window, cue, styleOptions);
          paddedOverlay.appendChild(styleBox.div);
  
          // Move the cue div to it's correct line position.
          moveBoxToLinePosition(window, styleBox, containerBox, boxPositions);
  
          // Remember the computed div so that we don't have to recompute it later
          // if we don't have too.
          cue.displayState = styleBox.div;
  
          boxPositions.push(BoxPosition.getSimpleBoxPosition(styleBox));
        }
      })();
    };
  
    WebVTT.Parser = function(window, decoder, VTTCue) {
      this.window = window;
      this.state = "INITIAL";
      this.buffer = "";
      this.decoder = decoder || new TextDecoder("utf8");
      this.regionList = [];
      this.VTTCue = VTTCue
    };
  
    WebVTT.Parser.prototype = {
      // If the error is a ParsingError then report it to the consumer if
      // possible. If it's not a ParsingError then throw it like normal.
      reportOrThrowError: function(e) {
        if (e instanceof ParsingError) {
          this.onparsingerror && this.onparsingerror(e);
        } else {
          throw e;
        }
      },
      parse: function (data) {
        var self = this;
  
        // If there is no data then we won't decode it, but will just try to parse
        // whatever is in buffer already. This may occur in circumstances, for
        // example when flush() is called.
        if (data) {
          // Try to decode the data that we received.
          self.buffer += self.decoder.decode(data, {stream: true});
        }
  
        function collectNextLine() {
          var buffer = self.buffer;
          var pos = 0;
          while (pos < buffer.length && buffer[pos] !== '\r' && buffer[pos] !== '\n') {
            ++pos;
          }
          var line = buffer.substr(0, pos);
          // Advance the buffer early in case we fail below.
          if (buffer[pos] === '\r') {
            ++pos;
          }
          if (buffer[pos] === '\n') {
            ++pos;
          }
          self.buffer = buffer.substr(pos);
          return line;
        }
  
        // 3.4 WebVTT region and WebVTT region settings syntax
        function parseRegion(input) {
          var settings = new Settings();
  
          parseOptions(input, function (k, v) {
            switch (k) {
            case "id":
              settings.set(k, v);
              break;
            case "width":
              settings.percent(k, v);
              break;
            case "lines":
              settings.integer(k, v);
              break;
            case "regionanchor":
            case "viewportanchor":
              var xy = v.split(',');
              if (xy.length !== 2) {
                break;
              }
              // We have to make sure both x and y parse, so use a temporary
              // settings object here.
              var anchor = new Settings();
              anchor.percent("x", xy[0]);
              anchor.percent("y", xy[1]);
              if (!anchor.has("x") || !anchor.has("y")) {
                break;
              }
              settings.set(k + "X", anchor.get("x"));
              settings.set(k + "Y", anchor.get("y"));
              break;
            case "scroll":
              settings.alt(k, v, ["up"]);
              break;
            }
          }, /=/, /\s/);
  
          // Create the region, using default values for any values that were not
          // specified.
          if (settings.has("id")) {
            var region = new self.window.VTTRegion();
            region.width = settings.get("width", 100);
            region.lines = settings.get("lines", 3);
            region.regionAnchorX = settings.get("regionanchorX", 0);
            region.regionAnchorY = settings.get("regionanchorY", 100);
            region.viewportAnchorX = settings.get("viewportanchorX", 0);
            region.viewportAnchorY = settings.get("viewportanchorY", 100);
            region.scroll = settings.get("scroll", "");
            // Register the region.
            self.onregion && self.onregion(region);
            // Remember the VTTRegion for later in case we parse any VTTCues that
            // reference it.
            self.regionList.push({
              id: settings.get("id"),
              region: region
            });
          }
        }
  
        // draft-pantos-http-live-streaming-20
        // https://tools.ietf.org/html/draft-pantos-http-live-streaming-20#section-3.5
        // 3.5 WebVTT
        function parseTimestampMap(input) {
          var settings = new Settings();
  
          parseOptions(input, function(k, v) {
            switch (k) {
              case "MPEGT":
                settings.integer(k + 'S', v);
                break;
              case "LOCA":
                settings.set(k + 'L', parseTimeStamp(v));
                break;
            }
          }, /[^\d]:/, /,/);
  
          self.ontimestampmap && self.ontimestampmap({
            "MPEGTS": settings.get("MPEGTS"),
            "LOCAL": settings.get("LOCAL")
          });
        }
  
        // 3.2 WebVTT metadata header syntax
        function parseHeader(input) {
          if (input.match(/X-TIMESTAMP-MAP/)) {
            // This line contains HLS X-TIMESTAMP-MAP metadata
            parseOptions(input, function(k, v) {
              switch (k) {
                case "X-TIMESTAMP-MAP":
                  parseTimestampMap(v);
                  break;
              }
            }, /=/);
          } else {
            parseOptions(input, function (k, v) {
              switch (k) {
                case "Region":
                  // 3.3 WebVTT region metadata header syntax
                  parseRegion(v);
                  break;
              }
            }, /:/);
          }
        }
  
        // 5.1 WebVTT file parsing.
  
        function fail(e) {
  
          self.reportOrThrowError(e);
  
          // If we are currently parsing a cue, report what we have.
          if (self.state === "CUETEXT" && self.cue && self.oncue) {
            self.oncue(self.cue);
          }
          self.cue = null;
          // Enter BADWEBVTT state if header was not parsed correctly otherwise
          // another exception occurred so enter BADCUE state.
          self.state = self.state === "INITIAL" ? "BADWEBVTT" : "BADCUE";
  
        }
  
        var line;
  
        if (self.state === "INITIAL") {
          // We can't start parsing until we have the first line.
          if (!/\r\n|\n/.test(self.buffer)) {
            return this;
          }
  
          line = collectNextLine();
  
          var m = line.match(/^WEBVTT([ \t].*)?$/);
          if (!m || !m[0]) {
              fail(new ParsingError(ParsingError.Errors.BadSignature))
              return
          }
  
          self.state = "HEADER";
        }
  
        var alreadyCollectedLine = false;
  
        var lineparse = function() {
          // We can't parse a line until we have the full line.
          if (!self.buffer || !/\r\n|\n/.test(self.buffer)) {
            self.flush()
            return
          }
  
          if (!alreadyCollectedLine) {
            line = collectNextLine();
          } else {
            alreadyCollectedLine = false;
          }
  
          switch (self.state) {
            case "HEADER":
              // 13-18 - Allow a header (metadata) under the WEBVTT line.
              if (/:/.test(line)) {
                parseHeader(line);
              } else if (!line) {
                // An empty line terminates the header and starts the body (cues).
                self.state = "ID";
              }
              linebyline();
              break;
            case "NOTE":
              // Ignore NOTE blocks.
              if (!line) {
                self.state = "ID";
              }
              linebyline();
              break;
            case "ID":
              // Check for the start of NOTE blocks.
              if (/^NOTE($|[ \t])/.test(line)) {
                self.state = "NOTE";
                linebyline();
                break;
              }
              // 19-29 - Allow any number of line terminators, then initialize new cue values.
              if (!line) {
                linebyline();
                break;
              }
              self.cue = new (self.VTTCue || self.window.VTTCue)(0, 0, "");
              self.state = "CUE";
              // 30-39 - Check if self line contains an optional identifier or timing data.
              if (line.indexOf("-->") === -1) {
                self.cue.id = line;
                linebyline();
                break;
              }
            // Process line as start of a cue.
            /*falls through*/
            case "CUE":
              // 40 - Collect cue timings and settings.
  
              parseCue(line, self.cue, self.regionList, function successCb() {
  
                self.state = "CUETEXT";
  
                linebyline();
  
              }, function errCb(err) {
  
                self.reportOrThrowError(err);
  
                // In case of an error ignore rest of the cue.
                self.cue = null;
                self.state = "BADCUE";
  
                linebyline();
  
              });
  
              break;
            case "CUETEXT":
              var hasSubstring = line.indexOf("-->") !== -1;
              // 34 - If we have an empty line then report the cue.
              // 35 - If we have the special substring '-->' then report the cue,
              // but do not collect the line as we need to process the current
              // one as a new cue.
              if (!line || hasSubstring && (alreadyCollectedLine = true)) {
                // We are done parsing self cue.
                self.oncue && self.oncue(self.cue);
                self.cue = null;
                self.state = "ID";
                linebyline();
                break;
            }
              if (self.cue.text) {
                self.cue.text += "\n";
              }
              self.cue.text += line;
              linebyline();
              break;
            case "BADCUE":
              // BADCUE
              // 54-62 - Collect and discard the remaining cue.
              if (!line) {
                self.state = "ID";
              }
              linebyline();
              break;
          }
        };
  
        var STACK_LIMIT = 1000;
  
        var count = 0
  
        function unwrapStack(fn) {
          return function() {
            count++
            if (count < STACK_LIMIT) return fn()
            setTimeout(function() {
              count = 0
              fn()
            })
          }
        }
  
        var linebyline = unwrapStack(lineparse)
  
        linebyline();
  
        return this;
      },
      flush: function () {
        var self = this;
        try {
          // Finish decoding the stream.
          self.buffer += self.decoder.decode();
          // Synthesize the end of the current cue or region.
          if (self.cue || self.state === "HEADER") {
            self.buffer += "\n\n";
            self.parse();
          }
          // If we've flushed, parsed, and we're still on the INITIAL state then
          // that means we don't have enough of the stream to parse the first
          // line.
          if (self.state === "INITIAL") {
            throw new ParsingError(ParsingError.Errors.BadSignature);
          }
        } catch(e) {
          self.reportOrThrowError(e);
        }
        self.onflush && self.onflush();
        return this;
      }
    };
  
    global.WebVTT = WebVTT;
  
  }(this));
  