////////////////////////////////////////////////////////////////////////////////////////////////
		////////////////////////////////////////////////////////////////////////////////////////////////
		////                                                                                        ////
		////    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){
                                                                                                // Code picked from global.js - special handling for media player playback - stop playback of any players within all (relevant) tabs when switching. This is only really needed for challeneged microsoft browsers. Other browsers automatically suspend swf activity when player is hidden.
                                                                                                var mediaPlayers = $('#modal').find('embed, object');
                                                                                                var playerID     = mediaPlayers.eq(0).attr('id') || mediaPlayers.eq(0).attr('name')
                                                                                                var playerObj    = (typeof(ActiveXObject) != 'undefined' && document.embeds) ? window[playerID] : document[playerID];
                                                                                                try { playerObj.stopPlayback(); } catch(e) {  } // NOTE: must catch errors because some browsers temporarily delete movie when it is not visible, resulting in errors.
                                                                                }
                                                                                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;
					}
				}
			}