Responsive thumbnail / enlarged view: http://scripty.walterdavisstudio.com/responsive-gallery.html

gistfile1.js

// get a reference to all of the thumbnails
var thumbnails = $$('#thumbnails img');
// listen for a click on one of them
document.on('click', '#thumbnails img', function(evt, elm){
  // remove the highlight from the current element
  thumbnails.invoke('removeClassName', 'active');
  // insert a copy of the selected image in the main area
  $('main').update(elm.clone(true));
  // highlight the new current thumbnail
  elm.addClassName('active');
});
// do initial setup for all thumbnails, then click the first one to load it
thumbnails.each(function(elm){
  // make the image perfectly responsive by using its src as its background-image
  // background-size: cover does the rest of the work
  elm.setStyle('background-image: url(' + elm.src.toString() + ')');
  // then write a 1x1 clear GIF into the src
  elm.writeAttribute('src', 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}).first().click();

This layout relies on the images in the thumbnail area being much larger than necessary, but then scaled down to work as thumbnails. That way the larger image is the thumbnail, just shown full size.