extracted source

Appearance/Base.css

@@ -0,0 +1,26 @@
+	body
+	{
+		font-size=11;
+		font-family='Trebuchet MS';
+		width:130;
+		height:150;
+		margin: 0px;
+		padding-top: 6px;
+		padding-left: 9px;
+		color='white';
+	}
+	td
+	{
+		font-size=11;
+		font-family='Trebuchet MS';
+		color='white';
+	}
+
+	.tab
+	{
+		cursor: hand;
+	}
+
+	.storeUserData {
+	      behavior:url(#default#userData);
+        }

Behaviour/Ajax.js

@@ -0,0 +1,175 @@
+SEQWater = {};
+SEQWater.BROWSER_MODE = false;
+
+ // Make an ajax call to the web server (too many comments)
+ function PerformAjaxCall(dataManager) 
+ {
+ 	$.get('http://www.seqwater.com.au/public/dam-levels',function(doc) {
+		// Extract the info from the xml and create javascript Dam objects.
+		var dams = ExtractDamObjectsFromDataSource(doc);
+		RenderDams(dams);
+		$("#WaitDiv").hide();
+
+		// Save the xml to the local store using IE's persistence
+		// so that the data can be instantly displayed when it next
+		// runs.			
+		dataManager.save();
+
+		// Start a timer to periodically check for new data - once every 6 hours
+		clearTimeout(SEQWater.refreshTimer);
+		SEQWater.refreshTimer = setTimeout(function() { PerformAjaxCall(dataManager); }, 2 * 60 * 60 * 1000);
+
+	});
+ }
+
+function getLastUpdateText() {
+	// Show the time the the info was last correct at
+	var lastUpdate = new Date(SEQWater.lastUpdated * 1);
+	var dateString = lastUpdate.toLocaleDateString();
+	return dateString.substring(dateString.indexOf(',') + 2, dateString.length);
+}
+
+// Display the dams to the browser.
+function RenderDams(dams)
+{	
+	// 'total' is an instance of the Dam object and it can render itself
+	SEQWater.total.Render();
+	var dateString = getLastUpdateText();
+	$("#InfoLastUpdated").text(dateString);
+
+	// Each dam object knows how to render itself
+	for(index in dams)
+	{
+		dams[index].Render();
+	}
+}
+
+// Javascript object that represents a dam
+function Dam(name, fullSupplyLevel, volume, level, stored, percent, change, rain)
+{
+	this.name = name;
+	this.fullSupplyLevel = fullSupplyLevel;
+	this.volume = volume;
+	this.level = level;
+	this.stored = stored;
+	this.percent = percent;
+	this.change = change;
+	this.rain = rain;
+
+	var nameCode = this.name.substring(0, 3);
+	var nameWithGraphCode = "Graph" + nameCode;		
+
+	// Object method to render itself
+	this.Render = function()
+	{
+		var percentage = this.stored / this.volume * 100;
+		var remaining = percentage > 100 ? 0 : 100-percentage;
+
+		var fullGraph = $("#" + nameWithGraphCode + "Full");
+		var emptyGraph = $("#" + nameWithGraphCode + "Empty");
+		var percentGraph = $("#" + nameWithGraphCode + "Percent");
+		var altFormatGraph = $("#altFormat");
+
+		var rainElem = $("#Rain" + nameCode);
+		var deltaElem = $("#Delta" + nameCode);
+
+		fullGraph.width(Math.min(100,percentage));
+		emptyGraph.width(remaining);
+		percentGraph.text(percentage.toFixed(2) + "%");
+		fullGraph.attr('alt', altFormatGraph.text().replace("{0}", this.stored).replace("{1}", this.volume));
+		emptyGraph.attr('alt', fullGraph.attr('alt'));
+		rainElem.text(this.rain + " mm");
+		deltaElem.text(parseFloat(this.change).toFixed(3) + "%");
+	}
+}
+
+function dummyData() {
+	var wivenhoe = new Dam('Wivenhoe', "67", "1165238", "0", "1190216", "100", "0.000", "0");
+	var totals = new Dam('Totals', "-", "1759389", "0", "1797205", "100", "0.000", "0");
+	var northPine = new Dam('North Pine', "39.63", "214302", "0", "213450", "99.6", "0.000", "0");
+	var somerset = new Dam('Somerset', "99", "379849", "0", "393539", "100", "0.000", "0");
+
+	SEQWater.lastUpdated = '1292508000000';
+	SEQWater.rateOfConsumption = 686000000.0;
+
+	SEQWater.total = totals;
+	return [wivenhoe, northPine, somerset];
+}
+
+function extractDataFromHTML(htmldoc) {
+	var dams = [];
+
+	$(htmldoc).find('.TableDataAllDams:last').find('tbody').find('tr').each(function(i) {
+		var dam_name_tag = $(this).find('td').first();
+
+		dam_name_tag.text().match(/(.+) Dam/);
+		var dam_name = RegExp.$1;
+
+		dam_name_tag.attr('id').match(/dam(\d+)Nam/);
+		var dam_id = RegExp.$1;				
+
+		dams[dam_name] = new Dam(
+					dam_name,
+					-1,
+					$(htmldoc).find('#dam'+dam_id+'Max').text().replace(/,/g,''),
+					"0",
+					$(htmldoc).find('#dam'+dam_id+'Vol').text().replace(/,/g,''),
+					$(htmldoc).find('#dam'+dam_id+'Per').text().replace(',',''),
+					"0.0000",
+					0
+				);
+
+	});
+
+	dams['Wivenhoe'].fullSupplyLevel = 67;
+	dams['North Pine'].fullSupplyLevel = 39.63;
+	dams['Somerset'].fullSupplyLevel = 99;
+
+	SEQWater.lastUpdated = $(htmldoc).find('.TableDataAllDams').find('h2').first().text();
+	SEQWater.rateOfConsumption = 686000000.0;
+
+	SEQWater.total = new Dam('Totals', "-", $(htmldoc).find('#dam30Max').text().replace(/,/g,''), "0", $(htmldoc).find('#dam30Vol').text().replace(/,/g,''), $(htmldoc).find('#dam30Per').text().replace(/,/g,''), "0.000", "0");
+	return [dams['Wivenhoe'], dams['North Pine'], dams['Somerset']];
+}
+
+function extractDataFromXml(xmldoc) {
+	// Get the date of the last update and the rate of consumption
+	SEQWater.lastUpdated = $(xmldoc).find('root').attr('lastUpdated');
+	SEQWater.rateOfConsumption = parseFloat($(xmldoc).find('root').attr('rateOfConsumption'));
+
+	var dams = [];
+	$(xmldoc).find('dam').each( function(i) {
+		var elem = $(this);
+		var dam  = new Dam(
+			elem.attr('name'),
+			elem.find('fullSupplyLevel').text(),
+			elem.find('volume').text(),
+			elem.find('level').text(),
+			elem.find('stored').text(),
+			elem.find('percent').text(),
+			elem.find('change').text(),
+			elem.find('rain').text()
+		);
+
+		if (dam.name == "Totals")
+		{
+			// We have a total object that the totals are stored in	
+			SEQWater.total = dam;
+		}
+		else
+		{
+			// Add the dam into the array of dams
+			dams.push(dam);
+		}
+	});
+
+	return dams;
+}
+
+// Extact the information from the XML from the ajax call 
+// and create an array of Dams
+function ExtractDamObjectsFromDataSource(doc)
+{
+	if (SEQWater.BROWSER_MODE) return dummyData();
+	if (doc != null) return extractDataFromHTML(doc);
+}

Behaviour/UI.js

@@ -0,0 +1,129 @@
+SEQWater.widget = SEQWater.BROWSER_MODE ? getFakeWidget() : getRealWidget();
+SEQWater.dataManager = SEQWater.BROWSER_MODE ? getFakeDataManager() : getXmlDataManager();
+
+function getDamInfo() {
+	// If the program has previously run then the data will be already persisted. Use
+	// that data so that it may be displayed instantly on the screen as there may
+	// be no internet connection at the moment.
+	var doc = SEQWater.dataManager.load();
+
+	// Extract the info from the xml and create javascript Dam objects.
+	if (doc != null)
+	{
+		return ExtractDamObjectsFromDataSource(doc);
+	}
+}
+
+// Program entry point
+function Init()
+{
+	SEQWater.widget.setBackground();
+	$("#WaitDiv").css('display',"inline");
+
+
+	var dams = getDamInfo();
+	if (dams) {
+		// Display the dam info to the browser
+		RenderDams(dams);
+		$("#WaitDiv").hide();
+	}
+
+	var initialTab = SEQWater.widget.getInitialTab();
+	ShowTab(initialTab);
+
+	// Start the periodic ajax calling
+	PerformAjaxCall(SEQWater.dataManager); 
+}
+
+SEQWater.widget.init();
+
+function setTabImage(tabId, image) {
+	var element = $("#" + tabId + "Img");
+	element.attr('src', image);
+}
+
+function hideTabs() {
+	var tabs = ['Graph', 'Rain', 'Delta', 'Remaining', 'Info'];
+	for (var i in tabs) {
+		var t = tabs[i];
+		var tab = $("#" + t + "Div");
+		$("#" + t + "Div").hide();
+		setTabImage(t, 'Images/' + t + 'Back.png');
+	}	
+}
+
+// Called when a tab changes
+function ShowTab(tab)
+{	
+	hideTabs();
+
+	$('#' + tab + "Div").css('display',"inline");
+	setTabImage(tab, "images/" + tab + ".png");
+
+	SEQWater.widget.writeTab(tab);
+
+	// Only show the remaining litres count down 
+	if (tab == "Remaining")
+		SEQWater.timer = setTimeout("UpdateRemaining();", 100);
+	else
+		clearTimeout(SEQWater.timer);
+}
+
+// Update water remaining in real time - but only when that tab is displayed.
+function UpdateRemaining()
+{
+	if (SEQWater.total != null)
+	{
+		var currentTime = new Date().getTime();
+
+		var totalRemaining = (SEQWater.total.stored * 1000000) - (((currentTime - SEQWater.lastUpdated) / (1000 * 60 * 60 * 24)) * SEQWater.rateOfConsumption);
+
+		$("#Remaining").text(AddSeps(totalRemaining.toFixed(0)));
+	}
+	SEQWater.timer = setTimeout("UpdateRemaining();", 100);
+}
+
+
+// Add commas to a large number
+function AddSeps(x) 
+{
+	//make x a new variable
+	var x=x;
+
+	//make x a string
+	x+="";
+
+	//or x=String(x);
+	//iLen is the number of digits before any decimal poin
+	// for 45.123, iLen is 2
+	//iLen is the length of the number, if no decimals
+	iLen=x.length;
+	pos=x.indexOf(".");
+
+	if (pos>-1) //there are decimals
+	{
+		iLen=pos;
+	}
+
+	//add the decimal point
+	temp="";
+
+	//add the decimal part to begin
+	// with 45.123, we add the .123
+	temp=x.substring(iLen,x.length);
+
+	//iLen-1 is the rightmost non-decimal digit (5 in 98745.123)
+	for (var i=iLen-1;i>=0;i--)
+		//we add a separator when the expression (iLen-i-1)%3==0 is true...
+		//except when i is (iLen-1), or the first digit
+		//eg (98745.12). i is iLen-1, and the digit pos is next the decimal, 
+		//it is 5. From here, we decrement i...iLen-2, iLen-3, iLen-4 ... when i is a multiple of
+		//3, (i=iLen-iLen+4-1). This point is just before the number 7
+		if ((iLen-i-1)%3==0&&i!=iLen-1)
+			temp=x.charAt(i)+","+temp;
+		else
+
+			temp=x.charAt(i)+temp;
+	return temp;
+
+}