///////////////////////////////////////////////////////////////////////////////
/// Thumb2BigPic.js (c)ARC Graphics 8.2010                                  ///
/// ===============                                                         ///
/// Thumbnail pictures trigger a view of their larger version in a          ///
/// seprarate DIV-window with a smooth in & out blend. The pictures can be  ///
/// replaced by other HTML elements, if wanted.                             ///
///////////////////////////////////////////////////////////////////////////////
// HowTo: An inline DIV holds two absolute positioned DIVs, a visible one    //
// ŻŻŻŻŻŻ with the ID 'IDshow' (see below) and a hidden one exactly on top   //
// of it with the ID 'IDfade'. They contain IMG tags (and/or other elements) //
// that are displayed. Triggered by a small picture (or an other element),   //
// the visible one is gradually faded out while the hidden one is blended    //
// in. The content of the DIVs (initially empty) is previously replaced.     //
// Those 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 below into your page and //
// ŻŻŻŻŻŻŻŻ adapt the contents to your needs.                                //
// 1) The following DIV construct (called display DIV) can be copy/pasted as //
// is into the HTML page at the place where to display the large pictures.   //
// The IDs of the two DIVs, 'IDshow' and 'IDfade', in this example with the  //
// values "DispBack" and "DispShow", must be defined in the Customize        //
// section further below (also change the width and height if needed):       //
/*
<DIV STYLE="position: relative;"><!-- display BigPic DIV -->
<DIV ID="DispShow" STYLE="position: absolute; width: 480px; height: 480px;">&nbsp;</DIV>
<DIV ID="DispFade" STYLE="position: absolute; width: 480px; height: 480px;">&nbsp;</DIV>
<NOSCRIPT><DIV>no JavaScript &raquo; no visible content !<BR><SMALL>please activate JavaScript in your browser settings...</SMALL></DIV></NOSCRIPT></DIV>
*/
// 2) The small pictures (or other elements) that trigger the large images,  //
// have an <A> tag with either a "javascript:..." or an "onMouseOver='...'"  //
// instruction calling the function Display(''). This, first, replaces the   //
// contents in the display DIV and second, triggers the blend in and out of  //
// the large picture. The function argument is the ID of the DIV (see below) //
// to be displayed, here "BigPic1", "BigPic2" ... :                          //
/*
<A onMouseOver="Display('BigPic1');"><IMG SRC="smallPict_1" ...></A>
<A onMouseOver="Display('BigPic2');"><IMG SRC="smallPict_2" ...></A>
*/
// 3) At the end of the HTML-page, add following hidden DIV holding the DIVs //
// with the large pictures (and/or other contents), each one with its own ID.//
// This ID is addressed by the small picture's A tag (see above). The HTML   //
// elements contained in the DIVs are displayed exactly as defined there     //
// (styling included), so a good idea is to temporarily unhide the DIV while //
// designing the page.                                                       //
// Add JavaScript code below in the same hidden DIV, this loads the 1st      //
// large picture into the display DIV:                                       //
/*
<DIV STYLE="visibility: hidden; display: none;"><!-- define and preload the large pictures BigPic# -->
<DIV ID="BigPic1"><IMG SRC="largePict_1" ...></DIV>
<DIV ID="BigPic2"><IMG SRC="largePict_2" ...></DIV>
...
<DIV ID="BigPic2"><IMG SRC="largePict_n" ...></DIV>
<SCRIPT TYPE="text/javascript"><!--	// load 1st picture into large display
	document.getElementById(IDshow).innerHTML = document.getElementById('BigPic1').innerHTML;
// --></SCRIPT><NOSCRIPT></NOSCRIPT>
</DIV>
*/
// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / //
// Customize:                                                                //
// ŻŻŻŻŻŻŻŻŻŻ                                                                //
// The two following values must correspond to the IDs of the DIVs inside    //
// the display DIV:                                                          //
var IDshow = "DispShow"; // ID of the visible '2show'-DIV (see above)        //
var IDfade = "DispFade"; // ID of the hidden '2fade'-DIV (see above)         //
// Tweek blending options:                                                   //
var FadeSpeed = 200; // blend transition time in milliseconds                //
var FadeSteps = 10;  // blend steps                                          //
// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / //
// no need to change the code below                                          //
// / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / //
var ResetIt;                                                                 //
var FadeArr = new Array(), i;                                                //
function Display(PictID) { // blend in '2fade' DIV and fade out '2show' DIV  //
    if (document.getElementById(PictID).firstChild.src.substring(document.getElementById(PictID).firstChild.src.lastIndexOf("/")*1+1) ==
        document.getElementById(IDshow).firstChild.src.substring(document.getElementById(IDshow).firstChild.src.lastIndexOf("/")*1+1)) return;	// don't blend if it's the same picture
    for(i=0;i<=100;i+=Math.round(100/FadeSteps)) clearTimeout(FadeArr[i]);   // stop any previous blending
    clearTimeout(ResetIt);   // stop any previous restore of '2fade'-DIV     //
    ChangeOpacity(0,IDfade); // set the '2fade'-DIV to invisible before ...  //
    document.getElementById(IDfade).innerHTML = // ... putting the new ...   //
    document.getElementById(PictID).innerHTML;	// ... picture there         //
    for(i = 0; i <= 100; i+=Math.round(100/FadeSteps)) { // with setTimeout, //
        FadeArr[i] = setTimeout("ChangeOpacity("+(((100-i)<0)?0:(100-i))+",IDshow);ChangeOpacity("+((i>100)?100:i)+",IDfade);", (Math.round(FadeSpeed/100)*((i>100)?100:i)) );	// setTimeout( "function()", after_milliseconds )
    } // blend the '2fade' DIV in and the '2show' DIV out with their picture //
    ResetIt = setTimeout("Reset('"+PictID+"');",FadeSpeed); // @ blend's end //
}                                                                            //
function Reset(PictID) { // swap the two display DIVs and their pictures     //
    document.getElementById(IDshow).innerHTML = document.getElementById(PictID).innerHTML;
    ChangeOpacity(100, IDshow); // restore original opacity                  //
    ChangeOpacity( 0 , IDfade); // restore original opacity                  //
}                                                                            //
function ChangeOpacity(OpacPcent, ID) { // change % opacity for all browsers //
    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; }
    if (OpacPcent<3) OpacPcent=0; // nearly transparent (<3%) is 0% opaque   //
    Object.opacity = (OpacPcent/100); // newer browsers: 0 - 0.5 - 1         //
    Object.MozOpacity   = (OpacPcent/100); // Netscape 6 & old Mozilla       //
    Object.KhtmlOpacity = (OpacPcent/100); // old Safari & Linux's Konquerer //
    Object.filter = "alpha(opacity="+OpacPcent+")"; // IE: 0 - 50 - 100      //
    return true;                                                             //
} // (from http://www.brainerror.net/scripts_js_blendtrans.php)              //
///////////////////////////////////////////////////////////////////////////////
/// Thumb2BigPic.js end                                                     ///
///////////////////////////////////////////////////////////////////////////////