$(window).load(function(){ 
	
	$('#page #content ul li .content').each(function() {
		
		if($(this).find('img').size() > 0) {
			
			var image = $(this).find('img:first');
			
			if(image.size() > 0) {
			
				var title = $(this).parent().find('.title').html();
				var date = $(this).parent().find('.date').text();
				
				if($(this).parent().find('.title').size() > 0) {
					
					$(this).parent().find('.title').remove();
					$(this).parent().find('.date').remove();
					
					$(image).wrap('<div class="caption">');
					$(image).after('<span><div class="title">'+title+'</div><div class="date">'+date+'</div></span>');
			
				}
			
			}
			
		}
		
	});
	
	$(".caption").each(function(){
		$(this)
			// Add the following CSS properties and values
			.css({
				 // Height equal to the height of the image
				"height" : $(this).children("img").height() + "px",
				// Width equal to the width of the image
				"width" : $(this).children("img").width() + "px"
			})
			// Select the child "span" of this p.caption
			// Add the following CSS properties and values
			.children("span").css(

				// Width equal to p.caption
				// But subtract 20px to callibrate for the padding
				"width", $(this).width() - 30 + "px")

			// find the <big> tag if it exists
			// And then add the following div to break the line
			.find("big").after('<div class="clear"></div>');

			// When you hover over p.caption
			//$("p.caption").hover(function(){

				// Fade in the child "span"
				//$(this).children("span").stop().fadeTo(400, 1);
				//}, function(){
				// Once you mouse off, fade it out
				//$(this).children("span").stop().delay(600).fadeOut(400);
			//});
	// End $(this)
	});
	
});