var top = 1000;
var height = '1.5em';
var width = '200';
var bgColor = '#333';

var obj, size, t1, show, p;
var ok = not_ok = 0;
var what_happen_when_ready = show_status;

function preloader(arr, func)
{
    if(typeof arr != 'object' || !arr.length) return;
    if(func) what_happen_when_ready = func;

    addProgressBar();
    if(obj && show)
    {
         obj.style.display = 'block';
         obj.style.width = 0;
         show.style.display = 'block';
         show.innerHTML = '0 %';
    }

    ok = not_ok = size = 0;
    t1 = new Date();
    var img = new Array();
    for(var i = 0; i < arr.length;i++)
    {
        img[i] = new Image();
        img[i].onload = function() {
            ok++;
            if(typeof this.fileSize != 'undefined') size += parseInt(this.fileSize);
            progress((ok + not_ok), arr.length);
            if(ok + not_ok == arr.length) fertig();
        }
        img[i].onerror = function() {
            not_ok++;
            progress((ok + not_ok), arr.length);
            if(ok + not_ok == arr.length) fertig();
        }
        img[i].src = arr[i];
        if( document.all && img[i].complete) img[i].onload();
    }
}

function fertig()
{
    var speed = 'unbekannt';
    if(size)
    {
       var t2 = new Date() - t1;
       speed = parseInt(size / t2 * 1000 / 1024 ) / 10;
    }
    if(typeof what_happen_when_ready == 'function')
    what_happen_when_ready(ok, not_ok, speed);
    if( obj && show &&  p)
    {
    obj.style.display = 'none';
    show.style.display = 'none';
    p.style.display = 'none';
    }
}

function show_status(ok, not_ok, speed)
{
    alert( 'preload in:'
           + speed + ' kb/s' + '\n'
           + ok + ' Bild' + (ok > 1 ? 'er' : '') + ' OK!\n'
           + not_ok + ' Bild' + (not_ok > 1 ? 'er konnten' : ' kann') + '  nicht geladen werden.'
    );
}

function progress(num, von)
{
    if(!obj || !show) return;
    var p = parseInt( num / von * 100);
    obj.style.width = parseInt(p/100*width)+'px';
    show.innerHTML = p + '%';
}
function addProgressBar()
{
    if(obj) return;

    obj = addLayer('progressBar');
    if(!obj) return;

    obj.style.backgroundColor = bgColor;
    obj.style.top = top+ 'px';
    obj.style.height = height;
    obj.style.left = '50%';
    var left = parseInt( get_left(obj) - (width / 2 )) + 'px';

    obj.style.left = left;
    obj.style.zIndex = 2;

    show = addLayer('rahmen');

    show.style.top = top+ 'px';
    show.style.height = height;
    show.style.left = left;
    show.style.width = width + 'px';
    show.style.textAlign = 'center';
    show.style.zIndex = 3;
    show.style.color = '#fff';

    p = addLayer('panel');
    p.style.backgroundColor = '#ddd';
    p.style.padding = '5px';
    p.style.margin = '5px';
    p.style.border = '2px groove #eee';
    p.style.top = (top -10) + 'px';
    p.style.left = parseInt( left ) - 10 + 'px';
    p.style.width =  parseInt(width) + 10 + 'px';
    p.style.height =  height;

    p.style.zIndex = 1;
}
// getwidth
if(window.getComputedStyle)
{
get_width  = function(o) { return parseInt( window.getComputedStyle(o, "").getPropertyValue('width'));};
get_left   = function(o) { return parseInt( window.getComputedStyle(o, "").getPropertyValue('left'));};
}
else if(document.getElementById || document.all)
{
get_width  = function(o) { return o.offsetWidth;};
get_left   = function(o) { var x = 0; while (o) { x += parseInt(o.offsetLeft ); o = o.offsetParent;  } return x; };
}

// addLayer
function addLayer(id, win)
{
    if(!win) win = window;

    if (window.document.body.appendChild)
    {
         var test = document.createElement('div');
         test.id = id;
         test.style.position = 'absolute';
         win.document.body.appendChild(test);
         return test;
    }
    else if (document.body.insertAdjacentHTML)
    {
         win.document.body.insertAdjacentHTML("afterBegin", '<div style="position:absolute" id="' + id + '"></div>');
         return win.document.all[id];
    }
    else if (win.body.innerHTML)
    {
         win.body.innerHTML += '<div style="position:absolute" id="' + id + '"></div>';
         return win.document.all[id];
    }
    return null;
}