// if no title then automatically add this title to close the box
function addMainBoxTitle(title) {
	content = document.getElementById('mainpage-box').innerHTML;
	title = (title) ? title : ''; // set to blank if undefined
	if (title != 'none') {
		document.getElementById('mainpage-box').innerHTML = '<div class="mainpage-title"><b><font class="left">&nbsp;&nbsp;'+title+'</font><a class="mainpage-title-button" onclick="changeNavButton(\'welcome\'); closeMainBox();">&nbsp;close&nbsp;</a></b></div>'+content;
	}
	document.getElementById('mainpage-box').style.visibility = 'visible';
}

// open the main popup box
function loadMainBox(url, o, title, pos) {
	backgroundBox();
	if (o) {
		$('#mainpage-box').load(url, o, function() {addMainBoxTitle(title);});
	} else {
		$('#mainpage-box').load(url, function() {addMainBoxTitle(title);});
	}
	setBoxPosition(pos);
}
// set the positioning for the box
function setBoxPosition(positions) {
	if (positions) {	
		
		evt = positions.evt;
		elX=0;
		elY=0;
		
		if (positions.positionX) {
			if (positions.positionX == 'center') {
				elX = (document.getElementById('mainpage-box').offsetWidth/2);
			}
			if (positions.positionX == 'left') {
				elX = (document.getElementById('mainpage-box').offsetWidth);
			}
			if (positions.positionX == 'right') {
				elX = 0;
			}
		}
		if (positions.positionY) {
			if (positions.positionY == 'center') {
				elY = (document.getElementById('mainpage-box').offsetHeight/2);
			}
			if (positions.positionY == 'top') {
				elY = (document.getElementById('mainpage-box').offsetHeight);
			}
		}
	
		evtPosX = (evt.type == 'click') ? (mouseX(evt)-elX) : getAbsX(getTarget(evt));
		evtPosY = (evt.type == 'click') ? (mouseY(evt)-elY) : getAbsY(getTarget(evt));
		
		document.getElementById('mainpage-box').style.left = (positions.x) ? x+'px' : evtPosX+'px';
		document.getElementById('mainpage-box').style.top = (positions.y) ? y+'px' : evtPosY+'px';
		
	} else {
		document.getElementById('mainpage-box').style.top = '100px';
		document.getElementById('mainpage-box').style.left = '150px';
	}
}

// close the main box
function closeMainBox() {
	if (document.getElementById('mainpage-box')) {
		document.getElementById('mainpage-box').innerHTML = "";
		document.getElementById('mainpage-box').style.visibility = 'hidden';
		document.getElementById('mainpage-box-background').style.visibility = 'hidden';
		//if (document.getElementById('mainpage-box-background')) {removeDiv('mainpage-box-background');}
	}
}

function backgroundBox() {
	document.getElementById('mainpage-box-background').style.visibility = 'visible';
	document.getElementById('mainpage-box-background').style.background = '#000';
	document.getElementById('mainpage-box-background').style.left = '0px';
	document.getElementById('mainpage-box-background').style.top = '0px';
	// set div to size of page/window/viewpoint
	var htmlheight = document.body.parentNode.scrollHeight; 
	var htmlwidth = document.body.parentNode.scrollWidth; 	
	var windowheight = window.innerHeight;  
	var windowwidth = window.innerWidth;  
	
	if ( htmlheight < windowheight ) { 
		//document.body.style.height = windowheight + "px"; 
		document.getElementById('mainpage-box-background').style.height = windowheight + "px"; 
	}  else { 
		//document.body.style.height = htmlheight + "px"; 
		document.getElementById('mainpage-box-background').style.height = htmlheight + "px"; 
	}  
	
	if ( htmlwidth < windowwidth ) { 
		//document.body.style.width = windowwidth + "px"; 
		document.getElementById('mainpage-box-background').style.width = windowwidth + "px"; 
	} else { 
		//document.body.style.width = htmlwidth + "px"; 
		document.getElementById('mainpage-box-background').style.width = htmlwidth + "px"; 
	}  
	// fade the background
	fadeElement(document.getElementById('mainpage-box-background'), 40);
}