/**
 * Sucht abbr, acronym und span/p Tags mit titel und ersetzt die Titel mit einem JS basierten 
 * Layer
 */



var Akronyme = {

	items: [],
	layer: null,
	text:  null,
	top: null,
	bottom: null,

	/**
	 * initialize
	 * Collect data and bind events to the tags
	 */
	init: function() {

		// Traverse	tags which could be considered
		$$('abbr', 'acronym', 'span', 'dfn').each(function(item, index) {

				if (!item.getProperty) return;
				if (!item.title) return;
				
				var tagtitle = (item.title + "  ").clean();
				if ($type(tagtitle) != "string" || tagtitle.length < 3) return;


				item.addEvents({
					mouseover: this.show.bind(this, index),
					mouseout: this.hide.bind(this)
				});
				this.items[ index ] = {
					el: item,
					txt: tagtitle
				};
				item.addClass('abbrevation').removeProperty('title'); 

			
		}, this);
		
		if (this.items.length > 0) {
			this.layer = new Element('div', {'class': 'akronym-layer'}).injectAfter('page'); this.hide();
			this.text  = new Element('div', {'class': 'mitte'}).injectInside(this.layer);
			this.top = new Element('div', {'class': 'oben'}).injectBefore(this.text);
			this.bottom = new Element('div', {'class': 'unten'}).injectAfter(this.text);			
		}
		
	},
	
	show: function(i) {
		
		this.text.setHTML('<strong>' + this.items[i].el.getText() + '</strong><br />' + this.items[i].txt);
		var h = this.top.getSize().size.y + this.bottom.getSize().size.y + this.text.getSize().size.y;
		
		var size = this.items[i].el.getSize().size;
		var t = this.items[i].el.getTop() - Math.round(h);
		var l = this.items[i].el.getLeft() + Math.round(size.x / 2 - 123);
		
		this.layer.setStyles({
			visibility: 'visible',
			top: t,
			left: l
		});
	},
	
	hide: function() {
		this.layer.setStyles({
			'visibility': 'hidden',
			top: -10000,
			left: -10000
		});
	}
};