Element.implement({
	setChildText:function(child, text) {
		child.empty().appendText(text);
	}
});

var MagicTooltip = new Class({
	Implements:[Options],
	
	options:{
		target_id:'',
		offset:{x:40, y:0},
		tooltipContainer:$(document.body),
		position:'mouse' //another:target
	},

	initialize:function(targets, texts, options) {
		this.setOptions(options);
		//console.log(this.options.tooltipContainer);
		this.container = this.options.tooltipContainer?this.options.tooltipContainer:$(document.body);
		this.bound = this.moveHandler.bind(this);
		this.createTooltip();
		targets.each(function(elem, i) {
			this.tooltipEvents(elem, texts[i]);
		}.bind(this));
	},

	createTooltip:function() {
		if(!$chk($('tooltip'))) {
			this.tooltip = new Element('div').set('html', 
				'<div class="tooltip round_wrap">'+
					'<div class="tooltip_content">'+
					'</div>'+
					'<div class="round_main round_tl">'+
					'</div>'+
					'<div class="round_main round_tr">'+
					'</div>'+
				'</div>'+
				'<div class="round_main round_bl">'+
				'</div>'+
				'<div class="round_main round_br">'+
				'</div>'
			).set('class', 'wrap_tooltip').set('id', 'tooltip');
			this.tooltip.inject(this.container, 'bottom');
		}else{
			this.tooltip = $('tooltip');
		}
	},

	moveHandler:function(event) {
		var size = window.getSize(), scroll = window.getScroll(),
			tip = {x: this.tooltip.offsetWidth, y: this.tooltip.offsetHeight},
			props = {x: 'left', y: 'top'},
			obj = {};
		
		for (var z in props){
			obj[props[z]] = event.page[z] + this.options.offset[z];
			if ((obj[props[z]] + 10 + tip[z] - scroll[z]) > size[z]) obj[props[z]] = event.page[z] - this.options.offset[z] - tip[z];
		}
		
		this.tooltip.setStyles(obj);
	},

	tooltipHandler:function(e, elem) {
		this.position = $chk(this.options.position)?this.options.position:'mouse';
		var tooltipW = this.tooltip.getSize().x + this.tooltip.getStyle('margin-left').toInt();
		var tooltipH = this.tooltip.getSize().y;
		var containerW = this.container.getSize().x;
		switch(this.position) {
			case 'mouse':
			document.addEvent('mousemove', this.bound);
			break
			case 'target':
			var targetW = elem.getSize().x;
			var targetY = elem.getCoordinates().top;
			this.tooltip.setStyles({
				'left':(targetW - tooltipW)/2,
				'top':targetY - tooltipH
			});
			break
		}
	},

	showTooltip:function(e, elem, text) {
		e.stopPropagation();
		this.tooltip.set('tween', {
			duration:1000,
			wait:false
		}).tween('visibility', 'visible').setChildText(this.tooltip.getElement('.tooltip_content'), text);
		this.tooltipHandler(e, elem);
		document.fireEvent('mousemove', e);
		/*this.timeoutID = (function() {
			this.hideTooltip();
		}.bind(this)).delay(5000);*/
	},

	hideTooltip:function(e, elem, text) {
		//$clear(this.timeoutID);
		this.tooltip.set('tween', {
			duration:0,
			wait:false
		}).tween('visibility', 'hidden');
		this.tooltip.setChildText(this.tooltip.getElement('.tooltip_content'), '');
	},

	tooltipEvents:function(elem, text) {
		elem.addEvents({
			'mouseover':function(e) {
				this.showTooltip(e, elem, text);
			}.bind(this),
			'mouseleave':function(e) {
				this.hideTooltip(e, elem, text);
				document.removeEvent('mousemove', this.bound);
			}.bind(this),
			'DOMMouseScroll':function(e) {}
		});
	}
});