(function($) {
  /**  new_map */
  function new_map($el) {
      var $markers = $el.find('.marker');
      var args = {
        zoom: 12,
        center: new google.maps.LatLng(0, 0),
        mapTypeControl: false,
        panControl: false,
        scrollwheel: false,
        streetViewControl: false,
        zoomControlOptions: {
          style: google.maps.ZoomControlStyle.SMALL,
          position: google.maps.ControlPosition.RIGHT_CENTER
        }
      };

      // create map
      map = new google.maps.Map($el[0], args);
      // add a markers reference
      map.markers = [];
      // add markers
      $markers.each(function() {
        add_marker($(this), map);
      });
      // center map
      center_map(map);
      // return
      return map;
    }
    // create info window outside of each - then tell that singular infowindow to swap content based on click
  var infowindow = new google.maps.InfoWindow({
    content: ''
  });
  /**  add_marker */
  function add_marker($marker, map) {
      // var
      var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
      // create marker
      var marker = new google.maps.Marker({
        position: latlng,
        map: map
      });
      // add to array
      map.markers.push(marker);
      // if marker contains HTML, add it to an infoWindow
      if ($marker.html()) {
        // create info window
        liTag = $(".aflista ul").find("[data-lat='" + $marker.attr('data-lat') + "']");
        // console.log(liTag);
        // show info window when marker is clicked
        $(liTag).click(function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent($marker.html());
          infowindow.open(map, marker);
          map.setZoom(12);
          map.setCenter(marker.getPosition())
        });
        // close info window when map is clicked
        google.maps.event.addListener(map, 'click', function(event) {
          if (infowindow) {
            infowindow.close();
          }
        });
      }
    }
    /**  center_map */

  function center_map(map) {
      // vars
      bounds = new google.maps.LatLngBounds();
      // loop through all markers and create bounds
      $.each(map.markers, function(i, marker) {
        var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
        bounds.extend(latlng);
      });
      // only 1 marker?
      if (map.markers.length == 1) {
        // set center of map
        map.setCenter(bounds.getCenter());
        map.setZoom(4);
      } else {
        // fit to bounds
        map.fitBounds(bounds);
      }
    }
    /**  document ready */
    // global var
  var map = null;
  var bounds = null;
  $(document).ready(function() {
    $('.acf-map').each(function() {
      // create map
      map = new_map($(this));
    });
    $("#reset_state").click(function() {
      infowindow.close();
      map.fitBounds(bounds);
    })
  });
})(jQuery);
