(function($) {
	$.fn.applyOverlay = function(options) {
		// build main options before element iteration
		var opts = $.extend({}, $.fn.applyOverlay.defaults, options);
		
		// iterate and reformat each matched element
		return this.each(function() {
			$this = $(this);
			
			// build element specific options
			var o = $.metadata ? $.extend({}, opts, $this.metadata({type:'attr',name:'data'})) : opts;
			
			//exit if the text is not set
			if (o.text == '') return;
			
			//create the overlay
			var overlayElement = createOverlay($this.attr("id"), o);
						
			// update element styles
			overlayElement.css({
				backgroundColor: o.backgroundColor,
				color: o.color,
				font: o.font,
				opacity: o.opacity,
				textTransform: o.textTransform,
				textAlign: o.textAlign,
				padding: o.padding,
				border: o.border
			});
			
			//position the overlay on the screen according to the location of the image
			positionOverlay(overlayElement, $this);
			
			//reveal the overlay with a fade in transition effect
			revealOverlay(overlayElement, o.fadeIn);
		});
	};
  	
    //expose this as a public function
    $.fn.applyOverlay.setPosition = function(overlayElement, imageElement) {
		positionOverlay(overlayElement, imageElement);
	};
	
	//set up the defaults for options not passed into the plugin
	$.fn.applyOverlay.defaults = {
		text: '',
		color: 'white',
		backgroundColor: '#6f1e1e',
		font: 'bold 13px Calibri',
		opacity: '0.85',
		textTransform: 'uppercase',
		textAlign: 'center',
		padding: '2px 0px 2px 0px',
		border: '1px solid #e2e2e2',
		fadeIn: '1250'
	};
    
    function createOverlay(imageID, options) {
		return $("<div id=\"overlay_div_" + imageID + "\">" + $.trim(options.text) + "</div>").appendTo("body").css({
					display: 'none',					
					position: 'absolute'
				});
    };
        
    function positionOverlay(overlayElement, imageElement) {
		var overlay_width = imageElement.width() - 2;
        var imageOffset = imageElement.offset();
        var overlay_left = imageOffset.left;
        var overlay_top = imageOffset.top;
        
        //fix for non IE browsers
        if (!$.browser.msie) overlay_left++;
        
		overlayElement.css({left: overlay_left, top: overlay_top, width: overlay_width});
    };
    
    function revealOverlay(overlayElement, revealDuration) {
        overlayElement.fadeIn(parseFloat(revealDuration));
    };
        
    //debug function to write to FireBug console
	function debug(text) {
		if (window.console && window.console.log) {
			window.console.log('applyOverlay: ' + text);
		}
	};
})(jQuery);

$(document).ready(function(){
	//apply the overlay effect to all images with the classname beginning with 'overlay'
	$("img[id][rel='overlay']").applyOverlay();
	
	//force overlay placement a second time on a delay;
	//at times, although the page is loaded, the images are still moving into place;
	//this causes problems with the overlay placement;
	setTimeout("$.each($(\"img[id][rel='overlay']\"), function() {$(this).applyOverlay.setPosition($(\"#overlay_div_\" + $(this).attr('id')), $(this));});", 2500);	
	
	//reset the overlay position when the window is resized
	$(window).resize(function(){
		$.each($("img[id][rel='overlay']"), function() {$(this).applyOverlay.setPosition($("#overlay_div_" + $(this).attr('id')), $(this));});
	});
});