function enableBubbleTitle(className)
{
	var legendes = document.getElementsByClassName(className);
	legendes.each(
		function(value,index)
		{
			new BubbleTitle(value);
		}
	);
}

var BubbleTitle = Class.create(
{
	initialize: 			function(elementID)
							{
								this.element = $(elementID);
								this.currEffect = false;
								this.floatingTitle = new FloatingTitle(this.getTitle());
								
								Event.observe(this.element,'mouseover',this.showBubble.bind(this));
								Event.observe(this.element,'mouseout',this.hideBubble.bind(this));
							},
					
	showBubble:				function(e)
							{
								this.append();
								if(this.currEffect && this.currEffect.state != 'finished')
								{
									this.currEffect.cancel();
								}
								else
								{
									var mousePos = this.getMousePosition(e);
									var elementOffset = this.getElementOffset();
									var elementDimensions = this.getElementDimensions();
									
									var titleY = elementOffset.top + elementDimensions.height;
									//var titleY = mousePos.y;
									
									this.floatingTitle.setPosition({x:mousePos.x,y:titleY});
									//this.floatingTitle.setPosition({x:30,y:40});
								}
								this.currEffect = new Effect.Appear(this.floatingTitle.getDOM(),{duration:0.7});
							},
						
	getElementOffset:		function()
							{
								return Element.cumulativeOffset(this.element);
							},
						
	getElementDimensions:	function()
							{
								return Element.getDimensions(this.element);
							},
					
	hideBubble:				function(e)
							{
								if(this.currEffect && this.currEffect.state != 'finished')
								{
									this.currEffect.cancel();
								}
								this.currEffect = new Effect.Fade(this.floatingTitle.getDOM(),{duration:0.7});
							},
					
	getMousePosition:		function(e)
							{
								var dimensions = {};
								dimensions.x = e.pointerX();
								dimensions.y = e.pointerY();
								
								return dimensions;
							},
					
	getTitle:				function()
							{
								var title = this.element.getAttribute('title');
								this.element.setAttribute('title','');
								return title;
							},
		
	append:					function()
							{
								var title = this.floatingTitle.getDOM();
								var body = document.getElementsByTagName('body')[0];
								body.appendChild(title);
							}
	
}
);
		
var FloatingTitle = Class.create(
{
	initialize:		function(content)
					{
						this.DOM = this.createDOM();	
						this.hide();
						this.setContent(content);
					},
					
	createDOM:		function()
					{
						var outerdiv = this.getOuterDIV();
						var innerdiv = this.getInnerDIV();									
						outerdiv.appendChild(innerdiv);
						return outerdiv;
					},
					
	getInnerDIV:	function()
					{
						var innerdiv = new Element('div',{'id':'innerdiv'});
						innerdiv.setStyle(
						{
							'backgroundColor'	:	'#FFFF99',
							'border'			:	'1px solid #BBBB00',
							'borderTop'			:	'none',
							'padding'			:	'5px',
							'textAlign'			:	'center'
						}
						);
						
						return innerdiv;
					},
					
	getOuterDIV:	function()
					{
						var outerdiv = new Element('div',{'id' : 'outerdiv'});
						
						outerdiv.setStyle(
						{
							'width' : '150px',
							'background' : 'url(CSS/images/bubbleTitle.gif) no-repeat -15px top',
							'paddingTop' : '29px',
							'zIndex'	 : '10'
						}
						);
						
						outerdiv.makePositioned(outerdiv);
						
						return outerdiv;
					},
					
	getDOM:			function()
					{
						return this.DOM;
					},
					
	setPosition:	function(coord)
					{
						this.DOM.style.position = 'absolute';
						this.DOM.style.top = coord.y+'px';
						this.DOM.style.left = coord.x+'px';
					},
					
	setContent:		function(innerHTML)
					{
						this.DOM.firstChild.innerHTML = innerHTML;
					},
					
					
	
	hide:			function()
					{
						this.DOM.style.display = 'none';
					}
}
);