var coaches = [];
var locations = [];
var postcode = "";
var geslacht = "";
var naam = "";
var tags = "";
var land = "";
var map;
var markers = [];

window.onload = function() {
    setPostcode();
    setNaam();
    setTags();
    setGeslacht($('.geslachSelect').val());
    setLand($('.landSelect').val());
};

$( document ).ready(function() {

    setTimeout(function(){
        ajaxCall();
    }, 300);

    $('.geslachSelect').on('select2:select', function(){ 
        setGeslacht($(this).val());
        ajaxCall();
    });
    
    $('.landSelect').on('select2:select', function(){ 
        setLand($(this).val());
        ajaxCall();
    });
    
    
    $('.checkboxesGroup .check input').on('change', function(){
        setTags();
        ajaxCall();
    });
    
    $(".submitButton").on("click", function(){
        $(this).parent("form").submit();
    });
    
    
    $(".responsiveFilters").on("click", function(){
        $(".filterOverlay").addClass("active");
    });
    
    $(document).on("click",".filterOverlay .close, .filterOverlay .background", function() { 
        $(".filterOverlay").removeClass("active");
        setPostcode();
        setNaam();
        setTags();
        ajaxCall();
    });
    
    if($(window).width() < 701){
        $(".coachesOverviewBlock .col .fieldWrapper").remove();
    } else {
        $(".filterOverlay").remove();
    }
    
    
});

function setGeslacht(val){
    geslacht = val;
}

function setLand(val){
    land = val;
}

function setPostcode(){
    postcode = $(".searchPostcode input").val();
}

function setNaam(){
    naam = $(".searchNaam input").val();
}

function setTags(){
    var tagsArray = [];
    $('.checkboxesGroup .check input').each(function(i, el){
        if($(el).is(":checked")){
            tagsArray.push($(el).attr("name")+ "=on");
        }
    });
    tags = tagsArray.join("&");
}
 
function ajaxCall(){
	//console.log('test');
}

function setCoachesHTML(){
    var html = "";
    $(".coachesOverviewBlock .coaches").html("");
    $(coaches[0]).each(function(i, el){
        html += "<div class='coach'>";
        html += "<div class='innerCoach'>";
        html += "<div class='image'>";
        html += "<div class='innerImage lazy' data-src='" + el.image + "'></div>";
        html += "<div class='triangle'>";
        html += "<svg width='27px' height='108px' viewBox='0 0 27 108'>";
        html += "<path class='st0' d='M27,0L0,54l27,54V0z'/>";
        html += "</svg>";
        html += "</div>";
        html += "</div>";
        html += "<div class='coachContent'>";
        html += "<div class='coachName smallTitle'>" + el.name + "</div>";
        html += "<div class='divider'></div>";
        html += "<div class='location'><span class='label'>Locatie:</span>" + el.locations + "</div>";
        html += "</div>";
        html += "<div class='buttons'>";
        html += "<a href='" + el.url + "' title='Meer details' class='button secondary'>Meer details</a>";
        html += "</div>";
        html += "</div>";
        html += "</div>";
    });
    $(".coachesOverviewBlock .coaches").html(html);
    if($(".coaches .coach").length < 1){
        $(".coachesOverviewBlock .noCoaches").show();
    } else {
        $(".coachesOverviewBlock .noCoaches").hide();
    }
}

function setMarkers(){
    var activeMarkers = $(locations[0]).slice(0, 20);
    var LatLngList = [];
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers = [];
    $(activeMarkers).each(function(i, el){
        var marker = new google.maps.Marker({
            position: { lat: parseFloat(el.coor_latitude), lng: parseFloat(el.coor_longitude) },
            map: map,
            icon: 'assets/img/marker.png'
        });
        markers.push(marker);
        if(el.coachID){
            var infoWindow = new SnazzyInfoWindow({
                marker: marker,
                closeWhenOthersOpen: true,
                content: "<div class='image' style=\"background-image:url(\'" + el.image + "')\"></div><div class='infoContent'><div class='name'>" + el.name + "</div><div class='location'><span class='label'>Locatie:</span>" + el.adres + "</div><div class='link'><a href='" + el.url + "' title='Bekijk coach'>Bekijk coach</a></div></div>"
            });
        } else {
            var infoWindow = new SnazzyInfoWindow({
                marker: marker,
                closeWhenOthersOpen: true,
                content: "<div class='image' style=\"background-image:url(\'" + el.image + "')\"></div><div class='infoContent'><div class='name'>" + el.name + "</div><div class='location'><span class='label'>Locatie:</span>" + el.adres + "</div></div>"
            });
        }
        LatLngList.push(new google.maps.LatLng (parseFloat(el.coor_latitude),parseFloat(el.coor_longitude)));
    });
    
    var latlngbounds = new google.maps.LatLngBounds();

    LatLngList.forEach(function(latLng){
       latlngbounds.extend(latLng);
    });

    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds); 
    $("#googleMap").addClass("active");
}