var partnerList;
var partnerListItems = [];
var partnerListOptions = {
  valueNames: [ { data: ['id'] }, 'description', 'address', 'plz', 'city', 'email' /*, 'phone', 'url' */],
  item: 'partnerlist-item'
}
var gmarkers = {};

var circleBlue = {
  path: 'M25,0 C60,0, 60,50, 25,50 C-10,50, -10,0, 25,0',
  fillColor: '#146ab4',
  fillOpacity: 1,
  scale: 0.3,
  strokeWeight: 0
};

function initializeMap() {
  var center = new google.maps.LatLng(46.8118199, 7.6638443);
  var mapOptions = {
    zoom: 9,
    center: center,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {
      mapTypeIds: []
    },
    streetViewControl: false,
    styles: [
      {
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#f5f5f5"
          }
        ]
      },
      {
        "elementType": "labels.icon",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#616161"
          }
        ]
      },
      {
        "elementType": "labels.text.stroke",
        "stylers": [
          {
            "color": "#f5f5f5"
          }
        ]
      },
      {
        "featureType": "administrative.country",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#cad2d3"
          }
        ]
      },
      {
        "featureType": "administrative.country",
        "elementType": "geometry.stroke",
        "stylers": [
          {
            "color": "#8c8c8c"
          }
        ]
      },
      {
        "featureType": "administrative.land_parcel",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "administrative.land_parcel",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#bdbdbd"
          }
        ]
      },
      {
        "featureType": "administrative.neighborhood",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#eeeeee"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "poi",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#757575"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#e5e5e5"
          }
        ]
      },
      {
        "featureType": "poi.park",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#9e9e9e"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#ffffff"
          }
        ]
      },
      {
        "featureType": "road",
        "elementType": "labels",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "road.arterial",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#757575"
          }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#dadada"
          }
        ]
      },
      {
        "featureType": "road.highway",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#616161"
          }
        ]
      },
      {
        "featureType": "road.local",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#9e9e9e"
          }
        ]
      },
      {
        "featureType": "transit.line",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#e5e5e5"
          }
        ]
      },
      {
        "featureType": "transit.station",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#eeeeee"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
          {
            "color": "#c9c9c9"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "geometry.fill",
        "stylers": [
          {
            "color": "#cad2d3"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text",
        "stylers": [
          {
            "visibility": "off"
          }
        ]
      },
      {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [
          {
            "color": "#9e9e9e"
          }
        ]
      }
    ]
  };

  map = new google.maps.Map(document.getElementById('abamap'), mapOptions);

  loadMarkers();
}

function loadMarkers () {
  var jsonURL = 'https://abaninja.ch/wp-content/themes/Divi-child/js/abaninja.json';
  jQuery.getJSON(jsonURL, function(data) {
      jQuery.each( data, function(index, item) {
        var addressId = index + 1;
        var markerId = 'g' + addressId;
        var marker = addMarker(markerId, item);
        addListpoint(markerId, item);
        gmarkers[markerId] = marker;
      });
      partnerList = new List('partnerlist', partnerListOptions, partnerListItems);
      partnerList.sort('description', { order: "asc" });
      enableListSearch();
      countParner();
      enableListClick();
  });
}

function addMarker(markerId, item) {
  var title = markerId;
  var sContent = '<strong>' + item["description"] + '</strong><br />' +
    item["address"] + '<br>' +
    item["plz"] + ' ' + item["city"] + '<br>' +
    '<a href="mailto:' + item["email"] + '">E-Mail</a>';
  var pos = new google.maps.LatLng(item["lat"], item["long"]);
  var marker = new google.maps.Marker({
    map: map,
    position: pos,
    icon: circleBlue,
    title: title,
    partnerDescription: item["description"],
    partnerAddress: item["address"],
    partnerPlz: item["plz"],
    partnerCity: item["city"],
    partnerEmail: item["email"],
    /*partnerPhone: item["phone"],
    partnerUrl: item["url"]*/
  });
  return addInfowindow(marker, sContent);
}

function addInfowindow (marker, sContent) {
  var infoWindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, "click", function (e) {
    //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
    infoWindow.setContent("<div class='google-maps-marker'>" + sContent + "</div>");
    infoWindow.open(map, marker);
  });
  return marker;
}

function addListpoint(markerId, item) {
  partnerListItems.push(
    {
      id: markerId,
      description: item["description"],
      address: item["address"],
      plz: item["plz"],
      city: item["city"],
      email: item["email"],
      /*phone: item["phone"],
      url: item["url"]*/
    }
  );
}

var placeSearch;

function initAutocomplete() {
  var autocomplete;
  // Create the autocomplete object, restricting the search to geographical
  // location types.
  autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),
    {types: ['geocode'], componentRestrictions: {country: "ch"}}
  );

  // When the user selects an address from the dropdown, populate the address
  // fields in the form.
  autocomplete.addListener('place_changed', function() {
    var autocompletePlace = autocomplete.getPlace();
    if (!autocompletePlace.geometry) {
            window.alert("Autocomplete's returned place contains no geometry");
            return;
        }
        // If the place has a geometry, then present it on a map.
        if (autocompletePlace.geometry.viewport) {
            map.fitBounds(autocompletePlace.geometry.viewport);
        } else {
            map.setCenter(autocompletePlace.geometry.location);
            map.setZoom(17);
        }
  });
}

function enableListClick() {
  var markerId;
  jQuery( "#partnerlist li" ).bind( "click", function() {
    markerId = jQuery(this).attr('data-id');
    google.maps.event.trigger(gmarkers[markerId], 'click');
  });
}

function enableListSearch() {
  jQuery( "#description-search" ).keyup(function() {
    var searchTerm = jQuery(this).val();
    partnerList.search(searchTerm, ['description']);
    countParner();
    // filterMarkerList(searchTerm);
  });
  jQuery( "#autocomplete" ).keyup(function() {
    var searchTerm = jQuery(this).val();
    partnerList.search(searchTerm, ['plz', 'city']);
    countParner();
  });
}

function countParner() {
  var numberOfPartner = jQuery( "#partnerlist li" ).length;
  jQuery(".number-of-partner").html(numberOfPartner);
}

function accordion() {
  jQuery( ".toggleList" ).bind( "click", function() {
    jQuery(this).parent().parent().toggleClass('opened');
    if (jQuery("#map-overlay").hasClass('opened')) {
      setTimeout(function () {
        jQuery("#map-overlay").removeClass('opened');
      }, 350);
    } else {
      jQuery("#map-overlay").addClass('opened');
    }
  });
}

function filterMarkerList(searchTerm) {
  var searchTermLower = searchTerm.toLowerCase();
  jQuery.each(gmarkers, function (index, item) {
    var descriptionLower = item.partnerDescription.toLowerCase();
    if(!descriptionLower.indexOf(searchTermLower)) {
      item.setVisible(true);
    } else {
      item.setVisible(false);
    }
  })
}