// Tooltip Object
Event.observe(window, 'load', function() {
																						
	$$('.bulle').each(function(element) {	
		new Tooltip(element, { infobulle: 'bulle_information' });
	});

});


var Tooltip = Class.create();
Tooltip.prototype = {
	initialize: function(el, options) {
		this.el = $(el);
		this.initialized = false;
		this.setOptions(options);
		
		// Event handlers
		this.showEvent = this.show.bindAsEventListener(this);
		this.hideEvent = this.hide.bindAsEventListener(this);
		Event.observe(this.el, "mouseover", this.showEvent );
		Event.observe(this.el, "mouseout", this.hideEvent );
		
		// Removing title from DOM element to avoid showing it
		this.content = this.el.down(0).title;
		this.el.down(0).title = "";

		// If descendant elements has 'alt' attribute defined, clear it
		this.el.descendants().each(function(el){
			if(Element.readAttribute(el, 'alt'))
				el.alt = "";
		});
	},
	setOptions: function(options) {
		this.options = {
			maxWidth: 500,	// Default tooltip width
			align: "left", // Default align
			delay: 250, // Default delay before tooltip appears in ms
			opacity: .75, // Default tooltips opacity
			appearDuration: .25, // Default appear duration in sec
			hideDuration: .25, // Default disappear duration in sec
			infobulle: 'infobulle' // Le div pour afficher le texte
		};
		Object.extend(this.options, options || {});
	},
	show: function() {
		if(!this.initialized)
			this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
	},
	hide: function() {
		if(this.initialized) {
			this.appearingFX.cancel();
			new Effect.Fade(this.tooltip, {duration: this.options.hideDuration });
		}
		this._clearTimeout(this.timeout);
		
		this.initialized = false;
	},
	appear: function() {
		// Building tooltip container
		this.tooltip = $(this.options.infobulle);
		this.tooltip.update('<div>'+this.content+'</div>');

		this.options.width = this.tooltip.getWidth();
		
		if(this.options.width > this.options.maxWidth) {
			this.options.width = this.options.maxWidth;
			this.tooltip.style.width = this.options.width + 'px';
		}
		
		this.tooltip.style.left = parseInt(this.el.positionedOffset()[0]-197)+'px';
		this.tooltip.style.top = parseInt(this.el.positionedOffset()[1]-30)+'px';
		
		this.initialized = true;
		this.appearingFX = new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });
	},
	_clearTimeout: function(timer) {
		clearTimeout(timer);
		clearInterval(timer);
		return null;
	}
};