a countdown clock

countdown.coffee

countdown = (eventdate, form) ->
  cid = -1
  start = ->
    cid = setInterval update, 500
  stop = ->
    clearInterval cid
  pad = (number, width = 2, z = '0') ->
    number = "#{number}"
    if number.length >= width
      number
    else
      new Array(width - number.length + 1).join(z) + number
  calculate = ->
    d = new Date()
    Math.floor((eventdate.getTime() - d.getTime()) / 1000)
  update = ->
    seconds_left = calculate()
    if seconds_left <= 0
      form.days.value = "---"
      form.hours.value = "--"
      form.mins.value = "--"
      form.secs.value = "--"
      stop()
      return
    form.secs.value = pad(seconds_left % 60)
    seconds_left = Math.floor(seconds_left / 60)
    form.mins.value = pad(seconds_left % 60)
    seconds_left = Math.floor(seconds_left / 60)
    form.hours.value = pad(seconds_left % 24)
    seconds_left = Math.floor(seconds_left / 24)
    form.days.value = seconds_left
  {
    start: start
    stop: stop
  }

countdown = countdown(new Date("December 12, 2013 20:59:59"), document.clock)
countdown.start()

# <form name="clock">
#   <table width="450" cellspacing="0" cellpadding="2" border="0" style="font-size: 15px; color: #ffffff;">
#     <tbody><tr>
#       <td align="center"><input style="background-color: #004e72; color: #ffffff; border: 0px; font-size: 16px; text-align: center;" name="days" size="2"></td>
#       <td align="left" width="75"><font color="#ffffff">Days</font></td>
#       <td align="center"><input style="background-color: #004e72; color: #ffffff; border: 0px; font-size: 16px; text-align: center;" name="hours" size="2"></td>
#       <td align="left" width="75"><font color="#ffffff">Hours</font></td>
#       <td align="center"><input style="background-color: #004e72; color: #ffffff; border: 0px; font-size: 16px; text-align: center;" name="mins" size="2"></td>
#       <td align="left" width="75"><font color="#ffffff">Mins</font></td>
#       <td align="center"><input style="background-color: #004e72; color: #ffffff; border: 0px; font-size: 16px; text-align: center;" name="secs" size="2"></td>
#       <td align="left" width="75"><font color="#ffffff">Secs</font></td>
#     </tr>
#   </tbody></table>
# </form>