const section = document.querySelectorAll('.content-main-category-title-container');
console.log("3",section);
var sections = {};

Array.prototype.forEach.call(section, function(e) {
    sections[e.id] = e.offsetTop;
});

const financeAnchor = document.getElementById("finance-anchor");
const salesAnchor = document.getElementById("sales-anchor");
const serviceAnchor = document.getElementById("service-anchor");
// const tradeAnchor = document.getElementById("trade-anchor");
// const autoGearAnchor = document.getElementById("autoGear-anchor");
// const partsAnchor = document.getElementById("parts-anchor");
const dropdownValue = document.getElementById("sidebar-dropdown");

var anchors = 
[
    financeAnchor, 
    salesAnchor, 
    serviceAnchor 
    // tradeAnchor, 
    // autoGearAnchor, 
    // partsAnchor
];

financeAnchor.addEventListener('click', function(e) {
    removeAllActive(anchors);
    makeActive(financeAnchor);
});

salesAnchor.addEventListener('click', function() {
    removeAllActive(anchors);
    makeActive(salesAnchor);
});;

serviceAnchor.addEventListener('click', function() {
    removeAllActive(anchors);
    makeActive(serviceAnchor);
});;

// tradeAnchor.addEventListener('click', function() {
//     removeAllActive(anchors);
//     makeActive(tradeAnchor);
// });;

// autoGearAnchor.addEventListener('click', function() {
//     removeAllActive(anchors);
//     makeActive(autoGearAnchor);
// });;

// partsAnchor.addEventListener('click', function() {
//     removeAllActive(anchors);
//     makeActive(partsAnchor);
// });;

const makeActive = function(link) {
    link.classList.add('active');
}

const removeActive = function(link) {
    link.classList.remove('active');
}

const removeAllActive = function() {
    for(var i = 0; i < anchors.length; i++) {
        removeActive(anchors[i]);
    }

    // Array.prototype.forEach.call(anchors, anchor => {
    //     removeActive(anchor);
    // });
}

dropdownValue.onchange = function() {
    window.location.href = this.value;
};