// PhotoRotation.js
// ----------------
// Handles the rotating photo slideshow on the Overview page.


// CONSTANTS & GLOBALS
        
var ROTATING_PHOTOS = Array( 
    'Images/OverviewSlideshow1.jpg', 
    'Images/OverviewSlideshow2.jpg', 
    'Images/OverviewSlideshow3.jpg',
    'Images/OverviewSlideshow4.jpg',
    'Images/OverviewSlideshow5.jpg' );
var FADE_TIME = 2000;
var SLIDE_INTERVAL = 5000;
var INITIAL_INTERVAL = 3000;
var m_PhotoIndex = 0;



// FUNCTIONS

// Fades in the next photo in the slideshow.
function NextPhoto() {
    
    // Move to the next photo - return to start if needed
    m_PhotoIndex++;
    if ( m_PhotoIndex >= ROTATING_PHOTOS.length ) {
        m_PhotoIndex = 0;
    }
    
    // Create the fade layer
    var photoHtml = '<img class="overview-main-photo" alt="" src="' + 
        ROTATING_PHOTOS[ m_PhotoIndex ] + '" />';
    $( '.overview-main-photo' ).after( photoHtml );
    $fadeLayer = $( '.overview-main-photo:eq(1)' );
    $fadeLayer.hide();
    
    // Fade it in & remove the old photo when finished
    $fadeLayer.fadeIn( FADE_TIME, function() {
        $( '.overview-main-photo:eq(0)' ).remove();
    } );
    
} // end NextPhoto()



// MAIN SCRIPT

// When the document is ready, set up the slide-change interval
$( function() {

    // Make the initial delay short, then fade at the regular interval
    setTimeout( 
        function() {
            NextPhoto();
            setInterval( NextPhoto, SLIDE_INTERVAL );
        }, 
        INITIAL_INTERVAL 
    );
    
} );