////////////////////////////////////////////////////////////////////////////////////////////////
		////////////////////////////////////////////////////////////////////////////////////////////////
		////                                                                                        ////
		////    TITLE: modal.js lightbox/overlay script                                             ////
		////                                                                                        ////
		////    AUTHOR: Jose Cao-Garcia                                                             ////
		////                                                                                        ////
		////////////////////////////////////////////////////////////////////////////////////////////////
		////                                                                                        ////
		////    Copyright 2009 Jose Cao-Garcia                                                      ////
		////                                                                                        ////
		////    This work is licensed under the Creative Commons Attribution-Share Alike 3.0        ////
		////    United States License. To view a copy of this license, visit                        ////
		////    http://creativecommons.org/licenses/by-sa/3.0/us/ or send a letter to Creative      ////
		////    Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.       ////
		////                                                                                        ////
		////////////////////////////////////////////////////////////////////////////////////////////////
		////////////////////////////////////////////////////////////////////////////////////////////////

		///////////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////////
		///////                                                                         ///////
		///////     SITE MODAL WINDOW OBJECT                                            ///////
		///////         - showing/hiding of modal window.                               ///////
		///////         - retrieval of innerHTML markup.                                ///////
		///////         - initialization                                                ///////
		///////                                                                         ///////
		///////////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////////
			document.writeln('\
				<style type="text/css">\
					html #modal                                                 { display: none;  }\
					html.modal #modal                                           { display: block;  }\
					html.modal,\
					html.modal body                                             { overflow: hidden; }\
					html.modal #modal                                           { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; }\
					html #modal div#modalBG                                     { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: black; z-index: 800; }\
					html #modal div#modalPositioner                             { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: auto; z-index: 900; text-align: center;  }\
					html #modal div#modalCT                                     { position: absolute; top: 0px; left: 0px; width 1px; height: 1px; visibility: hidden; overflow: hidden; }\
					html #modal div#modalPositioner .modalInsertedContent       { position: relative; z-index: 900; margin: 0px auto 0px auto; text-align: center;}\
				/* MSIE 6 needs special handholding, of course. */\
					*html #modal                                                { display: none;  }\
					*html.modal #modal                                          { display: block;  }\
					*html.modal,\
					*html.modal body                                            { overflow: hidden; }\
					*html.modal #modal                                          { position: absolute ! important; width: 100%; height: expression(window.self.document.documentElement.clientHeight+"px"); overflow: hidden; top: expression(((ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + "px"); left: 0px; }\
					*html #modal div#modalPositioner                            { height: expression(window.self.document.documentElement.clientHeight+"px"); position: relative; top: 0px; left: 0px; }\
					*html #modal div#modalBG                                    { width: 100%; height: expression(window.self.document.documentElement.clientHeight+"px"); position: absolute; top: 0px; left: 0px; background: black; z-index: 800; }\
					*html #modal div#modalCT                                    { position: absolute; top: 0px; left: 0px; width 1px; height: 1px; visibility: hidden; overflow: hidden; }\
					*html #modal div#modalPositioner .modalInsertedContent      { position: relative; z-index: 900; }\
				</style>\
			');
			var modal = {
			////////////////////////////////////////////////////////
			//// markup, used for creating the modal structure
			////////////////////////////////////////////////////////
				markup : '\
					<div id="modal">\
						<div id="modalBG"></div>\
						<div id="modalPositioner">\
							<div id="modalCT"></div>\
						</div>\
					</div>',
			////////////////////////////////////////////////////////
			//// global properties - null values get initialized later
			////////////////////////////////////////////////////////
				initialized : false,
				domObj      : null,
				isActive    : null,
				location    : null,
				duration    : 500,
			////////////////////////////////////////////////////////
			//// linkage method
			////////////////////////////////////////////////////////
				enter : function(content) {
				// make sure we are initialized
					modal.init();
					modal.update(content);
					modal.show();
				},
			////////////////////////////////////////////////////////
			//// shows the modal, leavings its contents unchanged
			////////////////////////////////////////////////////////
				show : function() {
				// show modal if inactive.
					if (!modal.isActive) {
						var originalViewportWidth = $('body').get(0).offsetWidth;
					// show
						$('html').addClass('modal');
						var scrollBarWidth = $('body').get(0).offsetWidth - originalViewportWidth;


						$('body').eq(0).css({width: originalViewportWidth+'px'});



					// fade in
						$('#modal .modalInsertedContent').css({opacity:0}).animate({opacity:1}, modal.duration);
						$('#modal div#modalBG').css({opacity:0}).animate({opacity:0.8}, modal.duration);
					// set status
						modal.isActive = true;
					}
				},
			////////////////////////////////////////////////////////
			//// updates modals contents
			////////////////////////////////////////////////////////
				update : function(content) {
				// change content if new content.
					if (modal.location != content) {
						modal.clear();
					// set locaton flags
						modal.location = content;
					// set up modal
						$('#modal div#modalCT').html(content);
						var content = $('#modal div#modalCT').find('*').get(0);
						var content = $('#modal div#modalCT').get(0).removeChild(content);
							content = $('#modal div#modalPositioner').get(0).appendChild(content);
							$(content).addClass('modalInsertedContent');
					}
				},
			////////////////////////////////////////////////////////
			//// closes and restores modal to original state
			////////////////////////////////////////////////////////
				exit : function() {
					modal.hide();
					modal.clear();
				},
			////////////////////////////////////////////////////////
			//// closes the modal, leavings its contents unchanged
			////////////////////////////////////////////////////////
				hide : function() {
					if (modal.isActive) {
					// fade in
						$('#modal .modalInsertedContent').animate({opacity:0}, modal.duration);
						$('#modal div#modalBG').animate({opacity:0}, modal.duration, function(){$('html').removeClass('modal'); $('body').eq(0).css({width: null}); });
					// set status
						modal.isActive = false;
					}
				// clear modal if there are flash movies involved
					if ($('#modal').find('embed, object').length) {
						modal.clear();
					}
				},
			////////////////////////////////////////////////////////
			//// clears the modals contents.
			////////////////////////////////////////////////////////
				clear : function() {
					if ($('#modal .modalInsertedContent').length) {
						$('#modal div#modalPositioner').get(0).removeChild($('#modal div#modalPositioner .modalInsertedContent').get(0));
						$('#modal div#modalBG').html('');
						modal.location = null;
					}
				},
			////////////////////////////////////////////////////////
			//// initialization method
			////////////////////////////////////////////////////////
				init : function() {
					if (!modal.initialized) {
					// create the modal shade element
						var tempDiv = document.createElement('div');
						$(tempDiv).html(modal.markup)
						tempDiv = tempDiv.removeChild($(tempDiv).find('*').get(0));
						document.getElementsByTagName('body')[0].appendChild(tempDiv);
					// tool out the object
						modal.domObj   = $($('#modal')[0]);
						modal.isActive = $('html').hasClass('modal');
						$('#modal div#modalPositioner').click(
							function(event) {
								if (event.target.id == 'modalPositioner') {
									modal.hide();
								}
							}
						);
						$('#modal div#modalBG').css({opacity:0});
						modal.initialized = true;
					}
				}
			}