// site.js
//
// Author: Nate Silva
// Date: January 28, 2009
//
// This implements the front page slideshow.
//
// I ♥ jQuery.  <-- you are viewing this in UTF-8, right? :-)
//
//  -- Nate


// These are the slideshow images. They should be 630 x 293. It's
// not a magic number, it's just a size I thought looked good.
var images = [
    {src: 'images-r1/waipio.jpg', caption: 'Waipio Valley, Hawaii (2007)'},
    {src: 'images-r1/bahamas.jpg', caption: 'Cat Island, Bahamas (2005)'},
    {src: 'images-r1/kerry_cat.jpg', caption: 'County Kerry, Ireland (2006)'},
    {src: 'images-r1/oregon_coast.jpg', caption: 'Oregon Coast (2008)'},
    {src: 'images-r1/zion.jpg', caption: 'Zion National Park (2004)'},
    {src: 'images-r1/waimea.jpg', caption: 'Waimea, Hawaii (2007)'},
    {src: 'images-r1/monument_valley.jpg', caption: 'Utah/Arizona Border (2003)'},
    {src: 'images-r1/modeling.jpg', caption: 'Promotional Modeling (2006)'},
    {src: 'images-r1/trinity.jpg', caption: 'Dublin, Ireland (2006)'},
    {src: 'images-r1/southend.jpg', caption: 'Southend-on-Sea, UK (2006)'},
    {src: 'images-r1/cherry_orchard.jpg', caption: 'Columbia River Gorge (2006)'},
    {src: 'images-r1/lucerne.jpg', caption: 'Lucerne, Switzerland (2006)'},
    {src: 'images-r1/nice.jpg', caption: 'Côte d’Azur, France (2006)'},
    {src: 'images-r1/vancouver_wa.jpg', caption: 'Vancouver, Washington (2007)'},
    {src: 'images-r1/mount_hood.jpg', caption: 'Mount Hood (2007)'},
    {src: 'images-r1/birth.jpg', caption: 'Maternity Ward (2007)'},
    {src: 'images-r1/home.jpg', caption: 'Home (2007)'},
    {src: 'images-r1/disney_world.jpg', caption: 'Walt Disney World (2004)'}
];


jQuery(function($) {
    // Randomize the image sequence, keeping the first one in place.
    // The first image is displayed by an <img> tag before we get
    // here, so the page still works for those who don't have
    // JavaScript. The rest of the images are shown in a different
    // order each time the page is loaded.
    var rest_of_images = images.slice(1);
    shuffleArray(rest_of_images);
    images = images.slice(0, 1).concat(rest_of_images);
    var iteration = 0;

    // Pre-cache the images in the order they will be shown, so the
    // slide show can begin even if all the images haven't loaded.
    $.each(images, function() {
        var image = this;
        image.loaded = false;
        $('<img>').load(function() {
            image.loaded = true;
        }).attr('src', image.src);
    });

    // fades from the current image to the next one
    function showNextImage() {
        // get the two <img> tags that we fade between
        var slideshow_img_tags = $('#slideshow .slideshow_image');
        var img_to_hide = slideshow_img_tags[iteration % 2];
        var next_iteration = (iteration + 1) % images.length;
        var img_to_show = slideshow_img_tags[next_iteration % 2];

        // get the next image (bail out if it hasn't pre-loaded yet)
        var item = images[next_iteration % images.length];
        if (!item.loaded) return;
        iteration = next_iteration;

        // prepare the new image
        $(img_to_show).attr('src', item.src);
        $(img_to_show).attr('alt', item.caption);
        $('#image_caption').text(item.caption);

        // do the fade
        $(img_to_hide).fadeOut(1500);
        $(img_to_show).fadeIn(1500);
    }

    // And here's a timer that periodially changes the image. The
    // first image changes faster, so visitors notice there's a
    // slide show. After that, each image hangs around a while.
    setTimeout(function(){
        showNextImage();
        setInterval(function() {showNextImage();}, 8000);
    }, 4000);
});


// Randomly shuffle an array (in-place) using the Fisher-Yates
// algorithm.
function shuffleArray(a) {
    var n = a.length;
    while (n > 1) {
        var k = Math.floor(Math.random() * n);
        n--;
        var temp = a[n];
        a[n] = a[k];
        a[k] = temp;
    }
}