var filters = document.querySelectorAll('.houses-row .filters .check');
var map = document.getElementById('house-map');
var houses = document.querySelectorAll('#house-map .houses-group>g');
var housesLength = houses.length;

var showAll = true;

var filtersLength = filters.length;
for(var i = 0; i < filtersLength; i++){
    var filter = filters[i];
    filter.addEventListener('click', function(){
        toggleHouseGroup(this);
    });
}


for(var i = 0; i < housesLength; i++) {
    var house = houses[i];

    house.addEventListener('click', function(){
        // var groupLinkButton = document.getElementById(groupLink);
        // window.location.href = groupLinkButton.getAttribute('href');

        disableLockedTooltip();

        updateMapTooltip(event);

        var groupName = this.parentNode.id;
        var groupToolTip = groupName.replace('-group', '-tooltip');

        var toolTipElement = document.getElementById(groupToolTip);
        toolTipElement.classList.add('lock');
    });

}
function updateMapTooltip(e) {
    var mouseX = e.clientX;
    var mouseY = e.clientY;

    var toolTips = document.querySelectorAll('.houses-row .map-side .tooltip');
    var toolTipsLength = toolTips.length;

    for(var i = 0; i < toolTipsLength; i++) {
        var toolTip = toolTips[i];
        if(!toolTip.classList.contains('lock')){
            toolTip.style.left = mouseX + 'px';
            toolTip.style.top = mouseY + 'px';
        }
    }
}

function disableLockedTooltip() {
    var toolTips = document.querySelectorAll('.houses-row .map-side .tooltip');
    var toolTipsLength = toolTips.length;

    for(var i = 0; i < toolTipsLength; i++) {
        var toolTip = toolTips[i];
        toolTip.classList.remove('lock');
    }
}

window.addEventListener('scroll', function(e) {
    disableLockedTooltip();
});

window.onresize = function(event) {
    resizeMap();
};

setTimeout(function(){resizeMap();}, 800);

function resizeMap() {

    var map = document.querySelector('#house-map>svg');
    mapWidth = map.clientWidth;
    mapHeight = mapWidth / 700 * 985;
    // console.log(mapHeight);
    map.style.height = mapHeight + 'px';
}



function toggleHouseGroup(filter) {

    if(showAll){
        if(map.classList.contains('loaded')) map.classList.remove('loaded');
        showAll = false;
    }

    var type = filter.dataset.type;
    filter.classList.toggle('active');

    var houseGroup =  map.querySelector('#'+type+'-group');
    houseGroup.classList.toggle('active');

    var amountActive = 0;

    var filtersLength = filters.length;
    for(var i = 0; i < filtersLength; i++){
        var filter = filters[i];
        if(filter.classList.contains('active')) amountActive++;
    }

    if(amountActive === 0){
        map.classList.add('loaded');
        showAll = true;
    }

    disableLockedTooltip();

    var body = $('html,body');

    body.animate({
        scrollTop: $('#house-map').offset().top - 60
    }, 500);

    body.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
        body.stop();
    });
}