var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
	xmlHttp = new XMLHttpRequest();
}
}

function startRequest(url) 
{
	createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange;
	xmlHttp.open("post", url, true);
	xmlHttp.send(null);
}

function GetPiecesInfo(piecesID)
{
    createXMLHttpRequest();
	xmlHttp.onreadystatechange = handleStateChange_GetPiecesInfo;
	xmlHttp.open("post", "/ajax/Pieces.aspx", true);
	xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xmlHttp.send("id=" + piecesID);
}

function handleStateChange_GetPiecesInfo()
{
	var pieces = $("#PiecesInfo")[0];
	if(xmlHttp.readyState == 4) 
	{
		if(xmlHttp.status == 200) 
		{
			$("#Loading").css("display", "none");
			var result = xmlHttp.responseText;
			pieces.innerHTML = result;
			
			if(pieces.offsetTop > newtop)
			{
			    pieces.style.top = newtop + "px";
			}
			pieces.style.left = newleft + 20 + "px"; 
			pieces.style.display = "block";
			
			var ifrm=document.createElement("iframe");
			ifrm.style.width=(document.getElementById("PiecesInfo").clientWidth-5).toString()+"px";
			ifrm.style.height=(document.getElementById("PiecesInfo").clientHeight-5).toString()+"px";
			ifrm.style.position="absolute";
			ifrm.style.left="3px";
			ifrm.style.top="3px";
			ifrm.frameBorder =0;
			ifrm.style.zIndex="-1";
			var parent_Node=document.getElementById("PiecesInfo");
			parent_Node.appendChild(ifrm);
		}
	}
	else
	{
		$("#Loading").css("display", "block");
		$("#Loading").html("<DIV class=\"tooltip\" style=\"FLOAT: left; PADDING-TOP: 1px; width:70px;\"><TABLE><TBODY><TR><TD>Loading</TD><TH style=\"BACKGROUND-POSITION: right top\"></TH></TR><TR><TH style=\"BACKGROUND-POSITION: left bottom\"></TH><TH style=\"BACKGROUND-POSITION: right bottom\"></TH></TR></TBODY></TABLE></DIV>");
		//pieces.style.top = top + "px";
	}
}

var PiecesLeft=0;
var PiecesTop=0;
var PiecesHeight=0;
var newtop = 0;
var newleft = 0;
var newclientY = 0;
function ShowPiecesInfo(pieces, ref)
{
	var width = ref.clientWidth;
	var MeTop = ref.offsetTop; 
	var MeLeft = ref.offsetLeft;
	while (ref = ref.offsetParent)
	{
		MeTop += ref.offsetTop;
		MeLeft += ref.offsetLeft;
	}
	newtop = Number(PiecesTop) + Number(MeTop) - Number(PiecesHeight);
	newleft = Number(PiecesLeft) + Number(MeLeft) + width; 
	$("#Loading")[0].style.top = newtop + "px";
	$("#Loading")[0].style.left = newleft + 20 + "px"; 
	GetPiecesInfo(pieces);
}

function HidPiecesInfo()
{
    $("#PiecesInfo").css("display", "none");
}

function ShowMorePieces(pieceslist, ref)
{
	var width = ref.clientWidth;
	var MeTop = ref.offsetTop; 
	var MeLeft = ref.offsetLeft;
	while (ref = ref.offsetParent)
	{
		MeTop += ref.offsetTop;
		MeLeft += ref.offsetLeft;
	}
	var top = Number(PiecesTop) + Number(MeTop) - Number(PiecesHeight);
	var left = Number(PiecesLeft) + Number(MeLeft) + width; 
	$("#PiecesList").html("<DIV class=\"tooltip\" style=\"FLOAT: left; PADDING-TOP: 1px; width:180px;\"><TABLE style=\"width:180px;\"><TBODY><TR><TD><div align=\"right\"><a onclick=\"ClosePiecesList();\" href=\"javascript:void(0);\">ClOSE</a></div>" + unescape(pieceslist) + "</TD><TH style=\"BACKGROUND-POSITION: right top\"></TH></TR><TR><TH style=\"BACKGROUND-POSITION: left bottom\"></TH><TH style=\"BACKGROUND-POSITION: right bottom\"></TH></TR></TBODY></TABLE></DIV>");
	var pieceslist = $("#PiecesList")[0];
	pieceslist.style.left = left + 20 + "px"; 
	if(pieceslist.offsetTop > top)
	{
		pieceslist.style.top = top + "px";
	}
	pieceslist.style.display = "block";
}

function ClosePiecesList()
{
	$("#PiecesList").css("display", "none");
}

$(document).click(function(){HidPiecesInfo();});