(function($) {

	/*
	Balloon plugin:
	*************
	Can display a balloon with information right next to an existing html element.
	
	Options:
	********
	All options have reasonable default settings. Only provide options if you don't want to use the default settings.
	
		container: jquery dom element to which the balloon will be added.
	
	Usage:
	******
	
	$.balloon.show("Hey, this is my message.", $('input_field_name'), {  });
	*/ 

	var balloon = {};
	var opts;

	balloon.defaults = {
		container: 'body'
	};

	balloon.show = function $$baloon$show(msg, relatedElement, options) {
		opts = $.extend({}, balloon.defaults, options);

		//create html for balloon
		var balloonElement = $("<div class=\"balloon\"><div class=\"point\"></div><div class=\"top\"><div><p>" + msg + "</p></div></div><div class=\"bottom\"><div></div></div></div>");

		positionBalloon(balloonElement, relatedElement);
		$(opts.container).append(balloonElement);
		balloonElement.find('.bottom').css("width", balloonElement.width());	// For IE.
		
		$(window).resize(function() {
			//position of the balloon will not be correct after resizing the window.
			positionBalloon(balloonElement, relatedElement);
		});
		
		return this;
	}
	
	balloon.hide = function $$baloon$hide() {	
		$('.balloon').remove();
	}
	
	function positionBalloon(balloonElement, relatedElement) {
		var offset = relatedElement.offset()		
		balloonElement.css("left", (offset.left + (relatedElement.width() + 25))); //( * 0.35)
		balloonElement.css("top", offset.top);
	}

	$.extend({ balloon: balloon });
})(jQuery);