/*
--------------------------------------------------------------------------------
 Image Gallery
--------------------------------------------------------------------------------
*/

function gallery()
{
  // Specify number of images:

  var size = 5;

  // Use Image object with String src property to preload hi-res images:

  for (var i = 1; i <= size; ++i)
  {
    var z = padLeft(i, 2); // Pad numbers 1-9 with zeros
    window["image" + z] = new Image(); // Name variables dynamically
    window["image" + z].src = "h-" + z + ".jpg";
  }
  // Create function to change main image (DOM img[0]) source:

  function changeSource(x)
    {
      $("img", 0).src = "h-" + x + ".jpg";
    }
  // Create array of anonymous functions:

  var show = new Array();
  for (var i = 1, j = 0; i <= size; ++i, ++j)
  {
    var z = padLeft(i, 2); // Reset z
    show[j] = function(z) // Create anonymous function
    {
      return function() // Call changeSource with argument z (1)
      {
        changeSource(z);
      }
    }(z); // Call anonymous function

    // Map thumbnail image (DOM img[1]-[13]) events to functions:

    $("img", i).onmouseover = show[j];
  }
}
window.onload = gallery;

/*
--------------------------------------------------------------------------------

 (1) This seemingly redundant step is necessary for closure. Without it, every
     function in the array will return the last image source in the loop. The
     issue only arises when a loop is used to build the array.

*/