// reposition absolute span in this element
function showBody(element)
{
	var offsetTrail = element;
	var offsetLeft = 0;
	var offsetTop = 0;
	while (offsetTrail)
	{
		offsetLeft += offsetTrail.offsetLeft;
		offsetTop += offsetTrail.offsetTop;
		offsetTrail = offsetTrail.offsetParent;
	}
	/* var visibleTop = 0;
	var visibleBottom = 0;
	if (window.innerHeight)
	{
		visibleTop = window.pageYOffset;
		visibleBottom = window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.scrollTop)
	{
		visibleTop = document.documentElement.scrollTop;
	}
	else if (document.body)
	{
		visibleTop = document.body.scrollTop;
		visibleBottom = document.body.offsetHeight;
	} */
	// var spans = element.getElementsByTagName('div');
	// for (var i = 0; i < spans.length; i++)
	var span = element.nextSibling;
	while (span != null)
	{
		if (span.className == 'ibody')
		{
			span.className = 'ibodyover';
			span.style.top = offsetTop + element.offsetHeight + 'px';
			// spans[i].style.top = offsetTop + 'px';
			// spans[i].style.top = getElementTop(document.getElementById('panel1head')) - 2 + 'px';

			// var o = offsetLeft + element.offsetWidth + 3;
			/* if (o + spans[i].offsetWidth + 22 > document.body.offsetWidth) {
				o = offsetLeft;
				spans[i].style.top = offsetTop + element.offsetHeight + 'px';
			} */
			span.style.left = offsetLeft + 'px';
			//spans[i].style.height = element.offsetHeight - 50  + 'px';
			//spans[i].style.height = '25px';
			span.onmouseover = function() {
			    var id = 'head' + this.id.substring(4);
			    if (timeouts[id]) clearTimeout(timeouts[id]);
			    return true;
			};
			span.onmouseout = function() {
			    var id = 'head' + this.id.substring(4);
			    timeouts[id] = setTimeout('hideHead("'+ id +'")', 50);
			    return true;
			};
			break;
		}
		else if (span.className == 'ihead') break;
		span = span.nextSibling;
	}
}

function getElementLeft(element) {
    var offsetTrail = element;
    var offsetLeft = 0;
    while (offsetTrail)
    {
	    offsetLeft += offsetTrail.offsetLeft;
	    offsetTrail = offsetTrail.offsetParent;
    }
    return offsetLeft;
}

function getElementTop(element) {
    var offsetTrail = element;
    var offsetTop = 0;
    while (offsetTrail)
    {
	    offsetTop += offsetTrail.offsetTop;
	    offsetTrail = offsetTrail.offsetParent;
    }
    return offsetTop;
}

function hideBody(element)
{
	var span = element.nextSibling;
	while (span != null)
	{
		if (span.className == 'ibodyover')
		{
			span.onmouseout = null;
			span.className = 'ibody';
			break;
		}
		else if (span.className == 'ihead') break;
		span = span.nextSibling;
	}
}

function hideHead(id)
{
    // alert(id);
    var e = document.getElementById(id);
    if (e != null) {
        e.className = 'ihead';
        hideBody(e);
    }
}


var timeouts = new Array;
function setup()
{
	var arrSpans = document.getElementsByTagName('div');
	for (var i = 0; i < arrSpans.length; ++i)
	{
		var eltSpan = arrSpans[i];
		if (eltSpan.className == 'ihead')
		{
			eltSpan.onmouseover = function()
			{
			    if (timeouts[this.id]) clearTimeout(timeouts[this.id]);
				this.className = 'iheadover';
				showBody(this);
				return true;
			};
			eltSpan.onmouseout = function()
			{
			    timeouts[this.id] = setTimeout('hideHead("'+ this.id +'")', 50);
				//this.className = 'ihead';
				//hideBody(this);
				return true;
			};
		}
	}
}