function offsetTop(element) {
	var top = 0;

	while(element.offsetParent) {
		top += element.offsetTop;
		element = element.offsetParent;
	}

	return top;
}

function offsetLeft(element) {
	var left = 0;

	while(element.offsetParent) {
		left += element.offsetLeft;
		element = element.offsetParent;
	}

	return left;
}

function collapseAll() {
	var spans = document.getElementsByTagName("span");
	
	for(var index = 0; index < spans.length; ) {
		var span = spans[index++];
		
		if(span.className == "expanded")
			span.className = "collapsed";
	}
}

document.onmouseup = function() {
	collapseAll();
}

function expand(link) {						
	collapseAll();
	
	window.clearTimeout(link.timeoutId);
	
	link.timeoutId = window.setTimeout(function() {	
		var spans = link.parentNode.getElementsByTagName("span");
											
		for(var index = 0; index < spans.length; ) {
			var span = spans[index++];
										
			span.className = "expanded";

			span.style.left = offsetLeft(link) + "px";
			span.style.top  = offsetTop(link) + 20 + "px";					

			span.focus();
		}
	}, 500);
}

function collapse(link) {
	window.clearTimeout(link.timeoutId);
	
	link.timeoutId = window.setTimeout(function() {
		var spans = link.parentNode.getElementsByTagName("span");
											
		for(var index = 0; index < spans.length; ) {
			var span = spans[index++];
										
			span.className = "collapsed";					
		}
	}, 2000);	
}