JQuery :: Random Image Fade Grid ?

I'm trying to use jQuery to produce something similar to this flash example [url]although I'd like the effect to be somewhat more controlled.

In a nutshell, what I'm trying to achieve is a 3 x 4 grid of (12) images which appears to load in a random order and then 1 by 1 (again in random order) fade out to be replaced by another image. I'd like the effect to be quite subtle, smooth and calming with the timing between image fades to be fairly even.

All images would be pulled from a folder on my webserver. I don't want the same image to be visible more than once at any time, although I don't mind repeating images as long as they're not already in the grid - hopefully that makes sense?

Ideally I'd like only one image to be changing at any given time with a pause before the next image starts to fade into new image.

The way I've been trying to tackle this so far is to use 12 different instances of a jquery image fade laid out in a CSS grid.

There are a few problems with my approach so far;

Doesn't appear random

Timing - multiple squares change at same time. (I only want one image to change at a time)

Same image often repeated at same time within grid

Its not long before a pattern emerges and you can tell which image will change next.

I'm sure this must be possibly, but my math or scripting skills aren't quite there yet.