var aboutTab, viewAllTitlesTab;  // The tab elements
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 fadeDiv;            // the div we will fade
var intensifyDiv;       // the div we will intensify
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?

var selectedTitleOrTab = "bio_tab"; // The id of the currently selected title from the left menu,
                                    // or the id of the currently selected 'About' or 'View All Titles' tab
var selectedScrollerBook = "scroller_book1";  // The id of the currently selected book in the scroller

function load()
{
    aboutTab = document.getElementById("bio_tab");
    viewAllTitlesTab = document.getElementById("all_tab");
    ie = (document.all) ? 1 : 0;
    cycling = false;
}

function mouseEnteredScrollerBook()
{
    var elem = $(document.getElementById("carousel"));
    var i = 1;
    
}

function mouseExitedScrollerBook()
{
    
}
 
function bookInScrollerClicked(control)
{
    // If the user is clicking a book that is already selected then there is nothing to do.
    if (control.id == selectedScrollerBook)
        return;

    // Hide the div associated with the previously selected scroller book.
    // Because of the way the id's are setup, we only need to append "_preview" to the passed in
    // control's id to get the control for the associated div in the preview area.
    document.getElementById(selectedScrollerBook + "_preview").style.display = "none";

    // Show the new preview.
    document.getElementById(control.id + "_preview").style.display = "block";
    
    // Set the variable tracking the currently displayed book from the scroller.
    selectedScrollerBook = control.id;
}

function bookTitleOrTabClicked(controlid)
{
    // If we are in the process of cycling then just get out of here.
    if (cycling)
        return;

    // If the user selected the title or tab that is already selected then just get out of here.
    if (controlid == selectedTitleOrTab)
        return;

    // Determine the div we will fade.
    if (selectedTitleOrTab == "bio_tab")
        fadeDiv = document.getElementById("Bio");
    else if (selectedTitleOrTab == "all_tab")
        fadeDiv = document.getElementById("All");
    else
    {
        // Because of the way the id's are setup, we just need to append "_div" to the id of the selected title.
        // If this association is changed in the html then this will also need to be modified.
        fadeDiv = document.getElementById(selectedTitleOrTab + "_div");
        
        // Turn off the background color that was signalling this item as selected.
        document.getElementById(selectedTitleOrTab).style.backgroundColor = "";
    }

    // Determine the div we will intensify.
    if (controlid == "bio_tab")
        intensifyDiv = document.getElementById("Bio");
    else if (controlid == "all_tab")
        intensifyDiv = document.getElementById("All");
    else
    {
        // Because of the way the id's are setup, we just need to append "_div" to the id of the selected title.
        // If this association is changed in the html then this will also need to be modified.
        intensifyDiv = document.getElementById(controlid + "_div");
        
        // Turn on a background color that will signal this item as selected.
        document.getElementById(controlid).style.backgroundColor = "#FFC";
    }
    
    opacity = 1;
    step = 1;
    intervalId = setInterval("cycleDisplay()", milliseconds);
    
    // Set the variables tracking the id of the currently selected title or tab.
    selectedTitleOrTab = controlid;
}

// 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;
        if (opacity < 0)
            opacity = 0;
        
        setOpacity(fadeDiv);
        
        if (opacity <= 0)
        {
            // opacity has reached 0, so hide the div and signal we are moving on to step 2
            fadeDiv.style.display = 'none';
            step = 2;

            // If the div is associated with one of the tabs then set the tab's className property to be 'tab'.
            if (fadeDiv.id == "Bio")
                aboutTab.className = "tab";
            else if (fadeDiv.id == "All")
                viewAllTitlesTab.className = "tab";
            
            // Show the div we will be intensifying in step 2.
            setOpacity(intensifyDiv);
            intensifyDiv.style.display = '';
        }
    }
    else
    {
        // Intensify the div.
        // If the div is associated with one of the tabs then set the tab's className property to be 'tab tab_on'.
        if (intensifyDiv.id == "Bio")
            aboutTab.className = "tab tab_on";
        else if (intensifyDiv.id == "All")
            viewAllTitlesTab.className = "tab tab_on";

        opacity += opacityStep;
        if (opacity > 1)
            opacity = 1;
        
        setOpacity(intensifyDiv);
    
        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;
}