// Filename: bigfancypopup.js
// Author: Sp8

// Description:		Everything you need to implement a modal interface.

var messageElement = '';
var fadeElement    = '';

// Function: getWindowSize()
// Description: Return a three element array with
//				screen width, height and scrollLength
function getWindowSize()
{
	var screenDimensions = new Array(3);
	
	if( self.innerHeight )
	{
		screenDimensions[0] = window.innerWidth;
		screenDimensions[1] = window.innerHeight;
		screenDimensions[2] = window.pageYOffset;
	}
	else if( document.documentElement
		&& document.documentElement.clientHeight )
	{
		screenDimensions[0] = document.documentElement.clientWidth;
		screenDimensions[1] = document.documentElement.clientHeight;
		screenDimensions[2] = document.documentElement.scrollTop;
	}
	else
	{
		screenDimensions[0] = document.body.clientWidth;
		screenDimensions[1] = document.body.clientHeight;
		screenDimensions[2] = 500;
	}
	return screenDimensions;
}

// Function: getFullPageSize()
// Description:	Returns height and width of entire page,
//				not just the viewable area.
function getFullPageSize()
{
	var windowDimensions = getWindowSize();
	var pageDimensions = new Array(3);
	
	if( window.innerHeight && window.scrollMaxY )
	{
		pageDimensions[0] = document.body.scrollWidth + window.scrollMaxX;
		pageDimensions[1] = window.innerHeight + window.scrollMaxY;
	}
	else if( document.body.scrollHeight > document.body.offsetHeight )
	{
		pageDimensions[0] = document.body.scrollWidth;
		pageDimensions[1] = document.body.scrollHeight;
	}
	else
	{
		pageDimensions[0] = document.body.offsetWidth;
		pageDimensions[1] = document.body.offsetHeight;
	}
	
	return pageDimensions;
}

// Function: toggleVis(pageElement, display)
// Description:	Checks style.display of pageElement to determine visibility
//				then sets style.display to none if visible or display if
//				display is passed, otherwise defaults to block
function toggleVis(pageElement, display)
{
	if( display === undefined )
		display = 'block';

	var element = document.getElementById(pageElement);
	
//	alert(element.style.visibility);

	if( element.style.display == 'none' || element.style.visibility == 'invisible' )
		element.style.display = display;
	else
		element.style.display = 'none';
}

// Function: fadeToBlack(pageElement)
// Description:	Grey out and disable interaction with all elements on the page
//				with z-index < 98
function fadeToBlack(pageElement)
{
	var pageOverlay = document.getElementById(pageElement);
	var pageDimensions = getFullPageSize();
	var windowDimensions  = getWindowSize();
	
	pageOverlay.style.position = 'absolute';
	pageOverlay.style.left  = "0px";
	pageOverlay.style.top   = "0px";
	
	pageOverlay.style.width  = pageDimensions[0] + "px";
	if( windowDimensions[ 1 ] > pageDimensions[ 1 ] )
		pageOverlay.style.height = windowDimensions[ 1 ] + "px";
	else
		pageOverlay.style.height = pageDimensions[1] + "px";

//	pageOverlay.style.width  = "10000";
//	pageOverlay.style.height = "100%";

	pageOverlay.style.display = 'block';
}

// Function: displayCoda(messageElement, fadeElement)
// Description:	cover screen with fadeElement and then display messageElement
//				in the center of the page ontop of the screen cover
function displayModal(_messageElement, _fadeElement)
{
	window.onresize=displayModal;
	
	if( _messageElement != null && _fadeElement != null )
	{
		messageElement = _messageElement;
		fadeElement    = _fadeElement;
	}
	
	var messageElementObj = document.getElementById(messageElement);
	var windowDimensions  = getWindowSize();

	fadeToBlack(fadeElement);
	
	messageElementObj.style.visibility = 'visible';
	messageElementObj.style.display    = 'block';
	document.getElementById( "ModalMessage" ).scrollTop = 0;

	var left = ( (windowDimensions[0] - messageElementObj.clientWidth) / 2);
	var top = windowDimensions[2] + 50;
	
	if( left < 0 ) left = 0;
//	if( top < 200 ) top = 200;
	
	messageElementObj.style.left = left + "px"; // 388 is the modal width
	messageElementObj.style.top  = top + "px"; // 458 is the modal height
	
}

// Function: hideCoda()
// Description:	Hides the coda using the same elements from displayCoda()
// Update: 12/11/2008 Added override messageElement
function hideModal(_messageElement)
{
	window.onresize= null;

	if( _messageElement === undefined )
		var messageElementObj = document.getElementById(messageElement);
	else
		var messageElementObj = document.getElementById(_messageElement);
		
	var fadeElementObj    = document.getElementById(fadeElement);
	
	if( messageElementObj === undefined || fadeElementObj === undefined )
		return;
	
	toggleVis(messageElement);
	toggleVis(fadeElement);
}

// Functions specific to the Directory divs and css //
function modal( messageVar, type, continueText, onContinue, onCancel )
{
	var modalContainer = document.getElementById( "ModalContainer" );

	document.getElementById( "ModalMessage" ).innerHTML = messageVar;
	document.getElementById( "ModalButton" ).style.display = "";

	switch( type )
	{
		case "warning":
			modalContainer.className = "Warning Small";
			document.getElementById( "ModalCancel" ).innerHTML = document.getElementById( "ModalCancel" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');\"" );
			if( onContinue !== undefined )
				document.getElementById( "ModalCancel" ).style.display = "";
			else
				document.getElementById( "ModalCancel" ).style.display = "none";
			break;
		case "success":
			modalContainer.className = "Success Small";
			document.getElementById( "ModalCancel" ).style.display = "none";
			break;
		case "loading":
			modalContainer.className = "Small";
			document.getElementById( "ModalButton" ).style.display = "none";
			document.getElementById( "ModalCancel" ).style.display = "none";
			break;
		case "notice":
			modalContainer.className = "Notice Small";
			document.getElementById( "ModalCancel" ).style.display = "none";
			break;
		case "large":
			modalContainer.className = "Large";
			document.getElementById( "ModalCancel" ).style.display = "none";
			break;
		case "small":
			modalContainer.className = "Small";
			document.getElementById( "ModalCancel" ).style.display = "none";
			break;
	}

	if( continueText !== undefined )
		document.getElementById( "modal_button_text" ).innerHTML = continueText;
	else
		document.getElementById( "modal_button_text" ).innerHTML = "CONTINUE";
	
	document.getElementById( "ModalButton" ).innerHTML = document.getElementById( "ModalButton" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');" + onContinue + "\"" );
	
	if( onCancel === undefined )
		document.getElementById( "ModalOption" ).style.display = "none";
	else {
		document.getElementById( "ModalLinkSpan" ).innerHTML = onCancel;
		document.getElementById( "ModalOption" ).style.display = "";
	}

	displayModal('ModalContainer','ModalBack');
}

function modalWarning( messageVar, onClick )
{
/*	document.getElementById( "ModalContainer" ).className = "Warning";
	document.getElementById( "ModalMessage" ).innerHTML = messageVar;
	document.getElementById( "ModalContinue" ).innerHTML = document.getElementById( "ModalContinue" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');" + onClick + "\"" );
	document.getElementById( "ModalOption" ).style.display = "none";
	document.getElementById( "ModalCancel" ).innerHTML = document.getElementById( "ModalCancel" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');\"" );
	document.getElementById( "ModalCancel" ).style.display = "";
	displayModal('ModalContainer','ModalBack');	
*/
	modal( messageVar, "warning", "CONTINUE", onClick );
}

function modalSuccess( messageVar, optional )
{
/*	document.getElementById( "ModalContainer" ).className = "Success";
	document.getElementById( "ModalMessage" ).innerHTML = messageVar;
	document.getElementById( "ModalContinue" ).innerHTML = document.getElementById( "ModalContinue" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');\"" );

	if( optional === undefined )
		document.getElementById( "ModalOption" ).style.display = "none";
	else {
		document.getElementById( "ModalLinkSpan" ).innerHTML = optional;
		document.getElementById( "ModalOption" ).style.display = "";
	}
	document.getElementById( "ModalCancel" ).style.display = "none";
	displayModal('ModalContainer','ModalBack');
*/

	modal( messageVar, "success", "CONTINUE", undefined, optional );
}

function modalNotice( messageVar, optional )
{
/*	document.getElementById( "ModalContainer" ).className = "Notice";
	document.getElementById( "ModalMessage" ).innerHTML = messageVar;

	document.getElementById( "ModalContinue" ).innerHTML = document.getElementById( "ModalContinue" ).innerHTML.replace( /onclick=".*?"/, "onclick=\"hideModal('ModalContainer');\"" );

	document.getElementById( "ModalContinue" ).style.display = "";

	if( optional === undefined )
		document.getElementById( "ModalOption" ).style.display = "none";
	else {
		document.getElementById( "ModalLinkSpan" ).innerHTML = optional;
		document.getElementById( "ModalOption" ).style.display = "";
	}
	document.getElementById( "ModalCancel" ).style.display = "none";
	displayModal('ModalContainer','ModalBack');
*/
	modal( messageVar, "notice", "CONTINUE", undefined, optional );
}

function modalHobo()
{
	var _fadeElement = 'ModalBack';
	var _messageElement = 'HomelessModalContainer';

	window.onresize=modalHobo;
	
	if( _messageElement != null && _fadeElement != null )
	{
		messageElement = _messageElement;
		fadeElement    = _fadeElement;
	}
	
	var messageElementObj = document.getElementById(messageElement);
	var windowDimensions  = getWindowSize();

	fadeToBlack(fadeElement);
	
	messageElementObj.style.visibility = 'visible';
	messageElementObj.style.display    = 'block';
	document.getElementById( "ModalMessage" ).scrollTop = 0;

//	alert( windowDimensions[0] + " : " + messageElementObj.clientWidth );

	var left = ( (windowDimensions[0] - messageElementObj.clientWidth) / 2);
//	var left = ( windowDimensions[ 0 ] / 2 ) - 500;
	var top = windowDimensions[2] - 50;
	
	if( left < 0 ) left = 0;
	if( top < 100 ) top = 100;
	
	messageElementObj.style.left = left + "px"; // 388 is the modal width
	messageElementObj.style.top  = top + "px"; // 458 is the modal height
}