// var locations = [
//   {
//     name: 'La Rosa Oil Field',
//     address: 'La Rosa Oil Field, Refugio, Texas 78393, United States',
//     lat: 28.1752884,
//     lng: -97.327215,
//     description: 'something <b>amazing</b> goes here'
//   },
//   {
//     name: 'A Fake Oil Field',
//     // address: 'La Rosa Oil Field, Refugio, Texas 78393, United States',
//     lat: 28.6752884,
//     lng: -96.327215,
//     description: 'more content here...'
//   }
// ];  

$(function() {
  
  // prepare variables
  var locationsDOM = $('#locations li article'),
      first = locationsDOM.filter(':first'),
      locations = [];

  // set base options for the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(first.data('lat'), first.data('lng')),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  // create the map
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  // plot locations
  $.each(locationsDOM, function(i){
    var item = $(this);
    //  animate markers in to place
    setTimeout(function() {
      generateMarker(item);
    }, i * 250);
    
  });


  function generateMarker(elm){
    var elm = $(elm).data(), item = {};

    // create visual marker
    item.marker = new google.maps.Marker({
      position: new google.maps.LatLng(elm.lat, elm.lng), 
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP,
      title: elm.name
    });

    // create info bubble for marker
    var compiled = _.template("<div class='infowindow'><h2><%= name %></h2><%= description %></div>");
    item.infowindow = new google.maps.InfoWindow({
        content: compiled(elm)
    });                                               
    
    // attach click handler for infowindow
    google.maps.event.addListener(item.marker, 'click', function() {
      item.infowindow.open(map,item.marker);
    });

    //  close infowindow 
    // google.maps.event.addListener(map, 'click', function() {
    //   item.infoWindow.close();
    // });


    locations.push(item);

    // zoom map to ensure all markers are visible
    var southWest = new google.maps.LatLng(28.1752884,-98.478627);
    var northEast = new google.maps.LatLng(33,-96);
    var bounds = new google.maps.LatLngBounds(southWest,northEast);
    map.fitBounds(bounds);


  };



  
});