<style type="text/css">
  .banner-thumb-wrap {
    display: inline-block;
  }

  .banner-thumb-image {
    width: 72px;
    height: 42px;
    object-fit: cover;
    border-radius: 4px;
    cursor: zoom-in;
  }

  .banner-thumb-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: min(70vw, 760px);
    max-height: 80vh;
    padding: 6px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    z-index: 3000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .1s ease;
  }

  .banner-thumb-popup.is-visible {
    opacity: 1;
    visibility: visible;
  }

  .banner-thumb-popup img {
    display: block;
    width: 100%;
    max-height: calc(80vh - 12px);
    object-fit: contain;
    border-radius: 4px;
  }
</style>

<script type="text/javascript">
  (function($) {
    if (!$) {
      return;
    }

    $('.banner-thumb-popup').remove();
    var $popup = $('<div class="banner-thumb-popup" aria-hidden="true"><img src="" alt=""></div>');
    var $popupImage = $popup.find('img');
    $('body').append($popup);

    function positionPopup(event) {
      var offset = 18;
      var viewportWidth = $(window).width();
      var viewportHeight = $(window).height();
      var popupWidth = $popup.outerWidth();
      var popupHeight = $popup.outerHeight();
      var left = (event.clientX || 0) + offset;
      var top = (event.clientY || 0) + offset;

      if (left + popupWidth + 12 > viewportWidth) {
        left = Math.max(12, (event.clientX || 0) - popupWidth - offset);
      }

      if (top + popupHeight + 12 > viewportHeight) {
        top = Math.max(12, viewportHeight - popupHeight - 12);
      }

      $popup.css({ left: left + 'px', top: top + 'px' });
    }

    $(document).off('.bannerThumbPopup');

    $(document).on('mouseenter.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
      var src = $(this).data('previewSrc');
      if (!src) {
        return;
      }

      $popupImage.attr('src', String(src));
      $popup.addClass('is-visible');
      positionPopup(event);
    });

    $(document).on('mousemove.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
      if ($popup.hasClass('is-visible')) {
        positionPopup(event);
      }
    });

    $(document).on('mouseleave.bannerThumbPopup', '.js-banner-thumb-preview', function() {
      $popup.removeClass('is-visible');
      $popupImage.attr('src', '');
    });
  })(window.jQuery);
</script>
