Script to bring life to the delorean panel by @mart3ll, prior art by @dolske

panel-dates.js

// Add script to bottom of page

// Convert a JS Date object to an array of characters
function dateToArray(date) {
  console.log("Converting date: " + date);
  var a = [];
  var s = date.toString().toUpperCase().split(" ");
  // eg "FRI JUN 29 2012 16:22:59 GMT-0700 (PDT)"
  var month = s[1],
      day   = s[2],
      year  = s[3],
      time  = s[4].split(":").splice(0,2).join(":"); // remove seconds

  a = a.concat(month.split("")); // Month
  a = a.concat(day.split(""));   // Day
  a = a.concat(year.split(""));  // Year
  a = a.concat(['.', '.']);      // AM/PM dots
  a = a.concat(time.split(""));  // Time

  return a;
}

// Fill in a timeline with the given date.
function setTimelineChars(timeline, date) {
  var chars = dateToArray(date);
  var c = timeline.querySelectorAll(".digit > .char:not(.blank)");
  if (c.length != chars.length)
    console.log("UHOH! Found " + c.length + " chars in page, have " + chars.length + "in array!");

  for (i = 0; i < c.length; i++) {
    c[i].textContent = chars[i];
  }

  // Set AM/PM flag
  console.log(date.getHours());
  if(date.getHours() < 12) {
    timeline.querySelector('.dots.pm').classList.add('dark');
    timeline.querySelector('.dots.am').classList.remove('dark');
  } else {
    timeline.querySelector('.dots.am').classList.add('dark');
    timeline.querySelector('.dots.pm').classList.remove('dark');
  }
}

var line;
var future  = new Date(Date.parse("17 Jul 2012 09:00:00 GMT-0400")); // XXX PST vs PDT?
var current = new Date();
var past    = new Date(Date.parse("15 Jun 2012 09:00:00 GMT-0400"));

line   = document.querySelector(".orange");
setTimelineChars(line, future);

line   = document.querySelector(".green");
setTimelineChars(line, current);

line   = document.querySelector(".yellow");
setTimelineChars(line, past);

console.log("Done! Great Scott!");