//when page is ready, jquery
$(document).ready(function() {

    //when clicked on et__control, toggle mute
    $('.et__control').click(function() {
        //find et__video__embed__holder from parent heierarchy
        var et__video__embed__holder = $(this).closest('.et__video__embed__holder');

        //find video from et__video__embed__holder
        var video = et__video__embed__holder.find('video');

        console.log(et__video__embed__holder);
        console.log(video);

        //if video is muted, unmute
        if (video[0].muted) {
            video[0].muted = false;
            $(this).removeClass('et__muted');

            //find mute class from et__video__embed__holder and add class
            et__video__embed__holder.find('.mute').addClass('hide');

            //find unmute class from et__video__embed__holder and remove class
            et__video__embed__holder.find('.unmute').removeClass('hide');

        }
        //if video is not muted, mute
        else {
            video[0].muted = true;
            $(this).addClass('et__muted');

            //find mute class from et__video__embed__holder and remove class
            et__video__embed__holder.find('.mute').removeClass('hide');

            //find unmute class from et__video__embed__holder and add class
            et__video__embed__holder.find('.unmute').addClass('hide');
        }
    });

    //when clicked on et__fullscreen, toggle fullscreen
    $('.et__fullscreen').click(function() {
        //find et__video__embed__holder from parent heierarchy
        var et__video__embed__holder = $(this).closest('.et__video__embed__holder');

        //find video from et__video__embed__holder
        var video = et__video__embed__holder.find('video');

        //if video is not fullscreen, make fullscreen
        if (video[0].requestFullscreen) {
            video[0].requestFullscreen();
        } else if (video[0].mozRequestFullScreen) {
            video[0].mozRequestFullScreen();
        } else if (video[0].webkitRequestFullscreen) {
            video[0].webkitRequestFullscreen();
        } else if (video[0].msRequestFullscreen) {
            video[0].msRequestFullscreen();
        }
    });

    //when page is scrolling, check if video is in viewport
    $(window).scroll(function() {

        //when et__video__embed__holder is out of viewport, mute video inside it
        $('.et__video__embed__holder').each(function() {
            var et__video__embed__holder = $(this);
            var video = et__video__embed__holder.find('video');

            //if video is out of viewport, mute it
            if (!et__video__embed__holder.isInViewport()) {
                //if video is not muted, mute it
                if (!video[0].muted) {

                    video[0].muted = true;
                    et__video__embed__holder.find('.mute').removeClass('hide');
                    et__video__embed__holder.find('.unmute').addClass('hide');
                }
            }
        });

    });

    //!-------------------------------------------------------------------
    //!RELATED SLIDER CODE-------------------------------------------------
    //!-------------------------------------------------------------------
    //FORMAT STUDIO SCROLL
    var maxRelated = $(".related__studio__list").children().length;
    var currentRelated = 0;

    function moveRelated() {
        for (var i = 0; i < maxRelated; i++) {
            if (currentRelated == i) {
                $($($(".related__studio__list").children())[i]).removeClass("close");
            } else {
                $($($(".related__studio__list").children())[i]).addClass("close");
            }

            //ARROW HIDDEN OR SHOWEN
            if (currentRelated == (maxRelated - 1)) {
                $(".right__arrow.related").addClass("disabled");
            } else {
                $(".right__arrow.related").removeClass("disabled");
            }

            if (currentRelated == 0) {
                $(".left__arrow.related").addClass("disabled");
            } else {
                $(".left__arrow.related").removeClass("disabled");
            }

        }

        //if maxrelated is 1 then remove both arrows
        if (maxRelated == 1) {
            $(".right__arrow.related").addClass("disabled");
            $(".left__arrow.related").addClass("disabled");
        }
    }
    $(".right__arrow.related").click(function() {
        console.log("RIGHT");
        if (currentRelated != (maxRelated - 1)) {
            currentRelated++;
            moveRelated();
        }

    });
    $(".left__arrow.related").click(function() {
        console.log("LEFT");
        if (currentRelated != 0) {
            currentRelated--;
            moveRelated();
        }
    });
    //Move Formats to first one!
    moveRelated();



    //!SIDE MENU FUNCTION
    let isMenuOpen = false;
    $(".menu-close-svg__desktop").click(function() {
        toggleMenu();
    });

    $(".side__nav__link").click(function() {
        toggleMenu();
    });

    function toggleMenu() {
        if (isMenuOpen) {
            hideMenuDesktop();
            playScroll();
        } else {
            showMenuDesktop();
            pauseScroll();
        }
    }

    function showMenuDesktop() {
        if (!isMenuOpen) {
            $(".side__menu__holder__desktop").addClass("show");
            $(".menu-close-svg__desktop").addClass("show");
            $(".menu-svg").addClass("hide");

            isMenuOpen = true;
        }
    }

    function hideMenuDesktop() {
        if (isMenuOpen) {
            $(".side__menu__holder__desktop").removeClass("show");
            $(".menu-close-svg__desktop").removeClass("show");
            $(".menu-svg").removeClass("hide");
            isMenuOpen = false;
        }
    }


    //!MOUSE MOUSE HOVER ANIMATIONS
    //!Mouse Enter and Leave
    $(".splide__arrow").mouseenter(function() {

        $(".mouse__circle").addClass("big");

    });

    $(".splide__arrow").mouseleave(function() {

        $(".mouse__circle").removeClass("big");

    });

    //#CREW   
    $(".sc").mouseenter(function() {

        $(".mouse__circle").addClass("big");

    });

    $(".sc").mouseleave(function() {

        $(".mouse__circle").removeClass("big");

    });
    //#NAV MENU   
    $(".nav__holder__button").mouseenter(function() {

        $(".mouse__circle").addClass("bigger");

    });

    $(".nav__holder__button").mouseleave(function() {

        $(".mouse__circle").removeClass("bigger");

    });
    //#SEARCH MENU   
    $(".search__holder").mouseenter(function() {

        $(".mouse__circle").addClass("bigger");

    });

    $(".search__holder").mouseleave(function() {

        $(".mouse__circle").removeClass("bigger");

    });
    //#ALL ANCHORS   
    $("a").mouseenter(function() {

        $(".mouse__circle").addClass("big");

    });

    $("a").mouseleave(function() {

        $(".mouse__circle").removeClass("big");

    });
    //#CLOSE BUTTON "X"   
    $(".c__popup__close__holder").mouseenter(function() {

        $(".mouse__circle").addClass("bigger");

    });

    $(".c__popup__close__holder").mouseleave(function() {

        $(".mouse__circle").removeClass("bigger");

    });

});