var list = document.querySelectorAll(".year");
list[0].style.cssText = 'font-weight: 700; font-size: 28px; line-height: 40px; letter-spacing: -0.02em; color: #785DFB; margin-left: -20px; margin-top: 24px;'

var list1 = document.querySelectorAll('.yearimg');
list1[0].style.cssText = 'border: 4px solid #785DFB; border-radius: 10px; margin-top: -4px;'


var listm = document.querySelectorAll(".yearm");
listm[0].style.cssText = 'font-weight: 700; font-size: 28px; line-height: 40px; letter-spacing: -0.02em; color: #785DFB; margin-left: -20px; margin-top: 24px;'

var listm1 = document.querySelectorAll('.yearimgm');
listm1[0].style.cssText = 'border: 4px solid #785DFB; border-radius: 10px; margin-top: -4px;'

function changeYear(value) {
    m2 = 0
    m3 = 0
    m4 = 0
    m5 = 0
    m6 = 0


    var year = document.querySelectorAll(".year");
    for (var i = 0; i < year.length; ++i) {
        if (i == value) {
            year[i].style.cssText = 'font-weight: 700; font-size: 28px; line-height: 40px; letter-spacing: -0.02em; color: #785DFB; margin-left: -20px; margin-top: 24px;'

        }
        else {
            year[i].style.cssText = 'font-weight: 600; font-size: 12px; line-height: 15px; letter-spacing: 0.01em; color: rgba(74, 74, 104, 0.6); margin-left: -10px; margin-top: 44px;'

        }
    }


    var yearImg = document.querySelectorAll('.yearimg');
    for (var j = 0; j < yearImg.length; ++j) {
        if (j == value) {
            yearImg[j].style.cssText = 'border: 4px solid #785DFB; border-radius: 10px; margin-top: -4px;'

        }
        else {
            yearImg[j].style.cssText = 'border: none ; border-radius: 0px; margin-top: 0px;'

        }
    }


    var yearm = document.querySelectorAll(".yearm");
    for (var i = 0; i < yearm.length; ++i) {
        if (i == value) {
            yearm[i].style.cssText = 'font-weight: 700; font-size: 28px; line-height: 40px; letter-spacing: -0.02em; color: #785DFB; margin-left: -20px; margin-top: 24px;'

        }
        else {
            yearm[i].style.cssText = 'font-weight: 600; font-size: 12px; line-height: 15px; letter-spacing: 0.01em; color: rgba(74, 74, 104, 0.6); margin-left: -10px; margin-top: 44px;'

        }
    }


    var yearImgm = document.querySelectorAll('.yearimgm');
    for (var j = 0; j < yearImgm.length; ++j) {
        if (j == value) {
            yearImgm[j].style.cssText = 'border: 4px solid #785DFB; border-radius: 10px; margin-top: -4px;'

        }
        else {
            yearImgm[j].style.cssText = 'border: none ; border-radius: 0px; margin-top: 0px;'

        }
    }



    if (value == 0) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[0].classList.add('active');
        caroselChange[1].classList.remove('active');
        caroselChange[2].classList.remove('active');
        document.getElementById('x1').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });



        document.getElementById('div1').style.cssText = "display: block;"
        document.getElementById('div1').classList.add("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");
    }
    else if (value == 1) {

        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[3].classList.add('active');
        caroselChange[4].classList.remove('active');
        document.getElementById('x2').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });


        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: block;"
        document.getElementById('div2').classList.add("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");
    }

    else if (value == 2) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[5].classList.add('active');
        caroselChange[6].classList.remove('active');
        document.getElementById('x3').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });

        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: block;"
        document.getElementById('div3').classList.add("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");

    }

    else if (value == 3) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[7].classList.add('active');
        caroselChange[8].classList.remove('active');
        document.getElementById('x4').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });

        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: block;"
        document.getElementById('div4').classList.add("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");

    }

    else if (value == 4) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[9].classList.add('active');
        caroselChange[8].classList.remove('active');
        document.getElementById('x5').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });

        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: block;"
        document.getElementById('div5').classList.add("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");
    }

    else if (value == 5) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[10].classList.add('active');
        document.getElementById('x6').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });

        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: block;"
        document.getElementById('div6').classList.add("slide-left");
        document.getElementById('div7').style.cssText = "display: none;"
        document.getElementById('div7').classList.remove("slide-left");
    }

    else if (value == 6) {
        var caroselChange = document.querySelectorAll('.carousel-item');
        caroselChange[11].classList.add('active');
        caroselChange[12].classList.remove('active');
        document.getElementById('x7').scrollIntoView({
            behavior: 'smooth',
            inline: 'center',
            block: 'nearest'
        });

        document.getElementById('div1').style.cssText = "display: none;"
        document.getElementById('div1').classList.remove("slide-left");
        document.getElementById('div2').style.cssText = "display: none;"
        document.getElementById('div2').classList.remove("slide-left");
        document.getElementById('div3').style.cssText = "display: none;"
        document.getElementById('div3').classList.remove("slide-left");
        document.getElementById('div4').style.cssText = "display: none;"
        document.getElementById('div4').classList.remove("slide-left");
        document.getElementById('div5').style.cssText = "display: none;"
        document.getElementById('div5').classList.remove("slide-left");
        document.getElementById('div6').style.cssText = "display: none;"
        document.getElementById('div6').classList.remove("slide-left");
        document.getElementById('div7').style.cssText = "display: block;"
        document.getElementById('div7').classList.add("slide-left");


    }
}

function carosel(x) {
    console.log(x)
    var reveals = document.querySelectorAll('.carousel-item');
    if (x == 1) {
        reveals[0].classList.add('active')
        reveals[0].classList.add('slide-left')
        reveals[1].classList.remove('active')
        reveals[1].classList.remove('slide-left')
        reveals[2].classList.remove('active')
        reveals[2].classList.remove('slide-left')
    }
    if (x == 2) {
        reveals[0].classList.remove('active')
        reveals[0].classList.remove('slide-left')
        reveals[1].classList.add('active')
        reveals[1].classList.add('slide-left')
        reveals[2].classList.remove('active')
        reveals[2].classList.remove('slide-left')
    }
    if (x == 3) {
        reveals[0].classList.remove('active')
        reveals[0].classList.remove('slide-left')
        reveals[1].classList.remove('active')
        reveals[1].classList.remove('slide-left')
        reveals[2].classList.add('active')
        reveals[2].classList.add('slide-left')
    }
    if (x == 4) {
        reveals[3].classList.add('active')
        reveals[3].classList.add('slide-left')
        reveals[4].classList.remove('active')
        reveals[4].classList.remove('slide-left')
    }

    if (x == 5) {
        reveals[3].classList.remove('active')
        reveals[3].classList.remove('slide-left')
        reveals[4].classList.add('active')
        reveals[4].classList.add('slide-left')
    }

    if (x == 6) {
        reveals[5].classList.add('active')
        reveals[5].classList.add('slide-left')
        reveals[6].classList.remove('active')
        reveals[6].classList.remove('slide-left')
    }

    if (x == 7) {
        reveals[5].classList.remove('active')
        reveals[5].classList.remove('slide-left')
        reveals[6].classList.add('active')
        reveals[6].classList.add('slide-left')
    }

    if (x == 8) {
        reveals[7].classList.add('active')
        reveals[7].classList.add('slide-left')
        reveals[8].classList.remove('active')
        reveals[8].classList.remove('slide-left')
    }

    if (x == 9) {
        reveals[7].classList.remove('active')
        reveals[7].classList.remove('slide-left')
        reveals[8].classList.add('active')
        reveals[8].classList.add('slide-left')
    }

    if (x == 10) {
        reveals[11].classList.add('active')
        reveals[11].classList.add('slide-left')
        reveals[12].classList.remove('active')
        reveals[12].classList.remove('slide-left')
    }

    if (x == 11) {
        reveals[11].classList.remove('active')
        reveals[11].classList.remove('slide-left')
        reveals[12].classList.add('active')
        reveals[12].classList.add('slide-left')
    }

}

var m1 = 0
var m2 = 0
var m3 = 0

var m4 = 0
var m5 = 0

var m6 = 0


//2010
$('#myCarousel').bind('mousewheel', function (e) {
    if (m1 == 0) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            if (m2 == 0) {
                window.scrollBy(0, -600);
            }
            else {
                $(this).carousel('prev');
                m2--
            }

        } else {
            if (m2 > 1) {
                changeYear(1)
            }
            else {
                $(this).carousel('next');
                m2++
            }


        }
        m1++;
        return false;

    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        // do something
        console.log("Haven't scrolled in 350ms!");
        m1 = 0;
    }, 350));
    return false;

});

//2013
$('#myCarousel2').bind('mousewheel', function (e) {
    if (m1 == 0) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            if (m3 == 0) {
                console.log('hhhhh')
                changeYear(0)
            }
            else {
                $(this).carousel('prev');
                m3--
            }

        } else {
            if (m3 > 0) {
                console.log('hhhhh')
                changeYear(2)
            }
            else {
                $(this).carousel('next');
                m3++
            }


        }
        m1++;
        return false;

    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        // do something
        console.log("Haven't scrolled in 350ms!");
        m1 = 0;
    }, 350));
    return false;


});

//2014
$('#myCarousel3').bind('mousewheel', function (e) {
    if (m1 == 0) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            if (m4 == 0) {
                console.log('hhhhh')
                changeYear(1)
            }
            else {
                $(this).carousel('prev');
                m4--
            }

        } else {
            if (m4 > 0) {
                console.log('hhhhh')
                changeYear(3)
            }
            else {
                $(this).carousel('next');
                m4++
            }


        }
        m1++;
        return false;

    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        // do something
        console.log("Haven't scrolled in 350ms!");
        m1 = 0;
    }, 350));
    return false;
});

//2016
$('#myCarousel4').bind('mousewheel', function (e) {
    if (m1 == 0) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            if (m5 == 0) {
                console.log('hhhhh')
                changeYear(2)
            }
            else {
                $(this).carousel('prev');
                m5--
            }

        } else {
            if (m5 > 0) {
                console.log('hhhhh')
                changeYear(4)
            }
            else {
                $(this).carousel('next');
                m5++
            }


        }
        m1++;
        return false;

    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        // do something
        console.log("Haven't scrolled in 350ms!");
        m1 = 0;
    }, 350));
    return false;
});

//2018
$('#myCarousel5').bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {
        changeYear(3)
    } else {
        changeYear(5)
    }
    return false;
});

//2020
$('#myCarousel6').bind('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta / 120 > 0) {
       changeYear(4)
    } else {
        changeYear(6)
    }
    return false;
});

//2021
$('#myCarousel7').bind('mousewheel', function (e) {
    if (m1 == 0) {
        if (e.originalEvent.wheelDelta / 120 > 0) {
            if (m6 == 0) {
                changeYear(5)
            }
            else {
                $(this).carousel('prev');
                m6--
            }

        } else {
            if (m6 > 0) {
                window.scrollBy(0, 600);
                
            }
            else {
                $(this).carousel('next');
                m6++
            }


        }
        m1++;
        return false;

    }
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        // do something
        console.log("Haven't scrolled in 350ms!");
        m1 = 0;
    }, 350));
    return false;

});