The Front End

Having failed, as usual, to find an advent calendar that meets my daughter’s exact specifications – not tacky, no low-grade chocolate – this is my (slightly late) offering to her. Fun moments from her favourite film, and no cloying, oily aftertaste.

Technically an online advent calendar could hardly be easier; in fact it took her brother and I as long to pick stills from the film as it did for me to code up, which I did using a small amount of css; an even smaller amount of HTML – a single image tag for the resizeable background, and an empty div to hold the images – plus a modicum of jQuery (with some popup assistance from Thickbox).

The jQuery code was mostly familiar territory for me: the images are scripted onto the page in a single loop, and - after the appropriate date - clickable to reveal the image (with attached thickbox link).

The only really interesting parts were the ‘random’ mapping so that images didn’t all appear in numerical order – achieved via a hard-coded mapping object, as there is apparently no way in javascript to fix a seed for the random number generator – and the use of cookies to remember which windows my daughter (or anyone else who cares to enjoy it) has opened, which pushed my envelope slightly. It seems incredible to me that all cookies get returned in one horrible, semicolon-delimited string (what would have been so bad about a string array?), but there you go.

Amazingly the two cookie handlers worked perfectly, although a bug in my mapping between jQ objects and DOM objects hid this for a while. This is always a tricky issue in OOP whenever you have two representations of the same thing, and the standard solution (attach a custom property - in this case .ref - to the DOM object holding the array index of the item which describes it) always feels a bit like a hack.

Anyway, for what it’s worth, here’s the code:

var windows = new Array;
var today = new Date;
var mapping = {
  1:17,
  2:22,
  …
  23:20,
  24:4
};
var folder = "school_of_rock";
$("body").ready(function() {
  for (var j=1; j<=24; j++) {
    var thing = document.createElement("div");
    thing.ref=mapping[j];
    windows[mapping[j]]=$(thing)
      .addClass("window")
      .appendTo("#picContainer")
      .html("<p>"+mapping[j]+"<\/p><img src='"+folder+"/"
        +mapping[j]+".jpeg' \/>")
      .bind("click", function() {
          $("body").focus();
          if (today.getDate()>=this.ref) {
            $(this)
              .find("img")
              .css("visibility", "visible")
              .wrap("<a href='"+folder+"/"+this.ref+".jpeg'
                class='thickbox'></a>");
            TB_init();
            setCookie(this.ref);
          } else {
            alert("Not yet!");
          }
          return;
      });
    //windows[j].get().ref=j;
    if(!readCookie(mapping[j])) {
      windows[mapping[j]].find("img").css("visibility", "hidden");
    } else {
      windows[mapping[j]].find("img").wrap("<a href='"+folder+"/"
         +mapping[j]+".jpeg' class='thickbox'></a>");
    }
  }
});
function setCookie(n) {
  document.cookie = "opened"+n+"=true; expires=Mon, 1 Jan
    2007 00:00:00 UTC; path=/";
}
function readCookie(n) {
  var where = document.cookie.indexOf("opened"+n);
  return (where!=-1);
}

It’s quite re-usable (I’m already thinking about the countdown for Christmas 2007). Ideally I would have scripted the background image into the page, so that only a single change in the folder variable would be neded to repurpose the entire thing. Oh, and if it hadn’t been so late at night, I would have added some animation to the window opening.

I should mention that since it has a target audience of (I)one, and I know which browser she uses (Flock), I have happily not had to think about how it looks in Internet Explorer, a situation of which I have taken full advantage. Since it uses percentage sizes and relative positioning, it’s fair bet IE6’s faulty positioning model will screw it up royally. If anyone else can be bothered to make it work I would be interested in seeing it.

Next year, she wants sound, too ;-)