image_load

function showNotification(){

    var preItem = document.querySelector(".details__separator")

    var tooltip = document.createElement('p');
    tooltip.id = "tooltip";
    tooltip.style.cssText = "color: #5aa2f4; width:100%; text-align:center; padding:20px 10px; font-weight:bold;";
    tooltip.innerHTML = "Interactive form loaded. Try filling out below.";

    preItem.after(tooltip);

}



// Only start when a scroll event is detected.
window.addEventListener('scroll', function(e) {

    // This is the target which is observed.
    var target = document.querySelector('#imageTemplate');

    if (target) {

        console.log("Observing target.")

        // Observer.
        var observer = new IntersectionObserver(onIntersection,{
            root: null,
            rootMargin: '30px',
            threshold: 0.1
        });

        // Start observing.
        observer.observe(target);

        // Catches visibility changed
        function onIntersection(entries) {
            entries.forEach(entry=>{
                console.log(entry.intersectionRatio)
                target.classList.toggle('visible', entry.intersectionRatio > 0.5);

                // Are we in viewport?
                if (entry.intersectionRatio > 0.5) {
                    // Stop watching
                    console.log('In View. Switching Form.')
                    switchToFormTemplate();
                    showNotification();
                    observer.unobserve(entry.target);
                    entry.target.remove();
                }
            }
            );
        }

    }

}, true);