/*
* Usually to update something every n milliseconds with JavaScript you would use the setInterval() or requestAnimationFrame() methods.
*
* This is an equivalent to setInterval except the javascript listens to the "animationiteration" event
* an then do an update. We can control how often the "animationiteration" event is triggered via
* the "animation-iteration" css property. Here it is set to 1ms in the CSS file. Not very nice in terms of separation of concerns but just a little experiment. Although the granularity of the timer is set in the css code, this can also be accessed and modified with JS.
*
* Tested on Firefox 14+, Opera 12+ and Chrome.
*
* More info @see http://www.w3.org/TR/css3-animations/#animation-events
*/
 
var clock;
 
function Clock() {
  this.domEl = document.getElementById('clock');
  // we could update the animation duration directly in JS with the 
  // following piece of code as well, here to set it to 1 second for instance:
  // this.container.style.animationDuration="1s";
}
 
Clock.prototype.start = function() {
  var func = this.tick.bind(this);
 
  this.domEl.addEventListener("oAnimationIteration", func, false);
  this.domEl.addEventListener("MSAnimationIteration", func, false);
  this.domEl.addEventListener("webkitAnimationIteration", func, false);
  this.domEl.addEventListener("mozAnimationIteration", func, false);
  this.domEl.addEventListener("animationiteration", func, false);
};

/**
 * Update the clock time. Method called on each animation interation
 **/
Clock.prototype.tick = function() {
	var date = new Date();
  
	// we add zero paddings just for make it prettier
	// source: http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript#comment-33639551
  this.domEl.innerHTML = ("00" + date.getHours()).substr(-2,2) + ':' 
    											 + ("00" + date.getMinutes()).substr(-2,2) + ':' 
    											 + ("00" + date.getSeconds()).substr(-2,2) + ' ' 
    											 + ("000" + date.getMilliseconds()).substr(-3,3) + 'ms';
};
 
clock = new Clock();
clock.start();