var displayOption = "time only";
var previousTime = {};

function showDetails(divId) {
  if ($('.chrono_detail:visible').size() > 0) {
    $('#millenium').hide();
    $('#century').hide();
    $('#year').hide();
    $('#month').hide();
    $('#day').hide();
    $('#hour').hide();
    $('#minute').hide();
    $('#second').hide();
    $('#'+divId).show();
  }
  else {
    $('#'+divId).slideDown();
  }
}

function buildClickableDigit(divId, value) {
  return '<span id="' + divId + '_digit" class="digit_detail" ' +
         'onclick="showDetails(\'' + divId + '\');">' +
         value +
         '</span>';
}

function hideDetailsWhenClicked() {
  $('.chrono_detail').click(function(event) { $(event.currentTarget).slideUp(); });
}

function startClock(typeOfClock) {
  displayOption = typeOfClock;
  $('#time_error').hide();
  hideDetailsWhenClicked();
  var wtf = WTF.now();
  var s = "";
  if (displayOption == "full date") {
    s += buildClickableDigit('millenium', wtf.datePart.charAt(0));
    s += buildClickableDigit('century', wtf.datePart.charAt(1));
    s += buildClickableDigit('year', wtf.datePart.charAt(2));
  }
  if (displayOption == "date" || displayOption == "full date") {
    s += buildClickableDigit('month', wtf.datePart.charAt(3));
    s += buildClickableDigit('day', wtf.datePart.charAt(4));
  }
  s += ':';
  s += buildClickableDigit('hour', wtf.timePart.charAt(0));
  s += buildClickableDigit('minute', wtf.timePart.charAt(1));
  s += buildClickableDigit('second', wtf.timePart.charAt(2));
  if (displayOption == "full date") {
    document.getElementById('full_datetime').innerHTML = s;
  }
  else if (displayOption == "date") {
    document.getElementById('datetime').innerHTML = s;
  }
  else {
    document.getElementById('time').innerHTML = s;
  }
  updateClock();
}


function updateDigit(divId, newValue) {
  var digitHasChanged = (newValue != previousTime[divId]);
  if (digitHasChanged) {
    previousTime[divId] = newValue;
    $('#'+divId+'_digit').text(newValue);
    $('#'+divId+' div.digit').text(newValue);
  }
}

function updateClock() {
  var wtf = WTF.now();
  if (displayOption == "full date") {
    updateDigit('millenium', wtf.datePart.charAt(0));
    updateDigit('century', wtf.datePart.charAt(1));
    updateDigit('year', wtf.datePart.charAt(2));
  }
  if (displayOption == "date" || displayOption == "full date") {
    updateDigit('month', wtf.datePart.charAt(3));
    updateDigit('day', wtf.datePart.charAt(4));
  }
  updateDigit('hour', wtf.timePart.charAt(0));
  updateDigit('minute', wtf.timePart.charAt(1));
  updateDigit('second', wtf.timePart.charAt(2));
  setTimeout("updateClock()", 250);
}