some js cleaning and comment adding

index.html

@@ -119,18 +119,18 @@
 			Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) 
 		}) 
 
+		// so long, so messy
 
 	  function showInfo(data) {
 	  	gData = data
-
+	  	// make the table, and the search bar
 	  	Sheetsee.makeTable(gData, "#hackSpotsTable")
 	  	Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
 
-    // SO MESSY, I KNOW
+	  	// when someone clicks on a row, highlight it and
-
+	  	// re-center the map
 	  	$('.spotRow').live("click", function(event) {
 	  		$('.spotRow').removeClass("selectedRow")
-  		console.log("clicked!")
 	 			var rowNumber = $(this).closest("tr").attr("id")
 	 			$('#' + rowNumber).addClass("selectedRow")
 	 			var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
@@ -140,7 +140,6 @@
 			  $('#latestSpot').css("display", "none")
 			  $('#selectedSpot').html(selectedSpot).css("display", "inline")
 			  var selectedCoords = [dataElement[0].lat, dataElement[0].long]
-		  console.log(dataElement[0].name, dataElement[0].lat, dataElement[0].long, selectedCoords)
 			  matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
 			  var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
 				addPopups(map, markerLayer)
@@ -160,46 +159,50 @@
 	  		return latestCompleteSpot[0]
 	  	}
 
+	  	// find the latest spot with the most important
+	  	// info filled in (to prevent map breaking if
+	  	// someone is currently editing spreadsheet)
 	  	var theLatestSpot = findLatestCompleteSpot(gData)
 		  var latestSpot = ich.latestSpot({
 			   rows: theLatestSpot
 		  })
 			$('#latestSpot').html(latestSpot)
 
-	  function refocusMap(){
-	  	var searchTerm = $('#tableFilter').val()
-	  	var searchData = Sheetsee.getKeyword(gData, searchTerm)
-			var searchCoords = ""
-			// map.setView(viewCoords, zoomLevel)
-	  }
-   //}) 
-
 			function highlightLastMarker(geoJSON, highlightColor) {
 				geoJSON[0].properties["marker-color"] = highlightColor
 				return geoJSON
 			}
 
+			// create geoJSON with coordinates and other
+			// useful bits from the original data
 			var optionsJSON = ["name", "address", "city", "rowNumber"]
 		  var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
+		  // change the color of the most recently added spot's marker
 		  var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
-    // geoJSON[0].properties["maker-color"] = "#E5FF1D"
+		  // create map, tilelayer (map background), markers and popups
 			var map = Sheetsee.loadMap("map")
 			Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
 			var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
 			addPopups(map, markerLayer)
 
+			// design the popups to have the content and
+			// interactions that we want
 			function addPopups(map, markerLayer) {
 			  markerLayer.on('click', function(e) {
-		  // 	e.layer.feature["marker-color"] = "#ff00ff"
+			  // clear any selected rows	
-				// map.marker(geoJSON, map, 11).addTo(map)
 				$('.spotRow').removeClass("selectedRow")
+				// get row number of selected marker
 			  var rowNumber = e.layer.feature.opts.rowNumber.toString()
+			  // find that row in the table and make consider it selected
 			  $('#' + rowNumber).addClass("selectedRow")
+			  // using row number, find that marker in the geoJSON, give it
+			  // the selected marker color
 			  matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
-		  	var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
+			 //  var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
-				addPopups(map, markerLayer)
+				// addPopups(map, markerLayer)
+				// using row number, get the data for the selected spot
 			  var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
-		  	console.log("rowNumber", rowNumber, "dataElement", dataElement)
+			  // take those details and re-write the selected spot section
 				var selectedSpot = ich.selectedSpot({
 				  rows: dataElement
 			 	}) 
@@ -207,18 +210,19 @@
 			  $('#selectedSpot').html(selectedSpot).css("display", "inline")
 			  var feature = e.layer.feature
 			  var popupContent = '<h2>' + feature.opts.name + '</h2>'
-		    e.layer.bindPopup(popupContent,{closeButton: false,})
+			  e.layer.bindPopup(popupContent, {closeButton: false,})
 			  })
 			}
-    // .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q'));
 
 			$('.resetMap').click(function() {
 				$('.spotRow').removeClass("selectedRow")
-			markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
+				markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
+				addPopups(map, markerLayer)
 				$('#latestSpot').css("display", "inline")
 			  $('#selectedSpot').css("display", "none")
 			})
 
+			// find total number of spots added
 			var numberOfSpots = gData.length
 			var theNumberofSpots = ich.theNumberofSpots({
 		  	numberOfSpots: numberOfSpots
@@ -231,7 +235,6 @@
 		 				var origColor = gData[0].hexcolor
 		 				d.properties["marker-color"] = origColor
 		 			}
-
 		    	for (var key in d.opts) {
 		      	var value = d.opts[key].toString().toLowerCase()
 		   			if (key === 'rowNumber' && value.match(rowNumber.toString().toLowerCase())) {
@@ -241,6 +244,7 @@
 		     	}
 		    })
 	 		}
+
  	}
 
 	</script>