initial checkin

max-mapper · Feb 15, 2011 · 9f152a0 · 9f152a0
commit 9f152a0
Show file tree

Hide file tree

Showing 25 changed files with 3,142 additions and 0 deletions.
diff --git a/images/1288544270_player_pause.png b/images/1288544270_player_pause.png
diff --git a/images/1288544284_player_stop.png b/images/1288544284_player_stop.png
diff --git a/images/1288544387_player_play.png b/images/1288544387_player_play.png
diff --git a/images/ajax-loader.png b/images/ajax-loader.png
diff --git a/images/form-check-off.png b/images/form-check-off.png
diff --git a/images/form-check-on.png b/images/form-check-on.png
diff --git a/images/form-radio-off.png b/images/form-radio-off.png
diff --git a/images/form-radio-on.png b/images/form-radio-on.png
diff --git a/images/icon-search-black.png b/images/icon-search-black.png
diff --git a/images/icons-18-black.png b/images/icons-18-black.png
diff --git a/images/icons-18-white.png b/images/icons-18-white.png
diff --git a/images/icons-36-black.png b/images/icons-36-black.png
diff --git a/images/icons-36-white.png b/images/icons-36-white.png
diff --git a/images/index.jpg b/images/index.jpg
diff --git a/images/play.jpg b/images/play.jpg
diff --git a/images/point.png b/images/point.png
diff --git a/images/shadow.png b/images/shadow.png
diff --git a/index.html b/index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+	<!-- Change this if you want to allow scaling -->
+    <meta name="viewport" content="width=default-width; user-scalable=no" />
+
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+
+    <title>FindABus</title>
+
+	<link rel="stylesheet"  href="jquery.mobile-1.0a3.min.css" />
+
+	<style type="text/css">
+		#icon-container{
+			margin-top: 4em;
+			text-align:center;
+		}
+		#buttons{
+			margin-top: 1em;
+		}
+		#buttons a{
+			margin: 3em 0;
+		}
+		.centered{
+			text-align: center;
+		}
+		.centeredAudio{
+			margin-top: 4em;
+			text-align: center;
+		}
+		#map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }
+	</style>
+
+
+	<!-- jquery mobile scripts -->
+	<script src="script/jquery-1.4.3.min.js"></script>
+	<script src="script/jquery.mobile-1.0a3.min.js"></script>    
+
+	<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />		
+
+	<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
+	<script type="text/javascript" charset="utf-8" src="script/mustache.js"></script>
+	<script src="http://maps.google.com/maps/api/js?sensor=true"> </script> 
+
+  <script type="text/javascript" charset="utf-8">
+    var pictureSource;   // picture source for iPhone
+    var useragent; // string determining what our user agent is	
+  	var media;
+
+    var fleetUrl; //used for integrating with zonar systems
+    function busUrl(fleetId) {
+      // implement your transit bus route here
+    }
+
+  	function onBodyLoad()
+  	{
+  		document.addEventListener("deviceready",onDeviceReady,false);
+  	}
+
+  	/* When this function is called, PhoneGap has been initialized and is ready to roll */
+  	function onDeviceReady()
+  	{
+  		useragent = navigator.userAgent;
+  		if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) 
+  		{
+  			pictureSource=navigator.camera.PictureSourceType;
+  		}
+  	}
+
+	  function getFleet() {
+	    $.mobile.pageLoading();
+	    $.ajax({
+       url: fleetUrl,
+       dataType: 'jsonp',
+       success: function(data) {
+         $.mobile.pageLoading(true);
+         var tmpl = $('#listTemplate').text();
+         data = data['assetlist'];
+         $('#fleetList').html(Mustache.to_html(tmpl, data)).listview('refresh');
+       }
+     });
+	  }
+
+	  function getBus(fleetId) {	    
+	    $.ajax({
+        url: busUrl(fleetId.replace(' ', '%20')),
+        dataType: 'jsonp',
+        success: function(data) {
+          var data = data['currentlocations']['asset'];
+          showMap(data['lat'], data['long']);
+        }
+      });
+	  }
+
+	  function showMap(latitude, longitude) {
+      var geocoder = new google.maps.Geocoder();
+      var latlng = new google.maps.LatLng(latitude, longitude);
+      var address;				
+      var myOptions = {
+      	center: latlng,
+      	zoom: 13,
+      	mapTypeId: google.maps.MapTypeId.ROADMAP
+      };
+      var infowindow = new google.maps.InfoWindow();
+    	var directionDisplay;
+      var directionsService = new google.maps.DirectionsService();
+      var directionsDisplay = new google.maps.DirectionsRenderer();
+      var markerArray = [];
+      var stepDisplay = new google.maps.InfoWindow();
+      var marker1 = new google.maps.Marker();
+
+    	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+    	directionsDisplay.setMap(map);
+
+      var image = new google.maps.MarkerImage('images/point.png',
+        new google.maps.Size(64, 31),
+        new google.maps.Point(0,0),
+        new google.maps.Point(16, 31)
+      );
+
+      var shadow = new google.maps.MarkerImage('images/shadow.png',
+        new google.maps.Size(64, 52),
+        new google.maps.Point(0,0),
+        new google.maps.Point(10,32)
+      );
+
+    	var marker = new google.maps.Marker({
+        position: new google.maps.LatLng(latitude,longitude), 
+        clickable: true,
+        icon: image,
+        shadow: shadow,
+        map: map 
+      });  
+
+    };
+
+  </script>
+  </head>
+  <body onload="onBodyLoad()">
+  	<div data-role="page" data-theme="c" id="photo">		
+	  	<div data-role="header">
+  			<h1>FIND A BUS</h1>
+  		</div>
+  		<div id="icon-container">  
+  		  <h1><i>BUSFINDER 5000</i></h1>
+  		</div>
+  		<div data-role="content" id="buttons">		
+  			<a href="#fleets" data-role="button" onclick="getFleet();">Find by Bus #</a> 
+  		</div>
+  	</div>
+
+    <div data-role="page" data-theme="c" id="fleets">		
+  	  <div data-role="header">
+  	    <h1>Bus List</h1>
+  		</div>
+  		<div data-role="content">
+  		  <ul id="fleetList" data-role="listview" data-dividertheme="e">
+    		</ul>
+  		</div>
+  	</div>
+
+  	<div data-role="page" data-theme="c" id="map">		
+  	  <div data-role="header">
+  	    <h1>Bus Location</h1>
+  		</div>
+  		<div data-role="content">
+  		  <div id="map_canvas"></div>
+  		</div>
+  	</div>
+
+  	<script type="text/mustache" id="listTemplate">
+    	{{#assets}} 
+      <li><a href="#map" data-transition="slide" onclick="getBus('{{fleet}}');">{{fleet}}</a></li>
+      {{/assets}}
+  	</script>
+
+  </body>
+</html>
diff --git a/jquery.mobile-1.0a3.min.css b/jquery.mobile-1.0a3.min.css