var RichTooltip = Class.create();
Object.extend(RichTooltip.prototype, {
	initialize: function(cls_name, tooltip_suffix, trigger_suffix, event) {
		this.tooltips = document.getElementsByClassName(cls_name);
		this.trigger_suffix = trigger_suffix;
		this.tooltip_suffix = tooltip_suffix;
		this.event = event;
		this.register_events();
	},
	register_events: function() {
		if( this.event == 'hover' ) this.event = 'mouseover';
		this.tooltips.each((function(tooltip) {
			document.getElementsByClassName('close',
				tooltip).each((function(e) {
				Event.observe(e, 'click', (function(event) {
					tooltip.hide();
					Event.stop(event);
				}).bindAsEventListener(this));
			}).bind(this));
			var trigger = this.trigger_for(tooltip.id);
			Event.observe(trigger, this.event,
				this.trigger_click.bindAsEventListener(this));
			if( this.event == 'mouseover' )
				Event.observe(trigger, 'mouseout',
					(function(event) {
						tooltip.hide();
					}).bindAsEventListener(this));
		}).bind(this));
	},
	trigger_for: function(tooltip_id) {
		var re = new RegExp(this.tooltip_suffix+'$');
		return $(tooltip_id.sub(re, '') + this.trigger_suffix);
	},
	tooltip_for: function(trigger_id) {
		var re = new RegExp(this.trigger_suffix+'$');
		return $(trigger_id.sub(re, '') + this.tooltip_suffix);
	},
	trigger_click: function(event) {
		Event.stop(event);
		this.tooltips.each(function(e) {e.hide()});
		var trigger = Event.element(event);
		if( trigger.tagName.toLowerCase() == 'img' )
			trigger = trigger.parentNode
		var tooltip = this.tooltip_for(trigger.id);
		tooltip.setStyle({
			position: 'absolute',
			top: '-1000px',
			left: '-1000px'
		});
		Position.clone(trigger, tooltip, {
			setWidth: false,
			setHeight: false,
			offsetTop: trigger.getDimensions().height
		});
		tooltip.show();
	}
});