(function() {
  var modal = window.parent.document.getElementById("digital-ads-modal");
  if (modal !== null) {
    return;
  }

  modal = window.parent.document.createElement('div');
  modal.setAttribute('id', 'digital-ads-modal');
  modal.setAttribute('class', 'digital-ads-modal');
  window.parent.document.body.appendChild(modal);
  const modalShadow = modal.attachShadow({ mode: 'open' });
  modalShadow.innerHTML = `<div class="digital-ads-modal-container">
  <div class="digital-ads-modal-header">
    <span>Anzeige</span>
    <span class="digital-ads-modal-close">&times;</span>
  </div>
  <div class="digital-ads-modal-content">
    <div class="digital-ads-modal-image-container"></div>
  </div>
</div>
`;

  const resetCss = document.createElement('style');
  const modalCss = document.createElement('style');
  resetCss.textContent = `*,
::before,
::after {
  box-sizing: border-box;
}

:host > *,
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    "Helvetica Neue",
    "Noto Sans",
    "Liberation Sans",
    Arial,
    sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: transparent;
  -webkit-text-size-adjust: 100%;
}

b,
strong {
  font-weight: bolder;
}
`;
  modalCss.textContent = `/* .digital-ads-modal */
:host {
  display: none;
  position: fixed;
  z-index: 10000000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  background-color: #fff;
}

.digital-ads-modal-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.digital-ads-modal-header {
  flex: 0 1 76px;
  padding: 20px;
  font-size: 24px;
}

.digital-ads-modal-content {
  flex: 1 1 auto;
  padding: 0 20px 20px;
}

.digital-ads-modal-image-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
}

.digital-ads-modal-image-container img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  max-height: 100%;
  display: block;
  --digital-ads-modal-imgage-cursor: zoom-in;
}

.digital-ads-modal-image-container img:hover {
  cursor: zoom-in;
  cursor: var(--digital-ads-modal-imgage-cursor);
}

.digital-ads-modal-close {
  padding-top: 20px;
  color: #aaa;
  float: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 48px;
  font-weight: bolder;
  line-height: 0;
}

.digital-ads-modal-close:hover,
.digital-ads-modal-close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
`;
  modalShadow.appendChild(resetCss);
  modalShadow.appendChild(modalCss);

  const span = modalShadow.querySelector('.digital-ads-modal-close');
  const imgContainer = modalShadow.querySelector('.digital-ads-modal-image-container');

  function closeModal() {
    modal.style.display = 'none';
    window.parent.document.body.style.removeProperty('overflow');

    const img = imgContainer.getElementsByClassName('digital-ads-modal-image')[0];
    zoomOutImg(img);
  }

  span.onclick = function() {
    closeModal();
  };

  window.onkeydown = function(event) {
    if (event.key === 'Escape') {
      closeModal();
    }
  }

  function zoomOutImg(img) {
    img.style.removeProperty('max-width');
    img.style.removeProperty('max-height');
    img.style.removeProperty('left');
    img.style.removeProperty('transform');
    img.style.removeProperty('--digital-ads-modal-imgage-cursor');
  }

  function zoomInImg(img, clickPosXInPercent, clickPosYInPercent) {
    const left = img.naturalWidth < imgContainer.getBoundingClientRect().width
        ? imgContainer.getBoundingClientRect().width / 2 - img.naturalWidth / 2
        : 0;

    img.style.maxWidth = 'none';
    img.style.maxHeight = 'none';
    img.style.left = `${left}px`;
    img.style.transform = 'none';
    img.style.setProperty('--digital-ads-modal-imgage-cursor', 'zoom-out');

    const imgContainerRect = imgContainer.getBoundingClientRect();
    imgContainer.scroll(
        (img.naturalWidth - imgContainerRect.width) * clickPosXInPercent,
        (img.naturalHeight - imgContainerRect.height) * clickPosYInPercent
    );
  }

  function registerImgOnClick() {
    const img = imgContainer.getElementsByClassName('digital-ads-modal-image')[0];

    img.onclick = function(event) {
      const clickPosXInPercent = event.offsetX / img.getBoundingClientRect().width;
      const clickPosYInPercent = event.offsetY / img.getBoundingClientRect().height;

      img.style.getPropertyValue('--digital-ads-modal-imgage-cursor') === 'zoom-out'
        ? zoomOutImg(img)
        : zoomInImg(img, clickPosXInPercent, clickPosYInPercent);
    };
  }

  window.parent.digitalAdsModalRegisterImgOnClick = registerImgOnClick;

})();
(function() {
  const embeddingMode = `ads2webImages4` === '' ? 'iFrame' : 'shadowDOM';
  /**
   * Works with and without iFrame
   */
  const modal = window.parent.document.getElementById("digital-ads-modal");
  const resetCss = document.createElement('style');
  const imagesCss = document.createElement('style');
  resetCss.textContent = `*,
::before,
::after {
  box-sizing: border-box;
}

:host > *,
body {
  margin: 0;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    "Helvetica Neue",
    "Noto Sans",
    "Liberation Sans",
    Arial,
    sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  background-color: transparent;
  -webkit-text-size-adjust: 100%;
}

b,
strong {
  font-weight: bolder;
}
`;
  imagesCss.textContent = `.digital-ads-images-image {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    margin-bottom: 8.0px;
}

.digital-ads-images-image:last-of-type {
    margin-bottom: 0;
}
`;

  var digiElem;

  switch (embeddingMode) {
    case 'iFrame':
      document.head.appendChild(resetCss);
      document.head.appendChild(imagesCss);

      digiElem = document.createElement('div');
      digiElem.setAttribute('id', 'digital-ads');
      document.body.appendChild(digiElem);
      digiElem.innerHTML = `<img src="https://digital-ads.app/images/2CDA1CF0B1830D49CF11FD234F4D5BF8.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/2CDA1CF0B1830D49CF11FD234F4D5BF8.jpg')"
/>
<img src="https://digital-ads.app/images/78B61A0CB6BD92687E6797A245EA6457.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/78B61A0CB6BD92687E6797A245EA6457.jpg')"
/>
<img src="https://digital-ads.app/images/5AD32CA1A5E01C13671F017438A4C5C4.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/5AD32CA1A5E01C13671F017438A4C5C4.jpg')"
/>
`;
      break;
    case 'shadowDOM':
      digiElem = document.getElementById(`ads2webImages4`);
      if (digiElem === null) {
        throw new Error('Element with ID from parameter "idOfContainerDiv" not found');
      }
      const shadow = digiElem.attachShadow({ mode: 'open' });
      shadow.innerHTML = `<img src="https://digital-ads.app/images/2CDA1CF0B1830D49CF11FD234F4D5BF8.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/2CDA1CF0B1830D49CF11FD234F4D5BF8.jpg')"
/>
<img src="https://digital-ads.app/images/78B61A0CB6BD92687E6797A245EA6457.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/78B61A0CB6BD92687E6797A245EA6457.jpg')"
/>
<img src="https://digital-ads.app/images/5AD32CA1A5E01C13671F017438A4C5C4.jpg"
     class="digital-ads-images-image"
     onclick="digitalAdsOpenImageInModal('https://digital-ads.app/images/5AD32CA1A5E01C13671F017438A4C5C4.jpg')"
/>
`;
      shadow.appendChild(resetCss);
      shadow.appendChild(imagesCss);
      break;
  }

  function openImageInModal(imageSrc) {
    modal.shadowRoot.querySelector('.digital-ads-modal-image-container').innerHTML = `
      <img src="${imageSrc}" class="digital-ads-modal-image" alt="Anzeige">
    `;
    window.parent.document.body.style.overflow = 'hidden';
    modal.style.display = 'block';
    window.parent.digitalAdsModalRegisterImgOnClick();
  }

  window.digitalAdsOpenImageInModal = openImageInModal;

})();