var div1, div2;         // the div's we will fade and intensify
var milliseconds = 50;  // number of milliseconds between each step of the transition - decrease to speed up the transition, increase to slow it down
var opacityStep = .25;  // value to step the opacity (must be > 0 and < 1) - decrease to make the transition smoother, increase to transition faster
var intervalId;         // id for the JS timer
var opacity;            // opacity level from 0 (invisible) to 1 (fully visible)
var div;                // set to div1 or div2 depending on what we are doing
var step;               // 1 (fading a div) or 2 (intensifying a div)
var cycling;            // are we in the process of fading or intensifying a div?
var ie;                 // are we running on IE?

function load()
{
    div1 = document.getElementById("display-1");
    div2 = document.getElementById("display-2");
    ie = (document.all) ? 1 : 0;
}

function bookClicked(control)
{
    if ((control.id == "book1-display2") && (div1.style.display == 'none') && !cycling)
    {
        opacity = 1;
        div = div2;
        step = 1;
        intervalId = setInterval("cycleDisplay()", milliseconds);
    }
    else if ((control.id == "book2-display1") && (div2.style.display == 'none') && !cycling)
    {
        opacity = 1;
        div = div1;
        step = 1;
        intervalId = setInterval("cycleDisplay()", milliseconds);
    }
}

// This function acts in 2 steps.
// In the first step we fade a div, and in the second step we intensify the other div.
function cycleDisplay()
{
    cycling = true;  // Set the flag that we are cycling the divs
    if (step == 1)
    {
        // Fade the div, then hide it.
        opacity -= opacityStep;
        
        setOpacity(div);
        
        if (opacity <= 0)
        {
            // opacity has reached 0, so hide the div, signal we are moving on to step 2, and switch the div we will work with
            div.style.display = 'none';
            step = 2;
            if (div == div1)
                div = div2;
            else
                div = div1;
                
            setOpacity(div);
            
            // Show the div we will be intensifying in step 2.
            div.style.display = '';
        }
    }
    else
    {
        // Intensify the div.
        opacity += opacityStep;
        
        setOpacity(div);
    
        if (opacity >= 1)
        {
            // We are done cycling the divs - kill the timer and signal that we are done.
            clearInterval(intervalId);
            cycling = false;
        }
    }
}

function setOpacity(control)
{
    // Note that for opacity, IE expects a range from 0-100 while other browsers expect a range
    // from 0-1.  Since the global opacity value is in the range of 0-1, just multiple it by 100
    // if setting it for IE.
    if (ie)
    {
        // goddamn IE!!
        if (control.style.filters && control.style.filters.item("DXImageTransform.Microsoft.Alpha"))
            // for IE8 - need to verify this works!!
            control.style.filters.item("DXImageTransform.Microsoft.Alpha").Opacity = opacity*100;
        else
            // for IE7 and previous
            control.style.filter = "alpha(opacity=" + opacity*100 +")";
    }
    else
        control.style.opacity = opacity;
}