function LoadFrame(frameIndex){    
    var imageIndex = frameIndex * FRAME_SIZE;
    if(imageIndex >= 0 && imageIndex < aryImages.length){            
        //display current frame
        DisplayFrame(frameIndex);
        
        //if moving forward and there is a next frame, cache next frame            
        if(frameIndex > CURRENT_FRAME && (frameIndex + 1) * FRAME_SIZE < aryImages.length){
            CacheFrame(frameIndex + 1);
        }
        CURRENT_FRAME = frameIndex;
    }
}

function DisplayFrame(frameIndex){
    var div = document.getElementById("divItems");           
    HorizontalSlideTo(div, FRAME_WIDTH * frameIndex * -1)            
}

function CacheFrame(frameIndex){
    var startIndex = frameIndex * FRAME_SIZE;
    for(var i=startIndex; i<startIndex + FRAME_SIZE; i++){
        var img = document.getElementById("img" + i);                
        
        if(i < aryImages.length){            
            img.style.display = "inline";
            img.src = aryImages[i];
        }
        else if(img){
            img.style.display = "none";
        }
    }
}

var DIRECTION = 1;
var ELEMENT = null;
var DISTANCE = 0;
        
function HorizontalSlideTo(element, x){
   
    ELEMENT = element;
    var initialX = parseInt(element.style.left);
    
    if(initialX > x){
        DIRECTION = -1;
    }
    else{
        DIRECTION = 1;
    }
    
    DISTANCE = Math.abs(initialX - x);
    
    setTimeout(DoHorizontalSlide, 7);            
}

function DoHorizontalSlide(){   
    
    if(DISTANCE > 0){
        var currentX = parseInt(ELEMENT.style.left);
        ELEMENT.style.left = (currentX + (SPEED * DIRECTION)) + "px";
        DISTANCE = DISTANCE - SPEED;
        setTimeout(DoHorizontalSlide, 7);
    }
}