var g_nLastTime = null;

function cssClock(hourElementId, minuteElementId)
{
	// Check if we need to do an update
	var objDate = new Date();
	if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5))
	{
		// make sure parameters are valid
		if(!hourElementId || !minuteElementId) { return; }

		// get the element objects
		var objHour = document.getElementById(hourElementId);
		var objMinutes = document.getElementById(minuteElementId);
		if (!objHour || !objMinutes) { return; }

		// get the time
		var nHour = objDate.getHours();
		if (nHour > 12) { nHour -= 12; }  // switch from 24-hour to 12-hour system
		var nMinutes = objDate.getMinutes();

		// round the time
		var nRound = 5;
		var nDiff = nMinutes % nRound;
		if(nDiff != 0)
		{
			if (nDiff < 3) { nMinutes -= nDiff; } // round down
			else { nMinutes += nRound - nDiff; } // round up
		}
		if(nMinutes > 59)
		{
			// handle increase the hour instead
			nHour++;
			nMinutes = 0;
		}

		// Update the on page elements
		objHour.className = 'hr' + nHour;
		objMinutes.className = 'min' + nMinutes;

		// Timer to update the clock every few minutes
		g_nLastTime = objDate;
	}

	// Set a timer to call this function again
	setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so)
}