$(document).ready(function()
 {
  $('.theImage').click(function()
   {
    var background = $('<div/>');
    $(background).attr('id', 'overlayBackground').animate(
     {
      'opacity' : '.8'
     }, 1000).css(
     {
      'width' : $(document).width(),
      'height' : $(document).height(),
     });

     $('body').append(background);

     var newImage = $('<img/>');
     var width = $('body').width();
     $(newImage).attr('src', $(this).attr('src')).attr('id', 'largeImage').css(
      {
       'left' : width/2 - 200
      });

     $('body').append(newImage).children('.theImage').hide();
     $(newImage).fadeIn(2000, function()
      {
       $(this).bind('click', function()
        {
         $(this).fadeOut(1000);
         $('div#overlayBackground').fadeOut(1000, function()
          {
           $(this).remove();
          });
        });
      });
   });
 });