// Tooltip Object
var Tooltip = Class.create();
Tooltip.prototype = {
	initialize: function(el, options) {
		this.el = $(el);
		this.initialized = false;
		this.setOptions(options);
		this.hideTimer = null;
		// Event handlers
		this.showEvent = this.show.bindAsEventListener(this);
		this.hideEvent = this.hide.bindAsEventListener(this);
		this.updateEvent = this.update.bindAsEventListener(this);
		if(!this.options.onFocus && !this.options.onNothing){
			Event.observe(this.el, "mouseover", this.showEvent );
			Event.observe(this.el, "mouseout", this.hideEvent );
		}else if(!this.options.onNothing){
			Event.observe(this.el, "focus", function(e){this.el.addClassName('infocus');this.el.removeClassName('formerror');this.showEvent(e); }.bind(this));
			Event.observe(this.el, "blur", function(e){this.el.removeClassName('infocus');this.hideEvent(e); }.bind(this));
			this.options.mouseFollow = false;
		}
		
		//document.observe('history:toggle',this.hideEvent);
		//document.observe('mouse:wheel',this.hideEvent);
		
		
		this.content = '';
		this.error = '';
		this.setTooltipText();
		
		// If descendant elements has 'alt' attribute defined, clear it
		/*this.el.descendants().each(function(el){
			if(Element.readAttribute(el, 'alt'))
				el.alt = "";
		});*/
	},
	setOptions: function(options) {
		this.options = {
			backgroundColor: '#999', // Default background color
			borderColor: '#666', // Default border color
			textColor: '', // Default text color (use CSS value)
			textShadowColor: '', // Default text shadow color (use CSS value)
			maxWidth: 200,	// Default tooltip width
			align: "left", // Default align
			delay: 4000, // Default delay before tooltip appears in ms
			mouseFollow: false, // Tooltips follows the mouse moving
			opacity: 0.9, // Default tooltips opacity
			appearDuration: .25, // Default appear duration in sec
			hideDuration: .25, // Default disappear duration in sec
			onFocus: true, // show tooltip on focus and hide on blur
			onNothing: false, //Show tooltip only on show-command. No trigger.
			hideTimer:10000 //Default hidetime, if set to 0 then automatic hiding is disabled.
		};
		Object.extend(this.options, options || {});
	},
	show: function(e) {
		if(!this.options.onFocus){
			this.xCord = Event.pointerX(e);
			this.yCord = Event.pointerY(e);
		}
		else{
			this.xCord = this.el.viewportOffset().left + this.el.getWidth();
			this.yCord = this.el.viewportOffset().top;
		}
		if(!this.initialized)
			this.timeout = window.setTimeout(this.appear.bind(this), 0);
		//this.timeout = window.setTimeout(this.hide.bind(this), this.options.delay);
	},
	hide: function(e) {
	    if(this.hideTimer!=null)this._clearTimeout(this.hideTimer);
		if(this.initialized) {
			this.appearingFX.cancel();
			if(this.options.mouseFollow)
				Event.stopObserving(this.el, "mousemove", this.updateEvent);
			new Effect.Fade(this.tooltip, {duration: this.options.hideDuration, afterFinish: function() { Element.remove(this.tooltip) }.bind(this), delay:0.1 });
		    
		}
		
		this._clearTimeout(this.timeout);
		
		this.initialized = false;
	},
	update: function(e){
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		this.setup();
	},
	setTooltipText: function(){
	    var tmpArr = this.el.title.split("#ERROR");
		// Removing title from DOM element to avoid showing it
		this.el.title = '';
		this.content = tmpArr[0];
		this.error = '';
		if(tmpArr.length>1){
			this.error = tmpArr[1];
			this.el.addClassName('formerror');	
	    }
	},
	appear: function() {
		if(this.el.title!=''){
		    this.setTooltipText();
		}
		// Building tooltip container
		this.tooltip = Builder.node("div", {className: "tooltip", style: "display: none;" }, [
			Builder.node("div",[
					Builder.node("span", {className: "error"}, this.error)
			], this.content)
		]);
		document.body.insertBefore(this.tooltip, document.body.childNodes[0]);
		
		Element.extend(this.tooltip); // IE needs element to be manually extended
		this.options.width = this.tooltip.getWidth();
		this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
		
		this.setup();
		
		if(this.options.mouseFollow)
			Event.observe(this.el, "mousemove", this.updateEvent);
		this.initialized = true;
		this.appearingFX = 
		new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });	
		if(this.options.hideTimer>0)
		    this.hideTimer = window.setTimeout(this.hide.bind(this), this.options.hideTimer);    
	},
	setup: function(){
		// If content width is more then allowed max width, set width to max
		if(this.options.width > this.options.maxWidth) {
			this.options.width = this.options.maxWidth;
			this.tooltip.style.width = this.options.width + 'px';
		}
			
		// Tooltip doesn't fit the current document dimensions
		if(this.xCord + this.options.width >= Element.getWidth(document.body)) {
			this.options.align = "right";
			this.xCord = this.xCord - this.options.width + 20;
		}
		
		this.tooltip.style.left = this.xCord + "px";
		this.tooltip.style.top = this.yCord + "px";
	},
	_clearTimeout: function(timer) {
		clearTimeout(timer);
		clearInterval(timer);
		return null;
	}
};