// ------------------
//play video index v3
let playerLink = document.querySelectorAll(".vVideo span.play");

for (let playerLinkEach of playerLink) {
    playerLinkEach.addEventListener("click", function () {
        let prev = playerLinkEach.previousElementSibling;
        for (let playerLinkEachAgain of playerLink) {
            let prevAgain = playerLinkEachAgain.previousElementSibling;
            prevAgain.pause();
            playerLinkEachAgain.closest('.vVideo').querySelector('.play').classList.remove('hide');
        }
            if (prev.paused) {
                prev.play();
                //prev.setAttribute("controls","controls")
                this.classList.add('hide');
            }
    });
}

let pauseVideo = document.querySelectorAll(".vVideo span.border");
for (let pauseVideoEach of pauseVideo) {
    pauseVideoEach.addEventListener("click", function() {
        let next = pauseVideoEach.nextElementSibling;
        next.pause()
        pauseVideoEach.closest('.vVideo').querySelector('.play').classList.remove('hide');
    });
}


//big video
let playerLinkBig = document.querySelector(".g2-video span.play");
playerLinkBig.addEventListener("click", function () {
    let prev = playerLinkBig.previousElementSibling;
    if (prev.paused) {
        prev.play();
        //prev.setAttribute("controls","controls")
        this.classList.add('hide');
        }
});

let pauseVideoBig = document.querySelector(".g2-video span.border");
pauseVideoBig.addEventListener("click", function() {
    let next = pauseVideoBig.nextElementSibling;
    next.pause()
    playerLinkBig.classList.remove('hide')
});


//drag and scroll "couple love stories"
const sliderStories = document.querySelector('.vVideos-scrollable');
let isDownStories = false;
let startXStories;
let scrollLeftStories;

sliderStories.addEventListener('mousedown', (e) => {
    isDownStories = true;
    sliderStories.classList.add('active');
    startXStories = e.pageX - sliderStories.offsetLeft;
    scrollLeftStories = sliderStories.scrollLeft;
});
sliderStories.addEventListener('mouseleave', () => {
    isDownStories = false;
    sliderStories.classList.remove('active');
});
sliderStories.addEventListener('mouseup', () => {
    isDownStories = false;
    sliderStories.classList.remove('active');
});
sliderStories.addEventListener('mousemove', (e) => {
    if (!isDownStories) return;
    e.preventDefault();
    const xStories = e.pageX - sliderStories.offsetLeft;
    const walkStories = (xStories - startXStories) * 1; //scroll-fast
    sliderStories.scrollLeft = scrollLeftStories - walkStories;
    //console.log(walkStories);
});


//drag and scroll "the vibe"
const sliderVibe = document.querySelector('.the-vibe-scrollable');
let isDown = false;
let startX;
let scrollLeft;

sliderVibe.addEventListener('mousedown', (e) => {
    isDown = true;
    sliderVibe.classList.add('active');
    startX = e.pageX - sliderVibe.offsetLeft;
    scrollLeft = sliderVibe.scrollLeft;
});
sliderVibe.addEventListener('mouseleave', () => {
    isDown = false;
    sliderVibe.classList.remove('active');
});
sliderVibe.addEventListener('mouseup', () => {
    isDown = false;
    sliderVibe.classList.remove('active');
});
sliderVibe.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - sliderVibe.offsetLeft;
    const walk = (x - startX) * 1; //scroll-fast
    sliderVibe.scrollLeft = scrollLeft - walk;
    //console.log(walk);
});

//click arrows and scroll "the vibe"
let scrollLeftBtn = document.querySelector(".scroll-left");
let scrollRightBtn = document.querySelector(".scroll-right");
let x = 0;
let numberOfPictures = Array.from(sliderVibe.querySelectorAll('li')).length;
let picWidth = sliderVibe.querySelector('li img').clientWidth;
let slideStep = Math.floor(picWidth * 1.1375);

scrollRightBtn.addEventListener("click", () => {
    if (x == numberOfPictures - 4) return;
    x++;
    sliderVibe.scrollTo(x * slideStep, 0);
});
scrollLeftBtn.addEventListener("click", () => {
    if (x == 0) return;
    x--;
    sliderVibe.scrollTo(x * slideStep, 0);
});