var clockUrl;
var clockId;
var clockClient = false;
var clockTics = 0;
var clockMillis = 0;
var clockShowMillis = 0;

function initClock(url, id)
{
  clockUrl = url;
  clockId = id;
  requestServerTime();
}

function requestServerTime()
{
  clockClient = false;
  if (window.XMLHttpRequest)
  {
    // Mozilla, Safari,...
    clockClient = new XMLHttpRequest();
  }
  else if (window.ActiveXObject)
  { // IE
    try
    {
      clockClient = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
      try
      {
        clockClient = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }
  if (clockClient)
  {
    clockClient.onreadystatechange = readServerTime;
    clockClient.open('GET', clockUrl, true);
    clockClient.send(null);
  }
}

function readServerTime()
{
  if (clockClient.readyState == 4)
  {
    if (clockClient.status == 200)
    {
      clockMillis = parseInt(clockClient.responseText);
      showTime();
    }
  }
}

function showTime()
{
  now = new Date(parseInt(clockMillis));
  hours = now.getHours();
  minutes = now.getMinutes();
  if (minutes < 10) minutes = "0" + minutes;
  seconds = now.getSeconds();
  if (seconds < 10) seconds = "0" + seconds;
  clockElem = document.getElementById(clockId);
  clockElem.innerHTML =
    now.getDate() + "/" + (now.getMonth() + 1) + "/" + now.getFullYear() + " " +
    hours + ":" + minutes + ":" + seconds;

  // 1 clockTic = 1 second = 1000 milliseconds
  if (clockTics == 60) // requestServerTime after 60 seconds
  {
    clockTics = 0;
    requestServerTime();
  }
  else
  {
    clockTics++;
    setTimeout('incrementTime()', 1000);
    clockShowMillis = (new Date()).getTime();
  }
}

function incrementTime()
{
  nowMillis = (new Date()).getTime();
  incr =  nowMillis - clockShowMillis;
  if (incr < 900 || incr > 1100) incr = 1000;
  clockMillis += incr;
  showTime();
}