var bg
var bgi = 0
var bgzindex = -9000

function play() {
    count = backgrounds.length
    bgi = bgi + 1
    if(bgi == count) {
        bgi = 0
    }
    
    image = $("<img />")
        .attr({
            'src': backgrounds[bgi],
            'alt': ''
        })
    image.load(function() {
        if(bgzindex > -100 && bgi == backgrounds.length) {
            bgzindex = -9000
            $(".bg").css('zindex', bgzindex)
        }
        if($("#bg" + bgi).attr('tagName') == undefined) {
            $("#wrapper").append(
                '<div class="bg" id="bg' + bgi + '"><div><table cellspacing="0" cellpadding="0"><tr><td><img src="' + backgrounds[bgi] + '" alt="" /></td></tr></table></div></div>'
            )
        }
        $("#bg" + bgi)
            .css({'z-index': bgzindex, 'opacity': 0})
            .animate({
                'opacity': 1
            }, 1000)
        bgzindex = bgzindex + 1
    })
}

function playBg() {
    bg = setInterval("play()", 10000)
}

$(document).ready(function() {
    $(".bg img")
        .attr({
            'src': backgrounds[0]
        })
    
    playBg()
})