temp.js

jQuery(function($) {

    $(document).ready(function(){

        $('.hero-nav-item[data-navname="discover"]').addClass("active");

        $("#discover-text").addClass("in");

        $("#discover-img").addClass("in");

        function slide(navName) {
            $('#hero-content').removeClass();
            $('#hero-content').addClass(navName);

            $('.hero-text.in').addClass('out');
            $('.hero-img.in').addClass('out');

            $('.hero-text').removeClass('in');
            $('.hero-img').removeClass('in');

            setTimeout(function(){
                $("#" + navName + "-text").addClass("in");
                $("#" + navName + "-img").addClass("in");
            }, 500);

            setTimeout(function(){
                $('.hero-text').removeClass('out');
                $('.hero-img').removeClass('out');
            }, 1000);
        }

        function nextOne() {
            $('.hero-nav-item').each(function(){
                if ( $(this).is('.active:last-child') ) {

                    var current = $(this);

                    var upnext = $(this).parent().find(".hero-nav-item:first-child");

                    myVar = setTimeout(function(){

                        $(current).removeClass('active');

                        $(upnext).addClass('active');

                        var navName = $(upnext).attr("data-navname");

                        slide(navName);

                        nextOne();

                    }, 7500);

                } else if ( $(this).hasClass('active') ) {

                    var current = $(this);

                    var upnext = $(this).next();

                    myVar = setTimeout(function(){

                        $(current).removeClass('active');

                        $(upnext).addClass('active');

                        var navName = $(upnext).attr("data-navname");

                        slide(navName);

                        nextOne();

                    }, 7500);

                }
            });
        }

        // if ( ! $('body').hasClass('logged-in') ) {
            nextOne();
        // }

        $('.hero-nav-item').click(function() {
            if ($(window).width() < 600) {
                $('html,body').animate({ scrollTop: $("#hero-content").offset().top }, 'slow');
            }
            $(this).addClass('active').siblings().removeClass('active');
            var navName = $(this).attr("data-navname");
            slide(navName);
            clearTimeout(myVar);
            // if ( ! $('body').hasClass('logged-in') ) {
                nextOne();
            // }

        });

        $('.lpip-hp-inspire-section-option').click(function() {
            $('.lpip-hp-inspire-section-option').removeClass('active');
            $(this).addClass('active');
            if ( $(this).hasClass('educator') ) {
                $('.lpip-hp-section-actions').removeClass('active');
                $('.lpip-hp-section-actions.educator').addClass('active');
            } else if ( $(this).hasClass('parent') ) {
                $('.lpip-hp-section-actions').removeClass('active');
                $('.lpip-hp-section-actions.parent').addClass('active');
            } else {
                $('.lpip-hp-section-actions').removeClass('active');
                $('.lpip-hp-section-actions.admin').addClass('active');
            }
        });

        $("#collect-img, .drag-item").mouseenter(function() {
            clearTimeout(myVar);
        });

        $(document).on("mouseleave", "#collect-img:not(.still-active)", function() {
            setTimeout(function(){
                $(".hero-nav-item[data-navname='design']").addClass('active').siblings().removeClass('active');
                var navName = $(".hero-nav-item[data-navname='design']").attr("data-navname");
                slide(navName);
                clearTimeout(myVar);
                nextOne();
            }, 3000);
        });

        $('iframe').attr('id', 'lpip-hp-video');

        var $videoSrc;
        $videoSrc = $("#lpip-hp-video").attr( "src" );

        setTimeout(function(){
            $("#lpip-hp-video").attr('src','');
        }, 500);

        $(".lp-video-launch").click(function() {
            $("html").addClass("video-modal-open");
            $("#lpip-hp-video").attr('src', $videoSrc);
        });

        $("#lpip-hp-video-box, #lpip-hp-close-video-box-x").click(function() {
            $("#lpip-hp-video").attr('src','');
            $("html").removeClass("video-modal-open");
        });

        $("#lpip-hp-video-box-inner").click(function(e) {
            e.stopPropagation();
        });

        var startingScroll = $(window).scrollTop();
        if (startingScroll <= 500) {
            $(".hero-text-wrap").removeClass("hp-hide");
        } else {
            $(".hero-text-wrap").addClass("hp-hide");
        }

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            if (scroll >= 500) {
                $(".hero-text-wrap").addClass("hp-hide");
            } else {
                $(".hero-text-wrap").removeClass("hp-hide");
            }
        });

        function memberRotate() {
            if ( $(".lpip-hp-member:last-child").hasClass("in") ) {
                $(".lpip-hp-member.in").addClass("current");
                $(".lpip-hp-member.current").removeClass("in");
                $(".lpip-hp-member:first").addClass("in");
                $(".lpip-hp-member.current").removeClass("current");
            } else {
                $(".lpip-hp-member.in").addClass("current");
                $(".lpip-hp-member.current").removeClass("in");
                $(".lpip-hp-member.current").next().addClass("in");
                $(".lpip-hp-member.current").removeClass("current");
            }
        }

        window.setInterval(function(){
            memberRotate();
        }, 5000);

        $(".lp-next-member").click(function() {
            memberRotate();
        });

    });


    // https://codepen.io/ettrics/pen/QbPEeg/
    dragula([
        document.getElementById('1'),
        document.getElementById('2'),
        document.getElementById('3'),
        document.getElementById('4'),
        document.getElementById('5')
    ])

    .on('drag', function(el) {

        // add 'is-moving' class to element being dragged
        el.classList.add('is-moving');

        var parentDiv = document.querySelector(".lpip-cb");

        parentDiv.querySelector(".drag-inner-list").setAttribute("class", "drag-inner-list active");

        document.getElementById("collect-img").setAttribute("class", "hero-img in still-active");
    })

    .on('dragend', function(el) {

        document.getElementById("collect-img").setAttribute("class", "hero-img in");

        // remove 'is-moving' class from element after dragging has stopped
        el.classList.remove('is-moving');

        // add the 'is-moved' class for 600ms then remove it
        window.setTimeout(function() {
            el.classList.add('is-moved');
            window.setTimeout(function() {
                el.classList.remove('is-moved');
            }, 600);
        }, 100);

        var parentDiv = document.querySelector(".lpip-cb");

        parentDiv.querySelector(".drag-inner-list").setAttribute("class", "drag-inner-list");

        if ( ( parentDiv.querySelector("#result-1") != null ) && ( parentDiv.querySelector("#result-2") != null ) ) {
            document.getElementById("cb-result-1").setAttribute("class", "drag-item set-item show");
            document.getElementById("cb-result-2").setAttribute("class", "drag-item set-item show");
            document.querySelector(".lpip-cb").setAttribute("class", "lpip-cb lpip-box drag-column drag-column-in-progress has-4");
        } else if ( parentDiv.querySelector("#result-1") != null ) {
            document.getElementById("cb-result-1").setAttribute("class", "drag-item set-item show");
            document.querySelector(".lpip-cb").setAttribute("class", "lpip-cb lpip-box drag-column drag-column-in-progress has-3");
        } else if ( parentDiv.querySelector("#result-2") != null ) {
            document.getElementById("cb-result-2").setAttribute("class", "drag-item set-item show");
            document.querySelector(".lpip-cb").setAttribute("class", "lpip-cb lpip-box drag-column drag-column-in-progress has-3");
        }

    });

});