var SpeechBubble = Class.create({
	
	id: null,
	
	initialize: function(content, context, opts) {
		opts = $H(opts);
		if(!opts.get('xOffset'))	{ opts.set('xOffset', 6); }
		if(!opts.get('yOffset'))	{ opts.set('yOffset', 24); }
		if(!opts.get('opacity'))	{ opts.set('opacity', 0.95); }
		if(!opts.get('duration'))	{ opts.set('duration', 0.3); }
		
		var s = new Element('div', {'class': 'speechBubbleWrapper', 'style': 'display: none; z-index: 1000;'});
		var y = context.positionedOffset().top + context.getHeight() - opts.get('yOffset');
		var x = context.positionedOffset().left + opts.get('xOffset');
		s.update('<div class="bubble"></div>');
		s.setStyle({
			top: 	y + 'px',
			left: 	x + 'px'
		});
		if(opts.get('id')) {
			s.down('.bubble').id = opts.get('id');
		}
		s.down('.bubble').update(content);
		document.body.appendChild(s);
		this.id = s.identify();
		$(this.id).appear({duration: opts.get('duration'), to: opts.get('opacity')});
	},
	
	hide: function() {
		$(this.id).fade({duration: 0.2});
		setTimeout('$("' + this.id + '").remove();', 350);
	}
});