// Scroll position where the menu and the first partial view should be displayed
const viewHeight = window.innerHeight;
let viewWidth = window.innerWidth;
const mainElement = document.querySelector('main');
const mainHeight = mainElement.offsetHeight;

const scrollThreshold = mainHeight - viewHeight > 1 ? mainHeight - viewHeight : 1; // Adjust according to the point where you want the partial view to be displayed
let menuVisible = false;
let firstPartialShown = false; // To display the first partial view only once
let isInPartialView = false; // To track if we are in the partial view

$(document).ready(function () {
    scroll();
    $("footer").removeClass("mt-2");

    // Ajustar el tamaño de las imágenes de iconos para móviles
    adjustIconSizes();
});

$(window).on('scroll', function () {
    scroll();
});

$(window).on('resize', function () {
    // Actualiza el ancho de vista y ajusta el tamaño de los iconos
    viewWidth = window.innerWidth;
    adjustIconSizes();
});

// Display corresponding partial views when hovering over menu buttons
$(document).on('mouseenter', '.show-partial', function () {
    const partialViewName = $(this).data('target');
    let target;

    switch (partialViewName) {
        case "Platform":
            target = '#partial-Platform';
            break;
        case "Comprehensive":
            target = '#partial-Comprehensive';
            break;
        case "OperationalImpact":
            target = '#partial-OperationalImpact';
            break;
        case "OnLand":
            target = '#partial-OnLand';
            break;
        default:
            target = null;
    }

    if (target) {
        $('.partial-view').removeClass('show').hide(); // Hide all partial views with smooth animation
        $(target).fadeIn(5).addClass('show'); // Display the corresponding partial view with smooth animation

        if (viewWidth <= 560) {
            // Only move footer for mobile
            moveFooterAfterPartial(target);
        }
    }
    firstPartialShown = true;
    setButtonBorders(partialViewName);
});

// Function to scroll
function scroll() {
    const scrollTop = $(window).scrollTop();
    const titleElement = document.getElementById('menu-title');

    if (viewWidth <= 560) {
        // Show menu on mobile only if scroll threshold is passed
        if (scrollTop > scrollThreshold && !menuVisible) {
            $('.menu-container').addClass('menu-visible').fadeIn(10);
            menuVisible = true;
        }

        // Hide Partial buttons and show Index buttons when scrolling up
        if (scrollTop <= scrollThreshold && isInPartialView) {
            $('#buttons-container .btn').show(); // Show buttons from the Index view
            $('.partial-view #buttons-container .btn').hide(); // Hide buttons from the Partial view
            isInPartialView = false;

            // Remove class to center the title
            titleElement.classList.remove('center-title');

            // Move footer back to the default position for mobile
            moveFooterToDefault();
        }
    } else {
        // Keep the original behavior for desktop
        if (scrollTop > scrollThreshold && !menuVisible) {
            $('.menu-container').fadeIn(10); // Display the menu
            menuVisible = true;
        }

        if (scrollTop > scrollThreshold && !firstPartialShown) {
            $('#partial-OnLand').fadeIn(10).addClass('show'); // Automatically display the first partial view
            firstPartialShown = true;
            setButtonBorders('OnLand');
        }

        // Hide Index buttons and show Partial buttons when scrolling down
        if (scrollTop > scrollThreshold && !isInPartialView) {
            $('#buttons-container .btn').hide(); // Hide buttons from the Index view
            $('.partial-view #buttons-container .btn').show(); // Show buttons from the Partial view
            isInPartialView = true;

            // Add class to center the title (only on desktop)
            if (viewWidth > 560) {
                titleElement.classList.add('center-title');
            }
        }

        // Hide Partial buttons and show Index buttons when scrolling up
        if (scrollTop <= scrollThreshold && isInPartialView) {
            $('#buttons-container .btn').show(); // Show buttons from the Index view
            $('.partial-view #buttons-container .btn').hide(); // Hide buttons from the Partial view
            isInPartialView = false;

            // Remove class to center the title (only on desktop)
            if (viewWidth > 560) {
                titleElement.classList.remove('center-title');
            }
        }
    }
}

// Function to move the footer after the visible partial view (mobile only)
function moveFooterAfterPartial(partialViewSelector) {
    const footer = $('footer.footer');
    const partialView = $(partialViewSelector);

    if (partialView.length && footer.length) {
        partialView.after(footer); // Move the footer to be right after the partial view
    }
}

// Function to move the footer back to its original position (mobile only)
function moveFooterToDefault() {
    const footer = $('footer.footer');
    const mainContainer = $('.container.flex-wrapper-container');

    if (footer.length && mainContainer.length) {
        mainContainer.append(footer); // Move the footer back to its original container
    }
}

// Add a fade-in animation when hovering over buttons
$(document).on('mouseenter', '.show-partial', function () {
    $(this).css({
        transition: 'opacity 0.3s ease-in-out',
        opacity: 1
    });
});

// Set button borders
function setButtonBorders(activeButtonTarget) {
    $('.show-partial').each(function () {
        if ($(this).data('target') === activeButtonTarget) {
            $(this).css('border-color', $(this).data('original-border-color'));
        } else {
            $(this).css('border-color', 'rgba(70, 130, 180, 0.3)');
        }
    });
}

// Save the original border color of each button when the page loads
$(document).ready(function () {
    $('.show-partial').each(function () {
        const originalBorderColor = $(this).css('border-color');
        $(this).data('original-border-color', originalBorderColor);
        $(this).css('border-color', 'rgba(70, 130, 180, 0.3)');
        $(this).css('opacity', 0.7); // Set an initial opacity for the buttons
    });
});

// Function to adjust the size of icons for mobile and desktop
function adjustIconSizes() {
    if (viewWidth <= 576) {
        // Ajustes específicos para dispositivos móviles
        $('.small-icon-image').css({
            width: '20px',
            height: '20px'
        });
    } else {
        // Ajustes específicos para escritorio
        $('.small-icon-image').css({
            width: '30px',
            height: '30px'
        });
    }
}
// Function to hide 

/////GGGGGGGGGGGGGGGGGGGGGGG/////



///**
// * Utility Function for curving shape
// */
//function curve() {
//    // Variables
//    var $curve = document.getElementById("curve");
//    if ($curve != undefined) {
//        var last_known_scroll_position = 0;
//        var defaultCurveValue = 350;
//        var curveRate = 3;
//        var ticking = false;
//        var curveValue;

//        // Handle the functionality
//        function scrollEvent(scrollPos) {
//            if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
//                curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
//                $curve.setAttribute(
//                    "d",
//                    "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
//                );
//            }
//        }

//        // Scroll Listener
//        // https://developer.mozilla.org/en-US/docs/Web/Events/scroll
//        window.addEventListener("scroll", function (e) {
//            last_known_scroll_position = window.scrollY;

//            if (!ticking) {
//                window.requestAnimationFrame(function () {
//                    scrollEvent(last_known_scroll_position);
//                    ticking = false;
//                });
//            }

//            ticking = true;
//        });
//    }
//};

//curve();