var places = page_pins_map.places;
var map;
var map_center = {lat: parseFloat(places[0]['lat']), lng: parseFloat(places[0]['lng']) };
var traveler = page_pins_map.traveler;
jQuery('document').ready(function(){
    for(var i=0; i<traveler.length; i++){
        var opt = jQuery('<li>');
        opt.addClass('ui-widget-content');
        opt.text(traveler[i]);
        jQuery('#travelers-select').append(opt);
    }
    jQuery( "#travelers-select" ).selectable();
    if(typeof google !== 'undefined'){
        // reinit map in case google maps loaded before this script did
        initMap();
    }
    jQuery('#travelers-filter-button').on('click', filterByTravelerClick);
    jQuery('#travelers-reset-button').on('click', resetFilter);
    jQuery('#toggle-and-or').toggleSwitch({
        width: "140px",
        height: "20px",
        onLabel: "Insgesamt",
        offLabel: "Zusammen",
        onToggle: filterByTravelerClick
    });
    jQuery('#travelers-extend-button').on('click', toggleExtendTravelers);
    toggleExtendTravelers();
});
var markers = [];
function initMap() {
    markers = [];
    map = new google.maps.Map(document.getElementById('map-stats'), {
        center: map_center,
        zoom: 15
    });
    var bounds = new google.maps.LatLngBounds();
    for(var i = 0; i < places.length; i++){
        var marker = new google.maps.Marker({
            position: {lat: parseFloat(places[i]['lat']), lng: parseFloat(places[i]['lng']) },
            title: places[i]['title'],
            url: "/?p="+places[i]['post'],
            traveler: places[i]['traveler'],
            map: map
        });
        marker.setVisible(true);
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = this.url;
        });
        bounds.extend(marker.getPosition());
    }
    map.fitBounds(bounds);
    window.setTimeout(function(){
        if(map.getZoom() > 15){
            map.setZoom(15);
        }
    }, 500);
}

function filterByTravelerClick(){
    var travelers = [];
    jQuery('#travelers-select .ui-selected').each(function (i, elem) {
        travelers.push(jQuery(elem).text());
    });
    if(jQuery('#toggle-and-or')[0].checked){
        filterMarkersByTravelersOr(travelers);
    } else {
        filterMarkersByTravelersAnd(travelers);
    }
}

function resetFilter(){
    jQuery('#travelers-select .ui-selected').each(function (i, elem) {
        jQuery(elem).removeClass('ui-selected');
    });
    filterMarkersByTravelers([]);
}

function filterMarkersByTravelersAnd(travelers){
    for(var i=0; i<markers.length; i++){
        markers[i].setVisible(false);
        var all_there = true;
        for(var j=0; j<travelers.length; j++){
            if(markers[i]['traveler'].indexOf(travelers[j]) == -1){
                all_there = false;
                break;
            }
        }
        if(all_there){
            markers[i].setVisible(true);
        }
    }
}

function filterMarkersByTravelersOr(travelers){
    for(var i=0; i<markers.length; i++){
        markers[i].setVisible(false);
        for(var j=0; j<travelers.length; j++){
            if(markers[i]['traveler'].indexOf(travelers[j]) > -1){
                markers[i].setVisible(true);
                break;
            }
        }
    }
}

function toggleExtendTravelers() {
    jQuery('#travelers-select li').filter(function(i){
        return jQuery(this).text().indexOf(' ') !== -1;
    }).each(function(i){
        jQuery(this).toggle();
    });
}