<div id="fbp-public" class="fbp">
  <div class="fbp-frame"></div>
  <div class="fbp-toolbar">
    <button type="button" class="prev" aria-label="Vorige">‹</button>
    <span class="label">…</span>
    <button type="button" class="next" aria-label="Volgende">›</button>
  </div>
</div>

<!-- Zoom overlay -->
<div id="fbp-zoom" aria-hidden="true">
  <div class="fbpz-backdrop"></div>
  <div class="fbpz-dialog">
    <img class="fbpz-img" src="" alt="">
    <button class="fbpz-close" aria-label="Sluiten">×</button>
    <button class="fbpz-prev" aria-label="Vorige">‹</button>
    <button class="fbpz-next" aria-label="Volgende">›</button>
    <div class="fbpz-ctrls" aria-label="Zoom bediening">
      <button class="fbpz-zoomout" aria-label="Uitzoomen">−</button>
      <button class="fbpz-zoomin" aria-label="Inzoomen">+</button>
      <button class="fbpz-reset" aria-label="Reset zoom">100%</button>
    </div>
  </div>
</div>

<style>
  /* Basismaten viewer */
  #fbp-public { max-width: 1100px; margin: 24px auto; }
  #fbp-public .fbp-frame {
    display:flex; gap:12px; justify-content:center; align-items:center; min-height:40vh;
  }
  #fbp-public .fbp-page {
    aspect-ratio:230/195; width:min(45vh,46%); background:#f6f7f8;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08);
    cursor: zoom-in; /* hint: klik om in te zoomen */
  }
  #fbp-public .fbp-page.single { width:min(70vh,90%); }
  #fbp-public .fbp-page img { width:100%; height:100%; object-fit:contain; }
  #fbp-public .fbp-toolbar {
    display:flex; align-items:center; gap:12px; justify-content:center; margin-top:10px; font-weight:600;
  }
  .fbp-embed .site-header, .fbp-embed .site-footer { display:none; }

  /* Zoom overlay */
  #fbp-zoom { position:fixed; inset:0; z-index: 100000; display:none; }
  #fbp-zoom[aria-hidden="true"]{ display:none; }
  #fbp-zoom .fbpz-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px);
  }
  #fbp-zoom .fbpz-dialog{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events: none;
  }
  #fbp-zoom .fbpz-img{
    max-width: 92vw; max-height: 90vh; pointer-events:auto;
    transform-origin: center center; transition: transform .08s linear;
    cursor: grab;
  }
  body.fbpz-dragging, body.fbpz-dragging * { cursor: grabbing !important; }

  /* Bediening (glas-achtige knoppen in de hoeken) */
  #fbp-zoom .fbpz-close,
  #fbp-zoom .fbpz-prev,
  #fbp-zoom .fbpz-next{
    position:absolute; width:44px; height:44px; border:none; border-radius:50%;
    background: rgba(255,255,255,.85); color:#222; font-size:22px; pointer-events:auto; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.2);
  }
  #fbp-zoom .fbpz-close{ top:12px; right:12px; font-size:20px; }
  #fbp-zoom .fbpz-prev{ left:12px; top:50%; transform:translateY(-50%); }
  #fbp-zoom .fbpz-next{ right:12px; top:50%; transform:translateY(-50%); }

  /* Zoom knoppen rechtsonder */
  #fbp-zoom .fbpz-ctrls{
    position:absolute; right:14px; bottom:14px; display:flex; gap:8px; pointer-events:auto;
    background: rgba(255,255,255,.85); padding:6px; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.2);
  }
  #fbp-zoom .fbpz-ctrls button{
    min-width:44px; height:40px; border:none; border-radius:10px; font-weight:700; cursor:pointer; background:#fff;
  }

  @media (max-width: 680px){
    #fbp-zoom .fbpz-prev, #fbp-zoom .fbpz-next{ width:40px; height:40px; }
    #fbp-zoom .fbpz-ctrls button{ min-width:40px; height:36px; }
  }
</style>

<script>
jQuery(function($){
  var ajaxUrl    = "\/wp-admin\/admin-ajax.php";
  var directJson = "";
  var token      = "";
  var slug       = "";
  var user       = "";
  var inlinePages= [];

  function showMsg(msg){
    $('#fbp-public .fbp-frame').html('<div style="opacity:.7">'+msg+'</div>');
  }

  function buildItems(arr){
    var items = [];
    items.push({ type:'single', idxes:[0], pages:[arr[0]] });
    for (var i=1;i<arr.length-1;i+=2){
      items.push({ type:'spread', idxes:[i, i+1], pages:[arr[i], arr[i+1]] });
    }
    if (arr.length>1) items.push({ type:'single', idxes:[arr.length-1], pages:[arr[arr.length-1]] });
    return items;
  }
  function labelFor(it, total){
    if (it.idxes.length === 1){
      var i = it.idxes[0];
      if (i === 0) return 'Cover';
      if (i === total - 1) return 'Backcover';
      return String(i + 1);
    }
    return (it.idxes[0] + 1) + '–' + (it.idxes[1] + 1);
  }

  function renderViewer(pages){
    var items = buildItems(pages), index = 0;

    function render(){
      var it = items[index];
      var $frame = $('#fbp-public .fbp-frame').empty();
      if (it.type === 'single'){
        var $p = $('<div class="fbp-page single"></div>');
        if (it.pages[0]) $p.append('<img src="'+it.pages[0]+'" alt="">');
        $frame.append($p);
      } else {
        var $l = $('<div class="fbp-page"></div>');
        var $r = $('<div class="fbp-page"></div>');
        if (it.pages[0]) $l.append('<img src="'+it.pages[0]+'" alt="">');
        if (it.pages[1]) $r.append('<img src="'+it.pages[1]+'" alt="">');
        $frame.append($l, $r);
      }
      $('#fbp-public .label').text(labelFor(it, pages.length));
    }

    // Navigatie
    $('#fbp-public').off('click.next click.prev');
    $('#fbp-public').on('click', '.next', function(){ if (index < items.length - 1) { index++; render(); } });
    $('#fbp-public').on('click', '.prev', function(){ if (index > 0) { index--; render(); } });
    $(document).off('keydown.fbp').on('keydown.fbp', function(e){
      if (e.key === 'ArrowRight') $('#fbp-public .next').trigger('click');
      if (e.key === 'ArrowLeft')  $('#fbp-public .prev').trigger('click');
    });

    // === Klik → Zoom overlay ===
    (function enableZoom(){
      var Z = { pages: pages.slice(), index: 0, scale: 1, tx: 0, ty: 0, dragging:false, sx:0, sy:0 };

      function applyTransform(){
        $('#fbp-zoom .fbpz-img').css('transform','translate('+Z.tx+'px,'+Z.ty+'px) scale('+Z.scale+')');
      }
      function resetZoom(){ Z.scale=1; Z.tx=0; Z.ty=0; applyTransform(); }
      function openZoom(by){
        // by kan index of src zijn
        if (typeof by === 'number') {
          Z.index = Math.max(0, Math.min(by, Z.pages.length-1));
        } else if (typeof by === 'string') {
          var idx = Z.pages.indexOf(by);
          Z.index = (idx >= 0 ? idx : 0);
        }
        resetZoom();
        $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]);
        $('#fbp-zoom').attr('aria-hidden','false').show();
      }
      function closeZoom(){ $('#fbp-zoom').attr('aria-hidden','true').hide(); }

      function zoomBy(factor, cx, cy){
        var prev = Z.scale;
        Z.scale = Math.min(6, Math.max(1, Z.scale * factor));
        // zoom rond cursor
        var img  = $('#fbp-zoom .fbpz-img')[0];
        var rect = img.getBoundingClientRect();
        var ox = cx - rect.left - rect.width/2;
        var oy = cy - rect.top  - rect.height/2;
        Z.tx = (Z.tx + ox) * (Z.scale/prev) - ox;
        Z.ty = (Z.ty + oy) * (Z.scale/prev) - oy;
        applyTransform();
      }

      // Open op klik van pagina
      $('#fbp-public').off('click.openzoom').on('click.openzoom', '.fbp-page img', function(){
        var src = $(this).attr('src');
        openZoom(src);
      });

      // Overlay knoppen/backdrop
      $('#fbp-zoom')
        .off('click.zoomui')
        .on('click.zoomui', '.fbpz-close, .fbpz-backdrop', closeZoom)
        .on('click.zoomui', '.fbpz-next', function(){
          if (Z.index < Z.pages.length - 1){ Z.index++; resetZoom(); $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]); }
        })
        .on('click.zoomui', '.fbpz-prev', function(){
          if (Z.index > 0){ Z.index--; resetZoom(); $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]); }
        })
        .on('click.zoomui', '.fbpz-zoomin', function(){ zoomBy(1.25, window.innerWidth/2, window.innerHeight/2); })
        .on('click.zoomui', '.fbpz-zoomout', function(){ zoomBy(1/1.25, window.innerWidth/2, window.innerHeight/2); })
        .on('click.zoomui', '.fbpz-reset', resetZoom);

      // Muiswiel-zoom
      $('#fbp-zoom .fbpz-img').off('wheel.zoom').on('wheel.zoom', function(e){
        e.preventDefault();
        var f = (e.originalEvent.deltaY < 0) ? 1.12 : 1/1.12;
        zoomBy(f, e.originalEvent.clientX, e.originalEvent.clientY);
      });

      // Slepen om te pannen
      $('#fbp-zoom .fbpz-img').off('mousedown.drag').on('mousedown.drag', function(e){
        if (Z.scale <= 1) return; e.preventDefault();
        Z.dragging = true; Z.sx = e.clientX; Z.sy = e.clientY;
        $('body').addClass('fbpz-dragging');
      });
      $(document).off('mousemove.dragzoom mouseup.dragzoom')
        .on('mousemove.dragzoom', function(e){
          if (!Z.dragging) return;
          Z.tx += (e.clientX - Z.sx); Z.ty += (e.clientY - Z.sy);
          Z.sx = e.clientX; Z.sy = e.clientY; applyTransform();
        })
        .on('mouseup.dragzoom', function(){ Z.dragging=false; $('body').removeClass('fbpz-dragging'); });

      // Keyboard in overlay
      $(document).off('keydown.zoom').on('keydown.zoom', function(e){
        if (!$('#fbp-zoom').is(':visible')) return;
        if (e.key === 'Escape') closeZoom();
        else if (e.key === 'ArrowRight') $('#fbp-zoom .fbpz-next').trigger('click');
        else if (e.key === 'ArrowLeft')  $('#fbp-zoom .fbpz-prev').trigger('click');
        else if (e.key === '+' || e.key === '=') $('.fbpz-zoomin').click();
        else if (e.key === '-') $('.fbpz-zoomout').click();
      });

      // Dubbelklik: in/uitzoomen
      $('#fbp-zoom .fbpz-img').off('dblclick.zoom').on('dblclick.zoom', function(e){
        if (Z.scale === 1) zoomBy(2, e.clientX, e.clientY);
        else resetZoom();
      });
    })();

    render();
  }

  // 1) Inline pagina’s al aanwezig? → direct
  if (Array.isArray(inlinePages) && inlinePages.length) {
    renderViewer(inlinePages);
    return;
  }

  // 2) Client-side direct JSON bestand proberen
  if (directJson) {
    $.ajax({ url: directJson, dataType: 'json', cache: false })
      .done(function(data){
        if (data && Array.isArray(data.pages) && data.pages.length) {
          renderViewer(data.pages);
        } else {
          loadViaAjaxFallback();
        }
      })
      .fail(function(xhr){
        console.warn('[viewer] direct JSON fail', xhr && xhr.status, xhr && xhr.statusText, directJson);
        loadViaAjaxFallback();
      });
  } else {
    loadViaAjaxFallback();
  }

  function loadViaAjaxFallback(){
    var params = { action: 'fb_get_share' };
    if (slug && user) { params.fb_slug = slug; params.fb_user = user; }
    else if (token) { params.token = token; }
    else { showMsg('Geen brochure gevonden.'); return; }

    $.ajax({ url: ajaxUrl, type: 'POST', data: params, dataType: 'json' })
      .done(function (res) {
        if (!res || !res.success || !res.data || !Array.isArray(res.data.pages) || !res.data.pages.length) {
          var msg = (res && res.data && res.data.message) ? res.data.message : 'Brochurelink ongeldig of leeg.';
          showMsg(msg);
          return;
        }
        renderViewer(res.data.pages);
      })
      .fail(function (xhr) {
        var msg = 'Kon de brochure niet laden.';
        if (xhr && xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
          msg += ' (' + xhr.responseJSON.data.message + ')';
        }
        showMsg(msg);
      });
  }
});
</script>
<div id="fbp-public" class="fbp">
  <div class="fbp-frame"></div>
  <div class="fbp-toolbar">
    <button type="button" class="prev" aria-label="Vorige">‹</button>
    <span class="label">…</span>
    <button type="button" class="next" aria-label="Volgende">›</button>
  </div>
</div>

<!-- Zoom overlay -->
<div id="fbp-zoom" aria-hidden="true">
  <div class="fbpz-backdrop"></div>
  <div class="fbpz-dialog">
    <img class="fbpz-img" src="" alt="">
    <button class="fbpz-close" aria-label="Sluiten">×</button>
    <button class="fbpz-prev" aria-label="Vorige">‹</button>
    <button class="fbpz-next" aria-label="Volgende">›</button>
    <div class="fbpz-ctrls" aria-label="Zoom bediening">
      <button class="fbpz-zoomout" aria-label="Uitzoomen">−</button>
      <button class="fbpz-zoomin" aria-label="Inzoomen">+</button>
      <button class="fbpz-reset" aria-label="Reset zoom">100%</button>
    </div>
  </div>
</div>

<style>
  /* Basismaten viewer */
  #fbp-public { max-width: 1100px; margin: 24px auto; }
  #fbp-public .fbp-frame {
    display:flex; gap:12px; justify-content:center; align-items:center; min-height:40vh;
  }
  #fbp-public .fbp-page {
    aspect-ratio:230/195; width:min(45vh,46%); background:#f6f7f8;
    display:flex; align-items:center; justify-content:center; overflow:hidden;
    border-radius:12px; box-shadow:0 1px 4px rgba(0,0,0,.08);
    cursor: zoom-in; /* hint: klik om in te zoomen */
  }
  #fbp-public .fbp-page.single { width:min(70vh,90%); }
  #fbp-public .fbp-page img { width:100%; height:100%; object-fit:contain; }
  #fbp-public .fbp-toolbar {
    display:flex; align-items:center; gap:12px; justify-content:center; margin-top:10px; font-weight:600;
  }
  .fbp-embed .site-header, .fbp-embed .site-footer { display:none; }

  /* Zoom overlay */
  #fbp-zoom { position:fixed; inset:0; z-index: 100000; display:none; }
  #fbp-zoom[aria-hidden="true"]{ display:none; }
  #fbp-zoom .fbpz-backdrop{
    position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter: blur(2px);
  }
  #fbp-zoom .fbpz-dialog{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    pointer-events: none;
  }
  #fbp-zoom .fbpz-img{
    max-width: 92vw; max-height: 90vh; pointer-events:auto;
    transform-origin: center center; transition: transform .08s linear;
    cursor: grab;
  }
  body.fbpz-dragging, body.fbpz-dragging * { cursor: grabbing !important; }

  /* Bediening (glas-achtige knoppen in de hoeken) */
  #fbp-zoom .fbpz-close,
  #fbp-zoom .fbpz-prev,
  #fbp-zoom .fbpz-next{
    position:absolute; width:44px; height:44px; border:none; border-radius:50%;
    background: rgba(255,255,255,.85); color:#222; font-size:22px; pointer-events:auto; cursor:pointer;
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 24px rgba(0,0,0,.2);
  }
  #fbp-zoom .fbpz-close{ top:12px; right:12px; font-size:20px; }
  #fbp-zoom .fbpz-prev{ left:12px; top:50%; transform:translateY(-50%); }
  #fbp-zoom .fbpz-next{ right:12px; top:50%; transform:translateY(-50%); }

  /* Zoom knoppen rechtsonder */
  #fbp-zoom .fbpz-ctrls{
    position:absolute; right:14px; bottom:14px; display:flex; gap:8px; pointer-events:auto;
    background: rgba(255,255,255,.85); padding:6px; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.2);
  }
  #fbp-zoom .fbpz-ctrls button{
    min-width:44px; height:40px; border:none; border-radius:10px; font-weight:700; cursor:pointer; background:#fff;
  }

  @media (max-width: 680px){
    #fbp-zoom .fbpz-prev, #fbp-zoom .fbpz-next{ width:40px; height:40px; }
    #fbp-zoom .fbpz-ctrls button{ min-width:40px; height:36px; }
  }
</style>

<script>
jQuery(function($){
  var ajaxUrl    = "\/wp-admin\/admin-ajax.php";
  var directJson = "";
  var token      = "";
  var slug       = "";
  var user       = "";
  var inlinePages= [];

  function showMsg(msg){
    $('#fbp-public .fbp-frame').html('<div style="opacity:.7">'+msg+'</div>');
  }

  function buildItems(arr){
    var items = [];
    items.push({ type:'single', idxes:[0], pages:[arr[0]] });
    for (var i=1;i<arr.length-1;i+=2){
      items.push({ type:'spread', idxes:[i, i+1], pages:[arr[i], arr[i+1]] });
    }
    if (arr.length>1) items.push({ type:'single', idxes:[arr.length-1], pages:[arr[arr.length-1]] });
    return items;
  }
  function labelFor(it, total){
    if (it.idxes.length === 1){
      var i = it.idxes[0];
      if (i === 0) return 'Cover';
      if (i === total - 1) return 'Backcover';
      return String(i + 1);
    }
    return (it.idxes[0] + 1) + '–' + (it.idxes[1] + 1);
  }

  function renderViewer(pages){
    var items = buildItems(pages), index = 0;

    function render(){
      var it = items[index];
      var $frame = $('#fbp-public .fbp-frame').empty();
      if (it.type === 'single'){
        var $p = $('<div class="fbp-page single"></div>');
        if (it.pages[0]) $p.append('<img src="'+it.pages[0]+'" alt="">');
        $frame.append($p);
      } else {
        var $l = $('<div class="fbp-page"></div>');
        var $r = $('<div class="fbp-page"></div>');
        if (it.pages[0]) $l.append('<img src="'+it.pages[0]+'" alt="">');
        if (it.pages[1]) $r.append('<img src="'+it.pages[1]+'" alt="">');
        $frame.append($l, $r);
      }
      $('#fbp-public .label').text(labelFor(it, pages.length));
    }

    // Navigatie
    $('#fbp-public').off('click.next click.prev');
    $('#fbp-public').on('click', '.next', function(){ if (index < items.length - 1) { index++; render(); } });
    $('#fbp-public').on('click', '.prev', function(){ if (index > 0) { index--; render(); } });
    $(document).off('keydown.fbp').on('keydown.fbp', function(e){
      if (e.key === 'ArrowRight') $('#fbp-public .next').trigger('click');
      if (e.key === 'ArrowLeft')  $('#fbp-public .prev').trigger('click');
    });

    // === Klik → Zoom overlay ===
    (function enableZoom(){
      var Z = { pages: pages.slice(), index: 0, scale: 1, tx: 0, ty: 0, dragging:false, sx:0, sy:0 };

      function applyTransform(){
        $('#fbp-zoom .fbpz-img').css('transform','translate('+Z.tx+'px,'+Z.ty+'px) scale('+Z.scale+')');
      }
      function resetZoom(){ Z.scale=1; Z.tx=0; Z.ty=0; applyTransform(); }
      function openZoom(by){
        // by kan index of src zijn
        if (typeof by === 'number') {
          Z.index = Math.max(0, Math.min(by, Z.pages.length-1));
        } else if (typeof by === 'string') {
          var idx = Z.pages.indexOf(by);
          Z.index = (idx >= 0 ? idx : 0);
        }
        resetZoom();
        $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]);
        $('#fbp-zoom').attr('aria-hidden','false').show();
      }
      function closeZoom(){ $('#fbp-zoom').attr('aria-hidden','true').hide(); }

      function zoomBy(factor, cx, cy){
        var prev = Z.scale;
        Z.scale = Math.min(6, Math.max(1, Z.scale * factor));
        // zoom rond cursor
        var img  = $('#fbp-zoom .fbpz-img')[0];
        var rect = img.getBoundingClientRect();
        var ox = cx - rect.left - rect.width/2;
        var oy = cy - rect.top  - rect.height/2;
        Z.tx = (Z.tx + ox) * (Z.scale/prev) - ox;
        Z.ty = (Z.ty + oy) * (Z.scale/prev) - oy;
        applyTransform();
      }

      // Open op klik van pagina
      $('#fbp-public').off('click.openzoom').on('click.openzoom', '.fbp-page img', function(){
        var src = $(this).attr('src');
        openZoom(src);
      });

      // Overlay knoppen/backdrop
      $('#fbp-zoom')
        .off('click.zoomui')
        .on('click.zoomui', '.fbpz-close, .fbpz-backdrop', closeZoom)
        .on('click.zoomui', '.fbpz-next', function(){
          if (Z.index < Z.pages.length - 1){ Z.index++; resetZoom(); $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]); }
        })
        .on('click.zoomui', '.fbpz-prev', function(){
          if (Z.index > 0){ Z.index--; resetZoom(); $('#fbp-zoom .fbpz-img').attr('src', Z.pages[Z.index]); }
        })
        .on('click.zoomui', '.fbpz-zoomin', function(){ zoomBy(1.25, window.innerWidth/2, window.innerHeight/2); })
        .on('click.zoomui', '.fbpz-zoomout', function(){ zoomBy(1/1.25, window.innerWidth/2, window.innerHeight/2); })
        .on('click.zoomui', '.fbpz-reset', resetZoom);

      // Muiswiel-zoom
      $('#fbp-zoom .fbpz-img').off('wheel.zoom').on('wheel.zoom', function(e){
        e.preventDefault();
        var f = (e.originalEvent.deltaY < 0) ? 1.12 : 1/1.12;
        zoomBy(f, e.originalEvent.clientX, e.originalEvent.clientY);
      });

      // Slepen om te pannen
      $('#fbp-zoom .fbpz-img').off('mousedown.drag').on('mousedown.drag', function(e){
        if (Z.scale <= 1) return; e.preventDefault();
        Z.dragging = true; Z.sx = e.clientX; Z.sy = e.clientY;
        $('body').addClass('fbpz-dragging');
      });
      $(document).off('mousemove.dragzoom mouseup.dragzoom')
        .on('mousemove.dragzoom', function(e){
          if (!Z.dragging) return;
          Z.tx += (e.clientX - Z.sx); Z.ty += (e.clientY - Z.sy);
          Z.sx = e.clientX; Z.sy = e.clientY; applyTransform();
        })
        .on('mouseup.dragzoom', function(){ Z.dragging=false; $('body').removeClass('fbpz-dragging'); });

      // Keyboard in overlay
      $(document).off('keydown.zoom').on('keydown.zoom', function(e){
        if (!$('#fbp-zoom').is(':visible')) return;
        if (e.key === 'Escape') closeZoom();
        else if (e.key === 'ArrowRight') $('#fbp-zoom .fbpz-next').trigger('click');
        else if (e.key === 'ArrowLeft')  $('#fbp-zoom .fbpz-prev').trigger('click');
        else if (e.key === '+' || e.key === '=') $('.fbpz-zoomin').click();
        else if (e.key === '-') $('.fbpz-zoomout').click();
      });

      // Dubbelklik: in/uitzoomen
      $('#fbp-zoom .fbpz-img').off('dblclick.zoom').on('dblclick.zoom', function(e){
        if (Z.scale === 1) zoomBy(2, e.clientX, e.clientY);
        else resetZoom();
      });
    })();

    render();
  }

  // 1) Inline pagina’s al aanwezig? → direct
  if (Array.isArray(inlinePages) && inlinePages.length) {
    renderViewer(inlinePages);
    return;
  }

  // 2) Client-side direct JSON bestand proberen
  if (directJson) {
    $.ajax({ url: directJson, dataType: 'json', cache: false })
      .done(function(data){
        if (data && Array.isArray(data.pages) && data.pages.length) {
          renderViewer(data.pages);
        } else {
          loadViaAjaxFallback();
        }
      })
      .fail(function(xhr){
        console.warn('[viewer] direct JSON fail', xhr && xhr.status, xhr && xhr.statusText, directJson);
        loadViaAjaxFallback();
      });
  } else {
    loadViaAjaxFallback();
  }

  function loadViaAjaxFallback(){
    var params = { action: 'fb_get_share' };
    if (slug && user) { params.fb_slug = slug; params.fb_user = user; }
    else if (token) { params.token = token; }
    else { showMsg('Geen brochure gevonden.'); return; }

    $.ajax({ url: ajaxUrl, type: 'POST', data: params, dataType: 'json' })
      .done(function (res) {
        if (!res || !res.success || !res.data || !Array.isArray(res.data.pages) || !res.data.pages.length) {
          var msg = (res && res.data && res.data.message) ? res.data.message : 'Brochurelink ongeldig of leeg.';
          showMsg(msg);
          return;
        }
        renderViewer(res.data.pages);
      })
      .fail(function (xhr) {
        var msg = 'Kon de brochure niet laden.';
        if (xhr && xhr.responseJSON && xhr.responseJSON.data && xhr.responseJSON.data.message) {
          msg += ' (' + xhr.responseJSON.data.message + ')';
        }
        showMsg(msg);
      });
  }
});
</script>
{"id":292,"date":"2025-08-13T09:38:09","date_gmt":"2025-08-13T09:38:09","guid":{"rendered":"https:\/\/foldercomposer.mediatopper.be\/brochure-viewer\/"},"modified":"2025-10-03T12:43:37","modified_gmt":"2025-10-03T12:43:37","slug":"brochure-viewer","status":"publish","type":"page","link":"https:\/\/foldercomposer.mediatopper.be\/fr\/brochure-viewer\/","title":{"rendered":"Brochure viewer"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00a0\u00bb1&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_row _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.27.4&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; global_colors_info=\u00a0\u00bb{}\u00a0\u00bb sticky_enabled=\u00a0\u00bb0&Prime;]<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><\/p>\n<style><!-- [et_pb_line_break_holder] -->  \/* ========== Public Brochure Viewer \u2013 modern look (matcht folderbuilder) ========== *\/<!-- [et_pb_line_break_holder] -->  #fbp-public{<!-- [et_pb_line_break_holder] -->    --fb-brand:#A67D44;<!-- [et_pb_line_break_holder] -->    --fb-brand-dark:#8c6436;<!-- [et_pb_line_break_holder] -->    --fb-ratio:230\/195;<!-- [et_pb_line_break_holder] -->    --fb-nav-size: clamp(44px, 6vw, 64px);<!-- [et_pb_line_break_holder] -->    --fb-gap: clamp(16px, 2vw, 28px);<!-- [et_pb_line_break_holder] -->    --fb-maxw: min(96vw, 1320px);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->    position: relative;<!-- [et_pb_line_break_holder] -->    width: var(--fb-maxw);<!-- [et_pb_line_break_holder] -->    margin: 24px auto;<!-- [et_pb_line_break_holder] -->    padding: 14px 0 22px;<!-- [et_pb_line_break_holder] -->    font-family: 'Montserrat', sans-serif;<!-- [et_pb_line_break_holder] -->    color:#3d3429;<!-- [et_pb_line_break_holder] -->    background: linear-gradient(180deg, #f7f5f1 0%, #fff 100%);<!-- [et_pb_line_break_holder] -->    border-radius: 0;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Frame met pagina\u2019s *\/<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-frame{<!-- [et_pb_line_break_holder] -->    display:flex;<!-- [et_pb_line_break_holder] -->    justify-content:center;<!-- [et_pb_line_break_holder] -->    align-items:center;<!-- [et_pb_line_break_holder] -->    gap: var(--fb-gap);<!-- [et_pb_line_break_holder] -->    min-height: clamp(360px, 54vh, 720px);<!-- [et_pb_line_break_holder] -->    width: 100%;<!-- [et_pb_line_break_holder] -->    overflow: hidden;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Pagina-kaarten *\/<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-page{<!-- [et_pb_line_break_holder] -->    aspect-ratio: var(--fb-ratio);<!-- [et_pb_line_break_holder] -->    width: clamp(320px, 48%, 680px);<!-- [et_pb_line_break_holder] -->    background:#fff;<!-- [et_pb_line_break_holder] -->    border:1px solid #e5e2dd;<!-- [et_pb_line_break_holder] -->    border-radius:14px;<!-- [et_pb_line_break_holder] -->    box-shadow:0 10px 24px rgba(0,0,0,.06);<!-- [et_pb_line_break_holder] -->    overflow:hidden;<!-- [et_pb_line_break_holder] -->    display:flex; align-items:center; justify-content:center;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-page.single{<!-- [et_pb_line_break_holder] -->    width: clamp(680px, 96%, 1280px);<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-page img{<!-- [et_pb_line_break_holder] -->    width:100%; height:100%;<!-- [et_pb_line_break_holder] -->    object-fit: contain;   \/* wil je full-bleed: zet op 'cover' *\/<!-- [et_pb_line_break_holder] -->    object-position: center;<!-- [et_pb_line_break_holder] -->    display:block;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Toolbar overlays de viewer: pijlen links\/rechts + label onderaan *\/<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar{<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    inset: 0;                   \/* over de hele viewer *\/<!-- [et_pb_line_break_holder] -->    pointer-events: none;       \/* geen events op wrapper, w\u00e9l op knoppen\/label *\/<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .prev,<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .next{<!-- [et_pb_line_break_holder] -->    pointer-events: auto;<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    top: 50%;<!-- [et_pb_line_break_holder] -->    transform: translateY(-50%);<!-- [et_pb_line_break_holder] -->    width: var(--fb-nav-size);<!-- [et_pb_line_break_holder] -->    height: var(--fb-nav-size);<!-- [et_pb_line_break_holder] -->    border: none;<!-- [et_pb_line_break_holder] -->    border-radius: 999px;<!-- [et_pb_line_break_holder] -->    background: rgba(255,255,255,.75);<!-- [et_pb_line_break_holder] -->    backdrop-filter: blur(6px);<!-- [et_pb_line_break_holder] -->    color: var(--fb-brand-dark);<!-- [et_pb_line_break_holder] -->    font-size: clamp(22px, 4.2vw, 60px);<!-- [et_pb_line_break_holder] -->    line-height: 1;<!-- [et_pb_line_break_holder] -->    display:flex; align-items:center; justify-content:center;<!-- [et_pb_line_break_holder] -->    cursor: pointer;<!-- [et_pb_line_break_holder] -->    opacity:.9;<!-- [et_pb_line_break_holder] -->    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, opacity .2s ease;<!-- [et_pb_line_break_holder] -->    z-index: 2;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .prev{ left: 0; }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .next{ right: 0; }<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .prev:hover,<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .next:hover{<!-- [et_pb_line_break_holder] -->    transform: translateY(-50%) scale(1.05);<!-- [et_pb_line_break_holder] -->    background: rgba(255,255,255,.92);<!-- [et_pb_line_break_holder] -->    box-shadow: 0 8px 28px rgba(0,0,0,.14);<!-- [et_pb_line_break_holder] -->    opacity: 1;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Label onderaan, subtiel *\/<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-toolbar .label{<!-- [et_pb_line_break_holder] -->    pointer-events: auto;<!-- [et_pb_line_break_holder] -->    position: absolute;<!-- [et_pb_line_break_holder] -->    left: 50%;<!-- [et_pb_line_break_holder] -->    bottom: -6px;<!-- [et_pb_line_break_holder] -->    transform: translateX(-50%);<!-- [et_pb_line_break_holder] -->    font-size: 14px;<!-- [et_pb_line_break_holder] -->    color:#6b5a45;<!-- [et_pb_line_break_holder] -->    background: transparent;<!-- [et_pb_line_break_holder] -->    padding: 0 8px;<!-- [et_pb_line_break_holder] -->    border-radius: 8px;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Meldingen (laden\/fout) netjes tonen *\/<!-- [et_pb_line_break_holder] -->  #fbp-public .fbp-frame > div{<!-- [et_pb_line_break_holder] -->    text-align:center;<!-- [et_pb_line_break_holder] -->    color:#6b5a45;<!-- [et_pb_line_break_holder] -->    font-weight:600;<!-- [et_pb_line_break_holder] -->    opacity:.85;<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Embed-variant (zoals je al had) *\/<!-- [et_pb_line_break_holder] -->  .fbp-embed .site-header, .fbp-embed .site-footer { display:none; }<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->  \/* Responsief *\/<!-- [et_pb_line_break_holder] -->  @media (max-width: 920px){<!-- [et_pb_line_break_holder] -->    #fbp-public .fbp-toolbar .prev{ left: 4px; }<!-- [et_pb_line_break_holder] -->    #fbp-public .fbp-toolbar .next{ right: 4px; }<!-- [et_pb_line_break_holder] -->    #fbp-public .fbp-page{ width: clamp(260px, 88vw, 620px); }<!-- [et_pb_line_break_holder] -->    #fbp-public .fbp-page.single{ width: clamp(320px, 94vw, 980px); }<!-- [et_pb_line_break_holder] -->  }<!-- [et_pb_line_break_holder] --><\/style>\n<p><!-- [et_pb_line_break_holder] -->[\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-292","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/pages\/292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/comments?post=292"}],"version-history":[{"count":5,"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/pages\/292\/revisions"}],"predecessor-version":[{"id":354,"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/pages\/292\/revisions\/354"}],"wp:attachment":[{"href":"https:\/\/foldercomposer.mediatopper.be\/fr\/wp-json\/wp\/v2\/media?parent=292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}