/* animate css */
AOS.init();

// GET REAL VW HEIGHT OF PAGE!
///////////////////////////////
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);


jQuery(document).ready(function() {
    // Führe die Funktion beim Laden der Seite aus
    fct_sticky_header();

    // Führe die Funktion auch bei jedem Scrollen aus
    jQuery(window).scroll(function(){
        fct_sticky_header();
    });

    // Toggle menu when hamburger is clicked
    jQuery('.hamburger').click(function() {
        jQuery('.menu-mobile_wrapper').toggleClass('open');
        jQuery('.overlay').fadeToggle(); // Zeige oder verstecke das Overlay
        if (jQuery('.menu-mobile_wrapper').hasClass('open')) {
            jQuery('html').css('overflow', 'hidden'); // Verhindert Scrollen
        } else {
            jQuery('html').css('overflow', ''); // Scrollen wieder zulassen
        }
    });

    // Close menu when clicking on the close icon
    jQuery('.close-menu').click(function() {
        jQuery('.menu-mobile_wrapper').removeClass('open');
        jQuery('.overlay').fadeOut(); // Verstecke das Overlay
        jQuery('html').css('overflow', ''); // Scrollen wieder zulassen
    });

    // Close menu when clicking outside the menu
    jQuery(document).click(function(event) {
        var target = jQuery(event.target);
        if (!target.closest('.menu-mobile_wrapper').length && !target.closest('.hamburger').length) {
            jQuery('.menu-mobile_wrapper').removeClass('open');
            jQuery('.overlay').fadeOut(); // Verstecke das Overlay
            jQuery('html').css('overflow', ''); // Scrollen wieder zulassen
        }
    });

    // Stop propagation when clicking inside the menu
    jQuery('.menu-mobile_wrapper').click(function(e) {
        e.stopPropagation();
    });

    // Navi-Menüeintrag öffnen/schließen
    jQuery('.menu-item-has-children > a').click(function(e) {
        if (!jQuery(this).parent().hasClass('open')) {
            // Wenn das Menü nicht geöffnet ist, Standardaktion verhindern und Menü öffnen
            e.preventDefault();
            jQuery('.menu-item-has-children').removeClass("open");
            jQuery('.sub-menu').slideUp('slow');
            jQuery(this).parent().addClass("open");
            jQuery(this).siblings('.sub-menu').slideDown('slow');
        } 
        // Wenn das Menü bereits geöffnet ist, Standardaktion zulassen (Seite öffnen)
    });




    jQuery(document).click(function(e) {
        if (!jQuery(e.target).closest('.menu-item-has-children').length) {
            jQuery('.menu-item-has-children').removeClass("open");
            jQuery('.sub-menu').slideUp('slow');
        }
    });



    var currentHash = window.location.hash.substring(1);
    if (currentHash) {
        var targetDiv = jQuery('#' + currentHash.replace(/\s+/g, '_'));
        if (targetDiv.length) {
            targetDiv.find('.toggler_wrapper').slideDown();
            targetDiv.find('.fct_toggler').addClass("open");
            jQuery('html, body').animate({ scrollTop: targetDiv.offset().top }, 'slow');
        }
    }


    jQuery('.sub-menu a').click(function(e) {
        var targetAnchor = jQuery(this).attr('href').split('#')[1];
        
        if (targetAnchor) {
            targetAnchor = targetAnchor.replace(/\s+/g, '_');

            jQuery('.toggler_wrapper').slideUp('slow');
            jQuery('.menu-item-has-children').removeClass("open");
            jQuery('.sub-menu').slideUp('slow');
            jQuery('.menu-mobile_wrapper').removeClass('open');
            jQuery('.overlay').fadeOut();
            jQuery('html').css('overflow', '');
            jQuery('.fct_toggler').removeClass("open");

            window.history.pushState(null, '', '#' + targetAnchor);

            setTimeout(function() {
                var targetDiv = jQuery('#' + targetAnchor);
                if (targetDiv.length) {
                    jQuery('html, body').animate({ scrollTop: targetDiv.offset().top }, 'slow');

                    targetDiv.find('.toggler_wrapper').slideDown();
                    targetDiv.find('.fct_toggler').addClass("open");
                }
            }, 600);
        }
    });


}); /* ready */



/* Upcoming Event Ticker */
window.addEventListener('load', () => {
    const marqueeElements = document.querySelectorAll('.marquee');
    marqueeElements.forEach((marquee) => {
        const content = marquee.querySelector('.marquee-content');
        const contentWidth = content.offsetWidth;
        const marqueeWidth = marquee.offsetWidth;

        let position = marqueeWidth;
        let speed = 1;

        function animate() {
            position -= speed;
            if (position <= -contentWidth) {
                position = marqueeWidth;
            }
            content.style.transform = `translateX(${position}px)`;
            requestAnimationFrame(animate);
        }

        // Start animation after ensuring the elements are fully loaded
        setTimeout(() => {
            animate();
        }, 300); // Delay added to ensure proper loading

        marquee.addEventListener('mouseenter', () => (speed = 0));
        marquee.addEventListener('mouseleave', () => (speed = 1));
    });
});


// Add the sticky class to the header
function fct_sticky_header() {
    const header = document.getElementById("header_nav");
    const scrollTop = jQuery(window).scrollTop();	
    let sticky = header.offsetTop;

    if (scrollTop > sticky) {
        header.classList.add("sticky");
        jQuery("#header_call").slideUp(400);
    } else if (scrollTop <= 250) {
        header.classList.remove("sticky");
        jQuery("#header_call").slideDown(500);
    }
}

/* toggler */
jQuery(".fct_toggler").click(function(){
    jQuery(this).toggleClass("open");
    jQuery(this).next(".toggler_wrapper").slideToggle();
});





// Pin Info Box
jQuery(".pin").click(function() {
    var $this = jQuery(this);
    jQuery(".pin").removeClass("clicked-once");
    jQuery(".pin_info_wrapper").hide();

    if ($this.hasClass("clicked-once")) {
        $this.parent().find('.pin_info_wrapper').hide();
        $this.removeClass("clicked-once");
    } else {
        $this.addClass("clicked-once");
        let id = jQuery(this).attr("id");
        let data_country_fct = jQuery(this).attr("data-country-fct");
        let data_country = jQuery(this).attr("data-country-name");
        let data_country_name = jQuery(this).attr("data-country-name");
        let data_partner_name = jQuery(this).attr("data-partner-name");
        let data_phone = jQuery(this).attr("data-phone");
        //let data_mail = jQuery(this).attr("data-mail");

        jQuery("#" + data_country_fct + "_wrapper").find(".pin_info_wrapper").remove();
        jQuery("#" + data_country_fct + "_wrapper").append(
            "<div class='pin_info_wrapper'>" +
                "<h3>" + data_country_name + "</h3>" +
                "<h4>" + data_partner_name + "</h4>" +
                "<span><a href='tel:" + data_phone + "'>" + data_phone + "</a></span>" +
                //"<span><a href='mailto:" + data_mail + "'>" + data_mail + "</a></span>" +
                "<span class='mt-4'><a href='mailto:sales@econopak.de' class='cta_primary_small'>Contact</a></span>" + 
                "<div class='pin_info_wrapper_close'>" +
                    "<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'>" +
                        "<path d='M1.4 14L0 12.6L5.6 7L0 1.4L1.4 0L7 5.6L12.6 0L14 1.4L8.4 7L14 12.6L12.6 14L7 8.4L1.4 14Z' fill='#383838'/>" +
                    "</svg>" +
                "</div>" +
            "</div>"
        );
    }
});

// Event listener für das Schließen über "pin_info_wrapper_close"
jQuery(document).on("click", ".pin_info_wrapper_close", function() {
    jQuery(this).closest('.pin_info_wrapper').hide();
    jQuery(".pin").removeClass("clicked-once");
});

// Event listener für Klicks außerhalb des "pin_info_wrapper"
jQuery(document).click(function(event) {
    if (!jQuery(event.target).closest('.pin, .pin_info_wrapper').length) {
        jQuery(".pin_info_wrapper").hide();
        jQuery(".pin").removeClass("clicked-once");
    }
});

// Verhindert, dass Klicks innerhalb des "pin_info_wrapper" das Schließen auslösen
jQuery(document).on("click", ".pin_info_wrapper", function(event) {
    event.stopPropagation();
});





// Highlight und Mouseover-Effekt für die Pins und alle zugehörigen Länder eines Kontinents hinzufügen
jQuery(".country_wrapper_infobox").on("mouseover", function() {
    // Finde das Pin-Element im Elternelement und greife auf das `data-country` und `data-continent`-Attribut zu
    let countryId = jQuery(this).find(".pin").attr("data-country");
    let continent = jQuery("#" + countryId).attr("data-continent");

    // Wenn das Land einem Kontinent zugeordnet ist, highlighten wir alle Länder dieses Kontinents
    if (continent) {
        jQuery('[data-continent="' + continent + '"]').addClass("highlight");
    } else {
        // Highlight nur das entsprechende Land im SVG
        jQuery("#" + countryId).addClass("highlight");
    }
});




jQuery(".country_wrapper_infobox").on("mouseleave", function() {
    // Finde das Pin-Element im Elternelement und greife auf das `data-country` und `data-continent`-Attribut zu
    let countryId = jQuery(this).find(".pin").attr("data-country");
    let continent = jQuery("#" + countryId).attr("data-continent");

    // Entferne das Highlight von allen Ländern desselben Kontinents, wenn es einen gibt
    if (continent) {
        jQuery('[data-continent="' + continent + '"]').removeClass("highlight");
    } else {
        // Entferne das Highlight nur vom entsprechenden Land im SVG
        jQuery("#" + countryId).removeClass("highlight");
    }
});





// Event-Listener für das SVG-Land hinzufügen, um alle Länder eines Kontinents zu highlighten
jQuery(".country").on("mouseover", function() {
    // Finde das `data-continent`-Attribut des Landes
    let continent = jQuery(this).attr("data-continent");

    // Highlight alle Länder desselben Kontinents
    jQuery('[data-continent="' + continent + '"]').addClass("highlight");

    // Optional: Wenn du möchtest, dass auch der Pin hervorgehoben wird, falls es einen gibt
    let countryId = jQuery(this).attr("id");
    jQuery(".country_wrapper_infobox").find(".pin[data-country='" + countryId + "']").addClass("highlight");
});





jQuery(".country").on("mouseleave", function() {
    // Finde das `data-continent`-Attribut des Landes
    let continent = jQuery(this).attr("data-continent");

    // Entferne das Highlight von allen Ländern desselben Kontinents
    jQuery('[data-continent="' + continent + '"]').removeClass("highlight");

    // Optional: Entferne auch das Highlight vom Pin, falls es einen gibt
    let countryId = jQuery(this).attr("id");
    jQuery(".country_wrapper_infobox").find(".pin[data-country='" + countryId + "']").removeClass("highlight");
});




// Highlight und Mouseover-Effekt für die Länder (Pin-Farbe ändern oder Spring-Effekt)
jQuery(".country").on("mouseover", function() {
    // Hole die ID des Landes
    let countryId = jQuery(this).attr("id");
    
    // Finde den zugehörigen Pin und füge die Klasse 'highlighted' hinzu
    jQuery(".pin[data-country='" + countryId + "']").addClass("highlighted");
});

jQuery(".country").on("mouseleave", function() {
    // Hole die ID des Landes
    let countryId = jQuery(this).attr("id");
    
    // Entferne die Klasse 'highlighted' vom zugehörigen Pin
    jQuery(".pin[data-country='" + countryId + "']").removeClass("highlighted");
});