Source

HUD Time / content.html

<html>
<head>
<style> 
body {
	width: 500px;
	height: 190px;
	font-size: 12px;
	margin: 0;
	font-family: Verdana;
	color: #FFFFFF;
	font-weight:bold;
} 
.gadget {
	margin: 3px;
} 
</style>

<script>
	var debug = true;
	function alert(msg) { System.Debug.outputString(msg); }
</script>

<script type="text/javascript">
var time;
var date;
var month;
var day;

var m = ['JANUARY','FEBRUARY','MARCH','APRIL','MAY','JUNE','JULY','AUGUST','SEPTEMBER','OCTOBER','NOVEMBER','DECEMBER'];
var d = ['SUNDAY','MONDAY','TUESDAY','WEDNESDAY','THURSDAY','FRIDAY','SATURDAY'];

System.Gadget.settingsUI = "settings.html";
System.Gadget.onSettingsClosed = settingsClosed;

var defaultColour = [255, 255, 255];
var colour = defaultColour;
var fonttype = System.Gadget.Settings.readString("fonttype");
var fontSizer;

function settingsClosed()
{
	alert("settingsClosed");

	if (System.Gadget.Settings.readString("fonttype") != "")
		fonttype = System.Gadget.Settings.readString("fonttype");

	time.font = date.font = day.font = month.font = fonttype;
}

function update()
{
	alert('Updating...');
		
	if (fonttype == "")
	{
		alert("Blank fonttype, defaulting to Arial");
		fonttype = "Arial";
	}

	var current = System.Time.getLocalTime(System.Time.currentTimeZone);
	var dDateInfo = new Date(Date.parse(current));   
	tHours = dDateInfo.getHours();
	if(tHours == 0) tHours = 12;
	tMinutes = dDateInfo.getMinutes();
	tMinutes = ((tMinutes < 10) ? ":0" : ":") + tMinutes

	var bg = document.getElementById("bg");

	if(fontSizer == null)
		fontSizer = bg.addTextObject("Arial", "Arial", 18, "Black", 0, -1000);

	var time_value = tHours > 12 ? (tHours-12) + tMinutes + " PM" : tHours + tMinutes + " AM";
	if(time == null)
	{
		time = bg.addTextObject(time_value, fonttype, 105, "white", 0, 0);
		time.opacity = 30;
		time.left = 500-time.width;
	}
	else
		time.value = time_value;

	if(date == null)
	{
		date = bg.addTextObject(dDateInfo.getDate(), fonttype, 80, "white", time.left, 90);
		date.opacity = 30;
	}
	else
		date.value = dDateInfo.getDate();

	if(month == null)
	{
		month = bg.addTextObject(m[dDateInfo.getMonth()], fonttype, 45, "white", time.left+100, 95);
		month.opacity = 30;
	}
	else
		month.value = m[dDateInfo.getMonth()];

	if(day == null)
	{
		day = bg.addTextObject(d[dDateInfo.getDay()], fonttype, 30, "white", time.left+100, 135);
		day.opacity = 30;
	}
	else
		day.value = d[dDateInfo.getDay()];

	alert(time.value+", "+date.value+", "+day.value+", "+month.value);
/*
	day.width = day.offsetWidth;
	month.width = month.offsetWidth;
	time.width = time.offsetWidth;
*/

	setTimeout('update()', 60*1000);
}
</script>
</head>
<body onload="update();" style="align:right;">
	<g:background id="bg" style="width:100%; height:100%; z-index:-1; position:absolute; top:0; left:0; font-weight:bold;" opacity="0%" />
</body> 
</html>