import wixAnimations from 'wix-animations';

$w.onReady(function () {

    hoverEffect();

});

function hoverEffect() {

    const obj = {

        proj1: {

            image: '#diseaseImage',

            button: '#diseaseBtnBox',

            buttonColor: '#diseaseColorBtn'

        

        },

        proj2: {

            image: '#hungerImage',

            button: '#hungerBtnBox',

            buttonColor: '#hungerColorBtn'

           

        },

        proj3: {

            image: '#higeRentsImage',

            button: '#higeRentsBtnBox',

            buttonColor: '#higeRentsColorBtn'

            

        },

        proj4: {

            image: '#climateChangeImage',

            button: '#climateChangeBtnBox',

            buttonColor: '#climateChangeColorBtn'

            

        },

        proj5: {

            image: '#boredomImage',

            button: '#boredomBtnBox',

            buttonColor: '#boredomColorBtn'

            

        },

    }

var timer;

    for (let item in obj) {

        $w(obj[item].button).onMouseIn(() => {

            clearTimeout(timer);

            wixAnimations.timeline()

                .add($w('#mainImage'), { opacity: 0, duration: 150, easing: "easeInOutQuad" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].image), { opacity: 1, duration: 150, easing: "easeInOutQuad" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].buttonColor), { opacity: 1, duration: 150, easing: "easeInOutQuad" })

                .play();

        });

        $w(obj[item].button).onMouseOut(() => {

            wixAnimations.timeline()

                .add($w(obj[item].image), { y: 0, opacity: 0, duration: 150, easing: "easeInOutQuad" })

                .play();

            wixAnimations.timeline()

                .add($w(obj[item].buttonColor), { opacity: 0, duration: 150, easing: "easeInOutQuad" })

                .play();

            timer = setTimeout(function(){ wixAnimations.timeline()

                .add($w('#mainImage'), { opacity: 1, duration: 150, easing: "easeInOutQuad" })

                .play(); }, );

        });

    }

}