var Visionneuse = false;

$(document).ready(function(){

  $('body').on('change','.btn-terme',function(){
    let b = $(this);
    let etat = b.prop('checked');
    let terme = b.attr('id');
    console.log(etat)
    if(etat){
      $('.pagination-transcription .bloc-typeregion-paragraph').find('.tag-'+terme).addClass('souligner')
    }else{
      $('.pagination-transcription .bloc-typeregion-paragraph').find('.tag-'+terme).removeClass('souligner')
    }
  })

  $('body').on('click','.btn-page-visio, .btn-page-num',function(){
    let b = $(this);
    let num = b.attr('data-num');
    Visionneuse.goToPage((num - 1));
    $('.btn-page-visio.actif, .bloc-page-transcription').removeClass('actif');
    $('.btn-page-visio').eq((num - 1)).addClass('actif');
    $('.bloc-page-transcription').eq((num - 1)).addClass('actif');
    scrollToAncre('transcription-page-'+num)
  })

});

function PaginationTranscription(page){
    $('.page-document .bloc-page-id').each(function(i,elm){
      var n = i+1;
      var li = '<button class="btn-nav-page nav-link text-center border-secondary py-1 text-secondary rounded-0 text-nowrap m-1" onclick="Visionneuse.goToPage('+i+')" style="height: 100px; background: #fffa;" id="nav-page-'+n+'-tab" data-bs-toggle="tab" data-bs-target="#page-'+n+'XXX">page '+n+'</button>';
      $('.menu-pages-doc').append(li);
    });
  
    $('.page-document .bloc-page-transcription').each(function(i,elm){
      var n = i+1;
      var b = $('<div class="tab-pane fade transcription bg-white mt-3" tabindex="0" id="page-'+n+'" role="tabpanel"><div class="mb-2 mt-0 text-left bg-white" style="min-width: 80%; max-width: 100%; word-break: break-word;"></div></div>');
      b.find('div').append($(this));
      $('.tab-content').append(b);
    });

    $('.contenu-transcription').remove();
    $('.nav-link').eq((page-1)).addClass('active');
    $('.tab-pane').eq((page-1)).addClass('active show');

    $('.tab-pane').addClass('active show');

    if($('.btn-nav-page').length < 2){
      $('.nav-pages').hide();
    }

    /***************/
    
    function normaliserEspaces(b){
        b.contents().each(function(nC,elm){            
            if (this.nodeType === 3) {
                this.nodeValue = this.nodeValue.trimStart();
            }            
            else{
                $(this).text(function(index, currentText) {
                    return currentText.trimStart();
                });
                return false;
            }
        })        
    }

  }
  
  function scrollToAncre(ancreId) {
    let $cible = $('#' + ancreId);
    if (!$cible.length) return;

    // Position de la cible par rapport au conteneur scrollable
    let positionRelative = $cible.position().top;

    $('.page-document').animate({
        scrollTop: positionRelative
    }, 500);
}



  function InitVisionneuse(Sequence){

    var h = $('#modal').find('.modal-body').height();
    $('#visio').css('height',h+'px').addClass('chargement');
  
    Visionneuse = OpenSeadragon({
        id: "visio",
        prefixUrl: "https://digital.inha.fr/visio-iiif/images/",
        tileSources: Sequence,
        initialPage: 0,
        sequenceMode: Sequence.length > 1,
        toolbar: false,
        previousButton: "precedent",
        nextButton: "suivant",
        fullPageButton: "plein-ecran",
        zoomInButton:   "zoom-plus",
        zoomOutButton:  "zoom-moins",
        showHomeControl: false,
        autoHideControls: false,
        immediateRender: true,
        preload: true,
        imageSmoothingEnabled: true,
        maxZoomPixelRatio: 1,
        minZoomImageRatio: 1,
        //visibilityRatio: 1.0,
        maxZoomLevel: 3,
        //defaultZoomLevel: 1,
        minZoomLevel: 0.3,
        //constrainDuringPan: true,
        viewportMargins: {top: 15, bottom: 15, left: 15, right: 15},
        gestureSettingsMouse: {
          clickToZoom: 1,
        },
        showSequenceControl: Sequence.length > 1,
        springStiffness: 4,
        animationTime: 0
    });
  
    var isFullyLoaded = false;
  
    Visionneuse.addHandler('open', function() {
  
      viewer = Visionneuse;
  
      var imgWidth = viewer.world.getItemAt(0).getContentSize().x;
      var imgHeight = viewer.world.getItemAt(0).getContentSize().y;
  
      var viewportWidth = viewer.viewport.getContainerSize().x;
      var viewportHeight = viewer.viewport.getContainerSize().y;
  
      var zoomX = viewportWidth / imgWidth;
      var zoomY = viewportHeight / imgHeight;
  
      // Choisir le zoom minimum qui montre l'image entière sans zoom excessif
      var zoom = Math.min(zoomX, zoomY);
    
      if(imgWidth > imgHeight && imgWidth < viewportWidth){
  
        zoom = (imgWidth / viewportWidth) - 0.2;
        if(imgHeight * zoom < viewportHeight ){
          viewer.viewport.zoomTo(zoom);
        }
  
      }
      else if(imgWidth <= imgHeight && imgHeight < viewportHeight - 200){
  
        zoom = (imgHeight / viewportHeight) - 0.2 ;
        viewer.viewport.zoomTo(zoom);
        //viewer.viewport.panTo(new OpenSeadragon.Point(0.5, 0.5)); // Centrer    
  
      }
  
  
    });
  
    /* Action au changement de page */
    Visionneuse.addHandler("page", ChangementPage, {});
    Visionneuse.addHandler("full-screen", ChangementPleinEcran, {pageCourante: Visionneuse.currentPage()});
    Visionneuse.addHandler('animation-finish', finAnimation, {} );
    Visionneuse.addHandler('animation-start', debutAnimation, {} );
  
    /* Action à l'apparition d'une image dans la visionneuse */
    Visionneuse.world.addHandler('add-item', function(event) {
      var tiledImage = event.item;
      tiledImage.addHandler('fully-loaded-change', function() {
        var newFullyLoaded = areAllFullyLoaded();
        if (newFullyLoaded !== isFullyLoaded) {
          isFullyLoaded = newFullyLoaded;
        }
        ImageChargee()
      });
    });
  
    /* Une fois l'image chargee */
    function ImageChargee(){
      $('#visio').removeClass('visio-chargement');
      $('#visio').addClass('chargee');
      $('.anim-chargement').remove();
    }
  
    /* Au changement de page */
    function ChangementPage(event, obj){
      var courant = event.page;
      if(courant > 0){
        $('#visio').removeClass('chargee');
        //$(AnimChargement).appendTo($('body'));
      }
    }
  
    /* Au changement de mode plein écran */
    function ChangementPleinEcran(eventSource, fullScreen, userData){
      var courant = Visionneuse.currentPage();
      //MenuVisio.insertAfter($('#visio'));
    }
  
    /* Au début de l'animation */
    function debutAnimation(event, obj){}
  
    /* A la fin de l'animation */
    function finAnimation(event, obj){
    }
  
    // boucle de vérification du chargement complet des images de la visionneuse
    function areAllFullyLoaded() {
      var tiledImage;
      var count = Visionneuse.world.getItemCount();
      for (var i = 0; i < count; i++) {
        tiledImage = Visionneuse.world.getItemAt(i);
        if (!tiledImage.getFullyLoaded()) {
          return false;
        }
      }
      return true;
    }
  
  }  

  function nextNodesUntil($el, selector, includeStop = false) {
    var result = [];
    var current = $el[0].nextSibling;

    while (current) {
        if (current.nodeType === 1 && $(current).is(selector)) {
            if (includeStop) result.push(current);
            break;
        }
        result.push(current);
        current = current.nextSibling;
    }

    return result;
}