$(document).ready(function () {

    var nCur    = 0;
    var nVis    = 0;
    var nLoaded = 0;
    var aImgs   = [];
    var jFrame  = $("#imgframe");
    var jBackIn = $("<img />");
    var jBackOut;
    
    jFrame.append(jBackIn);
    jBackIn.css({ display: "none", position: "absolute", top: 0, left: 0, zIndex: 1 });
    
    var putimage = function () {
        if(nCur==0) {
            jBackIn.attr("src", aImgs[nCur].attr("src")).css({ display: "block" });
            setTimeout(shownext, 3000);
        }
        if(++nCur<aBgImgs.length) loadnext();
    }
    
    var loadnext = function () {
        aImgs[nCur] = $("<img />");
        aImgs[nCur].load(putimage);
        aImgs[nCur].attr("src", aBgImgs[nCur]);
    };
    
    var shownext = function () {
        if(nVis<nCur) {
            jBackOut = jBackIn.clone();
            jBackOut.fadeOut(500, function () {
                jBackOut.remove();
            });
            jFrame.append(jBackOut);
            nVis++; if(nVis==aBgImgs.length) nVis = 0;
            jBackIn.attr("src", aImgs[nVis].attr("src"));
            jBackIn.fadeIn(500, function () {
                setTimeout(shownext, 3000);
            });
        } else {
            setTimeout(shownext, 100);
        }
    }
    
    loadnext();

});