var xOffset = -40;
var yOffset = -20;
var popupWidth = 200;

function Position(x, y) {
	this.x = x;
	this.y = y;
}

function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		curleft = obj.offsetLeft
		curtop = obj.offsetTop
		while (obj = obj.offsetParent) {
			curleft += obj.offsetLeft
			curtop += obj.offsetTop
		}
	}
	return new Position(curleft,curtop);
}

function popupWindow(divId, targetId) {
	var popupDiv = document.getElementById(divId);
	var positionDiv = document.getElementById(targetId);
	popupDiv.style.display = "inline";
	
	pos = findPos(positionDiv);
	
	//don't let the popup menu flow over the edge of the screen
	if ( (pos.x + popupDiv.offsetWidth) > screen.width ) {popupDiv.style.left = (screen.width - popupDiv.offsetWidth) + "px";}
	else if ( (pos.x + xOffset) < 0 ) {popupDiv.style.left = "0px";} 
	else {popupDiv.style.left = (pos.x + xOffset) + "px";}
	popupDiv.style.top = (pos.y + yOffset) + "px";
}

function hideWindow(divId) {
	var popupDiv = document.getElementById(divId);
	popupDiv.style.display = "none";
}

function toggleDropdownMenu(divId) {
	var dropdownDiv = document.getElementById(divId);
	if (dropdownDiv.style.display == "none") dropdownDiv.style.display = "inline";
	else dropdownDiv.style.display = "none";
}

function changeElement(elementId) {
	theElem = document.getElementById(elementId);
	
	if (theElem.className == "innerPop") {
		var popupTitleNode;
		var popupWindowNodes = new Array();
		
		for(nodeIndex in theElem.childNodes) {
			if (theElem.childNodes[nodeIndex].className == "innerPopTitle") {
				//if the innerPopup title node element is found, seperate it from the other nodes
				popupTitleNode = theElem.childNodes[nodeIndex]
				
				for(popupNodeIndex in theElem.childNodes) {
					if (popupNodeIndex != nodeIndex) {
						popupWindowNodes[popupWindowNodes.length] = theElem.childNodes[popupNodeIndex];
					}
				}
			}
		}
		
		//move the non-title elements to a hidden floating div we'll create now
		var popupDiv = document.createElement('div');
		popupDiv.style.width = popupWidth + "px";
		var theBody = document.getElementsByTagName('body')[0];
		theBody.appendChild(popupDiv);
		
		//create a close floating popup button
		var closePopup = document.createElement('div');
		closePopup.style.cssFloat = "right"; //mozilla based browsers
		closePopup.style.styleFloat = "right"; //ie
		closePopup.style.cursor = "pointer";
		closePopup.innerHTML = "x";
		closePopup.onclick = new Function("hideWindow('popupDiv" + index + "');");
		popupDiv.appendChild(closePopup);
		
		for(addIndex in popupWindowNodes) {
			if (typeof(popupWindowNodes[addIndex]) == "object") {
				popupDiv.appendChild(popupWindowNodes[addIndex]);
			}
		}
		
		popupDiv.className = "innerPopupWindow";
		popupDiv.id = "popupDiv" + index;
		popupDiv.style.display = "none";
		popupDiv.style.zindex = parseInt(theElem.style.zindex) + 1;
		
		theElem.id = "positionDiv" + index;
		theElem.onclick = new Function("popupWindow('popupDiv" + index + "', 'positionDiv" + index +"');");
	}
	else if (theElem.className == "dropdown") {
		var dropdownTitleNode;
		var dropdownWindowNodes = new Array();
		
		for(nodeIndex in theElem.childNodes) {
			if (theElem.childNodes[nodeIndex].className == "dropdownTitle") {
				//if the dropdown title node element is found, seperate it from the other nodes
				dropdownTitleNode = theElem.childNodes[nodeIndex]
				
				for(dropdownNodeIndex in theElem.childNodes) {
					if (dropdownNodeIndex != nodeIndex) {
						dropdownWindowNodes[dropdownWindowNodes.length] = theElem.childNodes[dropdownNodeIndex];
					}
				}
			}
		}
		
		//move the non-title elements to a new div div we'll create now
		var dropdownDiv = document.createElement('div');
		theElem.appendChild(dropdownDiv);
		dropdownDiv.style.display = "none";
		
		for(addIndex in dropdownWindowNodes) {
			if (typeof(dropdownWindowNodes[addIndex]) == "object") {
				dropdownDiv.appendChild(dropdownWindowNodes[addIndex]);
			}
		}
		
		dropdownDiv.className = "innerDropdown";
		dropdownDiv.id = "innerDropdownDiv" + index;
	}
}
		

function changeDivs() {
	var divs = document.getElementsByTagName('div');
	
	for (var index = 0; index < divs.length; index++) {
		//change all divs with the class name innerPop
		if (divs[index].className == "innerPop") {
			var popupTitleNode;
			var popupWindowNodes = new Array();
			
			for(nodeIndex in divs[index].childNodes) {
				if (divs[index].childNodes[nodeIndex].className == "innerPopTitle") {
					//if the innerPopup title node element is found, seperate it from the other nodes
					popupTitleNode = divs[index].childNodes[nodeIndex]
					
					for(popupNodeIndex in divs[index].childNodes) {
						if (popupNodeIndex != nodeIndex) {
							popupWindowNodes[popupWindowNodes.length] = divs[index].childNodes[popupNodeIndex];
						}
					}
				}
			}
			
			//move the non-title elements to a hidden floating div we'll create now
			var popupDiv = document.createElement('div');
			popupDiv.style.width = popupWidth + "px";
			var theBody = document.getElementsByTagName('body')[0];
			theBody.appendChild(popupDiv);
			
			//create a close floating popup button
			var closePopup = document.createElement('div');
			closePopup.style.cssFloat = "right"; //mozilla based browsers
			closePopup.style.styleFloat = "right"; //ie
			closePopup.style.cursor = "pointer";
			closePopup.innerHTML = "x";
			closePopup.onclick = new Function("hideWindow('popupDiv" + index + "');");
			popupDiv.appendChild(closePopup);
			
			for(addIndex in popupWindowNodes) {
				if (typeof(popupWindowNodes[addIndex]) == "object") {
					popupDiv.appendChild(popupWindowNodes[addIndex]);
				}
			}
			
			popupDiv.className = "innerPopupWindow";
			popupDiv.id = "popupDiv" + index;
			popupDiv.style.display = "none";
			popupDiv.style.zindex = parseInt(divs[index].style.zindex) + 1;
			
			divs[index].id = "positionDiv" + index;
			divs[index].onclick = new Function("popupWindow('popupDiv" + index + "', 'positionDiv" + index +"');");
		}
		//change all divs with the classname "dropdown"
		else if (divs[index].className == "dropdown") {
			var dropdownTitleNode;
			var dropdownWindowNodes = new Array();
			
			for(nodeIndex in divs[index].childNodes) {
				if (divs[index].childNodes[nodeIndex].className == "dropdownTitle") {
					//if the dropdown title node element is found, seperate it from the other nodes
					dropdownTitleNode = divs[index].childNodes[nodeIndex]
					
					for(dropdownNodeIndex in divs[index].childNodes) {
						if (dropdownNodeIndex != nodeIndex) {
							dropdownWindowNodes[dropdownWindowNodes.length] = divs[index].childNodes[dropdownNodeIndex];
						}
					}
				}
			}
			
			//move the non-title elements to a new div div we'll create now
			var dropdownDiv = document.createElement('div');
			divs[index].appendChild(dropdownDiv);
			dropdownDiv.style.display = "none";
			
			for(addIndex in dropdownWindowNodes) {
				if (typeof(dropdownWindowNodes[addIndex]) == "object") {
					dropdownDiv.appendChild(dropdownWindowNodes[addIndex]);
				}
			}
			
			dropdownDiv.className = "innerDropdown";
			dropdownDiv.id = "innerDropdownDiv" + index;
			
			divs[index].onclick = new Function("toggleDropdownMenu('innerDropdownDiv" + index + "');");
		}
	}
}

addEvent(window, "load", changeDivs, false);