webStore.BannerControl = function(bannerId, parentId, srcBase, numberOfImages, imageExt) {
    this.bannerId = bannerId;
    this.parentId = parentId;
    this.srcBase = srcBase;
    this.numberOfImages = numberOfImages;
    this.imageExt = imageExt;
    
    var cache = [];
    // Arguments are image paths relative to the current page.
    $.preLoadImages = function() {
        for (var i = numberOfImages; i > 0; i--) {
            var cacheImage = document.createElement('img');
            cacheImage.src = srcBase + i + "." + this.imageExt;
            cache.push(cacheImage);
        }
    }
};

/******************************************
Name: scrollImages
currentImage: Number of the image at top of list e.g. 1
parentId: the id of the parent container of images e.g. #slides
childBaseId: the base string used for the child images e.g. #slide for #slide1, 2, 3, 4
delay: Time between moving slides
speed: Speed at which slides move in
*******************************************/
webStore.BannerControl.prototype.scrollImages = function(currentImage, delay, speed) {
    var referenceToThis = this;

    var number = currentImage;
    number++;
    if (number > referenceToThis.numberOfImages) number -= referenceToThis.numberOfImages;
    var nextNumber = number + 1;
    if (nextNumber > referenceToThis.numberOfImages) nextNumber -= referenceToThis.numberOfImages;

    var newImage = referenceToThis.srcBase + number + "." + referenceToThis.imageExt;
    var nextImage = referenceToThis.srcBase + nextNumber + "." + referenceToThis.imageExt;
    $(referenceToThis.parentId).css({ backgroundImage: "url('" + nextImage + "')" }); // TODO Escape URL
    $(referenceToThis.bannerId).attr("src", newImage).css({ opacity: 1 });

    if (currentImage == referenceToThis.numberOfImages)
        currentImage = 0; //Start cycle again.

    $(referenceToThis.bannerId).delay(delay).animate({ opacity: 0 }, speed, function() { referenceToThis.scrollImages(currentImage + 1, delay, speed); });
}