var imgOrder;    
    var timer;
    var curFrame;    
    var orderIndex;  //order of index
    var maxFrames;   //maximum frames (number in rotation)
    
    function Init()
    {
        imgOrder = new Array()
        imgOrder[0] = "5"
        imgOrder[1] = "1"
        imgOrder[2] = "8"
        imgOrder[3] = "3"
        imgOrder[4] = "7"
        imgOrder[5] = "6"
        imgOrder[6] = "2"
        imgOrder[7] = "4"
        imgOrder[8] = "9"
        
        curFrame = 1
        orderIndex = 0
        maxFrames = 3
        timer = setTimeout("SwapImages()", 1000)
    }
    
    
    function SwapImages()
    {   
        var repFrame = (curFrame==maxFrames) ? 1 : (curFrame + 1)
        //hide current image
        
        //get current img for background
        var aImg = new Array()
        aImg = $(imgOrder[orderIndex] + "-" + curFrame).src.split("/")
        
        document.getElementById("box" + imgOrder[orderIndex]).style.backgroundImage = "url(images/slides/" + aImg[aImg.length - 1] + ")"
        // style="background-image:url(images/slides/1-1.jpg)"
        
        $(imgOrder[orderIndex] + "-" + curFrame).style.display = "none"
        //fade in replacement image
        
        Effect.Appear(imgOrder[orderIndex] + "-" + repFrame, {delay:.3})
        
        orderIndex += 1
        if (orderIndex==imgOrder.length)
        {
            orderIndex = 0
            curFrame = (curFrame==maxFrames) ? 1 : (curFrame + 1)
        }
        
        timer = setTimeout("SwapImages()", 1000)
    }