/**
 * eFocusTips
 *
 * extends MooTools Tips class with two options:
 *		triggerEvent; values: 'click', 'focus', 'hover'(default)
 *		fitInWindow; boolean, defaults to true	
 *
 * @extends MooTools Tips version 1.2.1
 * @author Klaas Dieleman <klaas{AT}efocus.nl>
 * @copyright eFocus, www.efocus.nl
 * @version 1.0
 *
 * @todo: with multiple instances which use the 'click' triggerevent, only the last instance works
 * @toto: click doesn't go well with AJAX yet
 */
 
var eFocusTips = new Class({

	Extends: Tips,

	options: {
		triggerEvent: 'hover',
		fitInWindow: true
	},
	
	initialize: function(){
		var params = Array.link(arguments, {options: Object.type, elements: $defined});
		this.setOptions(params.options || null);
		
		this.tip = new Element('div').inject(document.body);
		
		if (this.options.className) this.tip.addClass(this.options.className);
		
		var top = new Element('div', {'class': 'tip-top'}).inject(this.tip);
		this.container = new Element('div', {'class': 'tip'}).inject(this.tip);
		var bottom = new Element('div', {'class': 'tip-bottom'}).inject(this.tip);

		this.tip.setStyles({position: 'absolute', top: 0, left: 0, visibility: 'hidden'});
		
		if (params.elements) this.attach(params.elements);
	},

	attach: function(elements){
		//this.tipVisible = -1;
		arElements = $$(elements);
		arElements.each(function(element){
			//check of er een title is ander niet tonen (gijs epping)
			if(element.get('title')){
				var title = element.retrieve('tip:title', element.get('title'));
				var text = element.retrieve('tip:text', element.get('rel') || element.get('href'));
				var enter = element.retrieve('tip:enter', this.elementEnter.bindWithEvent(this, element));
				var leave = element.retrieve('tip:leave', this.elementLeave.bindWithEvent(this, element));
				//var click = element.retrieve('tip:click', this.handleClick.bindWithEvent(this, element));
				switch(this.options.triggerEvent) {
					/*case 'click':
						element.addEvent('click', click);
						break;*/
					case 'focus':
						element.addEvent('focus', enter);
						element.addEvent('blur', leave);
						break;
					default:
						element.addEvent('mouseenter', enter);
						element.addEvent('mouseleave', leave);
				}
				if (!this.options.fixed){
					var move = element.retrieve('tip:move', this.elementMove.bindWithEvent(this, element));
					element.addEvent('mousemove', move);
				}
				element.store('tip:native', element.get('title'));
				element.erase('title');
				element.erase('alt');
			}
		}, this);
		return this;
	},
	
	detach: function(elements){
		$$(elements).each(function(element){
			element.removeEvents();
			var original = element.retrieve('tip:native');
			if (original) element.set('title', original);
		});
		return this;
	},
	
	/*handleClick: function(event, element){
		if(this.tipVisible == arElements.indexOf(element)) {
			this.tipVisible = -1;
			this.elementLeave(event, element);
		} else {
			this.tipVisible = arElements.indexOf(element);
			this.elementEnter(event, element);
		}
	},*/
	
	position: function(event){
		var size = window.getSize(), scroll = window.getScroll();
		var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight};
		var props = {x: 'left', y: 'top'};
		for (var z in props){
			var pos = event.page[z] + this.options.offsets[z];
			if ((pos + tip[z] - scroll[z]) > size[z] && this.options.fitInWindow) pos = event.page[z] - this.options.offsets[z] - tip[z];
			this.tip.setStyle(props[z], pos);
		}
	}
});