import './_featured-events.scss'
import $ from 'jquery'

const featuredEvents = function() {

    if ($('.events-wrapper').length) {
        let headigHeight = 0;
        let nextHeadigHeight = 0;
        $('.events-wrapper .event').each(function(index) {
            $(this).on('mouseenter', function() {
                $(this).addClass('hover');
                $(this).find('a.cta').addClass('hover');
            }).on('mouseleave', function() {
                $(this).removeClass('hover');
                $(this).find('a.cta').removeClass('hover');
            });

            if (index == 1) {
                headigHeight = $(this).find('a.cta').outerHeight();
                nextHeadigHeight = $(this).next().find('a.cta').outerHeight();

                var that = $(this);

                function calcHeadingHeight() {
                    if (headigHeight > nextHeadigHeight) {
                        that.next().find('a.cta').css({
                            'height': headigHeight,
                        });
                    } else {
                        that.find('a.cta').css({
                            'height': nextHeadigHeight,
                        });
                    }
                }

                window.addEventListener('resize', calcHeadingHeight, true);
                window.addEventListener('load', calcHeadingHeight, true);

            }
        });
    }

};

document.addEventListener('DOMContentLoaded', function() {
    featuredEvents()
}, false);

window.addEventListener('acf/loaded/featured-events', function(e) {
    featuredEvents()
});