//initialise image slots
var imageArray = new Array();
imageArray[1] = "1";
imageArray[2] = "2";
imageArray[3] = "3";
imageArray[4] = "4";
var unusedImage = "5";
var lastSlot = 0

function cycleImages() {
    //choose a slot to change & ensure that its different to the previous slot
    var i = lastSlot
    while (i==lastSlot) {i = Math.ceil(Math.random() * 4)}
    lastSlot = i

    //fade out current image
    fade(i, imageArray[i], "out")

    //fade in next image (delayed 0.5 sec)
    setTimeout("fade(" + i + ", " + unusedImage + ", 'in')", 500)

    //swap old image, with unused image 
    var temp = imageArray[i];
    imageArray[i] = unusedImage;
    unusedImage = temp;

    //loop (delayed 3 sec)
    setTimeout("cycleImages()", 3000);
}

function fade(slot, image, type) {
    //replace image in document
    document['fade' + slot].src = "images/fade_" + type + "_" + image + ".gif"
}

//kick it off (delayed 2 sec)
setTimeout("cycleImages()", 2000);