$("document").ready(function () {

		  // Selecting all links with the class "caption".
		    
			$('a[class=caption]').each(function (i) {
		 
		  // Wrapping the link tag with a div to hold image, caption, and caption background.
			
			$(this).wrap('<div class="caption-wrapper"/>');
			
		  // Retrieves image height and width.
			
			var imgHeight = $(this).find('img').height();
			var imgWidth = $(this).find('img').width();
			
		  // Sets caption-wrapper to the height and width of the image captured above.
			
			$('.caption-wrapper').css({'height' : imgHeight, 'width': imgWidth, 'overflow': 'hidden'});
			
		  // Retrieving ID within rel attribute which corresponds to a div containing the caption to display.	
			
			var captionSrc = $('#' + $(this).find('img').attr('rel'));
		    var captionHTML = captionSrc.html();
			captionSrc.remove();
			
			var captionWidth = imgWidth-18;
			
			
	      	// Create a container to hold the caption, sets the width to that of image and css properties.
			
			$(this).after('<div class=caption' + i + '/>');
			$('.caption' + i).css({'width' : captionWidth, 'position':'relative',
			 'z-index' : '5','padding': '5px 10px 10px 10px', 'color': '#ffffff'});
		 
		  // Sets the contents of the caption to display above the image/caption-wrapper. content of the caption.
			
			$('.caption' + i).html(captionHTML);
			
		  // Retrieves caption height to position correctly over caption-background.
			
			var captionHeight = $('.caption' + i).height();
			$('.caption' + i).css({'margin-top': -captionHeight-10});
			
		  // Creates caption-background and sets height to that of caption and width of image. 
			$(this).after('<div class=caption-background' + i + '></div>');
			
			
			
			$('.caption-background' + i).css({'width': imgWidth, 'height': captionHeight,'background-color' : '#222222' 
			, 'z-index' : '2', 'opacity': '.5','position':'relative', 'padding':'10px 10px 4px 4px', 'margin-top': -captionHeight-10}); 		
		 });
		     
      });