var tab = document.querySelectorAll('.step_content');
var nav = document.querySelectorAll('.step');


if (history.pushState) {
    hashchanged();
}
$(window).bind("hashchange", function() {
    hashchanged();
});

function hashchanged() {
    oldHref = document.location.href;
    var location_list = oldHref.toString().split("#");
    if (location_list[1] == "cart") {
        resetpage();
        nav[0].classList.add('active');
        tab[0].classList.add('active');
    } else if (location_list[1] == "clothing_size") {
        resetpage();
        nav[1].classList.add('active');
        tab[1].classList.add('active');
    } else if (location_list[1] == "info") {
        resetpage();
        nav[2].classList.add('active');
        tab[2].classList.add('active');
    } else if (location_list[1] == "content_tab_4") {
        resetpage();
        nav[3].classList.add('active');
        tab[3].classList.add('active');
    } else {
        resetpage();
        nav[0].classList.add('active');
        tab[0].classList.add('active');
    }
}


function resetpage() {
    for (var i = 0; i < nav.length; i++) {

        try {
            nav[i].classList.remove('active');
            tab[i].classList.remove('active');
        } catch (error) {

        }
    }
}

var size_item = document.querySelectorAll('.sec_2 ul li');
for (var i = 0; i < size_item.length; i++) {
    size_item[i].setAttribute('onclick', 'active_preview(this)');
}

function active_preview(obj) {
    const reset_previews = document.querySelectorAll('.sec_2 .body_preview .active')
    for (var i = 0; i < reset_previews.length; i++) {
        reset_previews[i].classList.remove('active');
    }
    const target = document.querySelectorAll(obj.getAttribute('data-target'));
    for (var i = 0; i < target.length; i++) {
        target[i].classList.add('active');
        target[i].parentElement.classList.add('active');
    }
}

