function openDialog(dlgID) {
  // Get the dialog it controls
  var theDialog = document.getElementById(dlgID);
  // Open the modal
  // theDialog.showModal();
  setTimeout(function () {
    theDialog.showModal();
  }, 2000);
}

function closeDialog(dlgID) {
  // Get the dialog it controls
  var theDialog = document.getElementById(dlgID);
  // Close the modal
  theDialog.close();
}


// 

// Inert polyfill https://github.com/GoogleChrome/inert-polyfill

window.addEventListener("load",function(){function h(a,b,c){if(0>b){if(a.previousElementSibling){for(a=a.previousElementSibling;a.lastElementChild;)a=a.lastElementChild;return a}return a.parentElement}if(a!=c&&a.firstElementChild)return a.firstElementChild;for(;null!=a;){if(a.nextElementSibling)return a.nextElementSibling;a=a.parentElement}return null}function g(a){for(;a&&a!==document.documentElement;){if(a.hasAttribute("inert"))return a;a=a.parentElement}return null}(function(a){var b=document.createElement("style");
b.type="text/css";b.styleSheet?b.styleSheet.cssText=a:b.appendChild(document.createTextNode(a));document.body.appendChild(b)})("/*[inert]*/[inert]{position:relative!important;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}[inert]::before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0}");var c=0;document.addEventListener("keydown",function(a){c=9===a.keyCode?a.shiftKey?-1:1:0});document.addEventListener("mousedown",
function(){c=0});document.body.addEventListener("focus",function(a){var b=a.target,f=g(b);if(f){if(document.hasFocus()&&0!==c){var d=document.activeElement,e=new KeyboardEvent("keydown",{keyCode:9,which:9,key:"Tab",code:"Tab",keyIdentifier:"U+0009",shiftKey:!!(0>c),bubbles:!0});Object.defineProperty(e,"keyCode",{value:9});document.activeElement.dispatchEvent(e);if(d!=document.activeElement)return;for(d=f;;){d=h(d,c,f);if(!d)break;a:{e=b;if(!(0>d.tabIndex)&&(d.focus(),document.activeElement!==e)){e=
!0;break a}e=!1}if(e)return}}b.blur();a.preventDefault();a.stopPropagation()}},!0);document.addEventListener("click",function(a){g(a.target)&&(a.preventDefault(),a.stopPropagation())},!0)});

document.onkeydown = function(evt) {
  evt = evt || window.event;
  var isEscape = false;
  if ("key" in evt) {
    isEscape = evt.key == "Escape" || evt.key == "Esc";
  } else {
    isEscape = evt.keyCode == 27;
  }
  if (isEscape) {
    CloseDialog(DialogTrigger);
  }
};

function OpenFakeDialog(btnID,focusID) {
  try {
    setTimeout(function () {
      DialogTrigger = btnID;
      // Get all the elements to manipulate
      var body = document.getElementsByTagName("body");
      var landmarks = document.querySelectorAll("header, main, footer");
      var overlay = document.getElementById("Overlay");  
      var dialog = document.getElementById("Dialog");  
      var closeBtn = document.getElementById("DialogClose");
      var focusElm = document.getElementById(focusID);
      // Hide the content regions from AT
      for (var i = 0; i < landmarks.length; i++) {
        landmarks[i].setAttribute("aria-hidden","true");
        landmarks[i].setAttribute("inert","");
      }
      // Hide the content behind the overlay
      overlay.style.display = "block";
      // Add click handler to overlay
      overlay.setAttribute("onclick","CloseDialog('" + btnID + "');");
      // Kill the page scroll
      body[0].style.overflow = "hidden";
      // Set the dialog to modal
      dialog.setAttribute("aria-modal","true");
      // dialog.setAttribute("data-id",eID);
      dialog.removeAttribute("hidden"); 
      // Put focus on the close button
      // Normally I would put it on the modal, but this fits
      closeBtn.setAttribute("onclick","CloseDialog('" + btnID + "');");
      focusElm.focus();
   }, 2000);
  } catch (e) {
    console.log("OpenDialog(): " + e);
  }
}

function CloseDialog(eID) {
  try {
    // Get all the elements to manipulate
    var body = document.getElementsByTagName("body");
    var landmarks = document.querySelectorAll("header, main, footer");
    var overlay = document.getElementById("Overlay");
    var dialog = document.getElementById("Dialog");
    var triggerBtn = document.getElementById(eID);
    // Make the regions available to AT
    for (var i = 0; i < landmarks.length; i++) {
      landmarks[i].removeAttribute("aria-hidden");
      landmarks[i].removeAttribute("inert");
    }
    // Remove the overlay
    overlay.style.display = "none";
    // Return the scrollbar
    body[0].style.overflow = "auto";
    // Kill the dialog
    dialog.removeAttribute("aria-modal");
    dialog.removeAttribute("data-id");
    dialog.setAttribute("hidden","");
    // Return focus to trigger
    triggerBtn.focus();
  } catch (e) {
    console.log("CloseDialog(): " + e);
  }
}