/*
 * SlalomTip 1.0
 * Author:
 *
 * 		Salem Sallnäs, SiteDirect Professional Web Solutions AB
 *
 * Description:
 *
 * 		Creates fancy tooltips from element title attributes
 *
 * Requirements:
 *
 * 		Mootools >= 1.2
 *
 * Syntax:
 *
 * 		new SlalomTip(obj Options);
 *
 * 		Options
 * 			selector	string 		A css selector that has been set on elements that SlalomTip should be applied to(i.e '.slalomtips')
 * 						default		'.slalomtips'
 * 			cssclass	string 		A css class to define the tooltip container appearance
 * 						default		'slalomtip'
 * 			textclass 	string		A css class to define the text appearance of the tooltip
 * 						default		'NORMAL'
 * 			trigger		string		A javascript event that when triggerd on the elements will fire the tooltip
 * 						default		'mouseenter'
 * 			separator	string		The string that is used to separate title from text ('Information::Klicka på blablal...') -> separator = '::'
 * 						default		'::'
 * 			titleTag	string		The tag that should be used for the title
 * 						default		'div'
 * 			closemethod	string		When the tooltip should disappear. Can be 'mouseleave', 'click' or 'timeout'
 * 						default		'mouseleave'
 * 			mouseleave	string		If closemethod is 'mouseleave', specifies the element that the event should apply to. 'tip' or 'element'
 * 						default		'element'
 * 			timeout		int			If closemethod is 'timeout', specifies the timeout in milliseconds
 * 						default		5000
 * 			width		int			The width of the tooltips in pixels
 * 						default		200
 *
 * Example:
 *
 * 		new SlalomTip({
 * 			selector: 		'.mytips',
 * 			closemethod: 	'timeout',
 * 			timeout:		3000,
 * 			titleTag:		'h3'
 * 		});
 *
 */


var SlalomTip = new Class({
	Implements: Options,
	options: {
		selector:	'.slalomtips',
		cssclass:	'slalomtip',
		textclass: 	'NORMAL',
		trigger:	'mouseenter',
		separator:	'::',
		titleTag:	'div',
		closemethod:'mouseleave',
		mouseleave:	'element',
		timeout:	5000,
		width:		200
	},
	initialize: function(options){
		this.setOptions(options);
		document.addEvent('domready',this.hookem.bind(this));
	},
	hookem: function(){
		this.elements = $$(this.options.selector);
		this.elements.each(function(el){
			if(el.getProperty('title')){
				if(this.options.trigger == 'click'){
					el.setStyle('cursor','pointer');
				}
				el.getAttribute('title')
				el.addEvent(this.options.trigger,this.createTip.bindWithEvent(this,el));
			}
		},this);
	},
	createTip: function(event,el){
		el.removeEvents(this.options.trigger);
		if(!el.slalomtip){
			var titleAttr, title, text, parts, container;
			titleAttr = el.getProperty('title');
			el.setProperty('title','');
			if(titleAttr.contains(this.options.separator)){
				parts = titleAttr.split(this.options.separator);
				title = parts[0];
				text = parts[1];
			} else {
				text = titleAttr;
			}
			el.slalomtip = new Element('div',{'class':this.options.cssclass+' '+this.options.textclass,'styles':{'width':this.options.width}});
			if(title){
				new Element(this.options.titleTag,{'styles':{'font-weight':'bold'},'text':title}).inject(el.slalomtip);
			}
			new Element('div',{'text':text}).inject(el.slalomtip);

			switch(this.options.closemethod){
				case 'mouseleave':
					if(this.options.mouseleave == 'tip'){
						el.slalomtip.addEvent('mouseleave',this.closeTip.pass(el,this));
					} else if(this.options.mouseleave == 'element'){
						el.addEvent('mouseleave',this.closeTip.pass(el,this));
					}
					break;
			}
			el.slalomtip.addEvent('click',this.closeTip.pass(el,this));
		}

		el.slalomtip.setStyles({
				position: 'absolute',
				top: event.client.y+16,
				left: event.client.x
		}).inject($(document.body),'top');

		this.position(el.slalomtip);

		if(this.options.closemethod == 'timeout'){
			this.closeTip.delay(this.options.timeout,this,el);
		}
	},
	closeTip: function(el){
		el.slalomtip.dispose();
		el.addEvent(this.options.trigger,this.createTip.bindWithEvent(this,el));
	},
	position: function(tip){
		var pos = tip.getPosition();
		var size = tip.getSize();
		var win = window.getSize();

		if(pos.x + size.x > win.x) tip.setStyle('left',win.x-size.x-8);
		if(pos.y + size.y > win.y) tip.setStyle('top',win.y-size.y-8);
	}
});