var xmlHttp;
var popUp;

function showPopUp(element, sizeType) {
	setOffsets(element);
	popUp = document.getElementById('popUp');
	startRequest(sizeType);
    
	popUp.style.filter="revealTrans(duration=.15, transition=3)";
	popUp.filters.revealTrans.apply();
	popUp.style.display = "block";
	popUp.style.visibility = "visible";		
	popUp.filters.revealTrans.play();
}

function hidePopUp(popUpID) {
	document.getElementById('popUp').style.visibility = "hidden";		
	document.getElementById('popUp').filters.revealTrans.play();
	document.getElementById('popUp').style.display = "none";		
}
	
function setOffsets(offsetEl) {

	//offset left
	var left = calculateOffsetLeft(offsetEl);    	 	

	//alert(offsetEl);
	//calculate the top offset for the current element
	var top = calculateOffsetTop(offsetEl);

	if (left-272 > 0)
	{
		document.getElementById("popUp").style.left = left - 272 + "px";
	}
	else
	{
		document.getElementById("popUp").style.left = "0px";
	}
	
	if (top-235 > 0)
	{
		document.getElementById("popUp").style.top = top - 235 + "px";
	}
	else
	{
		document.getElementById("popUp").style.top = "0px";
	}
}

function calculateOffsetLeft(field) {
 	return calculateOffset(field, "offsetLeft");
}

function calculateOffsetTop(field) {
	return calculateOffset(field, "offsetTop");
}

function calculateOffset(field, attr) {
	var offset = 0;
	while(field) {
		offset += field[attr];
		field = field.offsetParent;
	}
	return offset;
}



//Create the XMLHttpRequest object
function createXMLHttpRequest() {
	if (window.XMLHttpRequest){
		//ie 7, mozilla, and safarri
		xmlHttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject) {
		//ie 5 and ie 6
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
}

//start an AJAX request
function startRequest(sizeType) {
	//alert("hi");

	createXMLHttpRequest();

	//here we define the function that will be called on state change
	//the state actually changes from 0-4, 4 (ready) being handled in if statement
	xmlHttp.onreadystatechange = handleStateChange;
	
	//GET or post, server resource, true meaning asyncronous (browser keeps functioning)
	xmlHttp.open("GET", "PopUp/" + sizeType + ".html",true);

	//Null in this case, but would be parameters if using post
	xmlHttp.send(null);  //this is when it calls handleStateChange

}

//handle response from server callback
function handleStateChange() {
	/*
	show state change as it is happening
	alert("ready state = " + xmlHttp.readyState);
	*/

	//ready state of 4 means that response is completely back from server
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			//alert("The server replied with: " + xmlHttp.responseText);
			//msg.innerHTML = xmlHttp.responseText;
			document.getElementById('content').innerHTML = xmlHttp.responseText;

		}
		else {
			document.write("Status code: " + xmlHttp.status + "<br />");
			document.write(xmlHttp.responseText);
			document.close;
		}
	}
}

//clear div
function clearText() {
	document.getElementById("msg").innerHTML = "";
}