var Tooltips = Class.create();
Tooltips.prototype = {

	obj: null,

	initialize: function() {
		this.obj = {
			element: document.createElement('div'),
			show_delay: 200,
			hide_delay: 1200,
			init_id: 0, // last requested - tooltip_obj.num
			show_id: 0, // last shown - tooltip_num
			// these must be set to fit css. cannot use css only because Element.getDimensions will return 0 untill css is applied.
			a_height: 23, // height of top|bottom div with arrow
			b_height: 6,  // head of top|bottom div with rounding only
			c_height: 158,
			key: null,
			type: null,
			is_over: false,
			top: null,
			body: null,
			bottom: null,
			triggers: {
			}
		};
		this.obj.element.id = 'tooltip';
		this.obj.element.style.position = 'absolute';
		this.obj.element.style.display = 'none';
		this.obj.element.onmouseover = function(e){ tooltips.mouseover(e); }
		this.obj.element.onmouseout = function(e){ tooltips.mouseout(e); }
		document.body.appendChild(this.obj.element);
		var top = document.createElement('div');
		var body = document.createElement('div');
		var btm = document.createElement('div');
		top.className = 'tt_top';
		body.className = 'tt_body';
		btm.className = 'tt_bottom';
		top.id = 'tt_top';
		body.id = 'tt_body';
		btm.id = 'tt_bottom';
		this.obj.element.appendChild(top);
		this.obj.element.appendChild(body);
		this.obj.element.appendChild(btm);
		this.obj.body = body;
		this.obj.top = top;
		this.obj.bottom = btm;
	},

	trig: function(is_over, trigger, key, type) {
		if ( is_over ) {
			this.obj.init_id++;
//			this.obj.trigger = trigger;
			this.obj.is_over = true;
			this.obj.key = key;
			this.obj.type = type;
			this.obj.triggers[ this.obj.init_id ] = {
				trigger: trigger,
				title: trigger.title
			};
			trigger.title = '';
			var f = function(){ tooltips.show(); }
			setTimeout(f, this.obj.show_delay);
		} else {
			this.obj.is_over = false;
//			this.obj.is_a_over = false;
			var f = function(){ tooltips.hide(); }
			setTimeout(f, this.obj.hide_delay);	
		}
	},

	mouseover: function(e) { // is over the tooltip bubble itself
		this.obj.is_over = true; 
	},

	mouseout: function(e) {
		this.obj.is_over = false;
		var f = function(){ tooltips.hide(); }
		setTimeout(f, this.obj.hide_delay);	
	},

	hide: function() {
		var trigger = this.obj.triggers[ this.obj.show_id ];
		trigger.trigger.title = trigger.title;
		if ( this.obj.is_over )
			return;
		this.obj.element.style.display = 'none';
		this.obj.body.innerHTML = '';
	},

	show: function() {
		this.obj.show_id++;
		if ( this.obj.init_id == this.obj.show_id && this.obj.is_over ) {
			this._show();
		}
	},
	
	_show: function() {
//		this.obj.element.style.display = 'none';
		this.obj.body.innerHTML = '';
		var url;
		if ( this.obj.type == 'help' )
			url = '/page/index/Help' + this.key2wiki(this.obj.key) + "?out=none";
		if ( this.obj.type == 'subscription' )
			url = '/subscription?out=none&id=' + this.obj.key;
		if ( ! url )
			return;
		var opt = {
			onComplete: function(res){ tooltips._show_r(res); }
		};
		new Ajax.Updater( this.obj.body, url, opt );
	},

	_show_r: function(res) {
		if ( ! this.obj.is_over )
			return;

			
		var ydiff;
		var xdiff;
		var xclass;
		var yclass;

// TODO: Links in tooltips for IE
if ( BrowserDetect.browser() != 'explorer' ) {
		if ( this.obj.type == 'help' ) {
			var d = document.createElement('div');
			d.innerHTML = '<a class="toggle" href="javascript:ctl.toggle_tooltips()">Click here to disable these tooltips</a>';
			this.obj.body.appendChild(d);
		}		
}
		var trigger = this.obj.triggers[ this.obj.show_id ].trigger;
		var dim = Element.getDimensions(trigger);
		var posx = get_x_pos(trigger) + (dim.width/2);
		var posy = get_y_pos(trigger) + (dim.height/2);
		var doc = get_doc_dim();

		if ( posx > (doc.width/2) ) {
			xclass = 'right';
			xdiff = 1 - (dim.width/2) - 340;
		} else {
			xclass = 'left';
			xdiff = (dim.width/2);
		}
		this.obj.element.style.display = 'block';

		if ( posy > (doc.height/2) ) {
			this.obj.top.style.height = this.obj.b_height + 'px';
			this.obj.bottom.style.height = this.obj.a_height + 'px';
			if ( this.obj.type == 'subscription' )
				this.obj.body.style.height = this.obj.c_height + 'px'; // hack
			var dim2 = Element.getDimensions(this.obj.element);
			this._ost();
			yclass = 'up';
			ydiff = 0 - dim2.height - 2;
		} else {
			this.obj.top.style.height = this.obj.a_height + 'px';
			this.obj.bottom.style.height = this.obj.b_height + 'px';
			yclass = 'down';
			ydiff = 3;
		}
//alert(yclass+' : '+posx+'x'+posy+' vs '+doc.width+'x'+doc.height);
		this.obj.element.style.top=(posy+ydiff)+"px";
		this.obj.element.style.left=(posx+xdiff)+"px";
		this.obj.element.className = 'tt_' + yclass + '_' + xclass;
	},

	_ost: function() {
		var t = Element.getDimensions($('tt_top'));
		var m = Element.getDimensions($('tt_body'));
		var b = Element.getDimensions($('tt_bottom'));
	},
	
	key2wiki: function(key, type) {
		var x = key.split(/\.|_/);
		var str = '';
		for (var i = 0; i < x.length; i++) {
			var z = x[i].split('');
			for (var j = 0; j < z.length; j++) {
				if ( j == 0 )
					str += z[j].toUpperCase();
				else
					str += z[j];
			}
		}
		if (type)
			str = type + str;
		return str;
	}
		
};

var tooltips;
function tooltip(a, b, c, d) {
	if ( ! tooltips )
		tooltips = new Tooltips();
	tooltips.trig(a,b,c,d);
}