(function () {
  var links = document.getElementsByClassName('url')
  var modalDiv = document.createElement('div');
  modalDiv.style.display = 'none';
  modalDiv.style.position = 'fixed';
  modalDiv.style.zIndex = '999';
  modalDiv.style.top =    '4rem';
  modalDiv.style.left =   '4rem';
  modalDiv.style.right =  '4rem';
  modalDiv.style.bottom = '6rem';
  modalDiv.style.backgroundColor = '#ffffff';

  modalDiv.innerHTML =
    '<div style="float: right"><button id="imageboard-link-preview-frame-close">&#10006;</button></div>' +
    '<div style="height: 100%"><iframe id="imageboard-link-preview-frame" height="100%" width="100%" title="Site preview"></iframe></div>';

  document.body.appendChild(modalDiv);

  var modalIframe = document.getElementById('imageboard-link-preview-frame');
  var modalCloseButton = document.getElementById('imageboard-link-preview-frame-close');
  modalCloseButton.addEventListener('click', function() {
    modalIframe.src = '';
    modalDiv.style.display = 'none';
  });

  for (var i = 0; i < links.length; i++) {
    var linkEl = links[i];
    linkEl.addEventListener('click', function (e) {
      e.preventDefault();
      modalIframe.src = linkEl.href;
      modalDiv.style.display = 'block';
    });
  }
})();