var width = '200';
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 = "../gfx/map/" + arr[i];
        if( document.all && img[i].complete) img[i].onload();
    }
}

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

function fertig()
{
    if(typeof what_happen_when_ready == 'function')
    	what_happen_when_ready(ok, not_ok);
    if( obj && show &&  p)
    {
    obj.style.display = 'none';
    show.style.display = 'none';
    p.style.display = 'none';
    }
}

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

    show = $('rahmen');
    show.style.left = left;
    show.style.width = width + 'px';

    p = $('panel');
    p.style.padding = '4px';
    p.style.margin = '4px';
    p.style.border = '2px groove #eee';
    p.style.top = '290px';
    p.style.left = parseInt( left ) - 10 + 'px';
    p.style.width =  parseInt(width) + 10 + 'px';
}
// 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; };
}