Image directory flip book// source http://jsbin.com/ketunu

jsbin.ketunu.js

(function(w,d){
    /*Animate all images buffering 240 images at a time, 20 sec of footage 
    @ 12fps  (images/sec)
    */
    //get all image data
    var metaData = {
        cf: 0,//The current image shown
        cfs: 0, //The current buffer segment
        lfb: 0, //last buffered frame (image url number in raw array)
        buffer: [], //currently buffered images
        buffer2: [], //The buffer for when playing
        bsm: [], //buffer segment meta data ie start stops positions
        bt: 2, // buffer time seconds
        bs: 0, //buffer size (number if images in buffer)
        fr: 12, //rate of frames(images) per second
        raw: [], //raw image urls
        viewer: false //viewer init flag
    };
    
    //create the viewport
    
    var imgLinks = d.getElementsByTagName("a");//get image links
    
    function bufferImages(md, fs){
        var buffer = [];
        var buff = md.bsm[fs];
        for (var i = buff.start; i < buff.stop; i++) {
            buffer.push(preload(md.raw[i], i));
        }
        return buffer;
    }
    //Set the raw urls and set up buffer meta data, only call this once!!!
    function preprocessImages(collection, md) {
        md.bs = md.bt * md.fr;//set frame segment (duffer size)
        
        //init buffer segment meta position 1
        md.bsm.push({start: 0, stop: (md.bs - 1)});
        var bufferCounter = 1; //one manually added above
        //Clear buffer data just in case
        md.raw = [];
        for (var i = 1; i < collection.length; i++) {  
            md.raw.push(collection[i].href);
            //add new buffer segment meta object, check first to see if this is the last one, this is already precalculated
            //handle middle segments
            if (bufferCounter === md.bs) {
                md.bsm.push({
                  start: i,
                  stop: (i + md.bs - 1)
                });
                    //reset buffer counter
                bufferCounter = 0;
            }
            
            bufferCounter++;
            
            
            //buffer images manually by preloading into memory
            /**
            *@todo create preload function
            */
            
            
        }
        return md;
    }
    
    function preload(url, id){
        var img = d.createElement('img');
        img.src = url;
        img.id = id;
        return img;
    }
    
    function getMetaData(){
        return metaData;
    }
    
    function getViewer(){
        return viewer;
    }
    
    function createViewer(){
        var viewer = d.createElement('div');
        viewer.id = "viewer";
        viewer.style.width = "640px";
        viewer.style.height = "480px";
        viewer.style.marginTop = "5%";
        viewer.style.marginLeft = "auto";
        viewer.style.marginRight = "auto";
        viewer.style.backgroundColor = "#f7f7f7";
        viewer.style.backgroundSize = "50px 50px";
        viewer.style.backgroundPosition = "center";
        viewer.style.backgroundRepeat = "no-repeat";
        viewer.style.backgroundImage = "url(http://www.rsims2.com/images/spinner.gif)";
        viewer.style.border = "#121212 1px solid";
        
        return viewer;
    }
    
    function redraw(url, viewer){
        viewer.style.backgroundImage = "url(" + url + ")"; 
    }
    
    function play() {
        var md = getMetaData();
        var viewer = getViewer();
        
        //set up current buffer and clear secondary
        if (md.cf === md.bsm[md.cfs].start) {
            md.buffer = md.buffer2;
            md.buffer2 = [];
        }
        //set up viweport for frames
        if (!md.viewer) {
            viewer.style.backgroundSize = "640px 480px";
            viewer.style.backgroundPosition = "left top";
            viewer.style.backgroundRepeat = "";
            viewer.style.backgroundImage = "";
            md.viewer = true;
        }      
        //redraw

        if (md.cf < md.raw.length) {
            redraw(md.raw[md.cf], viewer);
            md.cf++;
            //check if buffering needed
            if (md.cf > md.bsm[md.cfs].start + 120) {
                md.buffer2 = bufferImages(md);
            }
            //Bump current buffer segment
        }
        
        if (md.cf === md.bsm[md.cfs].stop) {
            md.cfs++;
        }
        setTimeout(play, 500);
    }
    
    function initViewer(viewer){
        var firstElem = d.body.firstElementChild;
        if (firstElem) {
            d.body.insertBefore(viewer, firstElem);
        }
        else {
            d.body.appendChild(viewer);
        }
    }

    preprocessImages(imgLinks, metaData);
    var viewer = createViewer();
    initViewer(viewer);
    metaData.buffer2 = bufferImages(metaData, 0);
    setTimeout(function(){
        play();
    }, 5000);
    
})(window, document);