function logMsg(section, message){

    console.log(section, ' : ', message)

}

function intersectionObserverLog(message) {

    logMsg('intersectionObserver', message);

}

function intersectionObserverLogVisibility(_id, _visible) {

    if (_visible) {

        intersectionObserverLog(_id + ' is Visible');

    } else {

        intersectionObserverLog(_id + ' is NOT Visible');

    }

}

const intersectionObserverRegistry = new Object();

function setIntersectionObserverRegistry(parametre, valeur)

{

  intersectionObserverRegistry[parametre] = valeur;

}

function getIntersectionObserverRegistry(parametre)

{

  return intersectionObserverRegistry[parametre];

}

function entryVisiblity(_id, _visible) {

    let entry=getIntersectionObserverRegistry(_id);

    if (entry) return entry(_visible);

    return intersectionObserverLogVisibility(_id, _visible)

}

// Create a function that will handle any intersection between some elements and the viewport.

const handleIntersectionObserverEntries = function (entries) {

  entries.forEach(entry => {

    intersectionObserverLog(entry.target.id+' ratio '+entry.intersectionRatio);

    if (typeof entryVisiblity === 'function') entryVisiblity(entry.target.id, entry.isIntersecting);

  });

}

const intersectionObserver = new IntersectionObserver(handleIntersectionObserverEntries,{

		// Dès qu'il y a ne serait-ce qu'un pixel au dessus de la ligne rouge

		// => donc threshold = 1

		threshold: 0,

		// On met la hauteur en pixel entre la fin de l'image et la ligne rouge

		// C'est négatif parce qu'on entre à l'intérieur de l'image. Si le nombre

		// était positif, alors la ligne rouge se retrouverait sous l'image

		rootMargin: '-1px 0px'

	});

function addIntersectionObserverEntry(_id, _func)

{

    let item = document.querySelector('#'+_id);

    if ((item) && (intersectionObserver)) {

        setIntersectionObserverRegistry(_id, _func);

        intersectionObserver.observe(item);

        logMsg('intersectionObserver', 'Add entry for '+ _id);

    }

}