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( '/storage/klaus.jpg' , '/storage/background4.jpg' , '/storage/klausclassic.jpg' , '/storage/oldfriends2.jpg' , '/storage/ochsenknecht.jpg' , '/storage/robben.jpg');

var yposition=360;          // POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='white' ;    // PROGRESS BAR COLOR
var unloadedcolor='black';  // BGCOLOR OF UNLOADED AREA
var barheight=12;           // HEIGHT OF PROGRESS BAR IN PIXELS (MIN 25)
var barwidth=550;           // 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, 39);
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+'"> <img src="/storage/COCOdone.png" alt="Carpe Noctem Creatives" width="30" height="39" vspace="0" hspace="260" border="0" align="top" > ';
txt+='<table cellpadding="0" cellspacing="0" 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">Lade Inhalt...</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"> <img src="/storage/COCOdoneb.png" alt="Carpe Noctem Creatives" width="30" height="39" vspace="0" hspace="260" border="0" align="top" >';
txt+='<table cellpadding="0" cellspacing="0" border="0"><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Lade Inhalt...</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();
})();