(function($) {
	$(function() {
		var canvas = $('<div id="balloon-canvas" style="display:none;position:absolute;">'+
				'<div id="balloon-top-left"></div>'+
				'<div id="balloon-top-right"></div>'+
				'<div id="balloon-bottom-left"></div>'+
				'<div id="balloon-bottom-right"></div>'+
				'<div id="balloon-nose"></div>'+
				'<div id="balloon-content"></div>'+
			'</div>');
		$('body').append(canvas);
	});


	$.fn.f1balloon = function(settings) {
		var config = {
			'contentCallback': false
		};

		if (settings) {
			$.extend(config, settings);
		}

		var footerHeight = 19 + 15;
		var leftWidth = 15;
		var hasContent = (typeof(config.contentCallback) == 'function');
		var t;

		function showBalloon(dom) {
			clearTimeout(t);
			var obj = $(dom);
			var balloonContent = $('#balloon-content');
			var canvas = $('#balloon-canvas');

			var contentString = '';
			if (hasContent) {
				contentString = config.contentCallback(dom);
			} else {
				var rel = obj.attr('rel');
				if ($('#'+rel)) {
					$('#'+rel).hide();
					contentString = $('#'+rel).html();
				} else {
					contentString = 'No content for element ID "'+rel+'"';
				}
			}
			balloonContent.html(contentString);
			canvas.show();

			var absHeight = balloonContent.height() + 46;
			var absWidth = balloonContent.width() + 24;
			canvas.hide();

			canvas.height(absHeight);
			canvas.width(absWidth);

			$('#balloon-top-left').height(absHeight-footerHeight);
			$('#balloon-top-right').height(absHeight-footerHeight);

			$('#balloon-top-right').width(absWidth-leftWidth);
			$('#balloon-bottom-right').width(absWidth-leftWidth);

			var nosePos = Math.round(absWidth / 2 - 17);
			$('#balloon-nose').css('margin-left', nosePos + 'px');

			// place balloon
			/*
			var leftMargin = Math.round((absWidth - obj.width() - 27) / 2);

			if (leftMargin < 0) {
				leftMargin = 0;
			} else if(leftMargin > $('body').width()) {
				leftMargin = $('body').width() - absWidth;
			}
			obj.css('position', 'relative');
			canvas.css('bottom', 21);
			canvas.css('left', -leftMargin);
			*/

			var positions  = obj.offset();
			var leftMargin = Math.round((absWidth - obj.width() - 30) / 2);
			canvas.css('top', positions.top - absHeight - 1);
			canvas.css('left', positions.left - leftMargin - 1);
			canvas.css('z-index', 5);
			canvas.show();

			// obj.append(canvas);
		}

		function hideBalloon(dom) {
			$('#balloon-canvas').hide();
			$(dom).css('position', 'static');
		}

		$('#balloon-canvas').hover(function() {
	        clearTimeout(t);
	    }, function() {
	    	t = setTimeout(function() {hideBalloon(this)}, 500);
	    });

		this.each(function() {
			if (!hasContent) {
				var rel = $(this).attr('rel');
				if ($('#'+rel).length) {
					$('#'+rel).hide();
					hasContent = true;
				}
			}

			if (hasContent) {
				$(this).hover(
					function() {
						showBalloon(this);
					},
					function() {
						t = setTimeout(function() {hideBalloon(this)}, 500);
					}
				);
			}
		});
		return this;
   };
})(jQuery);