hoogte=30+2;
breedte=50+2;
aantalHokjes=hoogte*breedte;
overleven="23";
ontstaan="3";
slepend=false;
bovenVeld=false;
herhaling=-1;
soortSleep=true;
hoverID=-1;
bepaalNieuweWaarde=function() {
 var aantalBuren=0;
 for(var i=1,j=arguments.length;i<j;i++) {
  if(veld[arguments[i]])
   aantalBuren++;
 }
 aantalBuren+="";
 if((veld[arguments[0]] && overleven.indexOf(aantalBuren)!=-1) || (!veld[arguments[0]] && ontstaan.indexOf(aantalBuren)!=-1))
  return true;
 else
  return false;
};
volgendeStap=function() {
 var nieuwVeld=[];
 var t;
 for(var i=0;i<aantalHokjes;i++) {
  if(i%breedte==0 || (i+1)%breedte==0 || i<breedte || i>=aantalHokjes-breedte) {
   nieuwVeld[i]=false;
   continue;
  }
  if(bepaalNieuweWaarde(i,i-breedte-1,i-breedte,i-breedte+1,i-1,i+1,i+breedte-1,i+breedte,i+breedte+1)) {
   nieuwVeld[i]=true;
   document.getElementById("b"+i).className="levend";
  }
  else {
   nieuwVeld[i]=false;
   document.getElementById("b"+i).className="dood";
  }
 }
 generatieNummer++;
 updateGeneratie();
 veld=nieuwVeld;
};
document.onmousedown=function() {
 if(bovenVeld) {
  slepend=true;
  soortSleep=veld[hoverID];
  return false;
 }
};
document.onmouseup=function() {
 slepend=false;
};
muisOver=function(id) {
 hoverID=id;
 if(!slepend||veld[id]==soortSleep)
  return false;
 veld[id]=soortSleep;
 document.getElementById("b"+id).className=soortSleep?"levend":"dood";
 generatieNummer=0;
 updateGeneratie();
 return false;
};
klik=function(id) {
 var levendig=!veld[id];
 veld[id]=levendig;
 generatieNummer=0;
 updateGeneratie();
 document.getElementById("b"+id).className=levendig?"levend":"dood";
};
updateGeneratie=function() {
 document.getElementById("generatie").innerHTML=generatieNummer;
};
beginBeweging=function() {
 volgendeStap();
 herhaling=setInterval(volgendeStap,100);
 document.getElementById("automatisch").innerHTML="Stop";
 automatischBezig=true;
};
stopBeweging=function() {
 clearInterval(herhaling);
 document.getElementById("automatisch").innerHTML="Start";
 automatischBezig=false;
};
genereerVeld=function() {
 var t='<table id="veld">';
 var r,s;
 var id=0;
 generatieNummer=0;
 stopBeweging();
 updateGeneratie();
 veld=[];
 for(var i=0;i<hoogte;i++) {
  r='<tr>';
  for(var j=0;j<breedte;j++) {
   veld.push(false);
   if(id%breedte==0 || (id+1)%breedte==0 || id<breedte || id>=aantalHokjes-breedte) {
    id++;
    continue;
   }
   s='<td onmouseover="muisOver(';
   s+=id;
   s+=')" onmousedown="klik(';
   s+=id;
   s+=')" class="dood" id="b';
   s+=id;
   s+='">';
   r+=s;
   id++;
  }
  t+=r;
 }
 t+="</table>";
 veldOmhulselEl.innerHTML=t;
 var veldEl=document.getElementById("veld");
 veldEl.onmouseover=function() {
  bovenVeld=true;
 };
 veldEl.onmouseout=function() {
  bovenVeld=false;
 };
 veldEl.style.width=11*breedte-21+"px";
 veldEl.style.height=11*hoogte-21+"px";
};
initialiseer=function() {
 veldOmhulselEl=document.getElementById("veldOmhulsel");
 genereerVeld();
 document.getElementById("volgende").onclick=volgendeStap;
 document.getElementById("leeg").onclick=genereerVeld;
 document.getElementById("automatisch").onclick=function() {
  if(automatischBezig)
   stopBeweging();
  else
   beginBeweging();
 };
};
executeOnLoad(initialiseer);