<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs 
	title="Multi-Stop San Francisco Muni Arrival Times" 
	title_url="http://www.my511.org/rtt/stopidlookup/default.aspx" 
	author="Dave Sohigian" author_email="gadget@sohigian.com" 
	description="Display real time data for San Franscisco Muni bus system. You can choose up to 3 stops (by ID) and data is retrieved via an XML API from Muni/NextBus. Comments welcome! " 
	author_location="Portland, OR, USA" 
	author_photo="http://farm1.static.flickr.com/60/162462311_ddfcd4d54f_s.jpg" 
	author_aboutme="Based in Portland, OR, Dave works in software sales. See more at http://dave.sohigian.com" 
	author_link="http://dave.sohigian.com" 
	width="300" 
	height="400" 
	thumbnail="http://farm3.static.flickr.com/2758/4326378081_6f05d8906c_o.png" 
	screenshot="http://farm5.static.flickr.com/4051/4326371371_a5959cb12c_o.png" 
	scrolling="false" 
	singleton="false">
<Require feature="dynamic-height"/>
<Require feature="analytics"/>
</ModulePrefs>

<UserPref required="false" name="stoparray" display_name="Stop IDs" datatype="list" />

<UserPref name="refreshMins" datatype="enum" display_name="Refresh every" default_value="2">
  <EnumValue value="1" display_value="1 minute"/>
  <EnumValue value="2" display_value="2 minutes"/>
  <EnumValue value="5" display_value="5 minutes"/>
  <EnumValue value="10" display_value="10 minutes"/>
  <EnumValue value="60" display_value="60 minutes"/>
</UserPref>

<UserPref name="fontsize" display_name="Font Size" datatype="enum" default_value="10">
  <EnumValue value="18" display_value="Large"/>
  <EnumValue value="15" display_value="Medium"/>
  <EnumValue value="12" display_value="Small"/>
  <EnumValue value="10" display_value="Very Small"/>
  <EnumValue value="8" display_value="Tiny"/>
</UserPref>

<Content type="html">

<![CDATA[
<script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>
<style>

.arrivals_odd {
	font-size:10px;
	color:black;
	background-color:#fff7bf;
	}

.arrivals_even {
	font-size:10px;
	color:black;
	background-color:white;
	}
.stopbox {
	border: thin solid black;
	color:white;
	background-color:red;
	font-size:11px;
}
.stopbox a {
	color:white;
	text-decoration:none;
}
.footer {
	background-color:black;
	color:white;
	font-size:10px;
	padding:3px;
	text-align:center;
	border: thin solid red;
}
.footer a {
	color:white;
}
.add_stops_warning {
	display:none;
}
.promote_gadget{
	display:none;
	position:absolute;
	border:5px solid blue;
	z-index:101;
	left:10px;
	top:10px;
	width:85%;
	height:300px;
	background-color:#FFF;
	font-size:12px;
	padding:10px;	
}
</style>

<div id="content_div" class="content"></div>
<div id="no_stops" class="add_stops_warning">You need to add stops before you can use this gadget (you can add up to three). To add a stop, click on the small drop down at the top of the gadget (see green arrow in image below):
<img src="http://farm5.static.flickr.com/4061/4330058271_bd7ec5a727_o.png" width="184" height="153" alt="muni-settings" />
Choose "Edit Settings" (see blue box in image above) and add your stops in the box that appears. You can use the link to the 511.org site (below) to identify stop ID's.
</div>
<div class="footer">
	To find stop ID's, go to 
		<a href="http://www.my511.org/rtt/stopidlookup/default.aspx" target="_blank" >
			511.org site
		</a>
	<br/>
	Like this Gadget? <a href="#" onclick='showPromote();return false;'>Help promote it, or send feedback!</span>
</div>
<div class="promote_gadget" id="promoteGadget">
	<h2>Promote/Feedback</h2>
	Thanks for your interest in this gadget. If you would like to help promote the gadget, use any of the links below. Use the link at the bottom to send feedback to the author.	
	<ul>
	<li><a target="_blank" href="http://bit.ly/munibus">Leave a comment/review on iGoogle</a></li>
	<li><a href="http://twitter.com/home?status=Live%20in%20San%20Francisco%20and%20use%20public%20transit?%20Check%20out%20this%20real-time%20bus%20tracker%20gadget%20-%20http://bit.ly/munibus%20@dsohigian" target="_blank">Promote on Twitter</a></li>

	<li><a href="http://www.facebook.com/sharer.php?u=http://bit.ly/munibus" target="blank">Share on Facebook</a></li>

	<li>Write a blog post: <a target="_blank" href="http://blog.sohigian.com/2010/02/06/trimet-bus-tracking-google-gadget">See example post</a></li>

	<li>Post to a forum (use this URL): http://bit.ly/munibus</li>
	
	<li><A HREF="mailto:dsohigian@gmail.com?Subject=Great%20way%20to%20track%20Muni%20buses&Body=Hi%2C%0A%0AI%20wanted%20to%20let%20you%20know%20about%20a%20cool%20way%20to%20track%20Muni%20buses%20using%20a%20iGoogle%20gadget.%20If%20you%20go%20to%20http%3A//bit.ly/munibus%20you%20can%20get%20a%20gadget%20that%20can%20display%20real-time%20info%20for%20up%20to%203%20Muni%20stops.%20It%27s%20easy%20to%20use%20and%20gets%20it%20data%20straight%20from%20Muni.%0A%0AThanks%2C%0A">Email to friends</A></li>

	<li><a href="http://blog.sohigian.com/contact/" target="_blank">Send feedback to author</a></li>

	</ul>
	<div style="color:red;background-color:yellow;" onclick="hidePromote()"><strong>Click here to close this message.</strong></div>
</div>

<script type="text/javascript">

var prefs = new _IG_Prefs();
var completeHTML = new Array(prefs.getArray("stoparray").length);
var totalCall = 0;

function showPromote(){
document.getElementById("promoteGadget").style.display = 'block';
document.getElementById("content_div").style.height = '350px';
_IG_AdjustIFrameHeight();

}
function hidePromote(){
document.getElementById("promoteGadget").style.display = 'none';
document.getElementById("content_div").style.height = '';
_IG_AdjustIFrameHeight();

}




function displayWarning(text) {
	_gel('content_div').innerHTML = text;
}

function makeCachedRequest(url, callback, params, refreshInterval) {
	var ts = new Date().getTime();
  	var sep = "?";
  	if (refreshInterval && refreshInterval > 0) {
    		ts = Math.floor(ts / (refreshInterval * 1000));
  	}
  	if (url.indexOf("?") > -1) {
    		sep = "&";
  	}
  	url = [ url, sep, "nocache=", ts ].join("");
	 
 	gadgets.io.makeRequest(url, callback, params);
}

function arrivalPredictionRequest(refreshInterval) {    
	
      	var params = {};
      	params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM;
	// Stops Set by User
	var stopIDs = prefs.getArray("stoparray");
	// url for stop info
	var url = "http://webservices.nextbus.com/service/publicXMLFeed?command=predictions&a=sf-muni";
	var stopUrl = "";
	
	callCount = 0;
	//Loop through multiple stops
	for (var i = 0; i < stopIDs.length ; i++) {
		stopUrl = url + "&stopId=" + stopIDs[i];
		makeCachedRequest(stopUrl, displayTracker, params,refreshInterval);
	}
	
	
}

function sortByMinutes(a, b) {
	//sorts bus arrivals by minutes
    	var x = parseInt(a.minutes);
   	var y = parseInt(b.minutes);
    	return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

function busarrival(minutes,bus){
	//array object to hold results to be sorted
	this.minutes = minutes;
	this.bus = bus;
}

function fontSizeStyle (mod){
	var fontSize = "font-size:" + (prefs.getInt("fontsize")+ mod) + "px;"; 
	return fontSize;
}

function displayTracker(obj) {
	// URL for looking up stops http://www.my511.org/rtt/stopidlookup/default.aspx
	// Add 1 to the number of calls of the API
	
	callCount ++;
	var html = "";
	var domdata = obj.data;
	var arrivaldata = new Array();
	var lineColor = 0;
	var stopPrediction = domdata.getElementsByTagName("predictions");
	html += "<div class='stopbox' ";
	html += "' style='" + fontSizeStyle(2) + "'>";
	html += "Stop: " + stopPrediction.item(0).getAttribute("stopTitle");
	html += " ";
	html += "</div>";

	//Loop through the stopPredictions
	for (var i = 0; i < stopPrediction.length; i++) {
		//now get the predictions for that line
		var busPrediction = stopPrediction.item(i).getElementsByTagName("prediction");
		for (var j = 0; j < busPrediction.length; j++) {
       		arrivaldata[arrivaldata.length++] = new busarrival(busPrediction.item(j).getAttribute("minutes"),stopPrediction.item(i).getAttribute("routeTitle"));
		}
	}
	
	arrivaldata.sort(sortByMinutes);
	
	for (var j = 0; j < arrivaldata.length; j++) {
			lineColor ++;
       		html += "<div class='";
			((lineColor % 2) == 0)? html+="arrivals_even" : html+="arrivals_odd";
			html += "' style='" + fontSizeStyle(0) + "'>";
			html += arrivaldata[j].bus;
			html += " in " + arrivaldata[j].minutes + " minutes";
			html += "</div>";
	};
 	
	// add on html to global array for HTML
	completeHTML[callCount-1] = html;
	
	//If we have made the last call to the API, then display the results
	if (callCount == completeHTML.length) {
		completeHTML.sort();
		var completeHTMLstring = "";
		for (var j = 0; j < completeHTML.length; j++) {
			completeHTMLstring += completeHTML[j];
		}
		_gel('content_div').innerHTML = completeHTMLstring;
		completeHTML.clear;
	}
	
	_IG_AdjustIFrameHeight();
}

var refreshRate = Math.ceil(prefs.getInt("refreshMins"));
if(refreshRate <= 0){refreshRate = 1};
var stopsNumber = prefs.getArray("stoparray").length
if (stopsNumber > 0 && stopsNumber < 4){
	gadgets.util.registerOnLoadHandler(arrivalPredictionRequest(refreshRate));
	setInterval ( "arrivalPredictionRequest(refreshRate)", refreshRate * 60000);
} else if (prefs.getArray("stoparray").length > 3) {
	displayWarning("You may only have a maximum of 3 stops");
} else {
	document.getElementById("no_stops").style.display = 'inline';

}
 
</script>

<script>
  _IG_Analytics("UA-747105-6", "/muni-tracker");
</script>
]]>
</Content>
</Module>