/*
 * HIT Cyclone Platform, PERL Power Web Platform.
 * Copyright (C) 2006-2008, HIT IT Consulting & Services, individual authors
 * as indicated by the @author tags.
 *
 * This is CLOSED SOURCE SOFTWARE. You may neither read nor copy
 * and / or distribute any portion of this software without prior
 * permission by HIT IT Consulting & Services.
 *
 * @author Ben Hildebrand (ben.hildebrand [at] hit-consult.net
 */

var objDialog;
var objDialogWindow;

function showModalBox( dialogId, caption )
{
	// prep objects
	var objBody = document.getElementsByTagName( "body" ).item(0);
	var objOverlay = $( 'overlay' );
	var objModalBox = $( 'modalbox' );
	var objImage = $( 'modalboxImage' );
	var objLoadingImage = $( 'loadingImage' );
	var objModalBoxDetails = $( 'modalboxDetails' );

	var objCaption = $( 'dialogCaption' );
	objCaption.innerHTML = caption;
	if( objDialog ) {
		objDialog.style.display = "none";
	}
	objDialog = $( dialogId );
	// objBody.insertBefore( objDialog, objOverlay);
	
	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();

	// set height of Overlay to take up whole page and show
	objOverlay.style.height = ( arrayPageSize[1] + 'px' );
	objOverlay.style.display = 'block';
	
	$( 'dialogContentHolder' ).appendChild( objDialog );

	objDialog.style.display = "block";

	objDialogWindow.style.visibility = "hidden";
	objDialogWindow.style.display = "block";

	adaptModalBoxSize();

	// objDialogWindow.style.display = "none";
	objDialogWindow.style.visibility = "visible";
	// Effect.Appear( 'modalDialog', { duration: 0.5 } );
	
	listenKey();
}

function setModalBoxTitle( title ) {
	var objCaption = $( 'dialogCaption' );
	objCaption.innerHTML = title;
}

function adaptModalBoxSize() {
	dlgHeight = objDialogWindow.clientHeight;
	dlgWidth = objDialogWindow.clientWidth;
	
	setModalBoxSize( dlgWidth, dlgHeight );
}

function setModalBoxSize( dlgWidth, dlgHeight ) {
	objDialogWindow.style.marginLeft = "-" + parseInt( dlgWidth / 2 ) + "px";
	objDialogWindow.style.marginTop = "-" + parseInt( dlgHeight / 2 ) + "px";
}

//
// hideModelBox()
//
function hideModalBox()
{
	objDialog.style.display = "none";
	objDialogWindow.style.display = "none";

	// get objects
	objOverlay = $( 'overlay' );

	// hide modalbox and overlay
	objOverlay.style.display = 'none';

	// disable keypress listener
	document.onkeypress = '';
}


//
// initModalBox()
// Function runs on window load, going through link tags looking for rel="modalbox".
// These links receive onclick events that enable the lightbox display for their targets.
// The function also inserts html markup at the top of the page which will be used as a
// container for the overlay pattern and the inline image.
//
function initModalBox()
{
	
	// the rest of this code inserts html at the top of the page that looks like this:
	//
	// <div id="overlay">
	//		<a href="#" onclick="hideModalBox(); return false;"><img id="loadingImage" /></a>
	//	</div>
	// <div id="modalbox">
	//		<a href="#" onclick="hideModalBox(); return false;" title="Click anywhere to close image">
	//			<img id="closeButton" />		
	//			<img id="modalboxImage" />
	//		</a>
	//		<div id="modalboxDetails">
	//			<div id="modalboxCaption"></div>
	//			<div id="keyboardMsg"></div>
	//		</div>
	// </div>
	
	var objBody = document.getElementsByTagName("body").item(0);
	
	// create overlay div and hardcode some functional styles (aesthetic styles are in CSS file)
	var objOverlay = document.createElement( "div" );
	objOverlay.setAttribute( 'id', 'overlay' );
	objOverlay.onclick = function () {
		hideModalBox(); 
		return false;
	}
	objOverlay.style.display = 'none';
	objOverlay.style.position = 'absolute';
	objOverlay.style.top = '0';
	objOverlay.style.left = '0';
	objOverlay.style.zIndex = '90';
 	objOverlay.style.width = '100%';
 	
	var objWaiter = document.createElement( "div" );
 	objWaiter.innerHTML = '<img src="/images/cyclone/busy_modal.gif">';
	objWaiter.style.cssText = "position: absolute; bottom: 25px; left: 50%; margin-left: -12px; display: none;";
	objWaiter.className = "dynamics_waiter";
 	
 	objOverlay.appendChild( objWaiter );
	
	objDialogWindow = document.createElement( "div" );
	objDialogWindow.className = "modalDialog";
	objDialogWindow.setAttribute( "id", "modalDialog" );
	objDialogWindow.style.cssText = "top: 50%; left: 50%; z-index: 250;";
	objDialogWindow.style.display 	= "none";
	objDialogWindow.style.position 	= 'absolute';
	
	var objDialogHeading = document.createElement( "div" );
	objDialogHeading.className = "dialogHeading";

	var objDialogContentHolder = document.createElement( "div" );
	objDialogContentHolder.className = "dialogContentHolder";
	objDialogContentHolder.setAttribute( "id", "dialogContentHolder" );
	
	imgCloser = document.createElement( "img" );
	imgCloser.setAttribute( "src", "/images/cyclone/tango/16x16/process-stop.png" );
	imgCloser.setAttribute( "alt", "Schlie&szlig;en" );
	imgCloser.style.cssText = "position: absolute; top: 0px; right: 0px; margin: 4px; cursor: pointer;";
	imgCloser.onclick = function() {
		hideModalBox();
	}
	
	var objCaption = document.createElement( "div" );
	objCaption.className = "dialogCaption";
	objCaption.id = "dialogCaption";
	objCaption.style.cssText = "position: absolute; top: 0px; left: 0px; margin: 4px; cursor: arrow;";

	objDialogHeading.appendChild( objCaption );
	objDialogHeading.appendChild( imgCloser );
	objDialogWindow.appendChild( objDialogHeading );
	objDialogWindow.appendChild( objDialogContentHolder );

	objBody.insertBefore( objOverlay, objBody.firstChild );
	objBody.insertBefore( objDialogWindow, objOverlay );

	var arrayPageSize = getPageSize();
	var arrayPageScroll = getPageScroll();
}

window.setTimeout( "addLoadEvent( initModalBox )", 500 ); 	// run initModalBox onLoad