--- a/src/main/resources/templates/index.html	Wed Aug 24 10:53:06 2011 -0400
+++ b/src/main/resources/templates/index.html	Wed Aug 24 15:46:07 2011 -0400
@@ -12,39 +12,67 @@
 	<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
 	
 	<script type="text/javascript">
-		var zoom=13
-		var map;
+		var OLMap = {
+			map : null,
+			createMap : function() {
+					OLMap.map = new OpenLayers.Map ("map", {
+					controls:[
+						new OpenLayers.Control.Navigation(),
+						new OpenLayers.Control.PanZoom(),
+						],
+					//maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
+					//maxResolution: 156543.0399,
+					//zoom: 2,
+					numZoomLevels: 5,
+					minZoomLevel: 5,
+					//units: 'm',
+					projection: new OpenLayers.Projection("EPSG:900913"),
+					displayProjection: new OpenLayers.Projection("EPSG:4326")
+				});
+				OLMap.map.addLayer(new OpenLayers.Layer.OSM());
+			},
+			addTrail : function(uri, color) {
+				var layer = new OpenLayers.Layer.GML(uri, uri, {
+					format: OpenLayers.Format.GPX,
+					style: {strokeColor: color, strokeWidth: 5, strokeOpacity: 0.5},
+					projection: new OpenLayers.Projection("EPSG:4326")
+				});
+				OLMap.map.addLayer(layer);
+			},
+			centerMap : function(json) {
+				var bounds = OLMap.getBounds(json);
+				var lonLat = bounds.getCenterLonLat().transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject());
+				OLMap.map.setCenter(lonLat, OLMap.map.getZoomForExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject())));
+			},
+			getBounds : function(json) {
+				var minLat = json.events[0].c[0];
+				var maxLat = minLat;
+				var minLong = json.events[0].c[1];
+				var maxLong = minLong;
+				for (i=1; i < json.events.length; i++) {
+					if ((lat = json.events[i].c[0]) < minLat) {
+						minLat = lat;
+						continue;
+					} if ((lat = json.events[i].c[0]) > maxLat) {
+						maxLat = lat;
+						continue;
+					} if ((longi = json.events[i].c[1]) < minLong) {
+						minLong = longi;
+						continue;
+					} if ((longi = json.events[i].c[1]) > maxLong) {
+						maxLong = longi;
+						continue;
+					}
+				}
+				bounds = new OpenLayers.Bounds();
+				bounds.extend(new OpenLayers.LonLat(minLong,minLat));
+				bounds.extend(new OpenLayers.LonLat(maxLong,maxLat));
+				return bounds;
+			}
+			
+		}
+
 		function init() {
-			map = new OpenLayers.Map ("map", {
-				controls:[
-					new OpenLayers.Control.Navigation(),
-					new OpenLayers.Control.PanZoom(),
-					],
-				//maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
-				//maxResolution: 156543.0399,
-				//zoom: 2,
-				numZoomLevels: 5,
-				minZoomLevel: 5,
-				//units: 'm',
-				projection: new OpenLayers.Projection("EPSG:900913"),
-				displayProjection: new OpenLayers.Projection("EPSG:4326")
-			} );
- 
-			map.addLayer(new OpenLayers.Layer.OSM());
-			// Add the Layer with the GPX Track
-			var lgpx = new OpenLayers.Layer.GML("Aug-10-11.gpx", "Aug-10-11.gpx", {
-				format: OpenLayers.Format.GPX,
-				style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
-				projection: new OpenLayers.Projection("EPSG:4326")
-			});
-			map.addLayer(lgpx);
-			var lgpx2 = new OpenLayers.Layer.GML("Jun-26-11.gpx", "Jun-26-11.gpx", {
-				format: OpenLayers.Format.GPX,
-				style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
-				projection: new OpenLayers.Projection("EPSG:4326")
-			});
-			map.addLayer(lgpx2);
-			
 			var jsonData;
 			var http = new XMLHttpRequest();
 			http.open('GET','Jun-26-11.json',false);
@@ -56,41 +84,10 @@
 			};
 			http.send(null);
 			initGraphs();	
-			centerMapOnTrail(jsonData);
-		}
-
-		function centerMapOnTrail(json) {
-			var bounds = getBounds(json);
-
-			var lonLat = bounds.getCenterLonLat().transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
-			map.setCenter(lonLat, map.getZoomForExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject())));
-
-		}
-		
-		function getBounds(json) {
-			var minLat = json.events[0].c[0];
-			var maxLat = minLat;
-			var minLong = json.events[0].c[1];
-			var maxLong = minLong;
-			for (i=1; i < json.events.length; i++) {
-				if ((lat = json.events[i].c[0]) < minLat) {
-					minLat = lat;
-					continue;
-				} if ((lat = json.events[i].c[0]) > maxLat) {
-					maxLat = lat;
-					continue;
-				} if ((longi = json.events[i].c[1]) < minLong) {
-					minLong = longi;
-					continue;
-				} if ((longi = json.events[i].c[1]) > maxLong) {
-					maxLong = longi;
-					continue;
-				}
-			}
-			bounds = new OpenLayers.Bounds();
-			bounds.extend(new OpenLayers.LonLat(minLong,minLat));
-			bounds.extend(new OpenLayers.LonLat(maxLong,maxLat));
-			return bounds;
+			OLMap.createMap();
+			OLMap.addTrail("Jun-26-11.gpx","blue");
+			OLMap.addTrail("Aug-10-11.gpx","red");
+			OLMap.centerMap(jsonData);
 		}
 
 		function initGraphs() {