function enableBubbleTitle(className)
{
	var legendes = document.getElementsByClassName(className);
	if(legendes.length != 0) {
		for(var i=0;i<legendes.length;i++) {
			new BubbleTitle(legendes[i]);
		}
	}
}

var BubbleTitle = Class.create();

BubbleTitle.prototype = {
	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)
							{
								//alert('showBubble');
								e = e || window.event;
								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)
							{
								//alert('hideBubble');
								e = e || window.event;
								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);
							},
					
	remove:					function()
							{
								var title = this.floatingTitle.getDOM();
								var body = document.getElementsByTagName('body')[0];
								body.removeChild(title);
							}
	
};
		
var FloatingTitle = Class.create();

FloatingTitle.prototype = {
	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 = document.createElement('div');
						innerdiv.id = "innerdiv";
						
						
						innerdiv.style.backgroundColor = '#FFFF99';
						innerdiv.style.border = '1px solid #BBBB00';
						innerdiv.style.borderTop = 'none';
						innerdiv.style.padding = '5px';
						//innerdiv.style.paddingTop = '0';
						innerdiv.style.textAlign = 'center';
						
						return innerdiv;
					},
					
	getOuterDIV:	function()
					{
						var outerdiv = document.createElement('div');
						outerdiv.id = "outerdiv";
						
						outerdiv.style.width = "150px";
						outerdiv.style.background = "url(http://"+window.location.host+"/CSS/images/bubbleTitle.gif) no-repeat -15px top";
						//outerdiv.style.background = "url(http://"+window.location.host+"/CapAdresse/CSS/images/bubbleTitle.gif) no-repeat -15px top";
						outerdiv.style.paddingTop = '29px';
						outerdiv.style.zIndex = '10';
						//outerdiv.style.border = '1px solid red';
						
						Element.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';
						//alert('y: '+this.DOM.style.top+';x: '+this.DOM.style.left);
					},
					
	setContent:		function(innerHTML)
					{
						this.DOM.firstChild.innerHTML = innerHTML;
					},
					
	getContent:		function()
					{
						return this.DOM.firstChild.innerHTML;
					},
					
	show:			function()
					{
						this.DOM.style.display = 'block';
					},
	
	hide:			function()
					{
						this.DOM.style.display = 'none';
					}
};