$(function() {
	//Use alt text to add a caption to images with a class of
	//"image-with-caption-left" or "image-with-caption-right"
	
	//This copies the text from the alt attribute and adds it as a p tag
	//below the image the image and paragraph are then wrapped in a div
	//The max width of the div is set to that of th image to prevent the
	//caption from exceeding the length of the image and instead wrapping to
	//multiple lines
	$("img.image-with-caption-align-left").each( function() {
			$(this).wrap("<div class='image-with-caption-align-left'></div>")
			$(this).parent().css("width", $(this).attr("width") + "px")
			$(this).after("<p>"+$(this).attr("alt")+"</p>")
	});
	$("img.image-with-caption-align-right").each( function() {
			$(this).wrap("<div class='image-with-caption-align-right'></div>")
			$(this).parent().css("width", $(this).attr("width") + "px")
			$(this).after("<p>"+$(this).attr("alt")+"</p>")
	});
	
	//Apply hover state and link action to all elements in a container with a class of "hoverbox"
	//The link location is defined by an <a> tag within the containing div
	$(".hoverbox[a]").each(function(){
		$(this).mouseover(function() {$(this).addClass("hoverlink")});
		$(this).mouseout(function() {$(this).removeClass("hoverlink")});
		$(this).mouseup(function() {window.location = $("a", $(this)).attr("href")});
	});
	
	//Create a gallery of thumbnail images from several larger images
	//placed inside a container with class "gallery"
	//Rolling over a thumbnail will display the full size image
	$(".gallery[img]").each( function() {
		//Give the item a class of enabled, since this class will only be added if the client's
		//browser supports javascript, separate css styles can be applied depending on whether or not
		//the client has javascript
		$(this).addClass("enabled");
		$(".thumbnails img", $(this)).eq(0).clone().appendTo($(".image", $(this)))
		$(".thumbnails .item", $(this)).eq(0).addClass("hover")
		$(".thumbnails .item", $(this)).each( function() {
			$("img", $(this)).addClass("small")
			$(this).mouseover( function() {
				$(this).siblings(".hover").removeClass("hover")
				$(this).addClass("hover")
				$(".image", $(this).parent().parent()).empty()
				$("img", $(this)).clone().removeClass("small").appendTo($(".image", $(this).parent().parent()))
			});
		});
	});
});