// JavaScript Document
/* 
//	imageOverlay JQuery plug-in
//	by Ric Ewing - ric@ricewing.com
//	
//	A quick and dirty plugin that uses an image's alt text
//	to display information as an overlay.
*/

(function( $ ){
	$.fn.iOverlay = function(opt) {
		// Setup the options for the overlay
		var defaults = {
			speed: 100
		};
		// make it accessable from outside the	plugin
		var opt = $.extend(defaults, opt);
				
		// loop through the selected elements and attach the overlay code
		return this.each(function() {
			//capture objects for later reference
			var $this = $(this);
			var $tgt = $this.children('img:first');
			// add an additional div inside the link
			$this.append("<div class='overlay'></div>");
			//name and style it
			var olay = $this.children('.overlay:first');
			olay.css({
				'display': 'none',
				'position': 'absolute'
			});
			updateOverlay();
			
			// hover to fade in and out
			$this.hover(function() {
				updateOverlay();
				olay.toggle(defaults.speed);
			});
		
			// Position the overlay relative to the image
			// associated with the overlay
			function updateOverlay() {
				var oo = $tgt.position();
				olay.css({
					'top': oo.top + "px",
					'left': oo.left + "px"
				});
			}
		});
	};
})( jQuery );


// autoloader for plugin. Selects all links to images that contain images.
if (!/android|iphone|ipod|iPad|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	jQuery(function($) {
		$("a[href]").has("img").filter(function() {
			return /\.(jpg|png|gif)$/i.test(this.href);
		}).iOverlay();
	});
}