window.addEventListener('load', (event) => {

    const marquees = document.querySelectorAll('[data-marquee]')

    marquees.forEach(marquee => {

        const container = marquee.querySelector('[data-marquee-container]')

        let itemWidth = window.getComputedStyle(marquee).getPropertyValue('--marquee-item-width')
        const itemWidthBase = Number(itemWidth.replace(/vw/g, ''))
        const itemsLength = marquee.getAttribute('data-marquee-items')

        const items = container.querySelectorAll('[data-marquee-item]')

        let itemsCloned = 1

        //clone items in marquee if 100vw / itemsLength less than threshold 
        if (100 / itemWidthBase < itemsLength) {
            items.forEach(item => {
                container.appendChild(item.cloneNode(true))
            })
            itemsCloned = 2
        }

        const speed = Number(marquee.getAttribute('data-marquee-speed'))

        let pos = 0
        let intvl

        //get vars
        // const items = marquee.getAttribute('data-marquee-items')

        //calculate wrapper width
        container.style.width = `calc(${items.length*itemsCloned}*${itemWidth})`

        intvl = setInterval(() => {
            if (pos > 50) {
                container.style.transform = `translateX(0%)`    
                pos = 0
            } else {
                container.style.transform = `translateX(-${pos}%)`
            }
            pos = pos+speed
        }, 0)

        marquee.addEventListener('mouseover', function(){
            clearInterval(intvl)
        })

        marquee.addEventListener('mouseleave', function(){
            intvl = setInterval(() => {
                if (pos > 50) {
                    container.style.transform = `translateX(0%)`    
                    pos = 0
                } else {
                    container.style.transform = `translateX(-${pos}%)`
                }
                pos = pos+speed
            }, 0)    
        })

        window.addEventListener('resize', function(){
            itemWidth = window.getComputedStyle(marquee).getPropertyValue('--marquee-item-width')
            container.style.width = `calc(${items.length*itemsCloned}*${itemWidth})`
        })

    })
})