messed it up so went back

index.html

@@ -6,7 +6,6 @@
 		<script src='js/jquery.js '></script>
 		<script type="text/javascript" src='js/tabletop.js'></script>
 		<script type="text/javascript" src='js/sheetsee.js'></script>
-		<script type="text/javascript" src='js/site.js'></script>
 		<link rel="shortcut icon" href="https://raw.github.com/jlord/hack-spots/master/favico.png"/>
 
     <link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.0/mapbox.css' rel='stylesheet' />
@@ -104,39 +103,121 @@
 	<script type="text/javascript">
   document.addEventListener('DOMContentLoaded', function() {
   	var gData
-		// tabletop, go get the datas!
   	var URL = "0Ao5u1U6KYND7dFVkcnJRNUtHWUNKamxoRGg4ZzNiT3c"
 		Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } ) 
 	}) 
 
 
   function showInfo(data) {
-		// additional site specfic functions are in site.js
-
   	gData = data
-		// make a table and a table filter
+
   	Sheetsee.makeTable(gData, "#hackSpotsTable")
   	Sheetsee.initiateTableFilter(gData, "#tableFilter", "#hackSpotsTable")
 
-		// on start, display the latest spot to be added
+    // SO MESSY, I KNOW
+
+  	$('.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")
+ 			var selectedSpot = ich.selectedSpot({
+			  rows: dataElement
+		  })
+		  $('#latestSpot').css("display", "none")
+		  $('#selectedSpot').html(selectedSpot).css("display", "inline")
+		  var selectedCoords = [dataElement[0].lat, dataElement[0].long]
+		  console.log(selectedCoords)
+		  matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
+		  console.log(geoJSON)
+		  var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
+			addPopups(map, markerLayer)
+		  map.setView(selectedCoords, 13)
+ 		})
+
   	var theLatestSpot = gData.reverse()[0]
-		// use icanhas to generate the contents for the div
+	  var latestSpot = ich.latestSpot({
-	  var latestSpot = ich.latestSpot({ rows: theLatestSpot })
+		   rows: theLatestSpot
-		// write it to the div!
+	  })
 	  $('#latestSpot').html(latestSpot)
 
-		// create the geoJSON with these added properties
+	  function refocusMap(){
+	  	var searchTerm = $('#tableFilter').val()
+	  	var searchData = Sheetsee.getKeyword(gData, searchTerm)
+			var searchCoords = ""
+			// map.setView(viewCoords, zoomLevel)
+	  }
+   //}) 
+
+	function highlightLastMarker(geoJSON, highlightColor) {
+		geoJSON.reverse()[0].properties["marker-color"] = highlightColor
+		return geoJSON
+	}
+
 	  var optionsJSON = ["name", "address", "city", "rowNumber"]
     var geoJSONnoHL = Sheetsee.createGeoJSON(gData, optionsJSON)
     var geoJSON = highlightLastMarker(geoJSONnoHL, "#FF4646")
-		// make map, add tiles, markers, popups
+    // geoJSON[0].properties["maker-color"] = "#E5FF1D"
 		var map = Sheetsee.loadMap("map")
 		Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
 		var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
 		addPopups(map, markerLayer)
+
+		function addPopups(map, markerLayer) {
+		  markerLayer.on('click', function(e) {
+		  // 	e.layer.feature["marker-color"] = "#ff00ff"
+				// map.marker(geoJSON, map, 11).addTo(map)
+				$('.spotRow').removeClass("selectedRow")
+		  	var rowNumber = e.layer.feature.opts.rowNumber.toString()
+		  	$('#' + rowNumber).addClass("selectedRow")
+		  	matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
+		  	console.log(geoJSON)
+		  	var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
+				addPopups(map, markerLayer)
+		  	var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
+		  	console.log("rowNumber", rowNumber, "dataElement", dataElement)
+ 				var selectedSpot = ich.selectedSpot({
+			  	rows: dataElement
+		 	 	}) 
+		  	$('#latestSpot').css("display", "none")
+		  	$('#selectedSpot').html(selectedSpot).css("display", "inline")
+		    var feature = e.layer.feature
+		    var popupContent = '<h2>' + feature.opts.name + '</h2>'
+		    e.layer.bindPopup(popupContent,{closeButton: true,})
+		  })
+		}
+    // .addControl(L.mapbox.geocoderControl('examples.map-vyofok3q'));
+
+		$('.resetMap').click(function() {
+			$('.spotRow').removeClass("selectedRow")
+			markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
+			$('#latestSpot').css("display", "inline")
+		  $('#selectedSpot').css("display", "none")
+		})
+
+		function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
+	 		geoJSON.forEach(function (d) {
+	 			if (d.properties["marker-color"] === highlightColor) {
+	 				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())) {
+	     	    d.properties["marker-color"] = highlightColor
+	     	    return geoJSON
+	     		}
+	     	}
+	    })
+ 		}
  	}
 
 	</script>
 
+	<script type="text/javascript">
+		// console.log(gData)
+	</script>
 </body>
 </html>

js/site.js

@@ -1,81 +0,0 @@
-
-// this is so super messy right now, sorry!
-
-    $('.spotRow').live("click", function(event) {
-  		$('.spotRow').removeClass("selectedRow")
-  		console.log("clicked!")
-      // get the row number from the table's class and select it
- 			var rowNumber = $(this).closest("tr").attr("id")
- 			$('#' + rowNumber).addClass("selectedRow")
-       // filter out that rownumber from the data
- 			var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
-       // use icanhas to make spot detail div
- 			var selectedSpot = ich.selectedSpot({ rows: dataElement })
-       // swap out latest spot for selected spot with its new content
-		  $('#latestSpot').css("display", "none")
-		  $('#selectedSpot').html(selectedSpot).css("display", "inline")
-      // grab the lat/long associated with that rownumber to
-      // redraw the map
-		  var selectedCoords = [dataElement[0].lat, dataElement[0].long]
-      // change the marker color for this element in the geoJSON
-		  matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
-      // add the new marker layer, popups and reset view to zoon in more
-		  var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 13)
-			addPopups(map, markerLayer)
-		  map.setView(selectedCoords, 13)
- 		})
-
-  // the most recently added spot should show by default
-  // and have a matching red marker
-	function highlightLastMarker(geoJSON, highlightColor) {
-		geoJSON[0].properties["marker-color"] = highlightColor
-		return geoJSON
-	}
-
-	function addPopups(map, markerLayer) {
-	  markerLayer.on('click', function(e) {
-	  // 	e.layer.feature["marker-color"] = "#ff00ff"
-			// map.marker(geoJSON, map, 11).addTo(map)
-			$('.spotRow').removeClass("selectedRow")
-	  	var rowNumber = e.layer.feature.opts.rowNumber.toString()
-	  	$('#' + rowNumber).addClass("selectedRow")
-	  	matchGeoJSONbyRowNumber(rowNumber, geoJSON, gData, "#FF4646")
-	  	console.log(geoJSON)
-	  	var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, 11)
-			addPopups(map, markerLayer)
-	  	var dataElement = Sheetsee.getMatches(gData, rowNumber, "rowNumber")
-	  	console.log("rowNumber", rowNumber, "dataElement", dataElement)
-				var selectedSpot = ich.selectedSpot({
-		  	rows: dataElement
-	 	 	})
-	  	$('#latestSpot').css("display", "none")
-	  	$('#selectedSpot').html(selectedSpot).css("display", "inline")
-	    var feature = e.layer.feature
-	    var popupContent = '<h2>' + feature.opts.name + '</h2>'
-	    e.layer.bindPopup(popupContent,{closeButton: false,})
-	  })
-	}
-
-	$('.resetMap').click(function() {
-		$('.spotRow').removeClass("selectedRow")
-		Sheetsee.addMarkerLayer(geoJSON, map, 11)
-		$('#latestSpot').css("display", "inline")
-	  $('#selectedSpot').css("display", "none")
-	})
-
-	function matchGeoJSONbyRowNumber(rowNumber, geoJSON, gdata, highlightColor) {
- 		geoJSON.forEach(function (d) {
- 			if (d.properties["marker-color"] === highlightColor) {
- 				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())) {
-     	    d.properties["marker-color"] = highlightColor
-     	    return geoJSON
-     		}
-     	}
-     })
-    }