blocks and random colors / images javascript experiment

test-bgscript.js

var colors = new Array(
    [116,143,138],
    [78,117,143],
    [191,206,197],
    [0,40,40],
    [0,60,60],
    [0,80,80],
    [0,100,100],
    [165,187,181],
    [134,160,154],
    [178,194,189],
    [152,178,173],
    [209,219,210],
    [224,229,224],
    [240,255,245],
    [255,255,255]
);
function rgb2hex(arr){
    // input array rgb colors e.g. [0,40,40]
    var hexColor = "";
    for(var i=0;i<3;i++){
        var hexArray = new Array( "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F" );
        var code1 = Math.floor(arr[i] / 16);
        var code2 = arr[i] - code1 * 16;
        hexColor += hexArray[code1];
        hexColor += hexArray[code2];
    }
    return (hexColor);
}

var rStack = new Array();
function rStackInit(){
    // build zero indexed array of randomised integers (1-100)
    var key = null;
    for (var i=1;i<=100;i++) {
        key = i-1;
        rStack[key] = i;
    }
    var randOrd = function(){
        return (Math.round(Math.random())-0.5);
    }
    rStack = rStack.sort(randOrd) // randomise stack
    return rStack;
}
rStackInit();

//------------
var useColors = true; // write css colors or not..
var bgFast = false; // write css colors or not..
var rvse = true; // use the same random pattern in reverse when displaying images
var r = 0;
var bg = "";

function drawBgDiv(){
    for (var i=1;i<=100;i++) {
        $("#bg").append("<div id=\"b_"+i+"\" class=\"briq\"></div>");
        if (useColors){
            r = Math.floor(Math.random()*15);
            bg = "#"+rgb2hex(colors[r]);
            $("#b_"+i+"").css({'background':bg});
        }
    }
    if (i==101){
        i = 0;
        if (bgFast){
            setTimeout( "showBgFast();", 200);
        }
        else {
            setTimeout( "showBg();", 200);
        }

    }
}

var i = 0;
var b = 0;
function showBgFast(){
    for (i=0;i<=100;i++) {
        if (i==100){
            b = 0;
            if (rvse) {
                i--;
                setTimeout( "drawImgRvse();", 0);
                break;
            } else {
                i = 0;
                setTimeout( "drawImg();", 0);
                break;
            }
        }
        else {
            b = rStack[i]; // get (a)next) random number from the stack
            $("#b_"+b+"").css({'visibility':'visible'});
        }
    }
}
/// -- this pair of functions loops x100
function showBg(){
    if (i==100){
        b = 0;
        if (rvse) {
            i--;
            setTimeout( "drawImgRvse();", 0);
        } else {
            i = 0;
            setTimeout( "drawImg();", 0);
        }
    }
    else {
        b = rStack[i]; // get (a)next) random number from the stack
        $("#b_"+b+"").css({'visibility':'visible'});
        i++;
        setTimeout( "bounce_showBg();", 0);
    }
}
function bounce_showBg(){
        setTimeout( "showBg();", 0);
}
/// -- this pair of functions loops x100
function drawImgRvse(){
    b = rStack[i]; // get a random number from the stack
    $("#b_"+b+"").html("<img class=\"bimg2\" src=\"graphics/bg/bg_"+b+".jpg\" alt=\"\" />");
    if (i==0){
        // exit
    }
    else {
        i--;
        setTimeout( "bounce_drawImgRvse();", 1);
    }
}
function bounce_drawImgRvse(){
        setTimeout( "drawImgRvse();", 1);
}
/// -- this pair of functions loops x100
function drawImg(){
    if (i>=100){
        // exit
    }
    else {
        b = rStack[i];
        $("#b_"+b+"").html("<img class=\"bimg2\" src=\"graphics/bg/bg_"+b+".jpg\" alt=\"\" />");
        i++;
        setTimeout( "bounce_drawImg();", 10);
    }
}
function bounce_drawImg(){
        setTimeout( "drawImg();", 1);
}
//-------------------------------------------------

function maskSize() {
    // adjust bgMask for Client screen res
    var h = $(window).height()+'px';
    $("#bgMask").css({'height':h});
}

$(document).ready(function(){  
    
    $("#bg").html();
    drawBgDiv(); // dynamically draw the bg blocks and attach bg images
    
    maskSize(); // resize and scale bg mask
    var resizeTimer = null; // resize bg mask as browser window is resized
    $(window).bind('resize', function() {  
        if (resizeTimer) clearTimeout(resizeTimer);
        resizeTimer = setTimeout(maskSize, 5);
    });
});