rposbo/countdown.html

## countdown.html
<html>
<head>
<meta name="viewport" content="width=320" />
<title>@rposbo : UNOFFICIAL Mobile TFL Bus Countdown Board</title>
<style>
body {font-family:calibri; font-size:12px; width:auto; max-width:100%;}
#disclaimer {font-size:10px;}
#disclaimer img {float:left;}
#busListing {display:block;}
a:visited {color:blue;}
ul {list-style-type: none;padding: 0;margin: 0;cursor:auto;}
li{background-image: url(bus.jpg);background-repeat: no-repeat;background-position: 0 .4em;padding: 5px 0 5px 20px;margin: .4em 0;}
.time {margin-right:1em;}
</style>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.2rc1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	// get lat long
	if (navigator.geolocation){
		navigator.geolocation.getCurrentPosition(function (position) {
			getStopListingForLocation(position.coords.latitude,position.coords.longitude);
		});
	} else {
		alert('could not get your location');
	}
});

function getStopListingForLocation(lat, lng){
	var swLat, swLng, neLat, neLng;
	swLat = lat - 0.01;
	swLng = lng - 0.01;
	neLat = lat + 0.01;
	neLng = lng + 0.01;

	var endpoint = 'http://countdown.tfl.gov.uk/markers/swLat/' + swLat + '/swLng/' + swLng + '/neLat/' + neLat + '/neLng/' + neLng + '/';

	$.ajax({
				type: 'POST',
				url: 'Proxy.asmx/getMeTheDataFrom',
				data: "{'here':'"+endpoint+"'}",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data) { displayStopListing(data.d); }
			});
}

function displayStopListing(stopListingData){
var data = $.parseJSON(stopListingData);
	$.each(data.markers, function(i,item){
      $("<li/>")
	  .text(item.name + ' (stop ' + item.stopIndicator + ') to ' + item.towards)
	  .attr("onclick", "getBusListingForStop(" + item.id + ")")
	  .attr("class", "stopListing")
	  .attr("id", item.id)
	  .appendTo("#stopListing");
    });
}

function getBusListingForStop(stopId){
var endpoint = 'http://countdown.tfl.gov.uk/stopBoard/' + stopId + '/';

	$("#" + stopId).attr("onclick","");

	$.ajax({
		type: 'POST',
		url: 'Proxy.asmx/getMeTheDataFrom',
		data: "{'here':'"+endpoint+"'}",
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: function(data) { displayBusListing(data.d, stopId); }
	});
}

function displayBusListing(busListingData, stopId){
	var data = $.parseJSON(busListingData);

  $("<h2 />").text("Buses Due").appendTo("#" + stopId);

	$.each(data.arrivals, function(i,item){

      $("<span/>")
	  .text(item.estimatedWait)
	  .attr("class", "busListing time")
	  .appendTo("#" + stopId);

      $("<span/>")
	  .text(item.routeName + ' to ' + item.destination)
	  .attr("class", "busListing info")
	  .appendTo("#" + stopId);

      $("<br/>")
	  .appendTo("#" + stopId);
    });
}
</script>
</head>
<body>
<div id="hello">Using the extremely handy TFL bus countdown thingy, but made for mobiles by <a href="http://twitter.com/rposbo">@rposbo</a></div>
<div id="busListing"></div>
<h1>Bus Stops Near You (tap one)</h1>
<ul id="stopListing"></ul>
<div id="disclaimer"> All of the data is coming from the TFL website. I am not a TFL employee and this site is in no way endorsed by TFL. The functionality of this site is in no way guaranteed and should TFL change their site at all, this one will break! This page may or may not work on your device, and it curently relies on you device's geolocation (location sharing) functionality. I'm just making something I think might be handy for me, and you can now have a go too!</div>
</body>
</html>
	<html>
	<head>
	<meta name="viewport" content="width=320" />
	<title>@rposbo : UNOFFICIAL Mobile TFL Bus Countdown Board</title>
	<style>
	body {font-family:calibri; font-size:12px; width:auto; max-width:100%;}
	#disclaimer {font-size:10px;}
	#disclaimer img {float:left;}
	#busListing {display:block;}
	a:visited {color:blue;}
	ul {list-style-type: none;padding: 0;margin: 0;cursor:auto;}
	li{background-image: url(bus.jpg);background-repeat: no-repeat;background-position: 0 .4em;padding: 5px 0 5px 20px;margin: .4em 0;}
	.time {margin-right:1em;}
	</style>
	<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.2rc1.js"></script>
	<script language="javascript" type="text/javascript">
	$(document).ready(function() {
	// get lat long
	if (navigator.geolocation){
	navigator.geolocation.getCurrentPosition(function (position) {
	getStopListingForLocation(position.coords.latitude,position.coords.longitude);
	});
	} else {
	alert('could not get your location');
	}
	});

	function getStopListingForLocation(lat, lng){
	var swLat, swLng, neLat, neLng;
	swLat = lat - 0.01;
	swLng = lng - 0.01;
	neLat = lat + 0.01;
	neLng = lng + 0.01;

	var endpoint = 'http://countdown.tfl.gov.uk/markers/swLat/' + swLat + '/swLng/' + swLng + '/neLat/' + neLat + '/neLng/' + neLng + '/';

	$.ajax({
	type: 'POST',
	url: 'Proxy.asmx/getMeTheDataFrom',
	data: "{'here':'"+endpoint+"'}",
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function(data) { displayStopListing(data.d); }
	});
	}

	function displayStopListing(stopListingData){
	var data = $.parseJSON(stopListingData);
	$.each(data.markers, function(i,item){
	$("<li/>")
	.text(item.name + ' (stop ' + item.stopIndicator + ') to ' + item.towards)
	.attr("onclick", "getBusListingForStop(" + item.id + ")")
	.attr("class", "stopListing")
	.attr("id", item.id)
	.appendTo("#stopListing");
	});
	}

	function getBusListingForStop(stopId){
	var endpoint = 'http://countdown.tfl.gov.uk/stopBoard/' + stopId + '/';

	$("#" + stopId).attr("onclick","");

	$.ajax({
	type: 'POST',
	url: 'Proxy.asmx/getMeTheDataFrom',
	data: "{'here':'"+endpoint+"'}",
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function(data) { displayBusListing(data.d, stopId); }
	});
	}

	function displayBusListing(busListingData, stopId){
	var data = $.parseJSON(busListingData);

	$("<h2 />").text("Buses Due").appendTo("#" + stopId);

	$.each(data.arrivals, function(i,item){

	$("<span/>")
	.text(item.estimatedWait)
	.attr("class", "busListing time")
	.appendTo("#" + stopId);

	$("<span/>")
	.text(item.routeName + ' to ' + item.destination)
	.attr("class", "busListing info")
	.appendTo("#" + stopId);

	$("<br/>")
	.appendTo("#" + stopId);
	});
	}
	</script>
	</head>
	<body>
	<div id="hello">Using the extremely handy TFL bus countdown thingy, but made for mobiles by <a href="http://twitter.com/rposbo">@rposbo</a></div>
	<div id="busListing"></div>
	<h1>Bus Stops Near You (tap one)</h1>
	<ul id="stopListing"></ul>
	<div id="disclaimer"> All of the data is coming from the TFL website. I am not a TFL employee and this site is in no way endorsed by TFL. The functionality of this site is in no way guaranteed and should TFL change their site at all, this one will break! This page may or may not work on your device, and it curently relies on you device's geolocation (location sharing) functionality. I'm just making something I think might be handy for me, and you can now have a go too!</div>
	</body>
	</html>