/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
***PopUpDiv*** JavaScript engine 
ARC Graphics 2.2003, rev. 4.2004, rev. 1.2009

PopUpDiv	hovering over a trigger area, equal on all pages holding the PopUpDiv 
========	elements, let appear (pop-up) a DIV window with the same contents.
        	Quick change: if installed, contents changes need only to be made in 
        	ŻŻŻŻŻŻŻŻŻŻŻŻ  PopUpDivTrigger.html and in PopUpDivWindow.html and 
        	enabling and disabling the trigger only in PopUpDivTrigger.html

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
HowTo:	PopUpDiv depends on 4 files: this JavaScript engine PopUpDivScript.js, the
ŻŻŻŻŻ	StyleSheet PopUpDivStyle.css, the PopUpDivTrigger.html trigger page and 
the popping up PopUpDivWindow.html page.
The pages carrying this feature must have the following PopUpDiv elements embedded 
- in the HEADER, the links to the JavaScript engine and to the StyleSheet:

	<LINK HREF="PopUpDivStyle.css" REL="stylesheet" TYPE="text/css"><!-- ***PopUpDiv*** StyleSheet - see HowTo in PopUpDivScript.js -->
	<SCRIPT LANGUAGE="JavaScript" SRC="PopUpDivScript.js" TYPE="text/javascript"></SCRIPT><!-- ***PopUpDiv*** engine - see HowTo in PopUpDivScript.js -->

- in the BODY, 1) the trigger area, placed for instance in a menu, and 2) the hidden 
DIV, placed at best at the end of the BODY section. Both have an IFRAME that shows 
the equal contents on all pages, the trigger area the contents of PopUpTrigger.html 
and the display pop-up the contents of PopUpWindow.html. The size (and the borders) 
of the DIV and of the IFRAME trigger area and display area is defined by the style 
sheet class in PopUpStyle.css, not by the WIDTH and HEIGHT attributes. The contents 
of both pages is regular HTML code that can be customized; PopUpTrigger.html has 
the mouseOver/mouseOut JavaScript code with the functions ShowDivPopUp() and 
HideDivPopUp(delay_in_msec) on PopUpDivScript.js to show/hide PopUpWindow.html.

1)
<!-- ***PopUpDiv*** trigger element start - see HowTo in PopUpDivScript.js -->
<DIV><!-- enabling/disabling the trigger and changing the contents is done in PopUpDivTrigger.html, the appearance is defined in the style sheet PopUpDivStyle.css -->
<IFRAME SRC="PopUpDivTrigger.html" NAME="MenuBox" ID="MenuBox" MARGINWIDTH="0" MARGINHEIGHT="0" ALIGN="middle" SCROLLING="no" FRAMEBORDER="0" CLASS="FrameMenu">
	<TABLE WIDTH="100" BORDER="0" CELLSPACING="0" CELLPADDING="0" ALIGN="center" BGCOLOR="#FFFFFF"><TR>
		<TD WIDTH="100" HEIGHT="100" ALIGN="center" VALIGN="middle">&nbsp;O&nbsp;</TD><!-- alternete IFRAME contents for old browsers -->
	</TR></TABLE></IFRAME></DIV>
<!-- ***PopUpDiv*** trigger element end -->

2)
<!-- ***PopUpDiv*** display element start - see HowTo in PopUpDivScript.js -->
<DIV ID="DivPopUp" CLASS="DivPopUp" TITLE="DivPopUp"><!-- appearance of this hidden pop-up is defined by the style sheet class in PopUpDivStyle.css, the contents is in PopUpDivWindow.html -->
<IFRAME SRC="PopUpDivWindow.html" NAME="FramePopUp" ID="FramePopUp" MARGINWIDTH="0" MARGINHEIGHT="0" ALIGN="middle" SCROLLING="no" FRAMEBORDER="0" CLASS="FramePopUp">
	<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"><!-- alternete IFRAME contents for old browsers
	document.write(DivPopUpHtml);	// defined in PopUpDivScript.js
	// --></SCRIPT>
</IFRAME></DIV>
<!-- ***PopUpDiv*** display element end -->

Below, DivPopUpText and DivPopUpHtml can be customized.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var DivPopUpText="upcoming events ...";
var DivPopUpHtml="<IMG SRC=\"Images/bgCanvas03_640x320.gif\" WIDTH=\"1\" HEIGHT=\"1\" ALT=\""+DivPopUpText+"\" BORDER=\"0\">";

var DivPopUpStay;	// for setTimeout
function ShowDivPopUp() {
	window.clearTimeout(top.DivPopUpStay);
	document.getElementById('DivPopUp').style.visibility="visible";
}
function HideDivPopUp(Delay) {
	DivPopUpStay=window.setTimeout("top.document.getElementById('DivPopUp').style.visibility='hidden'",Delay);
	//alert("DivPopUpStay2='"+DivPopUpStay+"'");
}