// Initialize the Bubbles
var Bubbles = Class.create();
Bubbles.prototype = {
	initialize: function() {
		this.initializeComponents(document);
		if (window.riotEditCallbacks) {
			addRiotEditCallback(this.initializeComponents.bind(this));
		}
	},
	
	initializeComponents: function(el) {
		if (!el) el = document;
		el.getElementsByClassName('tooltip').each(this.initializeComponent.bind(this));
	},

	initializeComponent: function(el) {
		var bubble = document.createElement('div');
		bubble.className = 'referenceBubble';
		bubble.innerHTML = el.innerHTML;
		bubble.style.position = 'absolute';
		bubble.style.visibility = 'hidden';
		//document.body.appendChild(bubble);
		el = el.parentNode;
		el.appendChild(bubble);
		el.bubble = bubble;
		el.onmouseover = function(el) {
			this.onmousemove(el);
			var b = this.bubble;
			this.timeout = setTimeout(function() {b.style.visibility = 'visible'}, 250);
		};
		el.onmouseout = function(el) {
			if (this.timeout) clearTimeout(this.timeout);
			this.bubble.style.visibility = 'hidden';
		};
		el.onmousemove = function(el) {
			var posx = 0, posy = 0;
			if (!el) el = window.event;
			if (el.pageX || el.pageY) {
			    posx = el.pageX; posy = el.pageY;
			}
			else if (el.clientX || el.clientY) {
			    if(document.documentElement.scrollTop) {
			        posx = el.clientX + document.documentElement.scrollLeft;
			        posy = el.clientY + document.documentElement.scrollTop;
			    }
			    else {
			        posx = el.clientX + document.body.scrollLeft;
			        posy = el.clientY + document.body.scrollTop;
			    }
			}
			this.bubble.style.top = posy - this.bubble.offsetHeight + "px";
			this.bubble.style.left = posx + "px";
		}
	}

}
Bubbles.prototype.initialize();