if(document.getElementById)
;(function(){
// Progressbar - Version 3.0
// Author: Brian Gosselin of http://scriptasylum.com
// Featured on Dynamic Drive (http://www.dynamicdrive.com)
// PUT THE NAMES OF ALL YOUR IMAGES THAT NEED TO BE "CACHED" IN THE "imagenames" ARRAY.
// DONT FORGET THE COMMA BETWEEN EACH ENTRY, OR THE TICK MARKS AROUND EACH NAME.
// WHEN ALL IMAGES ARE LOADED, THE "progressbar_body_container" (if used) DIVISION'S DISPLAY STYLE IS SET TO BLOCK

var imagenames=new Array( '../images/holger/00.png' , '../images/holger/01.jpg' , '../images/holger/02.jpg' ,  '../images/holger/03.jpg' , '../images/holger/04.jpg' , '../images/holger/05.jpg' , '../images/holger/06.jpg' , '../images/holger/07.jpg' , '../images/holger/08.jpg' , '../images/holger/09.jpg' , '../images/holger/10.jpg' , '../images/holger/11.jpg' , '../images/holger/12.jpg' , '../images/holger/13.jpg' , '../images/holger/14.jpg' , '../images/holger/15.jpg' , '../images/holger/16.jpg' , '../images/holger/17.jpg');

var yposition=350; // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ; // PROGRESS BAR COLOR
var unloadedcolor='white'; // BGCOLOR OF UNLOADED AREA
var barheight=35; // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=350; // WIDTH OF THE BAR IN PIXELS
var bordercolor='black'; // COLOR OF THE BORDER
var usecontainer=true; // ARE YOU USING THE "progressbar_body_container" TO OBSCURE YOUR MARKUP WHILE IMAGES LOAD? (true/false)


//DO NOT EDIT BEYOND THIS POINT

var blocksize = barwidth/imagenames.length;
barheight = Math.max(barheight, 25);
var loaded = 0, perouter, perdone, images=[];
if(usecontainer)
document.write('<style type="text/css">#progressbar_body_container {visibility:hidden;}<\/style>');
var txt='<div id="perouter" style="position:absolute; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Bilder werden geladen...</font></center></td></tr></table>';
txt+='<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Bilder werden geladen...</font></center></td></tr></table>';
txt+='</div>';
txt+='</td></tr></table>';
txt+='</div>';
document.write(txt);

var loadimages = function(){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
clipdiv(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for (var n = imagenames.length - 1; n > -1; --n){
images[n] = new Image();
images[n].onload = dispbars;
images[n].src = imagenames[n];
}
}
var setouterpos = function(){
var ww = window.innerWidth? window.innerWidth : document.body.clientWidth;
var x = (ww-barwidth)/2;
perouter.style.left = x + 'px';
perouter.style.top = yposition + 'px';
}
var dispbars = function(){
clipdiv(perdone, 0, blocksize * (++loaded), barheight, 0);
if(loaded >= imagenames.length)
setTimeout(hideperouter, 800);
}
var hideperouter = function(){
perouter.style.display='none';
if(usecontainer)
document.getElementById('progressbar_body_container')?
document.getElementById('progressbar_body_container').style.visibility = 'visible' :
setTimeout(hideperouter, 100);
}
var clipdiv = function(el, ct, cr, cb, cl){
el.style.clip='rect(' + [ct, cr, cb, cl].join('px ') + ')';
}
loadimages();
})();