//http://www.quirksmode.org/js/layerscroll.html
function getObj(id){
    if (document.getElementById){
        if (typeof document.getElementById(id)=="object") {
            this.obj = document.getElementById(id);
            this.style = document.getElementById(id).style;
        }
    }
    else if (document.all){
        if (typeof document.getElementById(id)=="object") {
            this.obj = document.all[id];
            this.style = document.all[id].style;
        }
    }
    else if (document.layers){
        if (typeof document.getElementById(id)=="object") {
            this.obj = document.layers[id];
            this.style = document.layers[id];
        }
    }
}

function testForObject(Id, Tag) {
  var o = document.getElementById(Id);
  if (o) {
    if (Tag) {
      if (o.tagName.toLowerCase() == Tag.toLowerCase()) {
        return true;
      }
    } else {
      return true;
    }
  }
  return false;
}

function InStr(strSearch, strSearchFor) {
    for (isi=0; isi < Len(strSearch); isi++){
        if (strSearchFor == Mid(strSearch, isi, Len(strSearchFor))){
            return isi;
        }
    }
    return -1;
}

function Len(str){
    return String(str).length;
}

function Mid(m_str, m_start, m_len) {
                // Make sure start and len are within proper bounds
    if (m_start < 0 || m_len < 0) return "";
    var iEnd, iLen = String(m_str).length;
    if (m_start + m_len > iLen) {
        iEnd = iLen;
    } else {
        iEnd = m_start + m_len;
    }
    return String(m_str).substring(m_start,iEnd);
}

function init() {
    //if (document.getElementById('news')) {
    if (document.getElementById('news')) {
        real_init('news', 0, 375, 162, 2, 0);  //content
    }
    //if (document.getElementById('f2')) {
    if (document.getElementById('f2')) {
        real_init('f2', 0, 375, 220, 2, 0);  //info profiel
    }
//    if (document.getElementById('f3')) {
//    real_init('f3', 0, 375, 67, 2, 0);  // info links
//    }
    cat_parent=0;
    cat_level=0;
    cat_pos=0;  //cat_pos is alleen hier 0. initialisatie. Bij een click wordt pos meegegeven om te weten waarop geklikt is.
    getData(cat_parent,cat_level, cat_pos, cat_id);
}

function real_init(layer, clipTop, clipWidth, clipBottom, topper, lyrheight) {
    DHTML = (document.getElementById || document.all || document.layers)
    if (!DHTML) return;
    var x = new getObj(layer);
    if (document.layers){
        lyrheight = x.style.clip.bottom;
        lyrheight += 20;
        x.style.clip.top = clipTop;
        x.style.clip.left = 0;
        x.style.clip.right = clipWidth;
        x.style.clip.bottom = clipBottom;
    }
    else if (document.getElementById || document.all) {
        lyrheight = x.obj.offsetHeight;
        x.style.clip = 'rect('+clipTop+'px,'+clipWidth+'px,'+clipBottom+'px,0)';
    }
}

function scrollayer(id,amt,tim) {
    if (!DHTML) return;
    thelayer = new getObj(id);
    if (!thelayer) return;
    amount = amt;
    theTime = tim;
    if (id=='news') {
        realscrolltext();
    }else if (id=='f2') {
        realscrollprofiel();
    }
}

function realscrolltext() {
    if (!DHTML) return;
    clipTopText += amount;
    clipBottomText += amount;
    topperText -= amount;
    if (clipTopText < 0 || clipBottomText > lyrheight){
        clipTopText -= amount;
        clipBottomText -= amount;
        topperText += amount;
        return;
    }
    if (document.getElementById || document.all) {
        clipstring = 'rect('+clipTopText+'px,'+clipWidth+'px,'+clipBottomText+'px,0)';
        thelayer.style.clip = clipstring;
        thelayer.style.top = topperText + 'px';
    }
    else if (document.layers) {
        thelayer.style.clip.top = clipTopText;
        thelayer.style.clip.bottom = clipBottomText;
        thelayer.style.top = topperText;
    }
    time = setTimeout('realscrolltext()',theTime);
}

function realscrollprofiel() {
    if (!DHTML) return;
    clipTopProfiel += amount;
    clipBottomProfiel += amount;
    topperProfiel -= amount;
    if (clipTopProfiel < 0 || clipBottomProfiel > lyrheight){
        clipTopProfiel -= amount;
        clipBottomProfiel -= amount;
        topperProfiel += amount;
        return;
    }
    if (document.getElementById || document.all) {
        clipstring = 'rect('+clipTopProfiel+'px,'+clipWidth+'px,'+clipBottomProfiel+'px,0)';
        thelayer.style.clip = clipstring;
        thelayer.style.top = topperProfiel + 'px';
    }
    else if (document.layers) {
        thelayer.style.clip.top = clipTopProfiel;
        thelayer.style.clip.bottom = clipBottomProfiel;
        thelayer.style.top = topperProfiel;
    }
    time = setTimeout('realscrollprofiel()',theTime);
}

function stopscroll() {
    if (time) clearTimeout(time);
}

function getElementsByClass(searchClass) {
    var classElements = new Array();
    //var els = document.getElementsByTagName('*');
    var els = document.getElementsByTagName('*');
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
        if ( pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }
    return classElements;
}

function show(div){
    var mydiv=div.split("|");
    if (mydiv[0]!='draaiknop' && mydiv[0]!='pijl_links'&&mydiv[0]!='pijl_rechts') {
        document.getElementById(mydiv[0]).style.visibility = "visible";
        document.getElementById(mydiv[0]).style.color = "#000000";
        //alle linkjes moeten weer op zwart gezet worden. (er is er mogelijk 1 rood) onderaan wordt de actieve weer rood gezet)
    }
    var myArr = new Array;
    myArr = getElementsByClass("titlefont");
    for (i=0;i<myArr.length; i++){
        myArr[i].style.color = "#000000";
    }
    if (mydiv[0]=='taal') {
        nws_ids.length=0;
        if (document.getElementById('fh')) { document.getElementById('fh').style.visibility = "hidden"; }
        if (document.getElementById('info_knop')) {document.getElementById('info_knop').style.visibility = "hidden"; }
        if (document.getElementById('head1')) {document.getElementById('head1').style.visibility = "hidden"; }
        if (document.getElementById('head2')) {document.getElementById('head2').style.visibility = "hidden";}
        if (document.getElementById('head3')) {document.getElementById('head3').style.visibility = "hidden";}
        if (document.getElementById('head4')) {document.getElementById('head4').style.visibility = "hidden";}
        if (document.getElementById('cntnav')) {document.getElementById('cntnav').style.visibility = "hidden";}
        if (document.getElementById('cnttitles')) {document.getElementById('cnttitles').style.visibility = "hidden";}
        if (document.getElementById('cntcontent')) {document.getElementById('cntcontent').style.visibility = "hidden";}
        if (document.getElementById('cntimage')) {document.getElementById('cntimage').style.visibility = "hidden";}
        if (document.getElementById('cntdraaiknop')) {document.getElementById('cntdraaiknop').style.visibility = "hidden";}
        if (document.getElementById('pijl_links')) {document.getElementById('pijl_links').style.visibility = "hidden";}
        if (document.getElementById('go_knop')) {document.getElementById('go_knop').style.visibility = "hidden";}
        if (document.getElementById('bld_knop')) {document.getElementById('bld_knop').style.visibility = "hidden";}
        if (document.getElementById('ro_knop')) {document.getElementById('ro_knop').style.visibility = "hidden";}
        for(j=1;j<13;j++){
            hide('next_'+j+'a');
            hide('next_'+j+'b');
        }
        licht_uit();
        if (document.getElementById('cntinfo')) {document.getElementById('cntinfo').style.visibility = "hidden";}
        if (document.getElementById('titles2')) {document.getElementById('titles2').style.visibility = "hidden";}
        if (document.getElementById('titles3')) {document.getElementById('titles3').style.visibility = "hidden";}
        if (document.getElementById('titles4')) {document.getElementById('titles4').style.visibility = "hidden";}
        if (document.getElementById('news')) {document.getElementById('news').style.visibility = "hidden";}
    } else if (mydiv[0]=='cntinfo') {
        nws_ids.length=0;
        document.getElementById('cnttitles').style.visibility = "hidden";
        document.getElementById('cntcontent').style.visibility = "hidden";
        document.getElementById('cntdraaiknop').style.visibility = "hidden";
        document.getElementById('titles2').style.visibility = "hidden";
        document.getElementById('titles3').style.visibility = "hidden";
        document.getElementById('titles4').style.visibility = "hidden";
        document.getElementById('cntimage').style.visibility = "hidden";
        document.getElementById('head2').style.visibility = "visible";
        document.getElementById('head3').style.visibility = "visible";
        document.getElementById('head4').style.visibility = "visible";
        document.getElementById('head2').style.background = "#FFFFFF";
        document.getElementById('head3').style.background = "#FFFFFF";
        document.getElementById('head4').style.background = "#FFFFFF";
        document.getElementById('news').style.visibility = "hidden";
        document.getElementById('pijl_links').style.color="#C0C0C0";
        licht_uit();
        getData(cat_parent,cat_level,cat_pos, cat_id1);
    } else if (mydiv[0]=='titles2') { //vakknop 1
        nws_ids.length=0;
        document.getElementById('fh').style.visibility = "visible";
        document.getElementById('info_knop').style.visibility = "visible";
        document.getElementById('head2').style.visibility = "visible";
        document.getElementById('head3').style.visibility = "visible";
        document.getElementById('head4').style.visibility = "visible";
        document.getElementById('cntnav').style.visibility = "visible";
        document.getElementById('cntdraaiknop').style.visibility = "visible";
        document.getElementById('titles3').style.visibility = "hidden";
        document.getElementById('titles4').style.visibility = "hidden";
        document.getElementById('cnttitles').style.visibility = "hidden";
        document.getElementById('cntcontent').style.visibility = "hidden";
        document.getElementById('cntimage').style.visibility = "hidden";
        document.getElementById('cntinfo').style.visibility = "hidden";
        document.getElementById('head2').style.background = "#DFDFDF";
        document.getElementById('head3').style.background = "#FFFFFF";
        document.getElementById('head4').style.background = "#FFFFFF";
        document.getElementById('news').style.visibility = "hidden";
        document.getElementById('titles2').innerHTML='';
        document.getElementById('cntimage').innerHTML=cLOADING;
        document.getElementById('pijl_links').style.color="#C0C0C0";
        licht_uit();
        getData(cat_parent,cat_level,cat_pos, cat_id2);
    } else if (mydiv[0]=='titles3') { //vakknop 2
        nws_ids.length=0;
        document.getElementById('fh').style.visibility = "visible";
        document.getElementById('info_knop').style.visibility = "visible";
        document.getElementById('head2').style.visibility = "visible";
        document.getElementById('head3').style.visibility = "visible";
        document.getElementById('head4').style.visibility = "visible";
        document.getElementById('cntnav').style.visibility = "visible";
        document.getElementById('cntdraaiknop').style.visibility = "visible";
        document.getElementById('titles2').style.visibility = "hidden";
        document.getElementById('titles4').style.visibility = "hidden";
        document.getElementById('cnttitles').style.visibility = "hidden";
        document.getElementById('cntcontent').style.visibility = "hidden";
        document.getElementById('cntimage').style.visibility = "hidden";
        document.getElementById('cntinfo').style.visibility = "hidden";
        document.getElementById('head2').style.background = "#FFFFFF";
        document.getElementById('head3').style.background = "#DFDFDF";
        document.getElementById('head4').style.background = "#FFFFFF";
        document.getElementById('news').style.visibility = "hidden";
        document.getElementById('titles3').innerHTML='';
        document.getElementById('cntimage').innerHTML=cLOADING;
        document.getElementById('pijl_links').style.color="#C0C0C0";
        licht_uit();
        getData(cat_parent,cat_level,cat_pos, cat_id3);
    } else if (mydiv[0]=='titles4') { //vakknop 3
        nws_ids.length=0;
        document.getElementById('fh').style.visibility = "visible";
        document.getElementById('info_knop').style.visibility = "visible";
        document.getElementById('head2').style.visibility = "visible";
        document.getElementById('head3').style.visibility = "visible";
        document.getElementById('head4').style.visibility = "visible";
        document.getElementById('cntnav').style.visibility = "visible";
        document.getElementById('cntdraaiknop').style.visibility = "visible";
        document.getElementById('titles2').style.visibility = "hidden";
        document.getElementById('titles3').style.visibility = "hidden";
        document.getElementById('cnttitles').style.visibility = "hidden";
        document.getElementById('cntcontent').style.visibility = "hidden";
        document.getElementById('cntimage').style.visibility = "hidden";
        document.getElementById('cntinfo').style.visibility = "hidden";
        document.getElementById('head2').style.background = "#FFFFFF";
        document.getElementById('head3').style.background = "#FFFFFF";
        document.getElementById('head4').style.background = "#DFDFDF";
        document.getElementById('news').style.visibility = "hidden";
        document.getElementById('titles4').innerHTML='';
        document.getElementById('cntimage').innerHTML=cLOADING;
        document.getElementById('pijl_links').style.color="#C0C0C0";
        licht_uit();
        getData(cat_parent,cat_level,cat_pos, cat_id4);
    } else if (mydiv[0]=='cnttitles') {
        nws_ids.length=0;
        licht_uit();
        document.getElementById('cnttitles').innerHTML='';
        document.getElementById("df"+mydiv[2]).style.color = "C40000";
        //getData(cat_id, parseInt(cat_level),0,mydiv[2]);
        getData(cat_id, 2,0,mydiv[2]);
        document.getElementById('news').innerHTML='';
        document.getElementById('cntimage').style.visibility = "hidden";
        document.getElementById('cntimage').innerHTML=cLOADING;
    } else if (mydiv[0]=='news') {
        document.getElementById('cntcontent').style.visibility = "visible";
        document.getElementById('news').innerHTML='';
        document.getElementById('news').style.visibility = "visible";
        document.getElementById('cntimage').innerHTML=cLOADING;
        document.getElementById('cntimage').style.visibility = "visible";
        document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
        document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
        //resetten evt nws data
        draai_de_knop(0,'D',1); //resetten van de knop
        nws_count=0;
        nws_ids.length=0;
        fill_news=true
        clipTopText=0;
        clipBottomText=162;
        topperText=2;
        amount=0;
        clipstring = 'rect('+clipTopText+'px,'+clipWidth+'px,'+clipBottomText+'px,0)';
        document.getElementById('news').style.clip = clipstring;
        document.getElementById('news').style.top=topperText+'px';
        cat_parent_parent=mydiv[1];
        cat_parent=mydiv[2];
        getData(cat_id, 4,0,mydiv[2]);
    } else if (mydiv[0]=='draaiknop') {  //lampjes op de knop
        document.getElementById('cntcontent').style.visibility = "visible";
        document.getElementById('news').innerHTML='';
        document.getElementById('cntimage').innerHTML=cLOADING;
        document.getElementById('news').style.visibility = "visible";
        document.getElementById('cntimage').style.visibility = "visible";
        document.getElementById("df"+mydiv[3]).style.color = "C40000"; //cat2
        document.getElementById("df"+mydiv[4]).style.color = "C40000";  //cat1
        fill_news=1;
        arr_pos(nws_ids,'undefined',cur_nws_id, mydiv[2]);
        getData(cat_id, 5,0,mydiv[2]);
    } else if (mydiv[0]=='pijl_links') { //pijltje onder de draaiknop of scroll omlaag.
        if (mydiv[6]=='N') { //next cat ophalen
            document.getElementById('cntcontent').style.visibility = "visible";
            document.getElementById('news').innerHTML='';
            document.getElementById('news').style.visibility = "visible";
            document.getElementById('cntimage').innerHTML=cLOADING;
            document.getElementById('cntimage').style.visibility = "visible";
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
            //resetten evt nws data
            draai_de_knop(0,'D',1); //resetten van de knop
            nws_count=0;
            nws_ids.length=0;
            fill_news=true
            clipTopText=0;
            clipBottomText=162;
            topperText=2;
            amount=0;
            clipstring = 'rect('+clipTopText+'px,'+clipWidth+'px,'+clipBottomText+'px,0)';
            document.getElementById('news').style.clip = clipstring;
            document.getElementById('news').style.top=topperText+'px';
            cat_id=cat_parent;
//alert('N wheel omlaag (links)');
            getData(cat_id,6,0,cat_parent);
        } else if (mydiv[6]=='undefined') { //volgende item in huidige cat ophalen
            document.getElementById('cntcontent').style.visibility = "visible";
            document.getElementById('news').innerHTML='';
            document.getElementById('cntimage').innerHTML=cLOADING;
            document.getElementById('news').style.visibility = "visible";
            document.getElementById('cntimage').style.visibility = "visible";
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
            fill_news=2;
//alert('undef wheel omlaag (links)');
            getData(cat_id,5,mydiv[4],mydiv[5]);
        } else if (mydiv[6]=='H') {
            //kleurtjes terugzetten want we blijven hier. niets meer op te halen
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
//alert('H wheel omlaag (links');
        }
    } else if (mydiv[0]=='pijl_rechts') { //pijltje onder de draaiknop of scroll omhoog (is terug door de content)
        if (mydiv[6]=='P') { //previous cat ophalen
            document.getElementById('cntcontent').style.visibility = "visible";
            document.getElementById('news').innerHTML='';
            document.getElementById('news').style.visibility = "visible";
            document.getElementById('cntimage').innerHTML=cLOADING;
            document.getElementById('cntimage').style.visibility = "visible";
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
            //resetten evt nws data
//            draai_de_knop(0,'U',1); //resetten van de knop (count, dir, start
            nws_count=0;
            nws_ids.length=0;
            fill_news=true
            clipTopText=0;
            clipBottomText=162;
            topperText=2;
            amount=0;
            clipstring = 'rect('+clipTopText+'px,'+clipWidth+'px,'+clipBottomText+'px,0)';
            document.getElementById('news').style.clip = clipstring;
            document.getElementById('news').style.top=topperText+'px';
            cat_id=cat_parent;
            getData(cat_id,6,-1,cat_parent);
d2=now.getTime()+500;
ff_w88:
for (d3=now.getTime();d2<d3;d3++) {
    if (nws_ids.length>1) {
        break ff_w88;
    }
}
//alert(nws_ids.length);
//alert('N wheel omhoog (rechts)');
            draai_de_knop(0,'U',nws_ids.length); //resetten van de knop (count, dir, start
        } else if (mydiv[6]=='undefined') { //vorige item in huidige cat ophalen
            document.getElementById('cntcontent').style.visibility = "visible";
            document.getElementById('news').innerHTML='';
            document.getElementById('cntimage').innerHTML=cLOADING;
            document.getElementById('news').style.visibility = "visible";
            document.getElementById('cntimage').style.visibility = "visible";
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
            fill_news=2;
//alert('undef omhoog (rechts)');
            getData(cat_id,5,mydiv[4],mydiv[5]);
        } else if (mydiv[6]=='H') {
            //kleurtjes terugzetten want we blijven hier
            document.getElementById("df"+mydiv[2]).style.color = "C40000"; //cat2
            document.getElementById("df"+mydiv[1]).style.color = "C40000";  //cat1
//alert('H omhoog (rechts)');
        }
    }
}

function hide(div){
    if (document.getElementById(div)) {
        document.getElementById(div).style.visibility = "hidden";
    }
}

function licht_uit() {
    //alle lampjes van de draaiknop uit
    if (document.getElementById('l_a1')) {document.getElementById('l_a1').style.visibility = "hidden";}
    if (document.getElementById('l_a2')) {document.getElementById('l_a2').style.visibility = "hidden";}
    if (document.getElementById('l_a3')) {document.getElementById('l_a3').style.visibility = "hidden";}
    if (document.getElementById('l_a4')) {document.getElementById('l_a4').style.visibility = "hidden";}
    if (document.getElementById('l_a5')) {document.getElementById('l_a5').style.visibility = "hidden";}
    if (document.getElementById('l_a6')) {document.getElementById('l_a6').style.visibility = "hidden";}
    if (document.getElementById('l_a7')) {document.getElementById('l_a7').style.visibility = "hidden";}
    if (document.getElementById('l_a8')) {document.getElementById('l_a8').style.visibility = "hidden";}
    if (document.getElementById('l_a9')) {document.getElementById('l_a9').style.visibility = "hidden";}
    if (document.getElementById('l_a10')) {document.getElementById('l_a10').style.visibility = "hidden";}
    if (document.getElementById('l_a11')) {document.getElementById('l_a11').style.visibility = "hidden";}
    if (document.getElementById('l_a12')) {document.getElementById('l_a12').style.visibility = "hidden";}
    document.getElementById('pijl_links').style.color="000000";
}

//wordt aangeroepen vanuit rpc_func.js
function let_there_be_light(id, start, count) {
    for (var i=1;i<count;i++) {
        document.getElementById('l_a'+i).style.visibility = "visible";
    }
    for (var j=i;j<12;j++) {
        document.getElementById('l_a'+j).style.visibility = "hidden";
    }
    var p=0; //previous
    var n=0; //next
    if (nws_count>0) {
        document.getElementById('pijl_links').style.color="FF0000";
        for (x=0;x!=nws_count;x++) {
            if (nws_ids[x]===nws_id) {
                p=nws_ids[x-1];
                n=nws_ids[x+1];
                break;
            }
        }
    }
}

//wordt aangeroepen vanuit knop.php en de functie show hierboven wanneer het element 'draaiknop' is
function arr_pos(array,dir,curval, newval) {
    //Deze functie haalt het n'de element op uit uit de opgegeven array.
    //Zowel de waarde als de positie worden teruggeven. De positie is van belang bij het ophalen van de nieuwe data bij gebruik van de knop
    //Een loopje zoekt de positie op waar de waarde 'curval' in array 'array' zit
    //Met 'dir' wordt de draairichting opgegeven U is up, D is down. Dit id alleen gevuld bij gebruik van de pijltjes of scroll wheel
    //Met newval wordt aangegeven welk ID als volgende wordt opgehaald. Deze is groter dan 0 bij gebruik van de lampjes
   //
//alert('newval='+newval);
    var l_iCurArrPos=0;
    var l_iNewArrPos=0;
    var l_iCurKnopPos=1;
    var l_iNrOfClicks=0;
    var l_sDirection='';
    var l_i=0;
//alert('array.length='+array.length+' en curval='+curval);
   // bepaal de lokatie van de huidige waarde(curval) in de array
    if (dir=='U') {
        CurArrPos_U:
        for (var li=0;li<array.length;li++){
            if (array[li]==curval) {
                l_iCurArrPos=li;
//alert('U array['+li+']='+array[li]+' en curval='+curval);
                break CurArrPos_U;
            }
        }
    } else {
        CurArrPos_D:
        for (var li=0;li<array.length;li++){
//alert('D array['+li+']='+array[li]+' en curval='+curval);
            if (array[li]==curval) {
                l_iCurArrPos=li;
                break CurArrPos_D;
            }
        }
    }
//alert('l_iCurArrPos='+l_iCurArrPos);
    // l_iCurArrPos bevat nu huidige positie van ID in de array
   // Nu bepalen welk  element uit de array nodig is
   if (newval>0) {
        //de lampjes zijn gebruikt (onderstaande 'l_iNewArrPos' kan natuurlijk best wordt opgehaald tijdens de loop waarin 'l_iCurArrPos' wordt bepaald. Vanwege de leesbaarheid van de code alleen even niet)
        for (var li=0;li<array.length;li++){
            if (array[li]==newval) {
                l_iNewArrPos=li;
            }
        }
    } else {
        //de pijltjes zijn gebruikt. naar beneden is de heenweg. Naar boven is terug scrollen
        if (dir=='U') {
            l_iNewArrPos=l_iCurArrPos-1;
        } else if (dir=='D') {
            l_iNewArrPos=l_iCurArrPos+1;
        }
        // l_iNewArrPos kan hier dus uit de array lopen.
        l_sDirection=dir;
    }
    //De huidige positie van de knop moet bepaald worden. Dit gebeurd door de hoogst visible layer van de knop te bepalen
    CurKnopPos:
    for (x=12;x!=0;x--) {
        if (document.getElementById('next_'+x+'a').style.visibility=='visible') {
            l_iCurKnopPos=x;
            break CurKnopPos;
        }
    }
    //bepalen hoeveel posities de knop gaat verdraaien en welke kant op. De knop draait het aantal posities wat tussen l_iCurArrPos en l_iNewArrPos zit. In theorie kan de knop dus best 5x rond gaan
//alert('l_iCurArrPos='+l_iCurArrPos+' en l_iNewArrPos='+l_iNewArrPos);
    if (l_iCurArrPos > l_iNewArrPos) {
        l_iNrOfClicks=l_iCurArrPos-l_iNewArrPos;
        l_sDirection='D';
    } else {
        l_iNrOfClicks=l_iNewArrPos-l_iCurArrPos;
        l_sDirection='U';
    }
    // Kijken of element l_iNewArrPos bestaat in de array 'array'
    //Zoniet dan springen we naar de eerste of laatste. Ligt eraan welke kant we op gaan
//alert('l_iNewArrPos='+l_iNewArrPos);
    if (array[l_iNewArrPos]!=undefined) {
        draai_de_knop(l_iNrOfClicks,l_sDirection,l_iCurKnopPos);
        return l_iNewArrPos+'|'+array[l_iNewArrPos];
     } else {
         if (dir=='U') {
            //bovenste item bereikt. haal de volgende cat op
//alert('cur_cat_id='+cur_cat_id+' en eerste is '+cat_ids[0]);
            if (cur_cat_id==cat_ids[0]) {
//alert('HU');
                return 1+'|'+cat_ids[0]+'|'+'H';  //hold want we zijn aan het einde
            } else {
                for(pp=0;pp<cat_ids.length;pp++) {
                    if (cur_cat_id==cat_ids[pp]) {
//alert('PU cur_cat_id='+cur_cat_id+' en cat_ids['+pp+']='+cat_ids[pp]);
                        return 1+'|'+cat_ids[--pp]+'|'+'P'; //previous cat;
                    }
                }
            }
        } else {
           //onderste item bereikt. Haal de eerste op
//alert('cur_cat_id='+cur_cat_id+' en laatste is '+cat_ids[cat_ids.length-1]);
            if (cur_cat_id==cat_ids[cat_ids.length-1]) {
//alert('HD');
                return 1+'|'+cat_ids[cat_ids.length-1]+'|'+'H';  //hold want we zijn aan het einde
            } else {
                for (pp=cat_ids.length-1;pp>-1;pp--) {
//alert('PD cur_cat_id='+cur_cat_id+' en cat_ids['+pp+']='+cat_ids[pp]);
                     if (cur_cat_id==cat_ids[pp]) {
                        return 1+'|'+cat_ids[++pp]+'|'+'N'; //next cat;
                    }
                }
            }
        }
    }
}


function draai_de_knop(count,dir,start) {
//draai_de_knop(6,'U',0);
    //draai de knop stapsgewijs het aantal posities in 'count' in de richting 'dir' te beginnen bij positie 'start'
    if (dir=='U') {
//alert(count);
        lu:
        for (li=start;li<12;li++) {
//alert('li='+li+' start='+start+' count='+count);
            if (li>eval(start+count)) {
                break lu;
            }
//evil hack
//gaat niet goed bij omhoog scrollen naar een nieuwe cat.
if (li==0) {li=1;}
//einde hack
            document.getElementById('next_'+li+'b').style.visibility = "visible";
            for (lj=1;lj<12;lj++) { //alle andere layers moeten uit
                if (lj!=eval(li+1)) {
                    document.getElementById('next_'+lj+'b').style.visibility = "hidden";
                    document.getElementById('next_'+lj+'a').style.visibility = "hidden";
                }
            }
            document.getElementById('next_'+li+'a').style.visibility = "visible";
            document.getElementById('next_'+li+'b').style.visibility = "hidden";
        }
    }
    if (dir=='D') {
        ld:
        for (li=start;li>0;li--) {
            if (li<eval(start-count)) {
                break ld;
            }
            document.getElementById('next_'+li+'b').style.visibility = "visible";
            for (lj=1;lj<12;lj++) { //alle andere layers moeten uit
                if (lj!=li) {
                    document.getElementById('next_'+lj+'b').style.visibility = "hidden";
                    document.getElementById('next_'+lj+'a').style.visibility = "hidden";
                }
            }
            document.getElementById('next_'+li+'a').style.visibility = "visible";
            document.getElementById('next_'+li+'b').style.visibility = "hidden";
        }
    }
}