// Assume jquery and photo.js are already referenced.

var homepage = function() {
    var mainImageSize = { width: 200, height: 200 };
    var buckets = [
                   [], [], [], []
                   ]; // this is an array of 4 arrays, that represents the
                      // images that will be shown on the main page.
    
    var preloadImages = function(images) {
        var bucketIndex = 0;
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            buckets[bucketIndex].push(images[i]);
            bucketIndex += 1;
            if (bucketIndex >= buckets.length) {
                bucketIndex = 0;
            }
        }
    };
    
    var loadImages = function() {
        PHOTO.AJAX.getMainImages(function(data) {
            preloadImages(data);
            PHOTO.UI.hideLoader();
            replaceImage(0, '#imageBar > div:eq(0) > img', 0);
            replaceImage(0, '#imageBar > div:eq(1) > img', 1);
            replaceImage(0, '#imageBar > div:eq(2) > img', 2);
            replaceImage(0, '#imageBar > div:eq(3) > img', 3);
        });
    };
    
    var randomImage = function(bucketIndex, currentImage) {
        var imageBucket = buckets[bucketIndex];
        var num = Math.floor(Math.random() * imageBucket.length);
        if (imageBucket[num] === currentImage) {
            num += 1;
            if (num >= buckets[bucketIndex].length) { num = 0; }
        }
        return imageBucket[num];
    };
    
    var randomTimer = function() {
        return Math.floor(Math.random() * 5001) + 5000;
    };
    
    var replaceImage = function(timeout, selector, bucket) {
        setTimeout(function() {
            var img = $(selector);
            var newImage = randomImage(bucket, img.attr('src'));
            img.fadeOut('fast', function() {
                img.attr('src', newImage);
                img.fadeIn('fast', function() {
                    replaceImage(randomTimer(), selector, bucket);
                });
            });
        }, timeout);
    };
    
    return {
  
        init: function() {
            PHOTO.UI.displayLoader('#imageBar');
            loadImages();
        }
    }
}();

PHOTO.addlScripts.push(homepage);