// dialog.js - Submit Ajax request with result to appear in a dialog box.
//
// Copyright 2009, Norman Lippincott Jr, Saylorsburg PA USA
// All Rights Reserved
//
// Submits a request via Ajax.Request and displays the result of that request
// in an HTML DIV element that appears over the page. The page beneath the DIV
// is shaded to indicate that it is inactive. All DIV elements required by
// this script are automatically created when the page loads. CSS file
// dialog.css is required, and may be modified for application preferences.

Event.observe(window, 'load', function () {

	// Create element at end of document that includes the elements used
	// for producing the effects of this script.

	var div = document.createElement('div');
	Element.extend(div);
	div.update(
		'<div style="clear: both;"></div>' +
		'<div id="dialog" style="display: none;">' +
		'<div id="dialog_content"></div>' +
		'</div>' +
		'<div id="dialog_shade" style="display: none;"></div>'
	);
	document.body.appendChild(div);
})

function dialog (url)
{
	// If the dialog shade is not currently shown, size it appropriately
	// and show it (with fade-in effect).
	if (!$('dialog_shade').visible()) {

		// Clone shade position and size to the document body.
		$('dialog_shade').clonePosition(document.body);

		// Get width and height of viewable window area.
		var windowWidth = window.innerWidth ? window.innerWidth :
			document.documentElement.clientWidth ?
				document.documentElement.clientWidth :
					document.body.clientWidth;
		var windowHeight = window.innerHeight ? window.innerHeight :
			document.documentElement.clientHeight ?
				document.documentElement.clientHeight :
					document.body.clientHeight;

		// If either dimension of the viewable window area is greater than
		// that of the shade, resize the shade.
//		if (windowWidth > $('dialog_shade').getWidth())
//			$('dialog_shade').setStyle({ width: windowWidth + 'px' });
		if (windowHeight > $('dialog_shade').getHeight())
			$('dialog_shade').setStyle({ height: windowHeight + 'px' });

		// Show the shade with a fade-in effect. Note that color and z-index
		// properties should be set appropriately in the CSS file.
		$('dialog_shade').appear({ to: 0.5, duration: 1 });
	}

	// Send the Ajax request to retrieve dialog content.
	new Ajax.Request(url, {
		onSuccess: function (transport) {

			// Update the dialog content element.
			$('dialog_content').update(transport.responseText);

			// Get width and height of viewable window area.
			var windowWidth = window.innerWidth ? window.innerWidth :
				document.documentElement.clientWidth ?
					document.documentElement.clientWidth :
						document.body.clientWidth;
			var windowHeight = window.innerHeight ? window.innerHeight :
				document.documentElement.clientHeight ?
					document.documentElement.clientHeight :
						document.body.clientHeight;

			// Determine upper-left coordinate of location where dialog box
			// is to be displayed. It should be centered horizontally, and
			// one-third from top vertically, with respect to the viewable
			// window area.
			var dialogLeft = Math.max(0,
				(windowWidth - $('dialog').getWidth()) / 2 +
					document.viewport.getScrollOffsets().left);
			var dialogTop = Math.max(0,
				(windowHeight - $('dialog').getHeight()) / 3 +
					document.viewport.getScrollOffsets().top);

			// If top coordinate of dialog box is zero, the height of the
			// dialog likely exceeds the vertical viewable area, and thus
			// may extend beyond the bottom of the document body. In this
			// case, the bottom of the dialog may extend lower than the
			// original page, so the shade needs to be adjusted.
//			if (dialogTop == 0) {
//				var shadeHeight = Math.max(
//					document.body.clientHeight,
//					document.viewport.getScrollOffsets().top +
//						$('dialog').getHeight());
//				$('dialog_shade').setStyle({ height: shadeHeight + 'px' });
//			}

			// Set dialog properties and show the element. Note that it
			// would be nice for this to appear (so as to fade in) rather
			// than show (without fade-in effect), however that is problematic
			// when the returned dialog content contains JavaScript code.
			$('dialog').setStyle(
				{ left: dialogLeft + 'px', top: dialogTop + 'px' }).show();
		}
	});
}

function dialog_close ()
{
	// Fade the dialog and the shade, returning to the underlying page.
	$('dialog').fade({ duration: 0.25 });
	$('dialog_shade').fade({ duration: 0.5 });
}

Event.observe(window, 'resize', function () {

	// If the window is resized and the shade is visible, the shade may
	// need a size adjustement.
	if ($('dialog_shade').visible()) {

		// Get width and height of viewable window area.
		var windowWidth = window.innerWidth ? window.innerWidth :
			document.documentElement.clientWidth ?
				document.documentElement.clientWidth :
					document.body.clientWidth;
		var windowHeight = window.innerHeight ? window.innerHeight :
			document.documentElement.clientHeight ?
				document.documentElement.clientHeight :
					document.body.clientHeight;

		// Determine new dimensions appropriate for the shade.
		var shadeWidth = Math.max(
			document.body.clientWidth,
			document.viewport.getScrollOffsets().top +
				$('dialog').getWidth());
		var shadeHeight = Math.max(
			document.body.clientHeight,
			document.viewport.getScrollOffsets().top +
				$('dialog').getHeight());

		// If the new dimensions are larger than the current dimensions,
		// adjust the shade.
		if (shadeWidth > $('dialog_shade').getWidth())
			$('dialog_shade').setStyle({ width: shadeWidth + 'px' });
		if (shadeHeight > $('dialog_shade').getHeight())
			$('dialog_shade').setStyle({ width: shadeHeight + 'px' });
	}
});