I am currently trying to get the below fade between random BG images working on my site...

Everything is working except that the page background goes blank randomly and there is also a random "jerk" transition without the fade effect...

Any ideas on how to correct this?

Tested and verified on:
FF 3.0.11
IE 8
NN 9.0.0.6
Opera 9.64
Safari 3.2.1
Flock 1.2.7
Google Chrome 2.0.172.33

Current CSS
Code:
body {
	/* background: url('../images/bgs/16.jpg'); */
	margin: 0px auto;
	width: 100%;
	height: 100%;
}

#backgroundImage, #overlayImage {
  position: absolute;
  width:100%;
  height: 100%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}

#content {
    position: absolute;
    z-index: 1;
}
Current JS
Code:
var fadeToRandomBackgroundImage = {
    background: document.body,
    overlayId: 'overlayImage',
    maxImages: 3,   
    imageDelay: 3000,
    stepsToFade: 10,
    stepDelay: 100,
    fadeTimer: '',
    oldImage: '',
    init: function () {
        // set background image
        var image = this.randomStyleImage();
        this.background.style.background = image;
        this.oldImage = image;
        setInterval(this.triggerNewBackground, this.imageDelay);
    },
    randomStyleImage: function () {
        // the style value for the background, which follows the lines of
        // "url(nn.jpg) center"
        return 'url(images/bgs/' + this.randomNumber(this.maxImages) + '.jpg) center';
    },
    randomNumber: function (limit) {
        return Math.floor(Math.random() * limit);
    },
    triggerNewBackground: function () {
        // as the newBackground() function has many references to the
        // this keyword, this function explicitly calls the
        // function in fadeToRandomBackgroundImage so that the this
        // keyword changes from window, to fadeToRandomBackgroundImage.
        fadeToRandomBackgroundImage.newBackground();
    },
    newBackground: function () {
        // move background image to overlay, and fade to a new background image
        var overlay = this.createOverlay();
        var image = '';
        do {
            image = this.randomStyleImage();
        } while (image === this.oldImage);
        overlay.style.background = this.oldImage;
        this.background.style.background = image;
        this.oldImage = image;
        this.removeOverlay.parent = this;
        this.prepareFade(overlay, this.removeOverlay);
    },
    createOverlay: function () {
        var overlay = document.createElement('div');
        overlay.id = this.overlayId;
        this.background.parentNode.insertBefore(overlay, this.background.nextSibling);
        return overlay;
    },
    removeOverlay: function () {
        var overlay = document.getElementById(fadeToRandomBackgroundImage.overlayId);
        overlay.parentNode.removeChild(overlay);
    },
    prepareFade: function (el, callback) {
        // fade out the given element then run the provided callback function
        var opacity = 100;
        var opacityDelta = opacity / this.stepsToFade;
        var timer = 0;
        var delay = this.stepDelay;
        this.fadeTimer = null;
        for (opacity = 100; opacity > 0; opacity -= opacityDelta) {
            this.fadeTimer = setTimeout('fadeToRandomBackgroundImage.updateOpacity("' + el.id + '", ' + opacity + ')', timer);
            timer += delay;
        }
        this.fadeTimer = setTimeout(callback, timer);
    },
    updateOpacity: function (id, opaque) {
        // cross-browser opacity setting that works across Firefox and Internet Explorer
        var el = document.getElementById(id);
        el.style.opacity = opaque / 100; // percentage
        el.style.filter = 'alpha(opacity=' + opaque + ')';
    }
};
fadeToRandomBackgroundImage.init();