(function ($)
{
	$.fn.sashPick = function (selector) 
	{
		var self			= $.fn.sashPick, 
			root			= this, 
			rootWidth		= root.width (),
			rootHeight		= root.height (),
			sashes			= $('.sash', root), 
			sashWidth		= sashes.outerWidth (true),
			sashHeight		= sashes.outerHeight (true),
			sashWidthOuter	= sashes.outerWidth (true),
			sashHeightOuter	= sashes.outerHeight (true),
			overlays		= null,
			viewer			= $('<li class="sashView"><img class="sashViewImage" /><div class="tag"></div></li>').hide (),
			viewerImg		= $('.sashViewImage', viewer),
			viewerTag		= $('.tag', viewer),
			// We can't compute the sash view width and height until it's in the DOM
			viewerWidth		= 0,
			viewerHeight	= 0, 
			cols			= Math.floor (rootWidth / sashWidthOuter),
			rows			= Math.floor (rootHeight / sashHeightOuter), 
			sashData		= {};
		
		/**
		 * update and show the rollover box
		 */
		var sashHover		= function (e)
		{
			var target		= $(e.target), 
				pos			= target.position (),
				sashId		= target.attr ('id').replace ('overlay_', '') * 1,
				thisSash	= sashData [sashId];
			
			viewerImg.attr ('src', thisSash.img).attr ('alt', thisSash.desc);
			viewerTag.text (thisSash.desc);
			viewer.css ({
				'top'	: Math.round (pos.top - ((viewerHeight - sashHeight) * (((pos.top / sashHeightOuter)) / (rows - 1)))),
				'left'	: Math.round (pos.left - ((viewerWidth - sashWidth) * (((pos.left / sashWidthOuter)) / (cols - 1))))
			}).show ();
		};
		
		/**
		 * Hide the rollover box
		 */
		var sashUnhover		= function ()
		{
			viewer.hide ();
		};
		
		var sashClick		= function (e)
		{
			var target	= $(e.target), 
			sashId		= target.attr ('id').replace ('overlay_', '') * 1;
			
			$('.sashPicked:first', root).removeClass ('sashPicked');
			$('#sash_' + sashId, root).parent ().addClass ('sashPicked');
			sashUnhover ();
			selector.val (sashId);
		};
		
		var selectUpdated	= function (e)
		{
			$('.sashPicked:first', root).removeClass ('sashPicked');
			if (this.value)
			{
				$('#sash_' + this.value, root).parent ().addClass ('sashPicked');
			}
		};
		
		/**
		 * Generate an overlay item for catching mouse events for the underlying
		 * item
		 */
		var initOverlay		= function ()
		{
			var elem		= $(this),
				img			= $('img:first', elem),
				imgSrc		= img.attr ('src'),
				sashId		= img.attr ('id').replace ('sash_', '') * 1,
				newOverlay	= $('<li class="sash sashOverlay" id="overlay_' 
							+ sashId 
							+ '"></li>');
			
			newOverlay.css (elem.position ());
			sashData [sashId]	= {
				'thumb'	: imgSrc, 
				'img'	: imgSrc.replace ('thumbs', 'fullsize').replace ('_th.', '.'), 
				'desc'	: img.attr ('alt')
			};
			root.append (newOverlay);
		};
		
		/**
		 * Initialize a collection of event catching overlays for the sash items
		 */
		var initOverlays	= function ()
		{
			sashes.each (initOverlay);
			overlays	= $('.sashOverlay', root);
		};
		
		/**
		 * Initialize the sash picker
		 */
		var init			= function ()
		{
			root.append (viewer);
			// Compute the sash view's width and height
			viewerWidth		= viewer.width (),
			viewerHeight	= viewer.height ();
			// Generate the overlay grid
			initOverlays ();
			// Attach mouse events
			overlays.mouseenter (sashHover).mouseleave (sashUnhover).click (sashClick);
			selector.change (selectUpdated);
		};
		
		init ();
		return (root);
	};
}) (jQuery);