/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// 
/// BlendInOutDiv.js (c)ARC Graphics 5.2009                                 ///
/// ================                                                        ///
/// Blend smoothly in and out DIV containers with any HTML contents.        ///
/// (sibling script of Thumb2BigPic.js)                                     ///
/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// 
// HowTo: An inline DIV holds two absolute positioned DIVs, a visible one with 
// ŻŻŻŻŻŻ the ID 'BlendBackDivID' (see below) and a hidden one exactly on top 
// of it with the ID 'BlendDivShow'. They are empty (just a  ), hence both 
// invisible and don't need to be dimensioned. Triggered by BlendIn(DivID), the 
// contents is replaced by the contents of the DIV called as the function's 
// argument DivID and the visible one is gradually faded out while the hidden 
// one is blended in. All those "DivID" DIVs to be displayed are defined at the 
// end of the HTML page and placed into an invisible DIV, preloading them at 
// the same time. 
// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / // 
// Install: copy/paste the three HTML code snippets (1)-(4) below into your 
// ŻŻŻŻŻŻŻŻ page, adapt the contents to your needs and customize at (4). 
// (1) _Script_
// Enter in the Header section, before a custom <SCRIPT TYPE="text/javascript">
/*
	<SCRIPT SRC="BlendInOutDiv.js" TYPE="text/javascript"></SCRIPT>
*/
// (2) _Container_
// The following DIV construct (BlendInOutDiv container) can be copy/pasted as 
// is into the HTML page at the place where to display the DivIDs contents: 
/*
<DIV STYLE="position: relative;" onMouseOver="BlendIn(VisibleID);"><!-- BlendInOutDiv container start -->
	<DIV ID="BlendDivBack" STYLE="position: absolute; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);">&nbsp;</DIV>
	<DIV ID="BlendDivShow" STYLE="position: absolute; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);">&nbsp;</DIV>
	<NOSCRIPT><DIV>no JavaScript &raquo; no visible contents !<BR><SMALL>please activate JavaScript in your browser settings...</SMALL></DIV></NOSCRIPT>
</DIV>&nbsp;<!-- BlendInOutDiv container end -->
*/
// Due to the relative positioning, the construct will be inline. The IDs of 
// the two DIVs, 'BlendBackDivID' and 'BlendShowDivID', in this example with 
// the values "BlendDivBack" and "BlendDivShow", must be defined in the 
// Customize section further below. For correct positioning, add temporarily 
// the STYLE /* border: 1px solid Red;*/ and /* width: 480px; height: 480px;*/ 
// to the 1st DIV "BlendDivBack".
// (3) _Links_
// For blending in a DivID, use the function BlendIn('DivID'), for hiding it 
// again use the function BlendOut() in an A-tag. The triggers can be either a 
// HREF="javascript:BlendIn('DivID')" or an onMouseOver="BlendIn('DivID')" 
// instruction, or both, where 'DivID' is the ID of one of the DivIDs listed in 
// the invisible DIV at the end of the page.
// BlendIn(DivID[,Speed][,'Text']) can have an optional argument Speed to 
// override the default blending speed and an optional argument 'Text' for 
// displaying a comment in the status line. 
// BlendOut([Delay][,Speed][,'Text']) has three optional arguments: Delay is 
// the amount of milliseconds before the blending out starts (omitting it 
// equals to 0 - immediately) and Speed and 'Text' are the same optional 
// arguments as for BlendIn(). Use ('Div1','','Txt') instead of ('Div1',,'Txt')
// Some samples of A HREF link triggers below:
/*
<A HREF="javascript:BlendIn('Div1');">show Div 1</A>
<A HREF="javascript:BlendIn('Div2');" onMouseOver="BlendIn('Div2')" onMouseOut="BlendOut();">show Div 2</A><
<A HREF="javascript:BlendIn('Div3');" CLASS="Menu" onMouseOver="BlendIn('Div3');window.status=this.innerHTML;return true;">show Div 3</A>
<A HREF="javascript:BlendIn('Div4');" CLASS="Menu" onMouseOver="BlendIn('Div4','',this.innerHTML);" onMouseOut="BlendOut(1000);">show Div 4</A>
<A HREF="javascript:BlendIn('Div5',100);">show Div 5</A> <A onMouseOver="BlendOut('Div5',0);">hide Div 5</A> 
*/
// (4) _Contents_
// At the end of the HTML-page, add following hidden DIV holding the DivIDs 
// with the contents to be displayed, each one with its own ID. 
// This ID is addressed by the function BlendIn('DivID'). The HTML elements 
// contained in the DivIDs are displayed exactly as defined there (styling 
// included), so a good idea is to temporarily unhide the DIV while designing 
// the page.
// To have the container already loaded with the contents of e.g. "Div1", add 
// the JavaScript code below in the same hidden DIV.
/*
<DIV STYLE="visibility: hidden; display: none;"><!-- define, preload and hide the BlendInOutDiv.js DIVs to display -->
	<DIV ID="Div0">&nbsp;</DIV>
	<DIV ID="Div1"><IMG SRC="image.jpg" ALT="" WIDTH="360" HEIGHT="420" BORDER="0" TITLE="the image"></DIV>
	<DIV ID="Div2"><TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0"><TR><TD>bla bla</TD></TR></TABLE></DIV>
	...
<SCRIPT TYPE="text/javascript"><!-- 
	document.getElementById('BlendDivBack').innerHTML = document.getElementById('Div1').innerHTML;
//--></SCRIPT><NOSCRIPT></NOSCRIPT>
</DIV><!-- end define, preload and hide the BlendInOutDiv.js DIVs to display -->
*/
// (5) _Customize_
// enter the real name of the two container DIVs:
var BlendBackDivID	= "BlendDivBack";	// ID of the visible 'Back'-DIV with the style attributes <... STYLE="opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; filter: alpha(opacity=100);">
var BlendShowDivID	= "BlendDivShow";	// ID of the hidden 'Show'-DIV with the style attributes <... STYLE="opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);">
// Tweek blending options:
var BlendInSpeed 	= 400;	// blend transition time in milliseconds from BlendInOutDiv.js
var BlendInSteps 	= 20;	// blend steps from BlendInOutDiv.js
//  This can be set in the calling page, too.
// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / //
// end Install.
// no need to change the code below.
/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// 
var ResetIt, VisibleID;	// make global
var FadeInFrame	= new Array();
function BlendIn(BlendDivID,Speed,Comment) {	// blend in and fade out the 'show' and the 'back' container DIV in optional Speed milliseconds with optional status text Comment 
	if ( BlendDivID == VisibleID || typeof BlendDivID == 'undefined' ) return;	// don't blend if it's the same contents or if undefined
	var FadeInSpeed = ( typeof Speed=='undefined' || Speed=='' ) ? BlendInSpeed : Speed;	// override global setting
	var FadeInSteps = BlendInSteps;	//alert(" BlendInSpeed='"+BlendInSpeed+"'\n Speed='"+Speed+"'\n FadeInSpeed='"+FadeInSpeed+"'\n ");
	for(i = 0; i <= 100; i+=Math.round(100/FadeInSteps)) clearTimeout(FadeInFrame[i]);	// stop any previous blending
	clearTimeout(ResetIt);	// stop any previous restore of 'show'-DIV
	document.getElementById(BlendShowDivID).innerHTML = document.getElementById(BlendDivID).innerHTML;	// insert contents into the 'show'-DIV
	for(i = 0; i <= 100; i+=Math.round(100/FadeInSteps)) {	// blend 'show' DIV in and 'back' DIV out with their contents
		FadeInFrame[i] = setTimeout("ChangeOpacity("+(((100-i)<0)?0:(100-i))+",BlendBackDivID);ChangeOpacity("+((i>100)?100:i)+",BlendShowDivID);", (Math.round(FadeInSpeed/100)*((i>100)?100:i)) );	// setTimeout( "function()", after_milliseconds )
	}
	ResetIt = setTimeout("Reset('"+BlendDivID+"');",FadeInSpeed);	// when blend is finished, swap 'show' and 'back'
	VisibleID = BlendDivID;	// remember DIV on display
	if ( typeof Comment != 'undefined' ) window.status = Comment;	// optional comment
}
function BlendOut(Delay,Speed,Comment) {	// fade out display DIV after optional Delay milliseconds in optional Speed milliseconds with optional status text Comment 
	if ( typeof Delay == 'undefined' ) Delay = 0;	// if no Delay defined, set it to 0
	var FadeInSpeed = ( typeof Speed=='undefined' || Speed=='' ) ? BlendInSpeed : Speed;	// override global setting
	var FadeInSteps = BlendInSteps;
	for(i = 0; i <= 100; i+=Math.round(100/FadeInSteps)) clearTimeout(FadeInFrame[i]);	// stop any previous blending
	clearTimeout(ResetIt);	// stop any previous restore of 'show'-DIV
	for(i = 0; i <= 100; i+=Math.round(100/FadeInSteps)) {	// blend out 'show' DIV with its contents
		FadeInFrame[i] = setTimeout("ChangeOpacity("+(((100-i)<0)?0:(100-i))+",BlendBackDivID);", (Math.round(FadeInSpeed/100)*((i>100)?100:i))+Delay );	// setTimeout( "function()", after_milliseconds )
	}
	VisibleID = "";	// forget DIV on display
	if ( typeof Comment != 'undefined' ) window.status = Comment;	// optional comment
}
function Reset(BlendDivID) {	// restore original display DIV states
	document.getElementById(BlendBackDivID).innerHTML = document.getElementById(BlendDivID).innerHTML;	// swap front (=show) to back
	ChangeOpacity(100, BlendBackDivID);	// restore original opacity
	ChangeOpacity(0, BlendShowDivID);	// restore original opacity
	VisibleID = BlendDivID;	// forget DIV on display
}
function ChangeOpacity(Opacity, ID) {	// change the opacity for different browsers (from http://www.brainerror.net/scripts_js_blendtrans.php)
	if ( document.getElementById(ID) )	var Object = document.getElementById(ID).style;
	else if ( parent.document.getElementById(ID) )	var Object = parent.document.getElementById(ID).style;
	else { /*alert("ERROR! cannot find Object with ID '"+ID+"' in document '"+document.URL+"'")*/; return false; }
	Object.opacity	= (Opacity/100);	// newer browsers
	Object.MozOpacity	= (Opacity/100);	// Netscape 6 & old Mozilla
	Object.KhtmlOpacity	= (Opacity/100);	// old Safari & Linux's Konquerer 
	Object.filter	= "alpha(opacity="+Opacity+")";	// IE
	return true;
}
/// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// /// ///