	$(document).ready(function() {
		
		
		/* The following is a click listener for images that have the "larger" class applied to them.  This function will show the larger image */
		$('.larger').click(function() {
			//make random number to make sure the ajax call does not cache
			var nbr = Math.random()*10001
			
			// append the random number to the imageloader.cfm
			var script = "/www/pages/shared/imageloader.cfm?r=" + nbr
			
			// create the image source variables
			var imgSrc = '';
			// the image source is taken from the image that was clicked			
			var imgSrc = $(this).attr('src');
			// remove the .jpg so large can be appended to the image source string
			var imgSrc = imgSrc.replace(".jpg","");
			// recombine the image source string
			var imgSrc = imgSrc	+ ".large.jpg";
			// create the caption text variable
			var capText = '';
			// get the caption text from the alt tag assigned to the image
			var capText = $(this).attr('alt');
			
			// this button is used to place an X on the larger image
			var aButton = "<img src='lib/public/images/closebox.png' id='closer' />"
			
			// the image has been clicked, so block the ui and show the loading bar while the ajax call gets the image
			$.blockUI({message: "<img src='lib/public/images/loadingAnimation.gif' />",
						css: {border: 'none',						
						width: '208px',
						height: '10px'}		
			
			});
			
			// get the image			 		
			$.ajax({
					  type: "POST",
					  url: script,					  
					  data: ({
						  location: imgSrc
					  }),
					  success: function(r) {						
							// the call was successful create a stirng that will show the image and caption 
							var aMessage = aButton + "<br />" + r + "<p id='cap'>"+ capText + "</p>";
							$.blockUI({message: aMessage,
								css: {border: 'none',
								top:  ($(window).height() - 500) /2 + 'px', 
								left: ($(window).width() - 660) /2 + 'px',								
								padding: '5px',						
								width: '660px',
								cursor: 'default'								
								}
								
								 			
							});
							// used to unblock the UI when the user wants to return to the article
							
							$('.blockOverlay').attr('title','Click to Close').click($.unblockUI);
							$('.blockMsg').attr('title','Click to Close').click($.unblockUI);											   
					  }					  
			});
		});
		
		
		$('.larger_no_cap').click(function() {
			//make random number to make sure the ajax call does not cache
			var nbr = Math.random()*10001
			
			// append the random number to the imageloader.cfm
			var script = "/www/pages/shared/imageloader.cfm?r=" + nbr
			
			// create the image source variables
			var imgSrc = '';
			// the image source is taken from the image that was clicked			
			var imgSrc = $(this).attr('src');
			// remove the .jpg so large can be appended to the image source string
			var imgSrc = imgSrc.replace(".jpg","");
			// recombine the image source string
			var imgSrc = imgSrc	+ ".large.jpg";
						
			// this button is used to place an X on the larger image
			var aButton = "<img src='lib/public/images/closebox.png' id='closer_no_cap' />"
			
			// the image has been clicked, so block the ui and show the loading bar while the ajax call gets the image
			$.blockUI({message: "<img src='lib/public/images/loadingAnimation.gif' />",
						css: {border: 'none',						
						width: '208px',
						height: '10px'}		
			
			});
			
			// get the image 		
			$.ajax({
					  type: "POST",
					  url: script,					  
					  data: ({
						  location: imgSrc
					  }),
					  success: function(r) {						
							// the call was successful create a stirng that will show the image
							var aMessage = aButton + "<br />" + r + "<p id='no_cap'>&nbsp;</p>";
							$.blockUI({message: aMessage,
								css: {border: 'none',
								top:  ($(window).height() - 450) /2 + 'px', 
								left: ($(window).width() - 660) /2 + 'px',
								//padding: '5px',						
								width: '660px',
								cursor: 'default'} 			
							});
							// used to unblock the UI when the user wants to return to the article
							$('.blockOverlay').attr('title','Click to Close').click($.unblockUI);
							$('.blockMsg').attr('title','Click to Close').click($.unblockUI);											   
					  }					  
			});
		});	
				
	});
