$(function()
{
  
  $("ul.rollover-list a")
    .each(function()
    {
      // Determine the filename and store it so we don't have to re-calculate it later
      var $link = $(this);
      var $container = $link.closest(".rollover-container")
      var $image = $container.find("img.rollover-image");
      var filename = "images/" + $container.attr("id") + "/" + $link.attr("id") + ".jpg";
      $link.data("image", filename);
      
      // Preload the image
      var img = new Image;
      img.src = filename;
      
      // Highlight the default one automatically
      if ($link.is(".default-active"))
        $link.addClass("active");
    })
    .mouseover(function()
    {
      var $link = $(this);
      var $list = $link.closest("ul.rollover-list");
      var $container = $list.closest(".rollover-container")
      var $image = $container.find("img.rollover-image");
      
      // Highlight the active one
      $list.find("a").removeClass("active");
      $link.addClass("active");
      
      // Change image
      if (!$image.data("original"))
        $image.data("original", $image.attr("src"));
      $image.attr("src", $link.data("image"));
    })
    .mouseout(function()
    {
      var $link = $(this);
      var $list = $link.closest("ul.rollover-list");
      var $container = $list.closest(".rollover-container")
      var $image = $container.find("img.rollover-image");
      
      // Reset active
      $link.removeClass("active");
      $list.find("a.default-active").addClass("active");
      
      // Reset image
      $image.attr("src", $image.data("original"));
    });
  
});