// including this file will cause the slideshow to start in the #slideshow div
var slideshowPath = "/site-media/images/slideshow/";
var allImages = [
    ["sabrina.jpg",     "ben.jpg",      "emmon.jpg",    "clark.jpg",    "fantix.jpg",   "antoine.jpg",  "bartuer.jpg",  "ayi.jpg"],
    ["ionut.jpg",       "vincent.jpg",  "park.jpg",     "xiaofeng.jpg", "michael.jpg",  "phyllis.jpg",  "demi.jpg"],
    ["bjorn.jpg",       "ryan.jpg",     "maria.jpg",    "ella.jpg",     "caiyan.jpg",   "ada.jpg",      "fiona.jpg",    "russel.jpg"],
    ["cheeming.jpg",    "june.jpg",     "favo.jpg",     "ken.jpg",      "lina.jpg",     "wangyan.jpg",  "jacob.jpg",    "ivy.jpg"],
    ["muriel.jpg",      "rockie.jpg",   "sandy.jpg",    "susan.jpg",    "tina.jpg",     "emily.jpg",    "martin.jpg"]
];
var images = allImages[Math.floor(Math.random() * 10) % allImages.length];
var slidesAdded=0;

function runSlideshow(timeout) {
    $('#slideshow').cycle({fx: 'scrollLeft', timeout: timeout,
        after: function(curr, next, opts)
        {
            // add the rest of the images after we view the first image
            if(opts.addSlide != undefined && !slidesAdded)
            {
                for(i = 1; i < images.length; i++)
                {
                    img = "<img src=\"" + slideshowPath + images[i] + "\" />";
                    opts.addSlide(img);
                }
                opts.nextSlide += 2; // skip the first two images
                slidesAdded=1;
            }
        }})
}

$(document).ready(function() {
    // add first image now; we need at least two images to run a slideshow
    // also measure the time it takes to load the image
    var firstImageLoadStart = new Date();
    var image = new Image();
    image.onload = function () {
        var firstImageLoadTime = new Date() - firstImageLoadStart;
        runSlideshow(firstImageLoadTime + 3000);
    };
    image.style.display = 'none';
    image.src = slideshowPath + images[0];
    document.getElementById('slideshow').appendChild(image);
});