var imageClock = new Object();

imageClock.digits = ["images/clock/0.gif", "images/clock/1.gif", "images/clock/2.gif", "images/clock/3.gif", "images/clock/4.gif", "images/clock/5.gif", "images/clock/6.gif", "images/clock/7.gif", "images/clock/8.gif", "images/clock/9.gif", "images/clock/am.gif", "images/clock/pm.gif", "images/clock/colon.gif"];

imageClock.instances = 0;

var preLoadImages = [];

for (var i = 0; i < imageClock.digits.length; i++) {
	preLoadImages[i] = new Image();
	preLoadImages[i].src = imageClock.digits[i];
}

imageClock.imageHTML = function(timeString) {
	var sections = timeString.split(":");
	if (sections[0] == "0") {
		sections[0] = "12";
	} else if (sections[0] >= 13) {
		sections[0] = sections[0] - 12 + "";
	}
	for (var i = 0; i < sections.length; i++) {
		if (sections[i].length == 1) {
			sections[i] = '<img src="' + imageClock.digits[0] + '" />' + '<img src="' + imageClock.digits[parseInt(sections[i])] + '" />';
		} else {
			sections[i] = '<img src="' + imageClock.digits[parseInt(sections[i].charAt(0))] + '" />' + '<img src="' + imageClock.digits[parseInt(sections[i].charAt(1))] + '" />';
		} 
	}
	return sections[0] + '<img src="' + imageClock.digits[12] + '" />' + sections[1];
}

imageClock.display = function() {
	var clockInstance = this;
	this.spanid = "clockSpan" + (imageClock.instances++);
	document.write('<span id = "' + this.spanId + '"></span>');
	this.update();
	setInterval(function() {clockInstance.update()}, 60000);
}

imageClock.display.prototype.update = function() {
	var dateObj = new Date();
	var currentTime = dateObj.getHours() + ":" + dateObj.getMinutes() + ":" + dateObj.getSeconds();
	var currentTimeHTML = imageClock.imageHTML(currentTime) + '<img src="' + ((dateObj.getHours() >=12) ? imageClock.digits[11] : imageClock.digits[10]) + '" />';
	document.getElementById(this.spanId).innerHTML = currentTimeHTML;
}