const sliderWrapper = document.querySelector(".sliderWrapper");
const slideBox = document.querySelector(".slideBox");
const slideBoxList = document.querySelectorAll(".slideBox li");
const slideTimeline = document.querySelector(".slideTimeline");
const slideBtnLeft = document.querySelector(".slideBtn-left");
const slideBtnRight = document.querySelector(".slideBtn-right");
let slideTimelineElem;
let timeRunner;
let slideIndex = 1;
let slideWidth = sliderWrapper.clientWidth;
let slidePos;
let slideAble = true;
let runningTime = 5;
let autoRun = true;
function setTimelineElem() {
    for (let i = 0; i < slideBoxList.length - 2; i++) {
        slideTimeline.innerHTML += "<li><div class='timeRunner'></div></li>";
    }
    slideTimelineElem = document.querySelectorAll(".slideTimeline li");
    timeRunner = document.querySelectorAll(".timeRunner");
}
setTimelineElem();
function setSlide() {
    slidePos = slideIndex * slideWidth;
    slideBox.style.transform = "translateX(-" + slidePos + "px)";
    if (slideIndex == 0) {
        slideIndex = slideTimelineElem.length;
    } else if (slideIndex == slideTimelineElem.length + 1) {
        slideIndex = 1;
    }
    for (let i = 0; i < slideTimelineElem.length; i++) {
        slideTimelineElem[i].classList.remove("slidePlay");
    }
    slideTimelineElem[slideIndex - 1].classList.add("slidePlay");
    if(autoRun){
        pauseAuto();
        playAuto();
    }
}
function smoothSlide() {
    slideBox.style.transition = "transform 0.8s";
    setSlide();
}
function pauseAuto() {
    slideTimeline.id = "state-pause";
    for (let i = 0; i < timeRunner.length; i++) {
        timeRunner[i].style.transition = "0s";
        timeRunner[i].classList.remove("run");
    }
}
function playAuto() {
    slideTimeline.id = "state-play";
    if (autoRun == true) {
        timeRunner[slideIndex - 1].style.transition = runningTime + "s linear";
        timeRunner[slideIndex - 1].classList.add("run");
    }
}
function slideControl() {
    if (autoRun == true) {
        autoRun = false;
        pauseAuto();
    } else if (autoRun == false) {
        autoRun = true;
        playAuto();
    }
}
function slideLeft() {
    if (slideAble == true) {
        slideAble = false;
        slideIndex--;
        smoothSlide();
    }
}
function slideRight() {
    if (slideAble == true) {
        slideAble = false;
        slideIndex++;
        smoothSlide();
    }
}
for (let i = 0; i < slideTimelineElem.length; i++) {
    slideTimelineElem[i].addEventListener("click", function () {
        slideIndex = i + 1;
        smoothSlide();
    });
    timeRunner[i].addEventListener("transitionend", function () {
        slideIndex++;
        smoothSlide();
    });
}
slideBox.addEventListener("transitionend", function () {
    slideBox.style.transition = "0s";
    setSlide();
    slideAble = true;
});
window.addEventListener("load", function () {
    setSlide();
    playAuto();
});
window.addEventListener("resize", function () {
    slideWidth = sliderWrapper.clientWidth;
    setSlide();
});