//
// Copyright(c) 2005-2011 Louay Gammo. All rights reserved.
//

var theClock = null;
var theClockStart = null;
var theClockStop = null;
var running = false;
var hours = 0;
var minutes = 0;
var seconds = 0;

function SetupClock()
{
  var rules = {
    '#clockReset' : function(element) {
      element.onclick = ResetClock;
    },

    '#clockStart' : function(element) {
      element.onclick = StartClock;
    },

    '#clockStop' : function(element) {
      element.onclick = StopClock;
    },

    '#clockface' : function(element) {
      element.onmouseover = function (e) { return false; };
      element.onmousedown = function (e) { return false; };
      element.onfocus = function (e) { return false; };
      element.onkeypress = function (e) { return false; };
      element.onkeydown = function (e) { return false; };
      element.onkeyup = function (e) { return false; };
    }
  };

  Behaviour.register(rules);

  theClock = document.getElementById('clockface');
  theClockStart = document.getElementById('clockStart');
  theClockStop = document.getElementById('clockStop');
}

function ResetClock()
{
  running = false;
  hours = 0;
  minutes = 0;
  seconds = 0;
  UpdateClock();
  ResetClockImages();
}

function StartClock()
{
  running = true;
  ShowClockStop();
  setTimeout(TickTockClock, 1000);
}

function StopClock()
{
  running = false;
  ShowClockStart();
}

function TickTockClock()
{
  if (!running) {
    return;
  }

  var basis = 60;
  var dayLength = 24;

  seconds++;
  if (seconds >= basis) {
    seconds = 0;
    minutes++;
  }

  if(minutes >= basis) {
    minutes = 0;
    hours++;
  }

  if (hours >= dayLength) {
    running = false;
  }

  UpdateClock();

  if (running) {
    setTimeout (TickTockClock, 1000);
  } else {
    ShowClockStart();
  }
}

function UpdateClock()
{
  theClock.value = FormatTimePortion(hours) + ':' + FormatTimePortion(minutes) + ':' + FormatTimePortion(seconds);
}

function FormatTimePortion(portion)
{
  if (portion < 10) {
    return '0'+ portion;
  }

  return portion;
}

function ShowClockStart()
{
  theClockStart.style.display = 'block';
  theClockStop.style.display = 'none';
}

function ShowClockStop()
{
  theClockStart.style.display = 'none';
  theClockStop.style.display = 'block';
}

function ResetClockImages()
{
  theClockStart.style.display = 'block';
  theClockStop.style.display = 'none';
}