k=0;
incr=1;
scrollinterval=null;
nr_loaded=0;
percent=0;

function loaded(){
nr_loaded+=1;
percent+=Math.floor(100/preloadarray.length);
document.getElementById("counter").innerHTML="Loading: "+percent+"%";
if(nr_loaded==preloadarray.length) {scrollinterval=setInterval('show_buttons()',50);
document.getElementById("counter").innerHTML="Loading: 100%"}
}

function startpreloader(){
document.getElementById("counter").innerHTML="Loading: 0%";

preloadarray=new Array(
"images/biography.jpg",
"images/gallery.jpg",
"images/contact.jpg",
"images/links.jpg",
"images/biographyactive.jpg",
"images/biographyhover.jpg",
"images/galleryactive.jpg",
"images/galleryhover.jpg",
"images/contactactive.jpg",
"images/contacthover.jpg",
"images/linksactive.jpg",
"images/linkshover.jpg",
"images/buttondownactive.gif",
"images/buttondownfilan.gif",
"images/buttonupactive.gif",
"images/buttonupfinal.gif",
"images/palette.jpg",
"images/portret.jpg",
"images/thumbnailhill45x60acrylcanvas.jpg",
"images/thumbnaillandscape50x50acrylcanvas.jpg",
"images/agetpicture.gif",
"images/artatoo.gif",
"images/galeriegate.jpg",
"images/landscape50x50acrylcanvas.jpg",
"images/reset.gif",
"images/resethover.gif",
"images/submit.gif",
"images/submithover.gif")

for (i in preloadarray){
eval("image"+i+"=new Image()")
eval("image"+i+".onload=function(){loaded()}")
eval("image"+i+".src='"+preloadarray[i]+"'")
}

}

spanarraytop=new Array(
"row3_left",
"row3_right",
"row3_middle",
"middle_top_cr")

spanarraybottom=new Array(
"row4_left",
"row4_right",
"row4_middle",
"middle_bottom_cr")


function show_buttons(){
k++;

for(i in spanarraytop){

topposition=parseInt(document.getElementById(spanarraytop[i]).offsetTop)+incr;
document.getElementById(spanarraytop[i]).style.top=topposition+"px";
}

for(i in spanarraybottom){
topposition=parseInt(document.getElementById(spanarraybottom[i]).offsetTop)-incr;
document.getElementById(spanarraybottom[i]).style.top=topposition+"px";
}

if(k==17) {

document.getElementById('buttons').style.display='';
document.getElementById('counter').style.display='none';
document.getElementById('bio').src=image0.src;
document.getElementById('gal').src=image1.src;
document.getElementById('con').src=image2.src;
document.getElementById('lin').src=image3.src;

incr=-1;
}

if(k==34) {clearInterval(scrollinterval)}
}