/// <reference path="jquery-1.4.1-vsdoc.js" />


$(document).ready(function() {
    init();
});

/**
* parameters - can be modified 
* 
**/
var delay = 5000;
var duration = 5000;


/**
* global variables
*
**/
var webserviceURL = "/ws/peopleImages.asmx/PeopleImages";
var imgCache = [];      // list of images element loaded.
var srcArray = [];
var containers = null;  // container element
var cLength = 0;        // number of containers
var loadedImg = 0;      // tells how many image have been loaded
var playing = false;    // tells if slideshow has been started
var currentPhoto = [];  // hold a list of photo index currently displayed
var lastC = -1;         // index of the last updated container
var cIndex = 0;         
var pIndex = 0;         // index of the last photo displayed

/***
* call the webservice to get all images url (xml document)
*/
function init() {
    $.post(webserviceURL, this.start, "xml");
}

/**
* event handler when xml data is received.
* we preload each image and get information 
* about containers
*/
function start(xml) {
    $(xml).find('string').each(preloadImg);
    containers = $('.container');
    cLength = containers.length;
}

/**
* creates image elements and store it in an array
* when it's loaded
**/
function preloadImg() {
    var url = $(this).text();
    var img = $('<img />');
    img.attr('src', url);
    img.attr('display', 'none');
    img.load(setup);
}

/***
* event handler called on image loaded is complete.
* First thing, remove the event listener on the current image.
* Second thing, we add the loaded image src in the srcArray array.
* Then for the first images we fill up the container until
* all have an image.
* When we have at least one image per container, we start the 
* slideshow. More image will eventually be used when loaded and
* added up to the srcArray
**/
function setup() {
    // remove event listener
    $(this).unbind('load'); 
    imgCache.push($(this));
    
    // keep only the src attribute
    var src = $(this).attr('src');
    if ($.inArray(src, srcArray) == -1) {
        srcArray.push(src);
    }
    
    // display the first images asap
    if (loadedImg < cLength) {
        var c = $(containers[loadedImg]);
        
        c.find('img').attr('src',src);
        c.fadeIn(duration);
        
        pIndex = loadedImg + 1;
        currentPhoto.push(loadedImg);
    }
    else if (playing == false && loadedImg == cLength) {
        playing = true;
        interval = setInterval(change, delay);
    }
    
    loadedImg++;
    return false;
}

/**
* pick up a container and fade it out
* show function is called on fade out complete
*/
function change() {
    $(containers[cIndex]).fadeOut(duration, show);
    cIndex++;
    if (cIndex == cLength) cIndex = 0;
    
    return false;
}

/**
* pick up an image (next in the list).
* then change the src attribute of the image of the 
* current container. And then fade it in.
*/
function show() {
    var i = getNextPhotoIndex();
    //var src = srcArray[i];
    var img = $(imgCache[i]);
    var src = img.attr('src');
    
    if (src != null) {
        //$(this).find('img').attr('src', src);
        
        $(this).find('img').replaceWith(img);
        $(this).fadeIn(duration);        
    }
    
        
    return false;
}


/**
* get a the index number of the next src string
* stored in the srcArray. We just want to make sure 
* this index is not currently in use. 
**/
function getNextPhotoIndex() {
    do {
        pIndex++;
        if (pIndex == imgCache.length) {
            pIndex = 0;
        }
    } while ($.inArray(pIndex, currentPhoto) > -1)
    
    currentPhoto.shift();
    currentPhoto.push(pIndex);
    return pIndex;
}



/**
* simple wrapper for firebug console log
* do not break in IE
*/
function log(text) {
    if (typeof console == 'object'){
        console.log(text);
    }
}