// global variables
var isMozilla;
var objDiv = null;
var originalDivHTML = "";
var DivID = "";
var over = false;

function displayFloatingDiv(divId, eId, title, width, height)
{
	DivID = divId;
	
	document.getElementById(eId).style.cursor = 'pointer';
	
    document.getElementById(divId).style.width = width + 'px';
    document.getElementById(divId).style.height = height + 'px';
    document.getElementById(divId).style.left = (document.getElementById(eId).offsetLeft - (width/4)) + 'px';
    document.getElementById(divId).style.top =  document.getElementById(eId).offsetTop - (height) + 'px';
	
	var addHeader;
	
	if (originalDivHTML == "")
	    originalDivHTML = document.getElementById(divId).innerHTML;
	
	addHeader = '<table style="width:' + width + 'px" class="floatingHeader">' +
	            '<tr><td ondblclick="void(0);" onmouseover="over=true;" onmouseout="over=false;" style="cursor:move;height:18px">' + title + '</td>' + 
	            '<td style="width:18px" align="right"><a href="javascript:hiddenFloatingDiv(\'' + divId + '\');void(0);">' + 
	            '[x]</a></td></tr></table>';
	
    // add to your div an header	
	document.getElementById(divId).innerHTML = originalDivHTML;
	
	document.getElementById(divId).className = 'dimming';
	document.getElementById(divId).style.display = "block";
	
	changeOpac(0,divId);
	opacity(divId,0,100,200);
}

function hiddenFloatingDiv(divId) 
{
	divId = DivID;
	opacity(divId,100,0,200);
	setTimeout(hide,200);
}

function hide()
{
	document.getElementById(DivID).innerHTML = originalDivHTML;
	document.getElementById(DivID).style.display = "none";
	
	DivID = "";
}

function opacity(id, opacStart, opacEnd, millisec) {
	//speed for each frame
	var speed = Math.round(millisec / 100);
	var timer = 0;
	
	//determine the direction for the blending, if start and end are the same nothing happens
	if(opacStart > opacEnd) {
		for(i = opacStart; i >= opacEnd; i--) {
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	} else if(opacStart < opacEnd) {
		for(i = opacStart; i <= opacEnd; i++)
		{
			setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
			timer++;
		}
	}
}

//change the opacity for different browsers
function changeOpac(opacity, id)
{
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}