var Tooltip = new Class({

	initialize : function(content, styles)
	{
		this.element = this.create(content);
		this.container = document.body;
		
		if (styles)
		{
			this.element.setStyles(styles);
		}
		
		this.element.setStyles({ opacity : 0 });
		
		this.container.appendChild(this.element);
		
		new Fx.Styles(this.element, { duration : 500 }).start({
			opacity : 1,
			"margin-top" : -this.element.offsetHeight
		});
		
		this.element.addEvent("click", this.destroy.bindAsEventListener(this));
	},
	
	create : function(content)
	{
		var contentBox = new Element("div", { "class" : "content" });
		contentBox.setHTML(content);
		
		return new Element("div", { "class" : "bubble" })
			.adopt(new Element("div", { "class" : "tl" })
				.adopt(new Element("div", { "class" : "tr" }))
				.adopt(new Element("div", { "class" : "bl" }))
				.adopt(new Element("div", { "class" : "br" }))
				.adopt(contentBox));
	},
	
	destroy : function()
	{
		var self = this;
		
		new Fx.Styles(this.element, { duration : 500 }).start({
			opacity : 0
		})
		.chain(function()
		{
			self.element.remove();
			self = null;
		});
	}
});