(function($) {

	$.fn.extend({

		tooltip : function(options) {

			var defaults = {
			// nothing yet
			};

			var options = $.extend(defaults, options);

			return this.each(function() {
				var o = options;
				var obj = $(this);

				obj.hover(function() {
					// remove and store the title attribute
					obj.data('title', obj.attr('title'));
					obj.removeAttr('title');

					// create the tooltip div
					var tt = $('<div />', {
						'class' : 'tooltip'
					});
					tt.append($('<div />', {
						'class' : 'top'
					}));
					tt.append($('<div />', {
						'class' : 'middle',
						html : obj.data('title')
					}));
					tt.append($('<div />', {
						'class' : 'bottom'
					}));

					// add the tooltip div
					obj.append(tt);

					// work out correct position
					var ttWidth = tt.width();
					var objWidth = obj.width();

					tt.css('left', -((ttWidth / 2) - (objWidth / 2)));

					var ttHeight = tt.height();
					var objHeight = obj.height();

					tt.css({
						top:-(ttHeight - (objHeight / 2)),
						display: 'block',
						opacity: 0
					});
					
					tt.animate({
						opacity: 1,
						marginTop: '-=10px'
					});
				}, function() {
					obj.attr('title', obj.data('title'));
					obj.children('div.tooltip').fadeOut('fast', function() {
						$(this).remove();
					});
				}

				);

			});
		}

	});

})(jQuery);