(function( $ ) {

	$.tooltip = function( element ) {

		var tooltipID = 'tooltip-' + $.data( element );
		
		var self = this;
		
		var $element = $(element);
		var $tooltip = null;
		
		this.reposition = function() {
			$('#'+tooltipID).css({
				'top'	  : offset.top,
				'left'	  : offset.left
			})
		};
		
		this.offset = function( n ) {
			var f = $element.offset();
			var top;
			var left;
			switch( n ) {
				case 1:
					top = f.top;
					left = f.left + $element.width() - $tooltip.width();
					break;
				case 2:
					top = f.top - $tooltip.height();
					left = f.left + $element.width() - Math.ceil($tooltip.width() / 2) - 5;
					break;
				default :
					top = f.top - Math.ceil($tooltip.height() / 2);
					left = f.left + $element.width() - 10;
			}
			return {'top' : top, 'left' : left}
		};
	
		if (!element.title) return false;
		$element
			.data('tooltip', element)
			.bind('focus', function() {
				if (!$('#'+tooltipID).length) {
					$('<div></div>')
						.attr({
							'id' 	: tooltipID,
							'class' : 'tooltip'
						})
						.css({
							'display' : 'none'
							//'z-index' : 3
						})
						.html('<table class="frame-t"><tr class="t"><td class="l"><div class="png"></div></td><td class="c png-scale"></td><td class="r"><div class="png"></div></td></tr><tr class="m"><td class="l png-scale"></td><td class="c"><span>'+element.title+'</span></td><td class="r png-scale"></td></tr><tr class="b"><td class="l"><div class="png"></div></td><td class="c png-scale"></td><td class="r"><div class="png"></div></td></tr></table>')
						.prependTo($('body'));
					$tooltip = $('#'+tooltipID);
					$element.css({
						//'position': 'relative',
						//'z-index' : 5
					});
				}
				$('#'+tooltipID).css({
					//'opacity' : 0,
					//'display' : 'block',
					'top'	  : self.offset().top,
					'left'	  : self.offset().left
				}).fadeIn();
				/*.animate({
					'opacity' : 0.5,
					'top'	  : self.offset( 2 ).top,
					'left'	  : self.offset( 2 ).left
				}, 'normal', false, function() {
					$(this).css({
						'z-index' : 6,
					}).animate({
						'opacity' : 1,
						'top'	  : self.offset().top,
						'left'	  : self.offset().left
					})
				});
				*/
			})
			.bind('blur', function() {
				$('#'+tooltipID).fadeOut();
			});
		$(window).bind('resize', function() {
			$('#'+tooltipID).animate({
				'top' 	: self.offset().top,
				'left' 	: self.offset().left
			});
		});
	
	};

	$.fn.tooltip = function() {
		
		this.each(function(){
			
			if (!$(this).attr('title')) return false;
			$.tooltip( this );						
			
		});
		
	};

})(jQuery);