var imageFiles = null;
var altTags = null;
var timerID = 0;
var leaderIMG = 0;              // this holds the index number (0-5) of whichever <IMG> tag is currently left-most on screen
var nextImageFileToDisplay = 5; // this is pre-populated with the index of the last <IMG> tag
var distance = 1;               // amount (in pixels) to move each image during animation cycle
var rate = 24;                  // time (in milliseconds) between moves

function startScroll() {
    if (xGetElementById("scrollMarquee") && xGetElementById("scrollMarquee").value == "true") 
        timerID = window.setInterval("shiftImages()", rate);
}

function pauseScroll() {
    if (timerID > 0) {
        clearInterval(timerID);
        timerID = 0;
    }
}

function shiftImages() {
    // if left-most image at 0, move to end and change src
    var leftmostImage = xGetElementById("marqueeImage" + leaderIMG);
    if (leftmostImage.offsetLeft == 0) {
        leftmostImage.style.left = "1248px";
        leaderIMG++;
        if (leaderIMG > 5) leaderIMG = 0;   // the first <IMG> (0) immediately follows the last (5)
        
        // after having moved this <IMG>, populate with next image from array
        nextImageFileToDisplay++;
        if (nextImageFileToDisplay > (imageFiles.length - 1)) nextImageFileToDisplay = 0;
        
        leftmostImage.src = imageFiles[nextImageFileToDisplay];
        leftmostImage.alt = altTags[nextImageFileToDisplay];
        leftmostImage.title = altTags[nextImageFileToDisplay];
    }
    
    // shift all <IMG>s to the left
    for (var i = 0; i < 6; i++) {
        var currentImage = xGetElementById("marqueeImage" + i);
        currentImage.style.left = (parseInt(currentImage.offsetLeft) - distance) + "px";
    }
}