/**
 * 
 * imageTitle JQuery Plugin ver 1.2 (17/11/2009)
 * 
 * img tag must have width and height specified 
 * for plugin to work in Safari
 * 
 * ver 1.1 specify padding of div 
 * ver 1.2 re-configure & position title div on hover 
 * 
 **/

jQuery.fn.imageTitle = function(options){
	
	var defaults = {  
		onEvent           : "mouseover",
		opacity           : 1,
		delay             : 300,
		inEffect          : "slide", // or fade
		inEffectDuration  : 500,
		outEffect         : "slide", // or fade
		outEffectDuration : 500,
		bgColor           : "#cecece",
		color             : "#ffffff",
		padding           : 10
   	};  
  	var options = $.extend(defaults, options); 
	
	return this.each(function(){
		
		var display_timeout = 0;

		var title = $(this).attr('title');
		$(this).attr('title', '').css("cursor", "pointer");

		var pos = $(this).offset();
		var height = $(this).height();
		var width = $(this).width();
		var theID = "imageTitle_"+Math.floor(Math.random()*1001);
		
		$('body').append('<div class="imageTitle-caption" id="'+theID+'">'+title+'</div>');
		
		$('#'+theID).css({
			"position"   : "absolute",
			"background" : options.bgColor,
			"display"    : "none",
			"top"        : pos.top+"px",
			"left"       : pos.left+"px",
			"padding"    : options.padding+"px",
			"width"      : (width - (options.padding * 2))+"px",
			"height"     : (height - (options.padding * 2))+"px",
			"opacity"    : options.opacity,
			"color"      : options.color,
			"overflow-y" : "auto"
				
		}).bind("mouseleave", function() {
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}
			
			if(options.outEffect == "fade") {
				$(this).fadeOut(options.outEffectDuration);
			} else {
				$(this).hide("slide", {direction : "down", duration : options.outEffectDuration});
			}		
		});
		
		$(this).bind(options.onEvent, function() {
			
			var pos = $(this).offset();
			
			$('#'+theID).css({
				"top"   : pos.top+"px",
				"left"  : pos.left+"px"
			});
			
			if(display_timeout != 0) {
				clearTimeout(display_timeout);
			}
			
			display_timeout = setTimeout(function() {
					display_timeout = 0;
					
					if(options.inEffect == "fade") {
						$('#'+theID).fadeIn(options.inEffectDuration);
					} else {
						$('#'+theID).show("slide", {direction : "down", duration : options.inEffectDuration});
					}

			}, options.delay);
			
		});
		
	});
}