//+--------------------------------------------------------------------------+
//| tooltops                                                                 |
//| כopyleft [jaime@layer51.com]    									         |
//+--------------------------------------------------------------------------+

var Tooltip = Class.create();
Tooltip.prototype = {
	initialize: function(element) {		
		var options = Object.extend({
			top: 24,
			left: 24,
			icon: '/i/icons/tooltip.gif',
			iconOver: '/i/icons/tooltip_on.gif',
			labelStyle: {color: 'blue'},
			labelStyleHover: {color: 'red'},
			zIndex: 999
		}, arguments[1] || {});
		
		this.mask			= null; 
		this.timer			= null; 
		this.options		= options;
		this.element		= $(element);
		this.comment		= this.options.comment;
		this.options.useIcon = this.element.className.indexOf('icon') != -1;
		var dimensions 		= Element.getDimensions(this.comment);
		this.dimSize		= [dimensions.width, dimensions.height];
		this.eventMouseOver = this.show.bindAsEventListener(this);
		this.eventMouseOut  = this.hide.bindAsEventListener(this);
		this.registerEvents();
		this.draw();
	},
	
	draw: function(){ // prepare the trigger
		
		Element.makePositioned(this.comment);
		Element.hide(this.comment);
		Element.setStyle(this.comment, {position: "absolute",MozBorderRadius: "8px 8px 8px 8px"});
		this.removeAlt(this.element);
		this.removeAlt(this.element.getElementsByTagName('IMG')[0]);
		this.cloak();
	},

	removeAlt: function(element) {
		try { element.removeAttribute('alt'); }catch (e) {}
		try { element.removeAttribute('title'); }catch (e) {}
	},
	
	show: function(event) { // show the tooltip
		var pointer	= [Event.pointerX(event), Event.pointerY(event)];
		var options = this.options;
		var dimSize	= this.dimSize;
		var winSize	= this.getWindowSize();
		Position.prepare();
		pointer[0] += options.left;
		pointer[1] += options.top;
		
		// messy: do not take window scroll dimensions into account when the add time window is active.
		if ( this.comment.id == 'ttAddTime' ) {
			if (!event) var event = window.event;
			if (event.pageY) 	{
				pointer[0] -= event.pageX;
				pointer[1] -= event.pageY;
			} else if (event.clientY) 	{
				pointer[0] -= event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
				pointer[1] -= event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
			}
			pointer[0] += 190;
			pointer[1] += 70;
		}

		//side scroll
		if ( winSize[0] < (pointer[0] + options.left + dimSize[0] - Position.deltaX) ) {
			pointer[0] -= Math.abs(winSize[0] - (pointer[0] + options.left + dimSize[0]));
		}
		//top scroll
		if ( winSize[1] < (pointer[1] + options.top + dimSize[1]) - Position.deltaY) {
			pointer[1] -= dimSize[1] + options.top + 20;
		}
		//finalize
		pointer[0] = (pointer[0] > 0 ? pointer[0] : Event.pointerX(event) + options.left);
		pointer[1] = (pointer[1] > 0 ? pointer[1] : Event.pointerY(event) + options.top);

		//position
		Element.setStyle(this.comment, {left: pointer[0] + 'px',top: pointer[1] + 'px',zIndex: options.zIndex});
		if ( this.mask != null ) {
			Element.setStyle(this.mask, {left: pointer[0] + 'px',top: pointer[1] + 'px', zIndex: (options.zIndex - 1)})
		}
		
		//appear
		this.comment.style.display = 'block';
		if ( options.useIcon ) {
			var i = this.element.getElementsByTagName('IMG')[0];
			if (i != null) {
				i.src = options.iconOver;
			}
		} else {
			Element.setStyle(this.element, this.options.labelStyleHover);
		}
		if ( this.mask != null ) {	
			this.mask.style.display = 'block';	
		}
	},
	
	hide: function(event) {
		Element.hide(this.comment);
		if ( this.mask != null ) {
			Element.hide(this.mask);		
		}
		if ( this.options.useIcon ) {
			var i = this.element.getElementsByTagName('IMG')[0];
			if ( i != null ) {
				i.src = this.options.icon;
			}
		} else {
			Element.setStyle(this.element, this.options.labelStyle);
		}
	},
	
	getWindowSize: function(w) {
        w = w ? w : window;
        var width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
        var height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
        return [width, height];
	},
	
	cloak: function(){
		var ua = navigator.userAgent; // WCH: aplus.co.yu
		if ( (/msie 5\.5/gi.test(ua) || /msie 6\.0/gi.test(ua)) && !/opera/gi.test(ua) ) {
			var style = "position:absolute;left:0;top:0;display:none;width:0;height:0;filter:progid:DXImageTransform.Microsoft.alpha(style=0,opacity=0)";
			var id = this.comment.id + "-mask";
			document.getElementsByTagName('body')[0].insertAdjacentHTML('afterBegin', '<iframe id="' + id + '" scroll="no" frameborder="0" src="javascript:false;" style="'+style+'"></iframe>');
			this.mask = $(id);
			Element.setStyle(this.mask,{width: (this.dimSize[0]+2) + 'px',height: this.dimSize[1] + 'px'});
			Element.makePositioned(this.mask);
		}	
	},
	
	registerEvents: function() {
		Event.observe(this.element, "mouseover", this.eventMouseOver);
		Event.observe(this.element, "mouseout", this.eventMouseOut);
	} 
}

function tooltipPrepare(){
	$$(".tooltip").each( function(element) { 
		var relation = element.getAttribute('rel') || element.attributes['rel'].value;
		if ( $(relation) != null ) {
			new Tooltip(element, {comment: $(relation)});
		}
	});
}

//loop all elements with class name tooltip and assign
Event.observe(window, "load", tooltipPrepare);