I want to make an imagebrowser with a previous and next button, and with the imagenumber shown... But it doesn't seem to be working out as well as planned... This is my code! I really don't have a clue what's wrong...

Code:
<HTML>
<HEAD>
<script language="javascript">

  var imgCount = 8;
  img1 = new Image();
  img1.src="01.jpg";
  img2 = new Image();
  img2.src="02.jpg";
  img3 = new Image();
  img3.src="03.jpg";
  img4 = new Image();
  img4.src="04.jpg";
  img5 = new Image();
  img5.src="05.jpg";
  img6 = new Image();
  img6.src="06.jpg";
  img7 = new Image();
  img7.src="07.jpg";
  img8 = new Image();
  img8.src="08.jpg";
  
  var images = new Array;
  images[1] = img1;
  images[2] = img2;
  images[3] = img3;
  images[4] = img4;
  images[5] = img5;
  images[6] = img6;
  images[7] = img7;
  images[8] = img8;
  
  var x = 1;
  
  function nextImage(){
     if (x<imgCount){
     	++x;
     	document.afbeelding.src = images[x].src;
		Init();
     }		
  }
  
  function previousImage(){
    if (x>1){
    	x--;
    	document.afbeelding.src=images[x].src;
		Init();
    }
  }
 
  function Init(){
	document.write('<TABLE>');
	document.write('<TR><TD align="center">');
	document.write('<FONT face="Tahoma" color="white"><B>');
	document.write('<IMG src="Vorige.gif" onclick="previousImage();" onmouseover="this.style.cursor='pointer'">');
	document.write('Pagina '+x);
	document.write('<IMG src="Volgende.gif" onclick="nextImage();" onmouseover="this.style.cursor='pointer'">');
	document.write('</B></FONT></TD></TR>');
	document.write('<TR><TD><IMG src="01.jpg" name="afbeelding" width="1000"></TD></TR>');
	document.write('</TABLE>');
  }
</script>
</HEAD>

<BODY onload="Init();" bgcolor="#59307E" color="white">
</BODY>
</HTML>
Nothing appears on my screen... Why?