<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
  <title>Stopwatch</title>
  <style type="text/css">
    body { width: 130; height: 50; margin: 0; }
    div { padding-top: 10px; padding-left: 9px; color: White; font-family: Calibri; font-size: 25px; }
  </style>
  <script type="text/javascript">
    System.Gadget.settingsUI = "stopwatchsettings.html";

    start = 0;
    count_down = 0;
    last_time = count_down;
    count_down_interval = 0;
    intervalId = 0;
    blinkId = -1;
    running = false;

    function load()
    {
      count_down_interval = parseInt(System.Gadget.Settings.readString("interval"));
      if (isNaN(count_down_interval)) count_down_interval = 30000;
      System.Gadget.onSettingsClosed = load;
      onreset();
    }

    function onreset(event)
    {
      if (event != null && event.shiftKey == 1)
      {
        setCountDown();
      }

      else
      {
        clearInterval(intervalId);

        if (blinkId != -1)
        {
          clearInterval(blinkId);
          blinkId = -1;
        }

        start = 0;
        last_time = 0;
        count_down = 0;
        running = false;
        watch.style.visibility = "";
        showTime(0);
      }
    }

    function onstartstop(event)
    {
      if (blinkId != -1)
      {
        onreset();
      }

      else if (running)
      {
        clearInterval(intervalId);
        running = false;
      }

      else if (event.shiftKey == 1)
      {
        setCountDown(event.ctrlKey == 1);
      }

      else
      {
        start = (count_down > 0)
          ? last_time + (new Date).getTime()
          : (new Date).getTime() - last_time;

        intervalId = setInterval("ticker()", 50);
        running = true;
      }
    }

    function ticker()
    {
      last_time = (count_down > 0)
        ? start - (new Date).getTime()
        : (new Date).getTime() - start;

      if (last_time <= 0)
      {
        onreset();
        blinkId = setInterval("blink()", 1000);
      }

      showTime(last_time);
    }

    function showTime(now)
    {
      hour = Math.floor((now / 3600000) % 24);
      min = Math.floor((now / 60000) % 60);
      sec = Math.floor((now / 1000) % 60);
      tenths = Math.floor((now / 100) % 10);

      if (min < 10) min = "0" + min;
      if (sec < 10) sec = "0" + sec;
      if (hour < 10) hour = "0" + hour;

      watch.firstChild.nodeValue = hour + ":" + min + ":" + sec + "." + tenths;
    }

    function setCountDown(decrement)
    {
      if (decrement)
        count_down -= count_down_interval;
      else
        count_down += count_down_interval;

      last_time = count_down;
      showTime(count_down);
    }

    function blink()
    {
      watch.style.visibility = (watch.style.visibility == "hidden") ? "" : "hidden";
      System.Sound.playSound("beep.wav");
    }
  </script>
</head>
<body onload="load()" onclick="onstartstop(event)" ondblclick="onreset(event)">
  <g:background id="imgBackground" src="background.png">
    <div>
      <span id="watch">00:00:00.0</span>
    </div>
  </g:background>
</body>
</html>