(function($) {
	$.fn.detailWrap = function(options)
	{
		var defaults = {
			caption: 'Click To Enlarge',
			color: 'white',
			fontFace: 'arial',
			fontSize: '10px',
			fontWeight: 'normal',
			fontStyle: 'italic',
		}

		var options = $.extend(defaults, options);
		return this.each(function()
		{
			var obj = $(this);
			var width = obj.width() + 20;
			var floatStyle = obj.css('float');
			var target = obj
				.css({
					margin: '0 auto',
					float: 'none',
					'margin-top': 0,
					'margin-bottom': '5px'})
				.wrap('<div class="detailWrapper" />')
				.parent()
				.get();

			$(target)
				.css({
					float: floatStyle,
					width: width + 'px',
					padding: '10px',
					cursor: 'pointer',
					'text-align': 'center',
					'font-size': '11px',
					'font-style': 'italic'})
				.click(handleClick)
				.append('<div>' + options.caption + '</div>');
		});

		function handleClick(e)
		{
//			var target = e.srcElement;
			var target = e.target;
			if (!($(target).hasClass('detailWrapper')))
				target = $(target).parent().get();

			var img = $('img', target);
			var imgURL = img.attr('src');
			var imgRatio = img.width() / img.height();
			var detailHeight = 500;
			var detailWidth = Math.floor(500 * imgRatio);

			var theHeight = $(document).height() + 'px';
			var theWidth = $(document).width() + 'px'
			$('<div class="detailWrapperElement"/>')
				.css({
					position: 'absolute',
					'z-index': 10000,
					top: 0,
					left: 0,
					height: theHeight,
					width: theWidth,
					'background-image': 'url(/graphics/grayMask.png)',
					'background-repeat': 'repeat' })
				.appendTo('body');

			var div = $('<div class="detailWrapperElement"/>')
				.css({
					'border-style': 'solid',
					'border-width': '1px',
					'border-color': 'white',
					'background-color': 'black',
					height: (detailHeight + 20) + 'px',
					width: (detailWidth + 20) + 'px',
					position: 'absolute',
					'z-index': 10001 })
				.appendTo('body')
				.get();

			$(div).center();

			var img = $('<img src="' + imgURL + '">')
				.css({
					height: detailHeight + 'px',
					width: detailWidth + 'px',
					margin: '10px'
					})
				.appendTo(div);

			var closer = $('<div>X</div>')
				.css({
					height: '16px',
					width: '16px',
					position: 'relative',
					'z-index': 10002,
					top: -(detailHeight + 10) + 'px',
					left: (detailWidth - 6) + 'px',
					'background-color': 'white',
					color: 'black',
					'font-family': 'arial',
					'font-weight': 'bold',
					'line-height': '16px',
					'text-align': 'center',
					cursor: 'pointer'
					})
				.click(handleClose)
				.appendTo(div);
		}

		function handleClose(e)
		{
			$('.detailWrapperElement').remove();
		}
	}

})(jQuery);