// Tooltips Class
// A superclass to work with simple CSS selectors
var Tooltips = Class.create();
Tooltips.prototype = {
	initialize: function(selector, options) {
		var tooltips = $$(selector);
		tooltips.each( function(tooltip) {
			new Tooltip(tooltip, options);
		});
	}
};
// Tooltip Class
var Tooltip = Class.create();
Tooltip.prototype = {
	initialize: function(el, options) {
		this.el = $(el);
		this.initialized = false;
		this.maintain = false;
		this.setOptions(options);
		
		// Event handlers
		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 );
		
		// Content for Tooltip is either given through 
		// 'content' option or 'title' attribute of the trigger element. If 'content' is present, then 'title' attribute is ignored.
		// 'content' is an element or the id of an element from which the innerHTML is taken as content of the tooltip
		if (options && options['content']) {
			this.content = $(options['content']).innerHTML;
		} else {
			this.content = this.el.title.stripScripts().strip();
		}

		// 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: '#EAE7E2', // Default background color
			borderColor: '#FFFFFF', // Default border color
			textColor: '', // Default text color (use CSS value)
			textShadowColor: '', // Default text shadow color (use CSS value)
			maxWidth: $('magnify_contentarea') ? $('magnify_contentarea').getWidth()/2 : $(document.body).getWidth()/2,	// Default tooltip width
			align: "left", // Default align
			delay: 100, // Default delay before tooltip appears in ms
			mouseFollow: true, // Tooltips follows the mouse moving
			opacity: .75, // Default tooltips opacity
			appearDuration: .25, // Default appear duration in sec
			hideDuration: .25 // Default disappear duration in sec
		};
		Object.extend(this.options, options || {});
	},
	show: function(e) {
		this.eventElement = this.el
		var coords = Element.cumulativeOffset(this.eventElement);
		this.xCord = coords[0];
		this.yCord = coords[1];
		if ( !this.initialized )
			this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
	},
	hide: function(e) {
		//if ( this.maintain ) { return; } 
		this._clearTimeout(this.timeout);
		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) });
		}
		
		this.initialized = false;
	},
	update: function(e){
		this.xCord = Event.pointerX(e);
		this.yCord = Event.pointerY(e);
		this.setup();
	},
	appear: function() {
		// Building tooltip container
		this.tooltip = new Element("div", { style: "display: none" });		
		this.tooltip.className = "magnify_tooltip";
		
		var arrow = new Element("span", { id: "magnify_tooltip_xarrow" });
		arrow.className = "magnify_tooltip_xarrow inline-float-middle";
		
		var container = new Element("span", { id: "magnify_tooltip_xcontainer" });
		container.className = "magnify_tooltip_xcontainer inline-float-middle"; 
		
		var content = new Element("div", { id: "magnify_tooltip_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 + ";" : "") }).update(this.content);
			
		content.className = "magnify_tooltip_xboxcontent";
			
		// Building and injecting tooltip into DOM
		container.insert(content);
		this.tooltip.insert(arrow).insert(container);
		$(document.body).insert({'top':this.tooltip});
		
		Element.extend(this.tooltip); // IE needs element to be manually extended
		this.options.width = this.tooltip.getWidth() + 1; // Quick fix for Firefox 3
		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);
			
		var tooltip = this;
		Event.observe(this.tooltip, "mouseover", function() { tooltip.maintain = true; } );
		Event.observe(this.tooltip, "mouseout", function() { tooltip.maintain = false; } );	
			
		this.initialized = true;
		this.appearingFX = new Effect.Appear(this.tooltip, {duration: this.options.appearDuration, to: this.options.opacity });
	},
	setup: function(){
		
		var arrow = this.tooltip.down('.magnify_tooltip_xarrow');
		var container = $('magnify_tooltip_xcontainer');
		var content = $('magnify_tooltip_xboxcontent');
		var paddingLeft = parseInt(container.getStyle("paddingLeft")) || 0;
		var paddingTop = parseInt(container.getStyle("paddingTop")) || 0;
		var paddingRight = parseInt(container.getStyle("paddingRight")) || 0;
		
		var arrowWidth = parseInt(arrow.getStyle("width"));
		var arrowLeftWidth = parseInt(arrow.getStyle("borderLeftWidth")) || 0;
		var arrowRightWidth = parseInt(arrow.getStyle("borderRightWidth")) || 0;
		
		var borderRightWidth = parseInt(content.getStyle("borderRightWidth")) || 0;
		var borderLeftWidth = parseInt(content.getStyle("borderLeftWidth")) || 0;

		this.options.width = this.options.maxWidth;	
		this.tooltip.style.width = this.options.width + 20 + "px"; // IE 7 needs extra room for some reason
		container.style.width = this.options.width - (arrowLeftWidth + arrowRightWidth) - (arrowWidth*2) + "px";
		
		var targetHeight = Element.getHeight(this.eventElement)+2;
		var targetWidth = Element.getWidth(this.eventElement)+2;
		var tooltipWidth = parseInt(this.tooltip.style.width);
		var tooltipHeight = Element.getHeight(this.tooltip);
		var containerWidth = parseInt(container.style.width);
		var arrowHeight = Element.getHeight(arrow);

		this.yCord = this.yCord - ((tooltipHeight - targetHeight)/2);		

		//alert("container width: " + containerWidth + " arrow width: " + arrowWidth + " border right width: " + borderRightWidth + " arrow right width: " + arrowRightWidth );
			
		arrow.style.position = "relative";
		container.style.position = "relative";
		
		var docHalfway, coordTrans;
		if ( $('magnify_page') ) {
			docHalfway = ( Element.getWidth($('magnify_page')) / 2 );
			coordTrans = ( Element.getWidth($(document.body)) - Element.getWidth($('magnify_page')) ) / 2;
		
		} else {
			docHalfway = ( Element.getWidth($(document.body)) / 2 );
			coordTrans = 0;
		
		}
		
		// Tooltip trigger is on right or left of page container
		if ( this.xCord - coordTrans >= docHalfway ) {

		// Tooltip doesn't fit the current document dimensions
		//if (this.xCord + targetWidth + borderLeftWidth + arrowLeftWidth + arrowWidth + this.options.width >= Element.getWidth($(document.body))) {
			this.xCord = this.xCord - tooltipWidth + arrowRightWidth + borderRightWidth + arrowWidth;
			this.tooltip.style.textAlign = "right";
			this.tooltip.addClassName("magnify_tooltip_right");
			
			arrow.style.left =  containerWidth - arrowWidth - borderRightWidth + "px";

			container.style.right = (arrowRightWidth + arrowLeftWidth) + (arrowWidth*2) + "px";
		} else {
			this.xCord = this.xCord + targetWidth - borderLeftWidth - arrowRightWidth;
			arrow.style.right = (-1*borderLeftWidth) + "px";
		}
		
		//alert("tooltip total width: " + tooltipWidth + " arrow right position: " + arrow.style.right + " arrow left position: " + arrow.style.left);
		
		this.tooltip.style.left = this.xCord + "px";
		this.tooltip.style.top = this.yCord + "px";
	},
	_clearTimeout: function(timer) {
		clearTimeout(timer);
		clearInterval(timer);
		return null;
	}
};