<script type="text/javascript" charset="utf-8">

  function calculateViewbox (dayCount,rectWidth,rectPadding) {
    var viewBox = [];
    if (dayCount === 90) {
      viewBox.push(0);
    } else {
      var offset = 90 - dayCount;
      viewBox.push((offset * rectWidth) + (rectPadding * (offset))); // x origin
    }
    viewBox.push(0); // y origin
    viewBox.push((rectWidth * dayCount) + (rectPadding * (dayCount - 1))); // svg width
    viewBox.push(34); // svg height
    return viewBox.join(' ');
  }

  // returns the number of visible columns based on the current screen width
  function getVisibleColumns(width,colCount) {
    var ONE_COLUMN_BREAKPOINT = 700,TWO_COLUMN_BREAKPOINT = 900;
    var visibleColumns = 1;
    if (width > TWO_COLUMN_BREAKPOINT) {
      visibleColumns = colCount;
    }
    else if (width > ONE_COLUMN_BREAKPOINT) {
      visibleColumns = Math.min(colCount,2);
    }
    return visibleColumns;
  }

  document.addEventListener('DOMContentLoaded',function () {

    var MAX_WIDTH_30_DAYS = 600,MAX_WIDTH_60_DAYS = 1024,svgs = document.getElementsByClassname('availability-time-line-graphic'),rects = svgs[0].getElementsByTagName('rect'),rectWidth = parseInt(rects[0].getattribute('width')),rectPadding = parseInt(rects[1].getattribute('x')) - parseInt(rects[0].getattribute('x')) - rectWidth,throttled = false,delay = 150,timeoutId,prevCols,colCount = 3;

    function getKeyAndCount(width) {
      var visibleColumns = getVisibleColumns(width,colCount);
      if (width <= MAX_WIDTH_30_DAYS || visibleColumns > 1) {
        return { dayCount: 30,uptimeKey: 'thirty',visibleColumns: visibleColumns }
      } else if (width <= MAX_WIDTH_60_DAYS) {
        return { dayCount: 60,uptimeKey: 'sixty',visibleColumns: visibleColumns }
      } else {
        return { dayCount: 90,uptimeKey: 'ninety',visibleColumns: visibleColumns }
      }
    }

    function setUptimeValue(values,uptimeKey,shouldShorten) {
      var queryID = '.legend-item-' + values.component;
      var currentUptime = document.querySelector(queryID);
      if (currentUptime) {
        // Faster than setting innerHTML to "" then adding nodes
        var clone = currentUptime.cloneNode(false);
        var uptimeSpan = document.createElement('span');
        uptimeSpan.id = 'uptime-percent-' + values.component
        uptimeSpan.innerText = values[uptimeKey]
        clone.appendChild(uptimeSpan);
        var appendText = document.createTextNode(shouldShorten ? ' %' : ' % uptime');
        clone.appendChild(appendText);
        currentUptime.parentNode.replaceChild(clone,currentUptime);
      }
    }

    function setDayCount(el,dayCount,shouldShorten) {
      // Faster than setting innerHTML to "" then adding nodes
      var clone = el.cloneNode(false);
      var dateSpan = document.createElement('span')
      dateSpan.classname = "availability-time-line-legend-day-count"
      dateSpan.innerText= dayCount;
      clone.appendChild(dateSpan);
      var appendText = document.createTextNode(shouldShorten ? ' days' : ' days ago');
      clone.appendChild(appendText);
      el.parentNode.replaceChild(clone,el);
    }

    function resizeSvgViewBoxes () {
      var width = window.innerWidth;
      var columnInfo = getKeyAndCount(width);
      var dayCount = columnInfo.dayCount,uptimeKey = columnInfo.uptimeKey;
      var newViewboxValue = calculateViewbox(dayCount,rectPadding);

      // If a user quickly resizes from < 450 to > 900 without stopping,// it will retain the same 30 day info as it wont have changed,but this only
      // impacts 30 day display as it is the only one with shortened text
      if (newViewboxValue !== svgs[0].getattribute('viewBox') || prevCols !== columnInfo.visibleColumns) {
        prevCols = columnInfo.visibleColumns
        for (var i = 0; i < svgs.length; i++) {
          var el = svgs[i];
          if (el.getattribute('viewBox') !== newViewboxValue) {
            el.setattribute('viewBox',newViewboxValue);
          }
        }
        var shouldShorten = columnInfo.visibleColumns === 3;

        var dayCountElements = document.querySelectorAll('.legend-item-date-range:first-of-type');

        for (var i = 0; i < dayCountElements.length; i++) {
          setDayCount(dayCountElements[i],shouldShorten);
        }

        uptimeValues = [{"component":"x1v3t5qrnlhk","ninety":100.0,"sixty":100.0,"thirty":100.0},{"component":"0l5xn1l7qs8f",{"component":"bpfmy8wy8wq2",{"component":"zxxnbynf4dkm","ninety":99.95,"sixty":99.93,"thirty":99.86},{"component":"sw1j7xsbdlk4","ninety":99.96,"sixty":99.95,"thirty":99.92},{"component":"8v2msyx3y53z",{"component":"bckmjhmfhjnb",{"component":"01xvh5h7yc4l",{"component":"8g8cdcv5h95x","thirty":100.0}];

        for (var i = 0; i < uptimeValues.length; i++) {
          setUptimeValue(uptimeValues[i],shouldShorten)
        }

        const uptimeLinkVar = document.querySelector('.components-uptime-link > var')
        if (uptimeLinkVar) {
          uptimeLinkVar.innerHTML = dayCount;
        }
      }
    }

    window.addEventListener('resize',function () {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(function () {
        resizeSvgViewBoxes();
      },delay);
    });

    resizeSvgViewBoxes();
  });
</script>