// Tooltip Object
var Tooltip = Class.create();

Tooltip.USE_OFFSETS = 1;
Tooltip.ATTACH_RIGHT = 2;
Tooltip.ATTACH_BOTTOM = 3;

hideTooltips = function()
{
	//$$('.tooltip').each( function(el) { el.hide() });
	//$$('.tooltip').each( function(el) { el.setStyle({ zIndex: 1 }) });
}

showTooltips = function()
{
	//$$('.tooltip').each( function(el) { el.show() });
	//$$('.tooltip').each( function(el) { el.setStyle({ zIndex: 500 }) });
}

Tooltip.prototype = {
	initialize: function(el, options) {
		if (typeof el == 'string') this.el = $(el);
		else this.el = el;

		this.initialized = false;
		this.setOptions(options);

		// Event handlers
		
		if (this.options.mode == 'init')
		{
			this.updateEventNoFollow = this.updateNoFollow.bindAsEventListener(this);
			//Event.observe(this.el, "click", this.hideEvent );
		}
		else if (this.options.mode == 'mouseover')
		{
			this.showEvent = this.show.bindAsEventListener(this);
			this.hideEvent = this.hide.bindAsEventListener(this);

			this.updateEvent = this.update.bindAsEventListener(this);
			Event.observe(this.el, "mouseover", this.showEvent );
			Event.observe(this.el, "mouseout", this.hideEvent );
		}
		else if (this.options.mode == 'focus')
		{
			this.showEvent = this.showAfterClick.bindAsEventListener(this);
			this.hideEvent = this.hide.bindAsEventListener(this);
			
			this.updateEventNoFollow = this.updateNoFollow.bindAsEventListener(this);
			Event.observe(this.el, "focus", this.showEvent );
			Event.observe(this.el, "blur", this.hideEvent );
		}
		else if (this.options.mode == 'mouseover_or_focus')
		{
			this.showEvent = this.showAfterClick.bindAsEventListener(this);
			this.hideEvent = this.hide.bindAsEventListener(this);
			
			this.updateEventNoFollow = this.updateNoFollow.bindAsEventListener(this);
			Event.observe(this.el, "focus", this.showEvent );
			Event.observe(this.el, "mouseover", this.showEvent );
			Event.observe(this.el, "blur", this.hideEvent );
			Event.observe(this.el, "mouseout", this.hideEvent );
		}
		
		// Removing title from DOM element to avoid showing it
		if (this.options.contentAttribute == 'title') 
		{
			this.content = this.el.title;
			this.el.title = "";
		}
		else 
		{
			this.content = Element.readAttribute(this.el, this.options.contentAttribute);
		}

		// If descendant elements has 'alt' attribute defined, clear it
		/*NO more descendants in Prototype 1.6+
		this.el.descendants().each(function(el){
			if(Element.readAttribute(el, 'alt'))
				el.alt = "";
		});
		*/
		if (this.options.mode == 'init') this.showAfterClick();
	},
	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: 250,	// Default tooltip width
			align: "left", // Default align
			delay: 250, // Default delay before tooltip appears in ms
			mouseFollow: true, // Tooltips follows the mouse moving
			opacity: 1, // Default tooltips opacity
			appearDuration: .25, // Default appear duration in sec
			hideDuration: .25, // Default disappear duration in sec
			xOffset: 7,
			yOffset: 0,
			mode: 'mouseover',
			showImage : false,
			contentAttribute: 'title',
			layout: Tooltip.USE_OFFSETS,
            arrow: false
		};
		Object.extend(this.options, options || {});
	},
	show: function(e) {
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		if(!this.initialized)
			this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
	},
	showAfterClick: function(e)
	{
		this.xCord = Position.page(this.el)[0];
		this.yCord = Position.page(this.el)[1];
		//console.log('show');
		if(!this.initialized)
			this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
	},
	hide: function(e) 
	{
		if(this.initialized) {
			this.appearingFX.cancel();
			if(this.options.mouseFollow || this.options.mode == "mouseover_or_focus")

				Event.stopObserving(this.el, "mousemove", this.updateEvent);
			new Effect.Fade(this.tooltip, {duration: this.options.hideDuration, afterFinish: function() { if (typeof this.tooltip != "undefined") Element.remove(this.tooltip) }.bind(this) });
		}
		this._clearTimeout(this.timeout);
		
		
		this.initialized = false;
		
	},

	update: function(e)
	{
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		this.setup();
	},
	updateNoFollow: function(e)
	{

		this.xCord = Position.cumulativeOffset(this.el)[0];
		this.yCord = Position.cumulativeOffset(this.el)[1];
		this.setup();
	},
	appear: function() 
	{
		if (this.options.layout == "inside") 
		{
		
			var input_position = Position.page(this.el);
			var div_position = Position.page($(this.options.activehelp_el));
			var content_el = Builder.node("p");
			
			this.tooltip = Builder.node("div", { "class": "active_help"}, [
				Builder.node("img", {style: "position: absolute;  left: " + div_position[0] + "px; top: " + input_position[1] + "px", src: "/img/rbo/activehelp_arrow.gif"}),
					content_el,
				]);
			
			content_el.innerHTML = this.content;
			$(this.options.activehelp_el).appendChild(this.tooltip);
			$(this.options.activehelp_el).show();
		}
		else 		
		{

			// Building tooltip container
			this.tooltip = Builder.node("div", {className: "tooltip", style: "display: none; position: relative" }, [
                this.options.arrow ? Builder.node('img', {className:'pointer', src:'/img/rbo/activehelp_arrow.png', 'style': 'top: 10px'}, []) : '',
				Builder.node("div", {className:"xtop"}, [
					Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"})
				]),
				content_el = Builder.node("div", {className: "xboxcontent", style: "background-color:" + this.options.backgroundColor + 
					"; border-color:" + this.options.borderColor + 
					((this.options.textColor != '') ? "; color:" + this.options.textColor : "") + 
					((this.options.textShadowColor != '') ? "; text-shadow:2px 2px 0" + this.options.textShadowColor + ";" : "")}, (this.options.showImage == false) ? unescape(this.content) : [ Builder.node("img", {className : "toolTipImage", src : unescape(this.content) }) ] ), 
				Builder.node("div", {className:"xbottom"}, [
					Builder.node("div", {className:"xb4", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb3", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb2", style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor + ";"}),
					Builder.node("div", {className:"xb1", style:"background-color:" + this.options.borderColor + ";"})
				]),
			]);
			
			if(this.options.showImage == false)
			{
				content_el.innerHTML = this.content;
			}

			document.body.insertBefore(this.tooltip, document.body.childNodes[0]);
		}
		
		this.tooltip = Element.extend(this.tooltip); // IE needs element to be manually extended

		if (this.options.layout != "inside") 
		{
			this.options.width = this.tooltip.getWidth();
			
			if( this.options.showImage == false )
			{
				this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
			}
			else
			{
				img = this.tooltip.getElementsByClassName("toolTipImage")[0];
				img = Element.extend(img);
				
				this.tooltip.style.width = img.readAttribute("width") + 'px';
			}
		}
		this.setup();
		
		if (this.options.mouseFollow && this.options.mode == 'mouseover')
		{
			Event.observe(this.el, "mousemove", this.updateEvent);
		}

		else if(this.options.mode == 'init' || this.options.mode == 'focus' || this.options.mode == 'mouseover_or_focus')
		{
			Event.observe(document.body, "mousemove", this.updateEventNoFollow);
		}	
		this.initialized = true;
		this.appearingFX = new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });
	},
	setup: function(){
		
		// If content width is more then allowed max width, set width to max
		if((this.options.width > this.options.maxWidth) && this.options.layout != "inside") {
			this.options.width = this.options.maxWidth;
			if( this.options.showImage == false )
			{
				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.layout != "inside") {
			this.options.align = "right";
			this.xCord = this.xCord - this.options.width + 20;
		}
		
		if (this.options.layout == Tooltip.ATTACH_RIGHT)
		{
			this.tooltip.style.left = Position.cumulativeOffset(this.el)[0] + this.options.xOffset + this.el.getWidth() + "px";
			this.tooltip.style.top = Position.cumulativeOffset(this.el)[1] - 5 + this.options.yOffset + "px";
		}
		else if (this.options.layout == Tooltip.ATTACH_BOTTOM)
		{
			this.tooltip.style.left = Position.cumulativeOffset(this.el)[0] + this.options.xOffset + "px" ;
			this.tooltip.style.top = Position.cumulativeOffset(this.el)[1] + this.el.getHeight() + "px";
		}
		else
		{
			this.tooltip.style.left = this.xCord + this.options.xOffset + "px";
			this.tooltip.style.top = this.yCord + this.options.yOffset + "px";
		}

	},
	_clearTimeout: function(timer) {
		clearTimeout(timer);
		clearInterval(timer);
		return null;
	}
};