// ModalBox.js
// requires modalBox.css or equivalent

// establish variables
var modalMask = null;
var modalContainer = null;
var modalBody = null;
var modalBoxInstantiated = false;
var hideSelects = false; 
var theBody;

//add events
addEvent(window,'resize',centerModalBox);
addEvent(window,'scroll',nowScrolling);

//instantiate the modal dialog box
function createModalBox(){
	//get the body root
	theBody = document.getElementsByTagName('Body')[0];
	
	//if modalMask does not exist, create it
	if(!modalMask){
		var mask = document.createElement('div');
		mask.id = "modalMask";
		theBody.appendChild(mask);
		modalMask = document.getElementById('modalMask');
	}
	
	//if modalContainer does not exist, create it
	if(!modalContainer){
		var container = document.createElement('div');
		container.id = "modalContainer";
		container.innerHTML = '<div id="modalBody"></div>';
		theBody.appendChild(container);
		modalContainer = document.getElementById('modalContainer');
		modalBody = document.getElementById('modalBody');
	}
	
	//check to see if this is IE 6 or below
	var browserVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
	if(browserVersion <= 6 && window.navigator.userAgent.indexOf('MSIE') > -1){
		hideSelects = true;//hide the select boxes	
	}
	
	//modal boxes have not been instantiated
	modalBoxInstantiated = true;
}

//display the modal dialog box to the user
function displayModalBox(content, width, height){
	//make sure the modal elements have been created
	if(!modalBoxInstantiated){
		createModalBox();
	}

	//clear out the modalBody for new content	
	var modalContent = modalBody.childNodes[0];
	if(modalContent){
		if(modalContent.tagName != null){
			//hide the content and place it back in the dom in case we need it later
			modalContent.style.display = "none";
			theBody.appendChild(modalContent);
		}else{
			//clear out any text
			modalBody.innerHTML = "";	
		}
	}
		
	//was a div id or HTML passed in for content
	var divContent = document.getElementById(content);
	if(divContent != null){
		modalBody.appendChild(divContent);
		if(divContent.style.display != "block"){
			divContent.style.display = "block";
		}
	}else{
		modalBody.innerHTML = content;	
	}
	
	//hide the select box if broswer is IE 6 or below
	if(hideSelects){
		toggleSelectBoxDisplay(false);
	}
	
	//show the modal box and containers
	modalBody.style.width = width + 'px';
	modalMask.style.display = "block";
	modalContainer.style.display = "block";
	//if height of modal content is greater than max height
	if(height != null && modalBody.clientHeight > height){
		modalBody.style.height = height + 'px';
		modCSSClass('add', modalBody, 'overflow');
	}else{
		modCSSClass('remove', modalBody, 'overflow');
	}
	
	//center the box in the broswer
	centerModalBox();
}

//hide the modal box if it is showing
function closeModalBox(){
	if(modalMask.style.display != "none" || modalContainer.style.display != "none"){
		//modCSSClass("remove", theBody, "modalColor");
		modalMask.style.display = "none";
		modalContainer.style.display = "none";
		if(hideSelects)
			toggleSelectBoxDisplay(true);
	}
}

//center the modal dialog on the page
function centerModalBox(scrolling){
	//make sure the modal elements have been created
	if(!modalBoxInstantiated){
		createModalBox();
		return false;
	}
	
	//if scrolling variable was not passed in, set to false
	if((typeof scrolling) != 'boolean')
		scrolling = false;
		
	//get all the required measurements	
	var innerHeight = getInnerHeight();
	var innerWidth = getInnerWidth();
	var modalHeight = Math.max(modalContainer.scrollHeight, modalContainer.offsetHeight);
	if(modalHeight == 0){ modalHeight = (innerHeight*.75); }//if there was an error reading the height, display at the top
	var modalWidth = Math.max(modalContainer.scrollWidth, modalContainer.offsetWidth);
	var scrollTop = parseInt(getScrollTop(), 10);
	var scrollLeft = parseInt(getScrollLeft(), 10);
	var adjustFF = !window.attachEvent ? 17 : 0;
	var maskHeight = Math.max(theBody.scrollHeight, theBody.offsetHeight, innerHeight) + (adjustFF * 2);
	var maskWidth = Math.max(theBody.scrollWidth, theBody.offsetWidth, innerWidth) - adjustFF;
	var topPos = scrollTop + (Math.floor(innerHeight - modalHeight - adjustFF)/2);
	var leftPos = scrollLeft + (Math.floor(innerWidth - modalWidth - adjustFF)/2);

	//set the size of the mask
	modalMask.style.width = maskWidth + 'px';
	modalMask.style.height = maskHeight + 'px';
	
	//if not currently scrolling, set the position of the modalContainer
	if(!scrolling){
		modalContainer.style.top = topPos + 'px';
		modalContainer.style.left = leftPos + 'px';
	}
}

//event handler when the user scrolls the page
function nowScrolling(){
	//center the modal dialog box
	centerModalBox(false);
}

// hide/show select boxes in IE6 and below
function toggleSelectBoxDisplay(show){
	var display = (show) ? "visible" : "hidden";
	var selects = document.getElementsByTagName("select");
	var modalSelects = modalBody.getElementsByTagName("select");
	//hide all select boxes on page
	for(var i=0; i<selects.length; i++)
		selects[i].style.visibility = display;
	//but show any inside the modal box
	for(var j=0; j<modalSelects.length; j++)
		modalSelects[j].style.visibility = "visible";
}

//create the appropriate eventListener depending on the browser
function addEvent(obj,evType,fn){
	if(obj.addEventListener){
		obj.addEventListener(evType, fn, false);
		return true;
	}else if(obj.attachEvent){
		var r = obj.attachEvent('on'+evType, fn);
		return r;
	}else{
		return false;
	}
}

//get the height of the viewable page
function getInnerHeight(){
	var height = window.undefined;
	if(typeof(window.innerHeight) == 'number')//good broswers
		height = window.innerHeight;
	else if(document.documentElement && document.documentElement.clientHeight)// IE6 in standards mode
		height = document.documentElement.clientHeight;
	else if(document.body && document.body.clientHeight)//bad browsers
		height = document.body.clientHeight;

	return height;
}

//get the width of the viewable page
function getInnerWidth(){
	var width = 1000;
	if(typeof(window.innerWidth) == 'number')//good broswers
		width = window.innerWidth;
	else if(document.documentElement && document.documentElement.clientWidth)// IE6 in standards mode
		width = document.documentElement.clientWidth;
	else if(document.body && document.body.clientWidth)//bad browsers
		width = document.body.clientWidth;
	
	return width;
}

//get the height of area above the viewable page
function getScrollTop(){
	var scrollTop = 0;
	if(typeof(window.pageYoffset) == 'number')//good browsers
		scrollTop = window.pageYOffset;
	else if(document.body && document.body.scrollTop)//DOM compliant
		scrollTop = document.body.scrollTop;
	else if(document.documentElement && document.documentElement.scrollTop)// IE6 in standards mode
		scrollTop = document.documentElement.scrollTop;
	
	return scrollTop;	
}

//get the width of the area left of the viewable page
function getScrollLeft(){
	var scrollLeft = 0;
	if(typeof(window.pageXoffset) == 'number')//good browsers
		scrollLeft = window.pageXOffset;
	else if(document.body && document.body.scrollLeft)//DOM browsers
		scrollLeft = document.body.scrollLeft;
	else if(document.documentElement && document.documentElement.scrollLeft)// IE6 in standards mode
		scrollLeft = document.documentElement.scrollLeft;
	
	return scrollLeft;	
}

//function adds, removes, swaps, or checks classname for any given element
function modCSSClass(action, elem, class1, class2){
	switch(action){
		case 'add':
			if(!modCSSClass('check', elem, class1))
				elem.className += elem.className ? ' ' + class1 : class1;
			break;
		case 'remove':
			var rep = elem.className.match(' '+class1) ? '' + class1 : class1;
			elem.className = elem.className.replace(rep,'');
			break;
		case 'swap':
			elem.className = !modCSSClass('check', elem, class1) ? elem.className.replace(class2, class1) : elem.className.replace(class1, class2);
			break;
		case 'check':
			return new RegExp('\\b'+class1+'\\b').test(elem.className)
			break;
	}
}