window.onload = addimages;
//window.onresizeend = setTimeout(doresize, 1000);
  
var dummycnt;
var added = 0;

// image parameters
var nrimages = 19;
var arraddimages = new Array();
var arrimages = new Array();
for (dummycnt = 0; dummycnt < nrimages; dummycnt++) arrimages[dummycnt] = dummycnt;

var imagebaseURL = "publicsite/pages/paspoortjes/big_";
var imagearray = new Array();
var timeOut = null;

// resize handling
var rtime = new Date(1, 1, 2000, 12, 00, 00);
var timeout = false;
var delta = 300;

window.onresize = function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
}

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    }
    else {
        timeout = false;
        //document.body.append("<span>resizeend</span> ");
        doresize();
    }
}

function doresize() {

    removedivs();
    setTimeout(adddivs, 300);    
}

function addimages()
{
    // load available images
    var i, itext;
    for(i=0; i < nrimages; i++)
    {
        if (i < 10) itext = "0" + i; else itext = i;
        imagearray[i] =  new Image;
        imagearray[i].src = imagebaseURL + itext + ".jpg";
    }

    //removedivs();
    adddivs();    
}

function removedivs() {
    var cnt;
    for (cnt = 0; cnt < added; cnt++) {
        var e = document.getElementById('div' + cnt);
        try {
            document.body.removeChild(e);
        }
        catch (ex)
        { }
    }
}

function adddivs()
{
    // calculate nr of images to fit on screen
    var cx = document.body.clientWidth;
    //var cy = document.documentElement.clientHeight; 
    var cy = document.body.clientHeight;

    //alert(cx + " x " + cy);
    
    var nrx = (cx / 150);
    var nry = (cy / 225);
    var addspeed = 30;
    var appearspeed = 50;
    var rndxy = new Array();
    var p1 = new Array();
    var p2 = new Array();

    var x, y, cnt, cnt2, h, w;
    var cntrnd, xy;
    var idx;
    
    cnt = 0;
    cntrnd = 0;
    
    // build coordination matrix
    for(y=0; y < nry; y++)
    {
        for(x=0; x < nrx; x++)
        {
            if (((x < 2) || (x > 5)) && !((x == 1) && (y < 2 ))) 
            // site is hiding columns 2,3,4,5, menu and logo, so no need to add pics there
            {
                rndxy[cntrnd] = x + ';' + y;
                cntrnd++;
            }
        }
    }

    //alert('matrix generated! cnt = ' + cntrnd + ', matrix = ' + rndxy);

    added = 0;
    arraddimages = arrimages;
    
    // randomize appearance
    for (cnt2 = 0; cnt2 < cntrnd; cnt2++)
    {
        // get random index
        idx = Math.floor(Math.random() * (cntrnd - cnt2))
        
        // get x & y coordinates from array
        x = parseInt(rndxy[idx].split(';')[0]);
        y = parseInt(rndxy[idx].split(';')[1]);

        // delete selected record in array
        rndxy =  rndxy.slice(0, idx).concat(rndxy.slice(idx + 1))
        
        // add one image
        h = 225;
        w = 150;

        // clip last image in row and column to prevent scrollbars from appearing
        if ((x * 1.1) * 150 > cx) { w = cx - (x * 150); }
        if ((y + 1) * 225 > cy) { h = cy - (y * 225); }

        //alert('adding picture nr ' + cnt2 + ',x=' + x + ',y=' + y + 'h=' + h + ',w=' + w + ',cx=' + cx + '(' + ((x + 1) * 150) + '),cy=' + cy);
        
        setTimeout('adddiv(' + x + ',' + y + ',' + h + ',' + w + ',' + cnt2 + ');', cnt2 * addspeed);

        // increase opacity in 5 steps
        setTimeout('setopacity(' + cnt2 + ', 20);', cnt2 * appearspeed + 100);
        setTimeout('setopacity(' + cnt2 + ', 40);', cnt2 * appearspeed + 200);
        setTimeout('setopacity(' + cnt2 + ', 60);', cnt2 * appearspeed + 300);
        setTimeout('setopacity(' + cnt2 + ', 80);', cnt2 * appearspeed + 400);
        setTimeout('setopacity(' + cnt2 + ', 100);', cnt2 * appearspeed + 500);

        added++;  
    }
}

function adddiv(x,y,h,w,nr)
{
    var d = document.createElement('div');
    d.id = 'div' + nr;
    d.className = 'basicimage';

    var picnr;
    //picnr = nr % nrimages;
    
    var picidx = Math.floor(Math.random() * (arraddimages.length));
    //alert('selected idx = ' + picidx + ', matrix = ' + arraddimages);
    
    picnr = arraddimages[picidx];
    // delete selected image
    if (arraddimages.length == 1) {
        arraddimages = arrimages;
    }
    else {
        arraddimages = arraddimages.slice(0, picidx).concat(arraddimages.slice(picidx + 1));
    }
    
    
    var nrtext;
    if (picnr < 10) nrtext = "0" + picnr; else nrtext = picnr;
    var loc = imagebaseURL + nrtext + '.jpg';
    d.style.backgroundImage = 'url(' + loc + ')';
    
    d.style.position = 'absolute';
    d.style.zindex = 10;
    d.style.height = h;
    d.style.width = w;
    d.style.top = 225 * y;
    d.style.left = 150 * x;
    d.style.opacity = 0;
    d.style.filter = 'Alpha(Opacity=0)';
    document.body.appendChild(d);
}

function setopacity(nr, opa) // opa = opacity = 0..100
{
    opa = opa % 100.1; // top at 100
    var e = document.getElementById('div' + nr);
    e.style.opacity = opa/100;
    e.style.filter = 'Alpha(Opacity=' + opa + ')';
}