var Visionneuse = Visionneuse2 = false, Annotations, Index;

let mode = Param('mode')

if(mode){
  Mode = mode;
}

$(document).ready(function(){

  /*$.ajax({
    url: '/recherches-en-cours/ItinerairesThierry/index.json',
    success: function(json){
      Index = json;
    }
  })*/

  let resizeTimer;

  $(window).on("resize", function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
          if (Mode == 'fiches') {
              MajFiches();
          }
      }, 450); // délai en ms après la fin du resize
  });

  $.fn.dataTable.ext.type.search.string = function (data) {
      return !data
          ? ''
          : data.toString()
                .normalize('NFD')
                .replace(/[\u0300-\u036f]/g, '')
                .toLowerCase();
    };
  
    window.onhashchange = function() {
      window.setTimeout(function(){
        if (!window.Location.hash && $('#modal').is('show')) {
          $('#modal .btn-close').trigger('click');
        }  
      },2000)
   };

  InitTableurCorpus();
   
  const Modal = new bootstrap.Modal(document.getElementById('modal'))

  $('#modal').on('hidden.bs.modal', function (e) {{
    ReinitialiserModal($(this));
  }});

  const modalNumerisations = document.getElementById('modal-numerisations')
  modalNumerisations.addEventListener('shown.bs.modal', event => {    
    const b = $(event.relatedTarget)
    modalVisioNumerisation(b)
  })
  modalNumerisations.addEventListener('hidden.bs.modal', event => {
    Visionneuse2.destroy(); Visionneuse2 = null;
    $("#visio").css('height','');
    $('.menu-sequence').html('');
    $('#modal-numerisations').attr('data-id','');
  })

  function modalVisioNumerisation(b){
    $('#modal-numerisations').attr('data-id',b.attr('data-id'));
    let srcs = []
    b.find('img').each(function(){
      const src = $(this).attr('data-source');
      srcs.push({'type':'image','url':src});
    })      
    
    const liens = $('.carte-corpus-lien-2')
    if(b.attr('data-id') == liens.eq(0).attr('data-id')){
      $('#visio-precedent').addClass('d-none')
    }else { $('#visio-precedent').removeClass('d-none') }
    if(b.attr('data-id') == liens.eq((liens.length - 1)).attr('data-id')){
      $('#visio-suivant').addClass('d-none')
    }else { $('#visio-suivant').removeClass('d-none') }    
    $.ajax({
      url: b.attr('href')+'/annotations',
      dataType: 'json',
      success:function(json){
        Annotations = json;
        InitVisionneuse2(srcs);
      }
    }) 
    $('#menu-visio .legende-numerisations').html('<span class="">'+b.attr('data-id')+'</span>')   
  }

  $('body').on('click','.menu-mode .btn',function(e){
    e.preventDefault();
    const b = $(this);
    $('.menu-mode .btn').removeClass('active');
    b.addClass('active');
    const mode = $.trim(b.text());
    if(mode != 'liste'){
      $('.tableur-donnees').addClass('d-none');
      $('.liste-fiches').removeClass('d-none');
      if(mode == 'fiches'){
        Mode = 'fiches';
        MajFiches();
      }
      if(mode == 'textes'){
        Mode = 'textes';
        MajTextes();
      }
    }else{
      Mode = 'liste';
      $('.tableur-donnees').removeClass('d-none');
      $('.liste-fiches').addClass('d-none');      
    }
  });

  $('body').on('click','.btn-doc-pdf',function(e){
    const b = $(this);
    const html = b.closest('.piece-transcription').find('.transcription-normalisee').html();
    const contenuPdf = htmlToPdfmake(html);
    const id = b.closest('.piece-transcription').find('.carte-corpus-lien-2').attr('data-id')
    const row = Table.rows(function(index, data, node) {
        return data.identifiant === id;
    }).data()[0];    
    const doc = {
        content: [],
        styles: {},
        defaultStyle: {},
        pageMargins: [40, 40, 40, 40]
    };    
    GabaritPDF(doc,[row],[]);
    pdfMake.createPdf(doc).download(id+'-transcription-INHA.pdf');
  });

  $('body').on('click','.carte-corpus-lien',function(e){

    e.preventDefault();
    var b = $(this);
    var m = $('#modal');
    var href = b.attr('href');
    let id = href.replace(/.+\/([^/]+)$/,'$1');
    let sources = [];
    b.find('img').each(function(){
      let s = $(this).attr('src');
      s = s.replace(/https:\/\/digital\.inha\.fr\/iiifserver\/iiif-img\/2\/([^\/]+)\/([^\/]+)\/([^\/]+)\/0\/default.jpg/,'https://digital.inha.fr/iiifserver/iiif-img/2/$1/$2/full/0/default.jpg');
      sources.push({"type":"image","url":s})
    });
    Modal.show();
    let num = b.attr('data-id')
    m.attr('data-id',num);
    let titre = b.closest('.carte-corpus-infos').find('.corpus-infos .titre-document').text()
    m.find('.modal-title').html(titre);
    m.find('.btn-document').text(num).attr('href',href)

    $.ajax({
      url: href,
      success: function(html){
        let page = $(html).find('.page-document');
        let visio = $(html).find('.numerisation');
        //let nav = $(html).find('.nav-pages');
        let index = $(html).find('.bloc-index');
        let volets = $(html)
        m.find('.modal-body .zone-volets').append(page);
        m.find('.modal-body .zone-volets').append(visio);
        //$('.modal-body .zone-volets').append(nav);
        m.find('.modal-body .zone-volets').append(index);
        window.setTimeout(function(){
          InitVisionneuse(sources);
          //PaginationTranscription(1);          
        },300)
      }
    })
    window.location.hash = id
  }); 


  $('body').on('click','.btn-filtre',function(e){
    let b = $(this);
    let p = b.closest('.dropdown-menu');
    let c = p.attr('data-champ');
    let t = b.attr('data-valeur');
    Table.column('pays:name').search('');
    Table.column('date:name').search('');
    Table.column(c+':name').search(t).draw();
    //$('.retirer-filtre').closest('.btn').remove();
    //$('<span class="btn btn-sm bg-light ms-2 d-flex align-items-center" data-champ="'+c+'" data-valeur="'+t+'">'+t+'<button type="button" class="btn-close retirer-filtre ms-2" style="font-size: 12px;" aria-label="Close"></button></span>').insertAfter(b.closest('.dropdown'))
  })

  $('body').on('click','.retirer-filtre',function(e){
    let b = $(this);
    let p = b.closest('.btn');
    let c = p.attr('data-champ');
    let t = b.attr('data-valeur');
    Table.column(c+':name').search('').draw();
    p.remove();
  })

  $('body').on('click','.btn-nav-corpus button.btn',function(e){
    let b = $(this);
    let id = b.closest('.modal').attr('data-id');
    let liste = $('.liste-fiches a');
    let c = liste.filter('[data-id="'+id+'"]');
    let n = liste.index(c);
    ReinitialiserModal();
    if(b.is('.btn-precedent')){
      liste.eq((n - 1)).click();
    }else if(b.is('.btn-suivant')){
      liste.eq((n + 1)).click();
    }
  })

  $('body').on('click','.btn-vue-transcription',function(){
    const b = $(this);
    const p = b.closest('.carte-corpus');
    p.toggleClass('contenu-visible')
  });

  $('body').on('click','.btn-nav-num',function(){
    const b = $(this);
    const nav = b.attr('data-nav') * 1;
    const id = $('#modal-numerisations').attr('data-id');
    const c = $('.carte-corpus-lien-2').filter('[data-id="'+id+'"]');
    let s = 
          nav == 1 
          ? c.closest('.carte-corpus').nextAll('.carte-corpus').eq(0).find('.carte-corpus-lien-2')
          : c.closest('.carte-corpus').prevAll('.carte-corpus').eq(0).find('.carte-corpus-lien-2');

    s = 
          s.length
          ? s
          : nav == 1 
            ? c.closest('.trio').nextAll('.trio').eq(0).find('.carte-corpus').eq(0).find('.carte-corpus-lien-2')
            : c.closest('.trio').prevAll('.trio').eq(0).find('.carte-corpus').eq(2).find('.carte-corpus-lien-2');      

    Visionneuse2.destroy(); 
    $("#visio").css('height','');
    $('.menu-sequence').html('');
    modalVisioNumerisation(s);
  });

  $('body').on('click','.btn-annees',function(){
    //$('.calendrier-annees').toggleClass('d-flex d-none')
  });

  $('body').on('click','.btn-annee',function(){
    const b = $(this);
    if(b.is('.actif')){
      Table.column('date:name').search('').draw();
      b.removeClass('actif')
      //.find('span').addClass('d-none')
    }else{
      $('.btn-annee.actif').removeClass('actif')
      //.find('span').addClass('d-none');
      const v = b.attr('data-annee');
      if(v == '?'){
        Table.column('date:name').search('^$',true, false).draw();
      }else{
        Table.column('date:name').search(v).draw();
      }
      b.addClass('actif')
      //.find('span').removeClass('d-none');
    }
  });

  $('body').on('click','.btn-entite',function(){
    const b = $(this);
    let v = b.find('.btn-entite-texte').text();
    let t = b.closest('.dropdown-menu,.liste-entites').attr('data-type');
    if(b.is('.actif')){
      Table.column(t+':name').search('').draw();
      b.removeClass('actif')
    }else{
      BoutonsFiltrer(t,v);
      $('.btn-entite.actif').removeClass('actif');
      b.addClass('actif');
      $('.liste-entites').addClass('d-none');
      $('.btn-entites.actif').removeClass('actif');
    }
  })

$('.btn-entites').on('click', function(e) {
  e.stopPropagation();
  const b = $(this);
  const type = b.attr('data-type');
  $('.liste-entites').not('.liste-entites-'+type).addClass('d-none');
  $('.liste-entites-'+type).toggleClass('d-none');
  $('.btn-entites').not('[data-type="'+type+'"]').removeClass('actif')
  $(this).toggleClass('actif')
});

$(document).on('click', function(e) {
  if (!$(e.target).closest('.liste-entites').length) {
    $('.liste-entites').addClass('d-none');
    $('.btn-entites').removeClass('actif');
  }
});  

  $('body').on('click','.tag-entite-index',function(e){
    e.preventDefault();
    const b = $(this);
    const t = b.attr('data-type')
    let v = b.attr('data-bs-title').split(' : ').length > 1 ? b.attr('data-bs-title').split(' : ')[1] : b.attr('data-bs-title')
    BoutonsFiltrer(t,v)
    const tooltip = bootstrap.Tooltip.getInstance(this);
    if (tooltip) {
      tooltip.hide();
    }
    $('html, body').animate({ scrollTop: 0 }, 400);
  })


})

  function BoutonsFiltrer(t,v){
    t = t.replace('organisation','organisme')
    Table.columns().every(function(index) {
      const searchValue = this.search();      
      const colName = this.settings()[0].aoColumns[index].name;
      if (searchValue) {        
          Table.column(colName+':name').search('').draw();
      }
    });  
    Table.column(t+':name').search(v).draw();
  }


function ReinitialiserModal(m){
  m.find('.modal-body .zone-volets, .modal-title').html('');
  if(Visionneuse){
    Visionneuse.destroy(); 
    Visionneuse = false;
  }
  if(Visionneuse2){
    Visionneuse2.destroy(); 
    Visionneuse2 = false;
  }  
  history.replaceState(null, '', window.location.pathname + window.location.search);  
}

function InitTableurCorpus(){

  var requete = Json;
  
  Table = $('#tableur-fiches').DataTable({
    ajax: requete,
    columns: [
        {data: 'identifiant', name: 'identifiant', title:'identifiant'},
        {data:'texte', name: 'texte', title: 'texte', searchable: true, visible: true, render:function(data, type, row, meta){
          if('filter'==type){
            return row['identifiant']+' | '+data;
          }
          return data;
        }},
        {data:'titre', name: 'titre', title: 'titre',width:'300px', searchable: false},
        {data:'pays', name: 'pays'},
        {data:'date', name: 'date'},
        {data: 'vignettes', name: 'vignettes', title: 'vignettes', className: 'non-export' ,visible: false, searchable: false, render: function(data, type, row, meta){
                let html = '';
                $.each(data,function(n,v){
                    html += FmtVignette(v,n,80);
                });
                return '<div>'+html+'</div>'
        }},
        {data:'texte', name: 'texte', title: 'texte', searchable: true, visible: true, render:function(data, type, row, meta){
          if('filter'==type){
            return row['identifiant']+' | '+data;
          }
          return data;
        }}        
        /*
        {data:'titre', name: 'titre', title: 'titre',width:'300px', searchable: false},
        {data:'date', name: 'date', title: 'date', render:function(data, type, row, meta){
          if('sort' == type){
            if(data.length == 0){
              return 'z'
            }else{
              return data.split(';')[0]
            }
          }
          return data;
        }},
        {data:'personnes', name: 'personnes', title: 'personnes',searchable: true},
        {data:'organismes', name: 'organismes', title: 'organismes',searchable: true},
        {data:'lieux', name: 'lieux', title: 'lieux',searchable: true},
        {data:'texteNormalise', name: 'texte', title: 'texte', searchable: true, visible: true, render:function(data, type, row, meta){
          if('filter'==type){
            return row['identifiant']+' | '+data;
          }
          return data;
        }},*/
    ],
    paging: false,
    pageLength: 100,
    lengthMenu: [ [20,50, 100, 400, -1], ["par 20", "par 50", "par 100", "par 400", "Tous"] ],
    order: [[ 0, 'asc' ]],
    processing: true,
    dom: "<'bloc-tableur bg-light'"
            +"<'recherche-papier-texte d-flex justify-content-center mt-3 w-100'f>"
            +"<'text-center'i>"         
              +"<'liste-fiches d-flex flex-grow-1 align-items-start justify-content-center px-1 bg-light graphiklight mt-0'>"
            +"<'mt-1 tableur-donnees container'"
              +"<''tr>"
            +">"
            +"<'filtres-2 graphiklight position-relative d-flex justify-content-center align-items-center mt-0 pb-0 pt-0'"
              +"<'me-3'l>"
            +">"
          +'>'
          ,
    columnDefs: [
        { targets: '_all', className: 'border' }
    ],
    language: {
      decimal:"",
      emptyTable:"Aucune donnée.",
      info:"<span>_TOTAL_ voyage?</span>",
      infoEmpty: "0 voyage",
      infoFiltered: "",
      infoPostFix: "",
      thousands:",",
      lengthMenu:"Afficher _MENU_ ",
      loadingRecords: "Chargement...",
      processing:"<div style=\"\">Opération en cours...</div>",
      search:"",
      searchPlaceholder:"texte...",
      zeroRecords:"<div class=\"alert-secondary mx-2 p-5\">Aucun résultat</div>",
      paginate: { previous: '‹', next:'›' },
    },
    fnInfoCallback: function( config, debut, fin, max, total, pre ) {
      //let texte = (total != max) ? ' / '+max : ''
      //return total+texte+' lettre'+(max>1?'s':'');
      
      let s = (total > 1) ? 's' : '';
      let texte = [];
      const table = new $.fn.dataTable.Api(config);
      table.columns().every(function() {
          const index = this.index();
          const search = this.search();
          const colName = this.settings()[0].aoColumns[index].name;
          let note = lienref = '';
          if(Index){
            note = Index[colName]?.find(e => e.Terme === search)?.Notehistorique ?? ""; 
            lienRef = Index[colName]?.find(e => e.Terme === search)?.Lienreferentiel ?? "";
            lienRef = lienRef.length ? `<div class="${note.length?'border-top mt-2':''} pt-1 text-end text-secondary">→ <a class="texte-rouge-INHA" href="${lienRef}" target="ext" style="max-width: 80%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;">${lienRef.split('/')[2]}</a></div>` : ''  
            if(note.length || lienRef.length){
              note = `<div class="border bg-white ${note.length?'p-4':'p-2'} bg-white text-start text-secondary" style="font-size: 13px; width: 490px;  font-family: graphik_regular; margin-bottom: -1.35rem; z-index: 1; line-height: 1.3;">${note} ${lienRef}</div>`
            }
          }          
          if (search) {
              if(colName == 'pays'){
                texte[0] = '<div class="d-flex align-items-center position-relative">'+`<span>en <span style="font-family: graphik_regular;">${search}`+'</span></span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'                
              }
              if(colName == 'date'){
                texte[1] = '<div class="d-flex align-items-center position-relative">'+(search=='^$'?`<span>sans date définie`:`<span>daté? de <span style="font-family: graphik_regular;">${search}`)+'</span></span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'                
              }
              if(colName == 'personnes'){

                texte[2] = '<div class="d-flex flex-column justify-content-center align-items-center" style="max-width: 40px; min-width: 400px;"><div class="d-flex align-items-center position-relative"><span>citant <span style="font-family: graphik_regular;">'+search+'</span></span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'+note+'</div>';  
                             
              }
              if(colName == 'organismes'){
                texte[3] = '<div class="d-flex align-items-center position-relative"><span>citant l’organisme <span style="font-family: graphik_regular;">'+search+'</span></span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'                
              }
              if(colName == 'lieux'){
                texte[4] = '<div class="d-flex align-items-center position-relative"><span>citant le lieu <span style="font-family: graphik_regular;">'+search+'</span></span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'                
              }
              if(colName == 'texte'){
                texte[5] = '<div class="d-flex align-items-center position-relative"><span>contenant "'+search+'"</span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="'+colName+'"></button></div>'                
              }
          }          
      });
      if(table.search()){
        texte[10] = '<div class="d-flex align-items-center position-relative"><span>contenant le texte « '+table.search()+' »</span><button class="btn btn-close position-absolute" style="right: -2rem;" data-col="recherche"></button></div>';
      }
      
      return (pre.replace(/^0/,'aucune')+''+texte.join(' ')).replace(/\?/g,s);

    },
    "initComplete": function( settings, json ) {

      $('.dt-info').addClass('d-flex flex-column align-items-center justify-content-center mx-auto px-2 py-1 pt-2 mt-3 bg-transparent').css({'font-size':'25px','font-family':'graphiklight','font-weight':'normal'});
      
      let champRech = $('.dt-search');
      champRech.addClass('d-flex align-items-stretch');
      champRech.find('input').removeClass('form-control-sm').addClass('rounded-0 rounded-end ms-0').css({'width':'300px','box-shadow':'none','height':'42px'});
      champRech.find('label').addClass('d-flex align-items-stretch');
      let bloc = 
      '<div class="input-group justify-content-center position-relative" style="width: auto;">'
        +'<span class="input-group-text" style="font-size: 14px">Rechercher dans le texte des transcriptions</span>'
        +'<span class="input-group-text px-1 bg-white position-absolute end-0 top-0 bottom-0 border-0" style="margin: 1px; min-width: 1.7rem"><button class="btn btn-close d-none btn-retirer-recherche" style="font-size: 11px;"></button></span>'
      +'</div>';
      bloc = $(bloc);
      bloc.find('.input-group-text').eq(0).after(champRech)
      bloc.appendTo($('.recherche-papier-texte'))

      InitFiltresCorpus();

      $('.liste-fiches').attr('id','liste-fiches');
      $('.menu-mode').appendTo($('.filtres-1'));
      //$('.calendrier-annees').appendTo($('.filtres-1 div').eq(0))      
      window.setTimeout(function(){
        
        /*let h = window.location.hash.replace('#','');
        if(h.length){
          let c = $('a[data-id="'+h+'"]');
          if(c.length){
            c.click();
          }
        }*/
        
        $('.cache-tableau').remove();

        $.each(['personne','organisme','lieu'],function(n,c){
          const v = Param(c);
          if(v){
            BoutonsFiltrer(c,v)
            return false;
          }
        });


      },100);

    }
  });

  new DataTable.Buttons(Table, {
      buttons: [
        {
            extend: 'csv',
            className: 'btn-sm bg-white text-body border border-secondary p-1 btn-export px-2',
            text: 'csv',
            filename: 'Itineraires_Thierry',
            fieldSeparator: ';',
            charset: 'utf-8',
            fieldBoundary: '"',
            escapeChar: '"',
            newline: '\r\n',
            bom: true,
            filename: function () {
              const d = new Date();
              const pad = n => String(n).padStart(2, '0');
              const horodatage =
                  d.getFullYear() +
                  pad(d.getMonth() + 1) +
                  pad(d.getDate()) + '_' +
                  pad(d.getHours()) +
                  pad(d.getMinutes());
              const filtres = getFiltresActifsCourts(Table);
              return [
                  'ItinerairesThierry',
                  filtres || null,
                  horodatage
              ]
              .filter(Boolean)
              .join('_');
            },            
            exportOptions: {
                columns: ':not(.non-export)',
                modifier: {
                    search: 'applied',
                    order: 'applied'
                },   
                format: {
                  body: function(data, row, column, node) {
                      const txt = $('<div>').html(data).text();
                      return txt
                          .replace(/\n/g, ' ')
                          .replace(/\s+/g, ' ')
                          .trim();
                  }
              }                             
            }
        },
        /*{
            extend: 'copy',
            className: 'btn-sm bg-white text-secondary border p-1 btn-export',
            text: 'copier',
            exportOptions: {
                columns: ':not(.non-export)'
            }
        },*/
        {
            extend: 'excelHtml5',
            className: 'btn-sm bg-white text-body border border-secondary p-1 btn-export px-2',
            text: 'xslx',
            messageTop: function () {
                const filtres = getFiltresActifs(Table);
                return ['Itinéraires Thierry', filtres.join(' ; ')]
                    .filter(Boolean)
                    .join(' — ');
            },            
            filename: function () {
              const d = new Date();
              const pad = n => String(n).padStart(2, '0');
              const horodatage =
                  d.getFullYear() +
                  pad(d.getMonth() + 1) +
                  pad(d.getDate()) + '_' +
                  pad(d.getHours()) +
                  pad(d.getMinutes());
              const filtres = getFiltresActifsCourts(Table);
              return [
                  'ItinerairesThierry',
                  filtres || null,
                  horodatage
              ]
              .filter(Boolean)
              .join('_');
          },
            exportOptions: {
                columns: ':not(.non-export)'
            }
        },
        {
            extend: 'pdfHtml5',
            className: 'btn-sm bg-white text-body border border-secondary p-1 btn-export px-2',
            text: 'pdf',
            exportOptions: {
                columns: ':not(.non-export)'
            },
            orientation: 'portrait', 
            pageSize: 'A4',
            customize: function(doc){
              const rows = Table.rows({ search: 'applied' }).data().toArray(); 
              const filtres = getFiltresActifs(Table);
              GabaritPDF(doc,rows,filtres); 
            }             
        },
        {
            text: 'json',

            className: 'btn-sm bg-white text-body border border-secondary p-1 btn-export px-2',

            action: function (e, dt, node, config) {

                // récupération des données filtrées + triées
                const data = dt
                    .rows({
                        search: 'applied',
                        order: 'applied'
                    })
                    .data()
                    .toArray();

                // génération JSON formaté
                const json = JSON.stringify({
                    documents: data
                }, null, 2);

                // horodatage
                const d = new Date();

                const pad = n => String(n).padStart(2, '0');

                const horodatage =
                    d.getFullYear() +
                    pad(d.getMonth() + 1) +
                    pad(d.getDate()) + '_' +
                    pad(d.getHours()) +
                    pad(d.getMinutes());

                // filtres courts
                const filtres = getFiltresActifsCourts(dt);

                // nom fichier
                const filename = [
                    'ItinerairesThierry',
                    filtres || null,
                    horodatage
                ]
                .filter(Boolean)
                .join('_') + '.json';

                // création blob
                const blob = new Blob(
                    [json],
                    {
                        type: 'application/json;charset=utf-8'
                    }
                );

                // téléchargement
                const url = URL.createObjectURL(blob);

                const a = document.createElement('a');

                a.href = url;
                a.download = filename;

                document.body.appendChild(a);

                a.click();

                document.body.removeChild(a);

                URL.revokeObjectURL(url);
            }
        }        
      ]
  })

  Table.buttons().container().appendTo( '.exporter' );

  const input = $('#tableur-fiches_wrapper input');
  input.off('.DT');

  input.on('input', function () {
      Table.search('');
      Table.column('texte:name').search(this.value).draw();
  });

  Table.on( 'draw', function () {

    if('fiches' == Mode){
      MajFiches();
    }
    else if('textes'==Mode){
      MajTextes();
    }
    else if('liste'==Mode){
      $('.tableur-donnees').removeClass('d-none');
      $('.liste-fiches').addClass('d-none');
      SurlignerRecherche();      
    }    

    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')

    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl,{
      trigger: 'hover',
      container: 'body',
      placement: 'bottom',
    }))

    const tooltipTriggerList2 = document.querySelectorAll('[data-bs-toggle="tooltip-2"]')

    const tooltipList2 = [...tooltipTriggerList2].map(tooltipTriggerEl2 => new bootstrap.Tooltip(tooltipTriggerEl2,{
      trigger: 'hover',
      container: 'body',
    }))

  });
}

function ParametreRecherche(c){
  const v = Param(c);
  if(v){
    return {search: v};
  }
  return {};
}

function imageToBase64(url, callback) {
    const img = new Image();
    img.crossOrigin = 'anonymous';

    img.onload = function () {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);

        callback(canvas.toDataURL('image/png'));
    };

    img.src = url;
}

function FmtVignette(v,n,l){

  let position = n > 0 ? 'position-relative' : 'position-relative'
  let decal = n > 0 ? (l - 15) : 0

  return '<span class="bloc-vignette d-inline-block '+position+'" style="/*margin-left: '+(15 * n)+'px; margin-top: -'+(15 * n)+'px;*/ margin-left:-'+decal+'px; z-index : '+(10 - n)+'; border: 1px solid #aaa; border-image: linear-gradient(#999, #ccc, #666) 20; opacity: 0.7; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);"><img data-coord="" data-source="'+v.source+'" class="d-inline-block" src="https://digital.inha.fr/iiifserver/iiif-img/2/'+v.id+'/full/120,/0/default.jpg" style="width: 60px; height: ;" /></span>';
}

function FmtBalises(data){
  let trs = '' 
  $.each(data,function(n,elm){
    trs += '<tr><td class="px-0 py-1">'+data[n][0]+'</td><td class="px-0 py-1 text-end">'+data[n][1]+'</td></tr>'
  })
  return '<table class="table border-top mb-0" style="font-size: 12px;">'+trs+'</table>'
}

function FmtAnneeDebutFin(date,type){
    if (!date) return null;
    var dates = date.split(';');
    var t = (type == 'debut') ? 0 : dates.length - 1
    return parseInt(dates[t].substring(0, 4));
}

// màj textes
function MajFiches(){

  $('.tableur-donnees').addClass('d-none');
  var liste = $('.liste-fiches');
  liste.removeClass('px-1').addClass('m-0')
  liste.show().html('');
  var lignes = Table.rows({page:'current',order:'applied',search:'applied'}).data();

  var div = $('<div class="cartes-textes d-flex flex-wrap justify-content-center align-items-stretch w-100" />');

  for(i=0;i<lignes.length;i++){
    const q = Math.floor($(window).width() / 550)
    if(i%q == 0){
      let style = lignes.length < 3 ? `/*max-width: ${450 * lignes.length}px;*/` : '';
      div.append($(`<div class="trio d-flex flex-wrap justify-content-center align-items-stretch w-100 border-top" style="${style}" />`))
    }

    var ligne = $(lignes[i])[0];
    let colIndex = Table.column('vignettes:name').index();
    let vignettes = '';
    $.each(ligne.vignettes,function(n,v){
      vignettes += FmtVignette(v,n,60);
    });

    let nbrVignettes = ligne.vignettes.length;
    let classe = (['1994_09_TR','1995_06_TR',,'1998_09_TR-AZ'].indexOf(ligne.identifiant) > -1) ? 'demi' : ''

    let classe1 = ( '1978_08-09_GE-AM' == ligne.identifiant) ? 'border border-2 border-dark' : '';
    let hauteurVignettes = 0
    $('<div>'+vignettes+'</div>').find('img').each(function(){
      h = parseInt($(this).css('height'));
    });  
     
    var carte = 
    '<div class="carte-corpus border border-top-0 d-flex justify-content-start flex-column" style="">'
        +`
          <div class="flex-grow-1 corpus-texte position-relative d-flex flex-column justify-content-start">            
            <div class="piece-transcription w-100">
              <div class="piece-information d-flex justify-content-between p-0 pb-1 align-items-start" style="">
                <a href="${Serveur}/documents/${ligne.identifiant}" data-bs-toggle="modal" data-bs-target="#modal-numerisations" class="carte-corpus-lien-2 d-flex justify-content-center align-items-center" title="${ligne.identifiant}" data-id="${ligne.identifiant}">
                ${vignettes}
                </a>
                <div class="text-end" style="font-family: graphiklight; line-height: 1.4;">
                  <div class="mt-1 ms-2 carte-titre" style="font-family: graphikmedium;">
                    <div class="my-1">${ligne.titre.split(/, du/).join('</div class="my-1"><div>du')}</div>
                  </div>
                  <div class="mt-2">
                    <a href="${Serveur}/documents/${ligne.identifiant}" class="text-secondary btn btn-sm border py-0 bg-white texte-rouge-INHA bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol">↗ <small>${ligne.identifiant}</small></a>
                    <a href="${ligne.trkb}/edit?pageNr=1" class="d-none" target="tei">${ligne.identifiant}</a>
                  </div>
                </div>
              </div>
              <div class="">
                <button class="btn btn-vue-transcription d-none p-0 m-0 text-secondary border-0 px-2 text-start" style="font-size: 13px;">transcription</button>
              </div>
              <div class="position-relative bg-white p-3 transcription-texte transcription-normalisee border" style="font-family: graphik_regular;">
                ${$(ligne.texte).html()}
              </div>
              <div class="text-end px-0 position-relative d-flex justify-content-end" style="">
                <a class="btn btn-sm mx-0 my-1 py-0 px-1 text-secondary text-decoration-none bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol" href="/recherches-en-cours/ItinerairesThierry/corpus/${ligne.identifiant}/jpg" target="int"><small>JPG</small></a>
                <button class="btn btn-sm mx-0 my-1 py-0 px-1 btn-doc-pdf text-secondary text-decoration-none bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol"><small>PDF</small></button>
                <a class="btn btn-sm mx-0 my-1 py-0 px-1 text-secondary text-decoration-none bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol" target="int" href="/recherches-en-cours/ItinerairesThierry/document/${ligne.identifiant}.tei.xml"><small>TEI</small></a>
                <a class="btn btn-sm mx-0 my-1 py-0 px-1 text-secondary text-decoration-none bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol" target="ext" href="${ligne.tkb}/edit?pageNr=1"><small>TKB</small></a>
                <a class="btn btn-sm mx-0 my-1 py-0 px-1 text-secondary text-decoration-none bord-rouge-INHA-survol bg-rouge-INHA-survol texte-blanc-survol" target="int" href="/recherches-en-cours/ItinerairesThierry/corpus/${ligne.identifiant}.json" style=""><small>Json</small></a>
              </div>
              <div class="" style="line-height: 1.35;">
              </div>
            </div>
          </div>
        `
    +'</div>'

    div.find('.trio').last().append(carte);

  }
  if(lignes.length%3 != 0 && lignes.length > 3){
    for(i=0;i<(3-lignes.length%3);i++){
      div.find('.trio').last().append($('<div class="carte-corpus" />'));
    }
  }

  liste.addClass('mt-3').append(div);

  if(lignes.length == 0){
    var b = $('.btn-page-importer').clone();
    var d = $('<div class="text-light text-center"><div class="mb-3">Aucune donnée trouvée.</div></div>');
    d.append(b);
    liste.find('.cartes-docs').css({'height':'450px'}).addClass('align-items-center').append(d);
  }

  SurlignerRecherche();

}

// màj textes
function MajTextes(){

  $('.tableur-donnees').addClass('d-none');
  var liste = $('.liste-fiches');
  liste.removeClass('px-1').addClass('m-0')
  liste.show().html('');
  var lignes = Table.rows({page:'current',order:'applied',search:'applied'}).data();

  var table = $('<table class="table" style="max-width: 800px; font-size: 13px;"><tbody></tbody></table>');

  for(i=0;i<lignes.length;i++){

    
    var ligne = $(lignes[i])[0];

    var rangee = 
        `
          <tr>
            <td>
                <a href="${ligne.trkb}/edit?pageNr=1" target="tei">${ligne.identifiant}</a>
            </td>
          </tr>
          <tr>
            <td>
                ${$(ligne.texte.replace(/text-body/,'')).html()}
            </td>
          </tr>
        `

    table.find('tbody').append(rangee);

  }

  liste.addClass('mt-3').append(table);

}


// màj fiches
function MajFiches1(){

  $('.tableur-donnees').addClass('d-none');
  var liste = $('.liste-fiches');
  liste.addClass('px-1').removeClass('m-0')
  liste.show().html('');
  var lignes = Table.rows({page:'current',order:'applied',search:'applied'}).data();

  var div = $('<div class="d-flex flex-wrap cartes-docs justify-content-center align-items-start" />');

  for(i=0;i<lignes.length;i++){

    var ligne = $(lignes[i])[0];
    let colIndex = Table.column('vignettes:name').index();
    let vignettes = '';
    $.each(ligne.vignettes,function(n,v){
      vignettes += FmtVignette(v,n,80);
    });
    let nbrVignettes = ligne.vignettes.length;
    let classe = (['1994_09_TR','1995_06_TR',,'1998_09_TR-AZ'].indexOf(ligne.identifiant) > -1) ? 'demi' : ''

    let classe1 = ( '1978_08-09_GE-AM' == ligne.identifiant) ? 'border border-2 border-dark' : '';
    let hauteurVignettes = 0
    $('<div>'+vignettes+'</div>').find('img').each(function(){
      h = parseInt($(this).css('height'));
    });  
    
    let personnes = []
    $.each(ligne.personnes.split(';'),function(n,ent){
      personnes.push('<span class="d-inline-block" style="line-height: 1.15; margin-bottom: 0.22rem; margin-top: 0.22rem;">'+$.trim(ent)+'</span>');
    });    

    let organismes = []
    $.each(ligne.organismes.split(';'),function(n,ent){
      organismes.push('<span class="d-inline-block" style="line-height: 1.15; margin-bottom: 0.22rem; margin-top: 0.22rem;">'+$.trim(ent)+'</span>');
    });    

    let lieux = []
    $.each(ligne.lieux.split(';'),function(n,ent){
      lieux.push('<span class="d-block" style="line-height: 1.15; margin-bottom: 0.22rem; margin-top: 0.22rem;">'+$.trim(ent)+'</span>');
    });  
    
    let titres = []
    const titres2 = ligne.titre.split(/, (?=\d|\[|octobre)/)
    $.each(titres2,function(n,tit){
      if(n > 1) return true;
      const classe = n > 0 ? 'border-top mt-2 pt-2 text-end' : '';
      if(n > 0){
        const tit2 = titres2.slice(1)
        tit = tit2.join(', ')
      }
      titres.push('<span class="d-block '+classe+'" style="line-height: 1.15; margin-bottom: 0.22rem; margin-top: 0.22rem;">'+$.trim(tit)+'</span>');
    });  


    var carte = 
    '<div class="carte-corpus m-2 border d-flex justify-content-center" style="max-width: 280px !important; min-width: 280px !important; ">'
        +'<div class="carte-corpus-infos d-flex flex-column justify-content-start position-relative align-items-center bg-white" style="min-width: 100%;">'
            +'<div class="d-flex carte-corpus-vignettes justify-content-stretch align-items-stretch'+classe+' w-100">'
                +'<a href="'+Serveur+'/corpus/'+ligne.identifiant+'" class="carte-corpus-lien d-flex justify-content-center align-items-center w-100" title="'+ligne.identifiant+'" data-id="'+ligne.identifiant+'">'
                + vignettes
                +'</a>'
            +'</div>' 
            +'<div class="corpus-infos graphik position-relative flex-grow-1 d-flex flex-column justify-content-start text-secondary px-2 pt-1" style="min-width: 100%;">'
                + '<div class="text-body titre-document pb-2 p-0 bg-white" style="font-family: graphik_regular; line-height: 1.38; ">'+titres.join('')+'</div>'
                //+'<hr />'
                //+ligne.description
                +'<div class="d-none donnees-entites">'
                  +(ligne.personnes.length ? '<div class="text-secondary py-2 graphiklight" style="columns: 2;">'+personnes.join(' ')+'</div>':'')
                  +(ligne.organismes.length ? '<div class="text-secondary py-2 graphiklight border-top" style="columns: 2;">'+organismes.join(' ')+'</div>':'')
                  +(ligne.lieux.length ? '<div class="text-secondary py-2 graphiklight border-top" style="columns: 2;">'+lieux.join(' ')+'</div>':'')
                  +'<div class="position-absolute end-0 bottom-0 text-secondary pe-2 d-none" style="font-size: 80%">'
                      +ligne.identifiant
                  +'</div>'
                +'</div>'
            +'</div>'
        +'</div>'
    +'</div>'

    div.append(carte);

  }

  liste.append(div);

  if(lignes.length == 0){
    var b = $('.btn-page-importer').clone();
    var d = $('<div class="text-light text-center"><div class="mb-3">Aucune donnée trouvée.</div></div>');
    d.append(b);
    liste.find('.cartes-docs').css({'height':'450px'}).addClass('align-items-center').append(d);
  }

  SurlignerRecherche();

}

function InitFiltresCorpus(f){

  $('body').on('click','#tableur-fiches_info .btn-close',function(){
    let b = $(this);
    let col = b.attr('data-col');
    b.closest('div').remove();
    if(col == 'date'){
      Table.column('date:name').search('').draw();
      $('.btn-annee.actif').removeClass('actif');
    }
    if(col == 'texte'){ 
      Table.column(col+':name').search('').draw();
    }
    if(col == 'pays'){ 
      Table.column('pays:name').search('').draw();
    }
    if(col == 'recherche'){ 
      //Table.search('').draw();
      //$('#tableur-fiches_filter input').val();
      //$('.btn-retirer-recherche').addClass('d-none');
    }
    $('.highlight').removeClass('highlight');
    //highlightText('carte-corpus', '' )
  })
  
}


function Filtrer(champ){
  $('.filtre').each(function(){
    let b = $(this);
    let c = b.attr('data-champ');
    if(c != champ){
      return true;
    }
    let r = [];
    b.find('.btn-filtre:checked').each(function(){
      let m = $(this).val();
      let t = (m == '?') ? '\s*' : escapeRegex(m);
      r.push(t);
    });
    if(r.length){
      let v = '^('+r.join('|')+')$';
      Table.column(c+':name').search(v,true,false,'').draw();
    }else{
      Table.column(c+':name').search('').draw();
    }
  });
}


function SurlignerRecherche(){
  /*if(Table.column(3).search() !== ''){
    return true;
  }*/
  //removeHighlight(document.getElementById("liste-fiches"));
  /*if(Table.column('texte:name').search() != ''){
      var termes = Table.column('texte:name').search().split(' ');
      for(i=0;i<termes.length;i++){
        var terme = termes[i];
        highlightText('transcription-normalisee', terme );
      };
  }*/
  
  Table.columns().every(function(index) {
    let searchValue = this.search();
    const colName = this.settings()[0].aoColumns[index].name;
    if (searchValue) {        
        if(colName == 'personnes' || colName == 'organismes' || colName == 'lieux'){
            if(colName == 'lieux'){
              searchValue = searchValue.replace(/,.+/,'')
            }
            $(`.transcription-normalisee a[data-entite^="${searchValue}"]`).addClass('resultats-entite');          
        }if(colName == 'date' || colName == 'pays'){
          highlightText('carte-titre', searchValue );
        }        
        else{
          highlightText('carte-corpus', searchValue );
        }
    }
  });  
  
  /*var recherche = Table.search();
  recherche = $.trim(recherche);
  if ( '' != recherche ){
      var termes = Table.search().split(' ');
      for(i=0;i<termes.length;i++){
        var terme = termes[i];
        highlightText(document.getElementById('contenu'), terme );
      };
      $('.donnees-entites').addClass('d-none');
      body.each(function(){
        $(this).closest('.donnees-entites').removeClass('d-none')
      })
  }*/
  /**/

}


var myEfficientFn = debounce(function() {
  var m = $('.modal');
  if(m.is(':visible')){
    var h = $('.modal-body').height();
    var p = Visionneuse.currentPage();
    Visionneuse.destroy();
    var h = $('.modal-body').height();
    m.find('.page-document').css({'height':h+'px'});
    m.find('.numerisation').css({'height':h+'px'});
    InitVisionneuse(Sequence,(p+1));
  }
}, 500);

window.addEventListener('resize', myEfficientFn);

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) func.apply(context, args);
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) func.apply(context, args);
	};
};

function escapeRegex(v) {
    return v.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
}

function Param(p) {
  const urlCourante = new URL(window.location.href);
  const parametres = new URLSearchParams(urlCourante.search);
  if (parametres.has(p)) {
    const v = parametres.get(p);
    return v;
  } else {
    return false;
  }
}

function InitVisionneuse2(Sequence){
  var h = $('#modal-numerisations').find('.modal-body').height();
  $('#visio').css('height',(h - 40)+'px').addClass('chargement');
  const m = $('#modal-numerisations')

  Visionneuse2 = OpenSeadragon({
      id: "visio",
      prefixUrl: "https://digital.inha.fr/visio-iiif/images/",
      tileSources: Sequence,
      initialPage: 0,
      sequenceMode: Sequence.length > 1 ? true : false,
      showReferenceStrip:  false,
      /*referenceStripPosition: "BOTTOM",   // TOP | BOTTOM | LEFT | RIGHT
      //referenceStripSizeRatio: 0.15,      // proportion du viewer (0 → 1)
      referenceStripScroll: "horizontal", // auto | horizontal | vertical
      referenceStripBackgroundColor: "#000",
      referenceStripThumbHeight: 50,      // hauteur des miniatures*/      
      //drawer: ["webgl"],
      useCanvas: false,      
      toolbar: 'menu-visio',
      previousButton: 'btn-nav-temp',
      nextButton: 'btn-nav-temp',
      fullPageButton: "plein-ecran",
      zoomInButton:   "zoom-plus",
      zoomOutButton:  "zoom-moins",
      showHomeControl: false,
      autoHideControls: false,
      immediateRender: true,
      preload: true,
      imageSmoothingEnabled: true,
      maxZoomPixelRatio: 0.5,
      minZoomImageRatio: 0.2,
      maxZoomLevel: 5,
      defaultZoomLevel: 0,
      viewportMargins: {top: 15, bottom: 105, left: 15, right: 15},
      gestureSettingsMouse: {
        clickToZoom: 1,
      },
      showSequenceControl: Sequence.length > 1,
      springStiffness: 4,
      animationTime: 0,
  });

  var isFullyLoaded = false;

  /* Action au changement de page */
  Visionneuse2.addHandler("page", ChangementPage, {});
  Visionneuse2.addHandler("full-screen", ChangementPleinEcran, {pageCourante: Visionneuse2.currentPage()});
  Visionneuse2.addHandler('animation-finish', finAnimation, {} );
  Visionneuse2.addHandler('animation-start', debutAnimation, {} );

  /* Action à l'apparition d'une image dans la visionneuse */
  Visionneuse2.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(){
    m.find('#visio').removeClass('visio-chargement');
    m.find('#visio').addClass('chargee').removeClass('chargement');
    m.find('.anim-chargement').remove();
    AjouterAnnotations(Visionneuse2.currentPage())
  }

  /* Au changement de page */
  function ChangementPage(event, obj){
    var courant = event.page;
    if(courant > 0){
      m.find('#visio').removeClass('chargee');
    }
    Visionneuse2.clearOverlays();
  }

  /* Au changement de mode plein écran */
  function ChangementPleinEcran(eventSource, fullScreen, userData){
    var courant = Visionneuse2.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 = Visionneuse2.world.getItemCount();
    for (var i = 0; i < count; i++) {
      tiledImage = Visionneuse2.world.getItemAt(i);
      if (!tiledImage.getFullyLoaded()) {
        return false;
      }
    }
    return true;
  }

    $.each(Sequence,function(n,img){
      const classe = n == 0 ? 'border-INHA' : ''
      $('.menu-sequence').append($(`<button class="btn ${classe} p-0 border border-2 border-dark mx-1 rounded-0" onclick="SelectionSequence(${n})"><img src="${img.url}" style="max-width: 50px; max-height: 50px; min-width: 25px; min-height: 25px;" /></button>`))
    })



}

function SelectionSequence(n){
  $('.menu-sequence button').removeClass('border-INHA').eq(n).addClass('border-INHA')
  Visionneuse2.goToPage(n)
}

function AjouterAnnotations(n){
      // Créer un div overlay pour cette image
      const overlayDiv = document.createElement('div');
      overlayDiv.className = 'image-overlay';
      //overlayDiv.id = `overlay-${i}`;
      overlayDiv.dataset.imageIndex = i;
      overlayDiv.style.cssText = `
        border: 2px none #fff;
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background: transparent;
        cursor: pointer;
      `;
      
      // BLOQUER LES CLICS POUR EVITER LE ZOOM
      overlayDiv.addEventListener('click', function(event) {
        event.stopPropagation();
        event.preventDefault();
      });

      const item = Visionneuse2.world.getItemAt(0);

      /*const page = Annotations[n].page
      const coord = page.coord.split(',')

      const rect = item.imageToViewportRectangle(0,0,coord[2]*1,coord[3]*1);

      Visionneuse2.addOverlay({
        element: overlayDiv,
        location: rect
      });*/

      const zones = Annotations[n]['zones']

      $.each(zones,function(i,z){

        const zone = zones[i];
        const zoneCoord = zone.coord.split(',')

        const overlayZone = document.createElement('div');
        overlayZone.className = 'image-overlay-ligne';
        overlayZone.dataset.type = zone.type;
        overlayZone.style.cssText = `
          border: 2px none #fff;
          position: absolute;
          box-sizing: border-box;
          background: transparent;
          cursor: pointer;
        `;
        overlayZone.innerHTML = 
          `<div class="position-absolute top-0 end-0 bottom-0 start-0 overlay-ligne-contenu d-flex justify-content-center">
            <div class="overlay-texte">${zone.texte}</div>
            <svg class="overlay-forme d-none" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
              <defs>
                <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
                  <feDropShadow dx="0" dy="4" stdDeviation="16" flood-color="black" flood-opacity="0.8"/>
                </filter>
              </defs>            
              <rect x="10%" y="10%" width="80%" height="80%" stroke="#ccc" fill="#0001" stroke-width="1" filter="url(#shadow)" />
            </svg>
          </div>
          `

        const rectZone = item.imageToViewportRectangle(zoneCoord[0]*1,zoneCoord[1]*1,zoneCoord[2]*1,zoneCoord[3]*1);
        
        Visionneuse2.addOverlay({
          element: overlayZone,
          location: rectZone
        });      


      })


}