// dialog.js - Submit Ajax request with result to appear in a dialog box.
//
//	FST Application Framework, Version 3.4
//	Copyright (c) 2009-10, Norman Lippincott Jr, Saylorsburg PA USA
//	All Rights Reserved
//
//	The FST Application Framework, and its associated libraries, may
//	be used only with the expressed permission of the copyright holder.
//	Usage without permission is strictly prohibited.
//
// 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.

// Revision History
//	2010-05-21 (v 3.4) - Re-worked creation and handling of the dialog shade
//		due to problem with, of course, IE7.
//	2010-05-21 (v 3.4) - Added another DIV, w/ ID 'dialog_wrapper', surrounding
//		DIV 'dialog_content' to aid in styling.

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 id="dialog" ' +
				'style="position: absolute; display: none; z-index: 1100;">' +
			'<div id="dialog_wrapper">' +
				'<div id="dialog_content"></div>' +
			'</div>' +
		'</div>' +
		'<div id="dialog_shade" ' +
			'style="position: absolute; display: none; z-index: 1000;"></div>'
	);
	document.body.appendChild(div);
})

function dialog (url)
{
	var ofs = document.viewport.getScrollOffsets()

	// Send the Ajax request to retrieve dialog content. When returned,
	//	update the dialog content element, position it, and show it.
	new Ajax.Request(url, {
		onSuccess: function (transport) {

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

			// Get viewport particulars.
			var vp = document.viewport.getScrollOffsets()
			vp.width = document.viewport.getWidth()
			vp.height = document.viewport.getHeight()

			// 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 viewport.
			var dialogLeft = Math.max(0,
				(vp.width - $('dialog').getWidth()) / 2 + vp.left);
			var dialogTop = Math.max(0,
				(vp.height - $('dialog').getHeight()) / 3 + vp.top);

			// Set dialog properties and show the element.
			$('dialog').setStyle(
				{ left: dialogLeft + 'px', top: dialogTop + 'px' }).show();
		}
	});

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

	// Set position and size of the dialog shade to match viewport.
	$('dialog_shade').setStyle({
		left: ofs.left + 'px', top: ofs.top + 'px',
		width: document.viewport.getWidth() + 'px',
		height: document.viewport.getHeight() + '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 });
}

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 window is resized, the shade is visible, and the shade is now too
	//	small, resize the shade.
	if (!$('dialog_shade').visible())
		return;

	if (document.viewport.getWidth() > $('dialog_shade').getWidth())
		$('dialog_shade').setStyle({
			width: document.viewport.getWidth() + 'px' })
	if (document.viewport.getHeight() > $('dialog_shade').getHeight())
		$('dialog_shade').setStyle({
			height: document.viewport.getHeight() + 'px' })
})

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

	// If window is scrolled, and the shade is visible, adjust the position
	//	of the shade.
	if (!$('dialog_shade').visible())
		return;

	var ofs = document.viewport.getScrollOffsets()
	$('dialog_shade').setStyle({ left: ofs.left + 'px', top: ofs.top + 'px' })
})