// This library is written by Egbert Bleyenburg for the Koninklijke Bibliotheek
//     some of the text are written in English
//         andere in het Nederlands
//       maar net hoe me de pet stond
//
// copyrights Egbert Bleyenburg egbert@zzln.nl
//            ZEEZEILEN         zzln@zzln.nl
//            and the KB
// scripts are free for use by all KB programmers as long as credits are given
// 
//
// !!!!!!!!!!  - EVENTUELE BUGs IN LIBRARY (dutch)-  !!!!!!!!!!!!!!!

//1 LIBRARYNAME BUG
// It is important after FTPing to check whether the name of the library is 'posterLib.js'  instead of 
// 'posterlib.js'. You could also change all references and links but thats a lot more work. 
//
//2  MACBUG
//
// In loadhigher defenitionimage wordt steeds een nieuwe loadchild functie weggestuurd om over enige tijd 
// te worden uitgevoerd,wanneer echter de hogere defenitie image niet of niet meer op de server staat checkt 
// ie dat en houdt ie op.
// Loadhigherdefenitionimage() Laadt het hogere defenitie image in een object en stuurt een Loadchild weg
// met een settimeout:Loadchild checkt adhv de complete-property of de image al in het object geladen is.
// en schrijft hem dan pas naar de source van de imagetag in de poster. Dit is gedaan om een mooi verloop
// van lage defenitie naar hogere defenitie te maken. Het is allemaal heel vanzelfsprekend, alleen kan het
// gebeuren dat een image niet op de server staat, dan crasht de boel, dus dat moeten we niet hebben.
// Als een image niet op de server staat moet ie ophopuden met laden en het lagere defenitieimage in de 
// poster laten staan.
// Deze check is voor de verschillende browsers op de verschillende platforms verschillend

// WINDOWS
//   Explorer  
//      Wanneer Image niet op server blijft Complete=false;
//     Image.height wordt 30 en Image.width wordt 28;
//     CHECK (complete=false en height=30) --> Image niet op server
//
//   Netscape
//
//   Deze check kijkt voor explorer of de hoogte van het image 30 is. Complete is dan false.
// Bij Netscape wordt Cpmlete true maar blijft de hoogte nul, ipv de hoogte van het image.
// Wanneer dit ooit veranderd bij een andere browser versie kan er van alles misgaan. wanneer een leegt plaatje
// word geladen crasht de browser.
// Voor de Mac heb ik de boel nog niet opgelost.
// Dus tot nu toe crasht ie in de mac wanneer een image niet op de server staat.
// In knoppen html wordt ene soortgelijke test uitgevoerd om een netscape foutmelding te ontwijken.
// daar staat ook MACBUG
//
//
// *********This library is used to define and handle the ZZLN_POSTER objects****************
//   These are a construction of twe separate layers, one of which can be used to show an Image
//   Under the image is a simple toolbar on which there are two buttons, one to enlarge the image
//   using the fumnction makeremote() and one to hide the ZZLN_POSTER layer.
//   The other layer is used to contain a lint.

//   When a document containing the poster-layers is loaded, the poster-layers are always positioned
//   above the top of the page. Only the linten are shown, hanging down. You can drag the posters
//   down by these lints, or you vcan use the function ZZLN_UpOrDownDiv() to show the total top
//   layer.
//
//
//    ----------------------
//    |                    |
//    |                    |
//    |                    |
//    |                    |
//    |     Image          |        layer called: id =poster'i'
//    |called IMG_poster'i'|        where i is the index
//    |                    |        
//    |                    |        A contains enlarge image
//    |       ------       |        B contains image called loadimage_'i'
//    |       |over|       |        C contains hide image
//    |       |-lap|       |        A contains enlarge image
//    | ------------------ |
//    | A |      B     | C |
//    ----------------------  _________
//_____________________________extraup_________________________     top of page
//            |    |
//            |lint|       layer called id=lint'i'
//            |    |       contains image of lint
//            |    |
//            |    |
//            ------
//
// Both layers work as one. When you drag the lint you drag the poster and vice versa.
//
//
// Almost all information is written to an apart object called ZZLN_POSTER[i]
// The only information directly attached to the layers itselve are the four properties
//
//              ZZLN_Index,              index of layer as ZZLN_POSTER object
//              ZZLN_Lint,               if the layer is a lint or a poster
//              ZZLN_DragOk,             if this is a draggable layer. (Used to differ layer from any other layers in document)
//              ZZLN_AssociatedObj,      Reference to or the poster or the lint
//
//
//HTML CODE
// DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH DUTCH
// Wanneer je posters in de documenten wil plakken doe dan het volgende:
//
// Schrijf het poster en lint als volgt in de html code, elke $variable moet je vervangen door een getal
//
//-------------------------------------------------------------------------------------------
//  $NUMMER=nummer van de poster
//  $IMAGEWIDTH=width van het image: Hier kan je van maken wat je wil maar je moet er wel voor zorgen dat de 
//              widths van de kaderimage en de loddimage mee gaan:
//  $KADER=width van kaderimage=$IMAGEWIDTH (we moeten het huidige kaderimag nog in drie images veranderen)
//  $LOADIMAGEWIDTH=$IMAGEWIDTH+kaderlinks+kaderrechts-78-87;  ( IW 300-> LIW 165, IW 417-> LIW 282 )
//  $SRC= is de source van het kleine plaatje waar je op klickt om de poster naar beneden te halen 
//                           of een willekeurige lowsource die later wanneer je een imagesource hebt 
//                           ingevuld in ZZLN_POSTER_info door deze zal worden vervangen zodra je de
//                           poster gaat draggen of met ZZLN_UpOrDownDiv aanroep naar beneden laat
//                           bewegen.
//                           Wanneer je geen source in de ZZLN_POSTER_info invult wordt voor het betreffende
//                           posterobject de property highsource op true gezet en wordt er wanneer je de
//                           poster tevoorschijn dragt of met ZZLN_UpOrDownDiv in beeld laat glijden.
//                           De functie checkIfPosterImageSourceIsLoaded wordt aangeroepen op 
//                           het eind van ZZLN_Posteranimation. Deze zet een leeg loadimage plaatje
//                           op de loadsrc plek wanneer de highsource property = true en anders 
//                           een image loading plaatje
//
// Ik heb de boel zo gemaakt dat in Explorer de afmetingen van de poster worden veranderd wanneer de
// source over oorsproonkelijke source heen wordt geladen. In Netscape is dat onmogelijk, daar worden de afmetingen
// van het eerst geladen image gehandhaafd. Wanneer je dus geen vervormingen wil hebben zorg er dan voor 
// dat de verhoudingen van de lowsource en die van de source hetzelfde zijn.
// 
// In het lint kun je elk lint waar je maar zin hebt in de image zetten.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
//
//  <div id="poster$NUMMER" style="HEIGHT: 10px; LEFT:10px;  POSITION: absolute; TOP: -1000px; WIDTH: 10px; Z-INDEX: 3" > 
//        <table border=0 cellspacing=0 cellpadding=0>
//       <tr>
//         <td ><img src="../resources/images/kaderboven_1.gif" width=3 height=4 border=0 alt=""></td>
//         <td ><img src="../resources/images/kaderboven_2.gif" width=300 height=4 border=0 alt=""></td>
//         <td ><img src="../resources/images/kaderboven_3.gif" width=3 height=4 border=0 alt=""></td>
//       </tr>
//          <tr> 
//            <td background="../resources/images/kaderlinks.gif"><IMG height=15 src="../resources/images/dot_clear.gif" width=3></td>
//            <td><a href="#" onmousedown="ZZLN_DragDiv('poster$NUMMER','first')" ><IMG src="$SRC" border=0 width=$IMAGEWIDTH name="IMG_poster$NUMMER"></a></td>
//            <td background="../resources/images/kaderrechts.gif"><IMG height=15 src="../resources/images/dot_clear.gif" width=3></td>
//          </tr>
//        </table>
//        <table border=0 cellspacing=0 cellpadding=0>
//          <tr>
//Wanneer je geen Grotere plaatje hebt om met makeremote af te beelden
//moet je hieronder noet handvat_01.gif in de image tag zetten maar 
//handvat_02.gif. verder kun je ook de onmouseup statement weglaten.
//with en gheight blijven hetzelfde.
//            <td><a href="#" onmouseup="makeRemote(relatieve url van af te beelden plaatje);"><IMG SRC="../resources/images/handvat_01.gif" WIDTH=75 HEIGHT=17 border=0></a></td>
//            <td><IMG NAME="loadimage_$NUMMER" SRC="../resources/images/handvat_02_loading.gif" WIDTH=$LOADIMAGEWIDTH HEIGHT=17 onmousedown="ZZLN_DragDiv('poster$NUMMER','first')"></td>
//            <td><a href="#" onmousedown="ZZLN_UpOrDownDiv('poster$NUMMER')"><IMG SRC="../resources/images/handvat_03.gif" WIDTH=66 HEIGHT=17 border=0></a></td>
//          </tr>
//         </table/>
//
//  </div>
//  <div id="lint$NUMMER" style="HEIGHT: 10px; LEFT:10px;  POSITION: absolute; TOP: -1000px; WIDTH: 10px; Z-INDEX: 2"> 
//    <a href="#" onmousedown="ZZLN_DragDiv('poster$NUMMER','first')"><IMG ID="lintImage_$NUMMER" SRC="../resources/images/lintje.gif" WIDTH=21 HEIGHT=90 border=0></a>
//  </div>
//
//----------------------------------------------------------------------------------
//Vul daarna de waarden in de functie ZZLN_POSTER_info in
//
//$INDEX=$NUMMER-1
//
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//
//       document.ZZLN_POSTER[$INDEX].left= left positie van poster1
//       document.ZZLN_POSTER[$INDEX].imagesrc=source van het mediumsize image dat we over het alreeds
//                                              in de poster geladen source gaan laden zodra we gaan 
//                                              draggen of met ZZLN_UpOrDownDiv werken.
//
//----------------------------------------------------------------------------------
// Je hoeft deze waarden niet in te vullen. wanneer je niets invult worden de posters op volgorde van index
// met steeds een lintbreedte afstand tussen hun linten bovenaan de pagina gezet. 
// De imagesource hoef je niet te definieren wanneer je de lowsrc in de poster niet hebt ingevuld maar 
// alreeds een source hebt ingevuld.
// Wanneer je wel een lowsource hebt ingevuld en geen imagesource definieerd zegt de poster wanneer je 
// gaat draggen of UpOrDowndivven gewoon dat ie het plaatje niet kon vinden.
// Wanneer je bij de left property waarden kleiner dan startSchuinDown invult staat de image in de poster wanneer ie
// recht naar beneden zou zakken gedeeltelijk buiten beeld. Daarom zakt ie dan niet recht naar benden maar
// schuin tot een afstand van $INDEX*lintbreedte van de linkerkant van het browser window.
// Dit geeft je de mogelijkheid om eventueel al je posters buiten het beeld te zetten of heel erg links
// op je pagina wanneer je dat wilt.
// Voor de rechter beeldzijde heb ik dit niet gemaakt, daar moet je bij het bouwen maar om  denken.
//
//BELANGRIJK: OOK WANNEER JE GEEN VAN DEZE WAARDEN INVULT ZET WEL ALTIJD DE FUNCTIE ZZLN_POSTER_info
//IN DE SCRIPT BOVENAAN JE PAGINAS, dwz wanneer je ZZLN_POSTER_animation aanroept in je onload of 
// ergens anders. Ju kunt posteranimation later aanroepen, bijvoorbeeld door een link of
// imageclick te doen. De posters verschijnen dan pas in beeld (anders hangen ze er met hun top 1000
// pixels boven)
//
// Je kunt de functie ZZLN_POSTER_info ook gebruiken om standaard waarden van het ZZLN_POSTER object in 
// te overriden. Omdat ie pas na het definieren van deze porperties wordt aangeroepen.
//
//
//verander in de body tag $NROFPOSTERS in het totale aantal posters in dit document
//wanneer je dit vergeet werkt de laatst gedefinieerde poster niet.
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//<BODY background="../resources/images/achtergrond.gif" bgcolor="#FFF7E7"  onload="ZZLN_PosterAnimation($NROFPOSTERS);">
//------------------------------------------------------------------
//
//Ik heb geen document.write gebruikt, wat de hele zaak natuurliojk een stuk eenvoudiger en flexibeler
//zou maken omdat de write naar layers toe altijd problemen oplevert. Hij kan het document in de layer 
//niet altijd vinden. Dit geldt overigens alleen maar voor netscape, Explorer is veel vergevings gezinder
//
//BELANGRIJK: SCHRIJF DE POSTERS ALTIJD BOVENIN DE BODY VAN HET DOCUMENT, DAARNA PAS DE WERKELIJKE
//INHOUD 
//
//ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH ENDOFDUTCH
//
//##############################################################################################################
//                                             POSTERLIB.JS
//##############################################################################################################
//
//global: overlap: De overlap tussen de lint en de poster. Is nodig omdat bij de conversies soms wel een
//        pixel kan worden verloren. De lint komt dan los van de poster te hangen
//global:extraleft300 en extraleft417: De extra pixels naar left van de lint ten opzichte van de poster
//global:posterBalkHeight: Hoogte enlarge en hide knoppenbalk in posters
//global:remote : gebruikt om popupwindow in te zetten
//global:rootdirectory: root directory waarin de plaatjes staan
//global: ns: of nestcape de browser is of niet
//global: isMac: of we op een Mac werken of niet
//global: extraUprate: rate die bepaald hoeveen de posters bij terugklappen extra omhoog gaan. wanneer je deze rate
//       gelijk maakt aan de lengte van het koord kan het zijn dat je het koord misschien helemaal niet meer ziet
//
//document:curTopzIndex: variabele die aangeeft wat de hoogste huidige zIndex is
//          Wordt in functie ZZLN_PosterAnimation gedefinieerd
//
//functie: makeRemote(theURL): functie die meegegevn plaatje in een in en uitzoombaar
//         window plaatst
//
//functie: ZZLN_findobject: Functie die een object in een document of in een layer in een document
//         teruggeeft
//
//functie: Make_ZZLN_POSTER_Objects(nrOfPosters): functie die een soort administatieobject bouwt waar we
//          veel gegevense betreffende de posters (t.i. layers) bewaren. Ik had deze info ook allemaal aan
//          de layers zelf kunnen hangen maar dat maakte de script onoverzichtelijk en de uitvoering iets trager.
//
//functie: ZZLN_POSTER_info: Staat altijd in de documenten zelf. bevat informatie per object zelf.
// 
//
//functie: setLayerExtraUp: Zet de eztraup property van een poster met een random generator
//
//functie: catchMouseUpAndDownEventForPosterLayers: catcht de up and down events voor de layers,
//         hangt drie extra properties aan de layers zelf, wanneer ze bij de ZZLN_POSTER verzameling
//         horen. Dan krijgen ze de volgende properties mee
//        ZZLN_DragOk :Om aan te geven of het een dragbaar layer is of niet.
//        ZZLN_Index  :bijbehorende ZZLN_POSTER index
//        ZZLN_Lint   :of huidge laer een lint is of niet
//        ZZLN_AssociatedObj : pointer naar bijbehorend lint of bijbehorende posters;
//         
//functie ZZLN_DragDiv: Zorgt ervoor dat de dragbare divs worden gedragt. wanneer een lint wortd aangeclick
//        wordt tevens het posters object meegedragt en andersom. Veetrder zorgt het ervoor dat de z_indexen 
//        de hoogte current zijn, dat het hoge def image wordt geladen wanneer hij voor het eerst wordt gedragt
//        en dit image er nog niet in staat en nog zo meer
//
//
//
//

//ZZLN_VERPLAATS_START 
// Dit is het root pad naar de index.html en de resources,introduction, information en help op het
// html gedeelte van de verluchte handschriften site 
// bij problemen: mail egbert@zzln.nl
// Moet overeenkomen met variable $vhproperties::zzlnRoot in de perlscript config/vhproperties.pl
var zzlnRoot="/kb/manuscripts";
//ZZLN_VERPLAATS_EIND


var kaderlinkswidth=3;
var kaderrechtsswidth=3;
var overlap=40;
var extraleft300=150;
var extraleft417=200;
var image300=300;
var image417=417;
var isMac=navigator.userAgent.indexOf('Mac')!=-1;
var ns = (navigator.appName == "Netscape");
//MACBUG
//Er zit een bug in de waarde offsetheight en clientHeight voor DIV objecten in de 5.0 versie
//van explorer op de MAC. Ik check op 5. om geen 4.5 versies mee te tellen enzo
var isMacAndExplFive=(isMac&&!ns&&(navigator.appVersion.indexOf('5.')!=-1));
var kaderBovenHeight=4;
var posterBalkHeight=17;
var extraUpRate=30;
//Deze variabele bepaald de snelheid waarmee de poster op en neer wordt gelaten
var NewPosterPositionPerSecond=30;
//wanneer een poster meer naar links ligt dan deze waarde wordt ie schuin naar beneden
//getrokken etot de linkerkant gelijk ligt met startschuindown. (voor posters met een 
//doorzichtige draglayer er omheen. In dit geval kunnen we hem er eigenlijk wel uitslopen maar 
//ik laat hem er nog even in staan
var startSchuinDown=1;
//default left positie eerste poster, de andere default waarden worden er aan aangepast
var firstLeft=-60;
var remote;
var iconclassRemote;
//dit was een oude iconclass browser, een javaapplet, dat niet in alle machines werkte,
// en waar niemand precies van wist wie die onderhieldm, daarom heb ik op advies van hans Brandhorst en in samenspraak met
// Patricia Alkhoven deze link veranderd
//var iconclassDir="http://seagull.konbib.nl/iconclass/index.html";
var iconclassDir="http://www.iconclass.nl/libertas/ic?style=index.xsl";

//DEBUGGING
//Routines en variabelen gebruikt tijdens het debuggen
//Kunnen verwijderd uit de uiteindelijke versie
var trashNr=0;
var LOGon=true;
var LOGstring="";


function LOGWRITE(str){
  if (LOGon) {LOGstring+=str}
}

function startLogWindow(){
  LOGstring="";
  LOGon=true;
  LOGWRITE("<HTML><HEAD><TITLE>LOGfile</title></HEAD><BODY><form name=\"form1\" action=\"mailto:ebleyenburg.member8@freeler.nl?subject=MacLogFile\" method=\"post\" enctype=\"text/plain\"><TEXTAREA name=\"LOGTEXT\" rows=35 cols=80>");
  LOGWRITE("Start\n");
  if (isMac) {LOGWRITE("Macintosh\n")}else {LOGWRITE("Windows\n")};
  if (ns) {LOGWRITE("Netscape\n")}else{LOGWRITE("Explorer\n")};
  LOGWRITE("\n");
}

function sendLogWindow(){
    LOGWRITE("</textarea><input type=\"submit\" value=\"submit\"></form></body></HTML>");
    LOGon=false;
    if (!remote) {remote = window.open('','afbeelding','scrollbars=yes,resizable=yes,width=700,height=650,left=0,top=0')};
    remote.document.open();
    remote.document.write(LOGstring);
    remote.document.close();
    remote.focus();
}

function   IMAGELOGWRITE(imageObject){
//Schrijf zo'n beetje alle informatie over een imageobject naar de logform
  LOGWRITE("\n");
  if (imageObject.complete){
    LOGWRITE("Imageobject Complete\n")
  }
  else{
    LOGWRITE("Imageobject In-Complete\n")
  }
  LOGWRITE("            height:"+imageObject.height+"\n");
  LOGWRITE("            width:"+imageObject.width+"\n");
  LOGWRITE("            border:"+imageObject.border+"\n");
  LOGWRITE("            hspace:"+imageObject.hspace+"\n");
  LOGWRITE("            lowsrc:"+imageObject.lowsrc+"\n");
  LOGWRITE("            name:"+imageObject.name+"\n");
  LOGWRITE("            vspace:"+imageObject.vspace+"\n");
  LOGWRITE("            readyState:"+imageObject.readyState+"\n");
  LOGWRITE("            scrollHeight:"+imageObject.scrollHeight+"\n");
  LOGWRITE("            scrollLeft:"+imageObject.scrollLeft+"\n");
  LOGWRITE("            scrollTop:"+imageObject.scrollTop+"\n");
  LOGWRITE("            scrollWidth:"+imageObject.scrollWidth+"\n");
  
  //if (isMac){alert(LOGstring);}

}
//END DEBUGGING

var popupWindowNr=0;
//makeRemote zet de als argument meegstuurde gif of lpg in een in- en
//uitzoombaar window
function makeRemote(theURL) {
  //You can 'or'  together every browser that does not support the zooming
  // in fact it is only the following, but I've set the zoom option off for every Netscape
  // on the mac, cause it is an eventhandling problem which will certainly turn oup again
  // in new versions
   var NOTzoomable=(isMac||(!isMac&&ns&&(navigator.appVersion.indexOf('4.08')!=-1)));
   //MACHINEAFHANKELIJK
  if (!NOTzoomable) {
    remote = window.open('','afbeelding_'+popupWindowNr++,'scrollbars=yes,resizable=yes,width=460,height=620');
    remote.location.href=zzlnRoot+'/resources/popupwindowframe.html?'+theURL;
  } 
  else {
    remote = window.open(theURL,'afbeelding','scrollbars=yes,resizable=yes');
  }
  //EINDE MACHINEAFHANKELIJK
  //De volgende twee statements zijn voor een mooi in beeld springen van het popupwindow
  remote.opener.blur;
  remote.focus();
}

function makeIconClassRemote(){
   iconclassRemote = window.open(iconclassDir,'iconclass','scrollbars=no,resizable=yes,width=640,height=505');
   iconclassRemote.opener.blur;
   iconclassRemote.focus();
}


function ZZLN_FindObject(n, d) { 
  var i,x;
  if(!d) d=document; 
  if(!(x=d[n])&&d.all) x=d.all[n];
  //wanneer je het ding niet kan vinden, zoek verder in de layers
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=ZZLN_FindObject(n,d.layers[i].document);
  return x;
}

function Make_ZZLN_POSTER_Objects(nrOfPosters) {
//var divWidth,lintWidth;
  document.ZZLN_POSTER = new Array(nrOfPosters);
  for (var i=0;i<document.ZZLN_POSTER.length;i++) {
	document.ZZLN_POSTER[i] = new Array(1);
    //layer-info
    var j=i+1;
    document.ZZLN_POSTER[i].id='poster'+j;
    document.ZZLN_POSTER[i].lintid='lint'+j;
    //de id in de linten wordt alleen gebruikt in explorer om de move cursor weer te geven
    if (!ns) document.ZZLN_POSTER[i].lintImagename='lintImage_'+j;
    //naam van image midden in de balk van de poster. Is nodig omdat we daar de load plaatjes laten zien
    document.ZZLN_POSTER[i].loadimagename='loadimage_'+j;
    //naam van image in de poster. Nodig omdat we daar een ander image in willen kunnen zetten
    document.ZZLN_POSTER[i].imagename='IMG_poster'+j;
    //width image. Waneer je groter image wil laden moet je deze waarde veranderen, omdat hiermee de de relatieve afmetingen
    //van het low source plaatje wordne aangegeven.
   // document.ZZLN_POSTER[i].imagewidth=300;
    //imageobject waar het hogere defenitie plaatje eerst in wordt geladen voordat het in de poster
    //wordt afgebeeld. Dit om de lage def en de hoge def mooi om te wisselen
    document.ZZLN_POSTER[i].imageObject=new Image();
    //hoogte van het poster. Wordt in ZZLN_Poateranimation ingevuld, blijft verder constant
    document.ZZLN_POSTER[i].posterheight=10;
    //volgende definieert een naam index. Is handig
	document.ZZLN_POSTER[document.ZZLN_POSTER[i].id] = document.ZZLN_POSTER[i];
    //current index
    document.ZZLN_POSTER[i].divIndex = i;
    //property die zal worden gelbruikt bij het omhoog of omlaag laten zakken van de posters. Om te stoppen of te beginnen. 
    document.ZZLN_POSTER[i].Play = false;
    //wordt gebruikt om te tellen hoeveel plaatjes we in de loadimage hebben gegooid bij het laden van hoge def in
    //poster
    document.ZZLN_POSTER[i].loadindex=0;
    //property die aangeeft of poster omhoog staat of niet.
	document.ZZLN_POSTER[i].expanded=false;    
    if (ns) {
       //pointer naar poster object zzelf. De layer.
       document.ZZLN_POSTER[i].obj = document[document.ZZLN_POSTER[i].id];
       //pointer naar de layer waar het bijbehorende lint in staat
	   document.ZZLN_POSTER[i].lintobj = document[document.ZZLN_POSTER[i].lintid];
    }
    else {
      document.ZZLN_POSTER[i].obj = document.all ? document.all[document.ZZLN_POSTER[i].id] : null;
      document.ZZLN_POSTER[i].lintobj = document.all ? document.all[document.ZZLN_POSTER[i].lintid] : null;
    }
    //extraup is property die wordt gebruikt om per popster aan te geven hoeveel die extra omhoog moet bij het 
    //inklappen. Dit dat de linten niet allemaal dezelfde lengte hebben de hele tijd.
    document.ZZLN_POSTER[i].extraUp=0;
    setLayerextraUp(i);	
    //properties die de top en left waarden van de poster bevatten voor het omhoog lopen of het neerdalen
	document.ZZLN_POSTER[i].values = new Array(2);
    document.ZZLN_POSTER[i].values[0] = new Array(15);
	document.ZZLN_POSTER[i].values[0].prop = "left";
  	document.ZZLN_POSTER[i].values[1] = new Array(15);
	document.ZZLN_POSTER[i].values[1].prop = "top";
	if (!ns) {
        document.ZZLN_POSTER[i].values[0].prop2 = "style";
        document.ZZLN_POSTER[i].values[1].prop2 = "style";
	}
	document.ZZLN_POSTER[i].pullupvalues = new Array(2);
    document.ZZLN_POSTER[i].pullupvalues[0] = new Array(15);
	document.ZZLN_POSTER[i].pullupvalues[0].prop = "left";
  	document.ZZLN_POSTER[i].pullupvalues[1] = new Array(15);
	document.ZZLN_POSTER[i].pullupvalues[1].prop = "top";
	if (!ns) {
        document.ZZLN_POSTER[i].pullupvalues[0].prop2 = "style";
        document.ZZLN_POSTER[i].pullupvalues[1].prop2 = "style";
	}
    //property die onthoudt in welk frame we zitten(0-15)
    document.ZZLN_POSTER[i].curFrame = 0;
    //hoe snel de omhoog en neergaande paden van de posters worden uitgevoerd.
    document.ZZLN_POSTER[i].fps = NewPosterPositionPerSecond;
    //het maximale frame
    document.ZZLN_POSTER[i].lastFrame = 15;
    document.ZZLN_POSTER[i].delay = 1000/document.ZZLN_POSTER[i].fps;
    document.ZZLN_POSTER[i].divWidth= (ns)?document.ZZLN_POSTER[i].obj.clip.width:document.ZZLN_POSTER[i].obj.offsetWidth;
    document.ZZLN_POSTER[i].lintWidth= (ns)?document.ZZLN_POSTER[i].lintobj.clip.width:document.ZZLN_POSTER[i].lintobj.offsetWidth;
    //extraleft zorgt er voor dat de lint midden onder de poster komt te hangen
    document.ZZLN_POSTER[i].extraleft=Math.round((document.ZZLN_POSTER[i].divWidth-document.ZZLN_POSTER[i].lintWidth)/2);
    //left zet de waarde van het posterlayer, deze kan ook in het document worden gezet
    //default is zo dat je wanneer je de vorige poster hebt laten zakken je altijd het te grabben lint
    //nog kunt zien
    if (i==0) {document.ZZLN_POSTER[i].left=firstLeft}
    if ((i==1)&&(firstLeft<startSchuinDown)){
      document.ZZLN_POSTER[1].left=document.ZZLN_POSTER[0].divWidth-document.ZZLN_POSTER[1].extraleft;
    }
    else {
      if (i>0) {
        document.ZZLN_POSTER[i].left=document.ZZLN_POSTER[i-1].left+document.ZZLN_POSTER[i-1].divWidth-document.ZZLN_POSTER[i].extraleft;
      }
    }
  }
  //deze functie staat altijd in het document zelf. 
  //Geeft ander waarden terug voor de default left properties en definieert de imagesource property
  //zodat wanneer deze bestaat een andere source over de lowsource heengeladen wordt.
  ZZLN_POSTER_info();
  //Zet naar aanleiding van of er een ander defenitieplaatje voor de image in deposter
  //wordt gedefinieerd de boolean property highSource
  //Wanneer geen alternatief image aangegeven is huidige plaatje de highSource
  // Wanneer wel aangegegevn is huidige plaatje de lowsource
  for (var i=0;i<document.ZZLN_POSTER.length;i++) {
	if (!document.ZZLN_POSTER[i].imagesrc){
           document.ZZLN_POSTER[i].highSource=true;
    }
    else {
           document.ZZLN_POSTER[i].highSource=false;
    }
  }
  
}


function setLayerextraUp(index){
  document.ZZLN_POSTER[index].extraUp=Math.random()*extraUpRate+1;
}

function catchMouseUpAndDownEventForPosterLayers() {
  var i,j,curDrag=null,curLint=null,oldindex1,oldindex2;
  //wanneer all of layers niet aanwezig kunnen we niets doen
  if (!document.all && !document.layers) return false;
  //maak het allLayers object
  if (!document.allLayers) {
    document.allLayers = new Array();
  }
  with (document){
    if (ns) {//NETSCAPE
      for (i=0; i<layers.length; i++){
		        allLayers[i]=layers[i];
      }
      for (i=0; i<allLayers.length; i++){
        if (allLayers[i].document && allLayers[i].document.layers){
          with (allLayers[i].document){
            for (j=0; j<layers.length; j++) {
              allLayers[allLayers.length]=layers[j];
            }
          }
        }
      }
    }
    else {//EXPLORER
      for (i=0;i<all.length;i++){
        if (all[i].style&&all[i].style.position){
          allLayers[allLayers.length]=all[i];
        }
      }
    }
  }
  //Zet propertys onder de poster en lint layers
  for (i=0;i<document.ZZLN_POSTER.length;i++){
    curDrag= document.ZZLN_POSTER[i].obj;
    curLint=document.ZZLN_POSTER[i].lintobj
    curDrag.ZZLN_DragOk=true;
	curDrag.ZZLN_Index=i;
	curDrag.ZZLN_Lint=false;
    curDrag.ZZLN_AssociatedObj=curLint;
    curLint.ZZLN_DragOk=true;
	curLint.ZZLN_Index=i;
	curLint.ZZLN_Lint=true;
    curLint.ZZLN_AssociatedObj=curDrag;
  }
  document.onmousedown = ZZLN_DragDiv;
  //je moet de mouseup ook catchen anders gaat het layer aan de mouse kleven. De mouseup bevrijdt hem weer.
  //omdat een mousedown een mousemove catcht. Je wil alleen een mousemove catchen 
  //wanneer op de layer wordt geklickt. (dwz de poster)
  document.onmouseup = ZZLN_DragDiv;
  if (ns) {document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);}
}




function ZZLN_DragDiv(objName,noEvent) {
  var i,j,divIndex,aLayer,retVal,curDrag=null,curLeft, curTop;
  //wanneer all of layers niet aanwezig kunnen we niets doen
  if (!document.all && !document.layers) return false;
  retVal = true;
  //for IE zet de event.returnvalue
  if(!ns && event) event.returnValue = true;
//BEGIN: wanneer dragdiv aangeroepen vanuit de html pagina
//     (alleen dan worden er argumenten meegegeven)
//     Netscape geeft altijd een argument mee, waneer geen argumenten expliciet worden meegegeven
//     geeft ie een this mee, waar de events dan weer aanhangen
//     Daarom werkt dit niet: if (ZZLN_DragDiv.arguments.length > 0) 
if (noEvent!=null){
    curDrag=document.ZZLN_POSTER[objName].obj;
    divIndex=curDrag.ZZLN_Index;
    if (!curDrag) return false;
    //zet de expanded property van DIV dat we gaan draggen op true
    //Dit omdat we hem met de aanclickbare plaatjes ook weer in willen kunnen klappen
    //Ander krijg je dat hij wanneer je clickt eerst weer vanuit nul uitklapt
    document.ZZLN_POSTER[objName].expanded=true;
    //Dit doe je zodat je een met  ZZLN_UpOrDownDiv  bewgend plaatje stopt wanneer je hem halverwege gaat draggen
    //de expanded staat dan anders en gevolg daarvan is dat de loup verkeerd om gaat tellen. 
    document.ZZLN_POSTER[objName].Play=false;
    //Wanneer de source van de image in de poster leeg is betekent dat dat ie
    //nog niet geladen is. Zie ZZLN_UpOrDownDiv()
//    if (curDrag.document.images[document.ZZLN_POSTER[divIndex].imagename].src==""){
    if (!document.ZZLN_POSTER[divIndex].highSource){
        loadHigherDefinitionImage(divIndex);
    }
  }
//KLAAR
  else {
    //An event happended!
    var theEvent = ((ns)?objName.type:event.type);
    //MOUSEDOWN
    if (theEvent == 'mousedown') {
    //Kijk of we in een dragbaar layer zitten, als dan zet dit layer in een object dat we
    // als propertie aan het document hangen.
      var mouseX = (ns)?objName.pageX : event.clientX + document.body.scrollLeft;
      var mouseY = (ns)?objName.pageY : event.clientY + document.body.scrollTop;
      var maxDragZ=null;
      for (i=0; i<document.allLayers.length; i++) {
        aLayer = document.allLayers[i];
        var aLayerZ = (ns)?aLayer.zIndex:aLayer.style.zIndex;
        if (aLayerZ > document.curTopzIndex) document.curTopzIndex = aLayerZ;
        var isVisible = (((ns)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') == -1);
        if (aLayer.ZZLN_DragOk != null){
          with (aLayer) {
            var tmpX=mouseX-((ns)?pageX:style.pixelLeft);
            var tmpY=mouseY-((ns)?pageY:style.pixelTop);
            var tmpW = ((ns)?clip.width :offsetWidth);
            var tmpH = ((ns)?clip.height:offsetHeight);
            //Voor explorer5.0 op de Mac zit er een bug in toekenning offsetHeight en clientHeight
//MACBUG
            if (isMacAndExplFive){tmpH=scrollHeight}
//MACBUGEND
            if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null|| maxDragZ <= aLayerZ)) {
              curDrag = aLayer;
              maxDragZ = aLayerZ;
            }
          }
        }
      }
      if (curDrag) {
        //catch de mousemove en doe dat ie dan dragdiv weer doet
        document.onmousemove = ZZLN_DragDiv;
        if (ns) document.captureEvents(Event.MOUSEMOVE);
        curLeft = (ns)?curDrag.left:curDrag.style.pixelLeft;
        curTop = (ns)?curDrag.top:curDrag.style.pixelTop;
        //where the hell are we on screen and on layer
        curDrag.MM_oldX = mouseX - curLeft;
        curDrag.MM_oldY = mouseY - curTop;
        document.curDragDivObj = curDrag;
        //Zet z_indexes van de poster en het lint zo dat ze boven alles staan, en de poster weer boven de lint
        if (curDrag.ZZLN_Lint){
          eval('curDrag.'+((ns)?'':'style.')+'zIndex=document.curTopzIndex+1');
          eval('curDrag.ZZLN_AssociatedObj.'+((ns)?'':'style.')+'zIndex=document.curTopzIndex+2');
        }
        else{
          eval('curDrag.'+((ns)?'':'style.')+'zIndex=document.curTopzIndex+2');
          eval('curDrag.ZZLN_AssociatedObj.'+((ns)?'':'style.')+'zIndex=document.curTopzIndex+1');
        }
        //verhoog de current topzindex met twee
        document.curTopzIndex=document.curTopzIndex+2;
        retVal = false;
        if(!ns) event.returnValue = false;
      }
    }
//MOUSEMOVE
    else if (theEvent == 'mousemove') {
      if (document.curDragDivObj) with (document.curDragDivObj) {
        var mouseX = (ns)?objName.pageX : event.clientX + document.body.scrollLeft;
        var mouseY = (ns)?objName.pageY : event.clientY + document.body.scrollTop;
        newLeft = mouseX-MM_oldX; newTop  = mouseY-MM_oldY;
//BUGFIX
//Explorer5 op de mac handelt zijn scherm niet goed af. gedeeltes van reeds verplaatste layer blijven staan
//andere gedeeltes worden niet eens getoond. Door het layer even onzichtbaar te maken, wat ie wel goed
//afhandeld, en na de verplaatsing weer zichbaar, is dat probleem opgelost
        if (isMacAndExplFive){
           style.visibility="hidden";
           ZZLN_AssociatedObj.style.visibility="hidden";
        }
//ENDBUGFIX
        if (ns) {
          left = newLeft;
          top = newTop;
        }
        else {
          style.pixelLeft = newLeft; 
          style.pixelTop = newTop;
        }
      //wanneer curdragdivobj een lint dragt dan de poster mee,drag anders het lint mee
		if (ZZLN_Lint){
		  if (ns) {
		    ZZLN_AssociatedObj.left=newLeft-parentLayer.document.ZZLN_POSTER[ZZLN_Index].extraleft;
		    ZZLN_AssociatedObj.top=newTop-parentLayer.document.ZZLN_POSTER[ZZLN_Index].posterheight+overlap;
		  }
		  else{
 		    ZZLN_AssociatedObj.style.pixelLeft=newLeft-document.ZZLN_POSTER[ZZLN_Index].extraleft;
		    ZZLN_AssociatedObj.style.pixelTop=newTop-document.ZZLN_POSTER[ZZLN_Index].posterheight+overlap;
		  }
		}
		else{
		  if (ns) {
		    ZZLN_AssociatedObj.left=newLeft+parentLayer.document.ZZLN_POSTER[ZZLN_Index].extraleft;
		    ZZLN_AssociatedObj.top=newTop+parentLayer.document.ZZLN_POSTER[ZZLN_Index].posterheight-overlap;
		  }
		  else{
		    ZZLN_AssociatedObj.style.pixelLeft=newLeft+document.ZZLN_POSTER[ZZLN_Index].extraleft;
		    ZZLN_AssociatedObj.style.pixelTop=newTop+document.ZZLN_POSTER[ZZLN_Index].posterheight-overlap;
		  }
	    }
        retVal = false;
        if(!ns) event.returnValue = false;
//BUGFIX
//zie bugfix hierboven
        if (isMacAndExplFive){
          style.visibility="visible";
          ZZLN_AssociatedObj.style.visibility="visible";
        }
//ENDBUGFIX
      }
    }
//MOUSEUP
    else if (theEvent == 'mouseup') {
      if (document.curDragDivObj) {
        if (ns){
         document.curTopzIndex=document.curDragDivObj.zIndex;
	    }
        else{
         document.curTopzIndex=document.curDragDivObj.style.zIndex;  
        }
	  }
      document.onmousemove = null;
      if (ns) document.releaseEvents(Event.MOUSEMOVE);
      if (ns) document.captureEvents(Event.MOUSEDOWN); //for mac ns
      if (document.curDragDivObj) with (document.curDragDivObj) {
        retVal = false;
        if(!ns) event.returnValue = false;
      }
      document.curDragDivObj = null;
    }
    //wanneer er geen object wordt gedragt stuur het event dan door naar het btreffende object
    //(Anders doen de aanclick plaatjes het niet meer in netscape).
    if (ns) {document.routeEvent(objName);}
  }
  return retVal;
}


function ZZLN_UpOrDownDiv(objName, Play) {
//Schrijft de positionerings gegegevns de ZZLN_POSTER objects naar de
//properties van het bijbehorende object. Deze objecten zijn de DIV's
//dei de middelgrote plaatjes bevatten.  
//objName is een nonsense parameter alleen maar om de html code er logischer
//uit te laten zien
var i,j,ZZLN_posterobject,props,divindex;
  //wanneer de ZZLN_POSTER object nog niet is aangemaakt doe dan niets. 
  //(Anders krijg je foutmeldingen wanneer de pagina nog aan het laden is)
  if (document.ZZLN_POSTER == null) return false;
  //Zet het aangeroepen ZZLN_POSTER object in locale variabele
  ZZLN_posterobject = document.ZZLN_POSTER[objName];
  //mocht het object niet bestaat doe dan niets
  if (ZZLN_posterobject == null) return false;
  //We geven de variabele Play bij de aanroep uit het document niet mee
  //dus is ie de eerste keer null
  //Play is een variabele die we gebruiken om deze ZZLN_UpOrDownDiv functie
  //weer uit te schakelen
  if (Play==null) {
    //Schakel de ZZLN_POSTER object aan. Zijn interne Play knop, de propertie Play
    ZZLN_posterobject.Play=true;
    //verwijder focus van alle anchors
    //zet de focus op de window. Dit is cosmetisch. In de mac in 5.0 geeft de focus grote randen om
    //de images in het document die je dwars door de posters heen kan zien.
	Play = ZZLN_posterobject.Play;
    //zet index behorende bij huidige layer in locale variabele. Alleen voor handig.
    divindex=ZZLN_posterobject.divIndex;
	//Wanneer de ZZLN_POSTER[i].expanded property true is bevindt de poster
	//zich niet meer bovenaan de pagina. We moeten dan het terugloop pad 
	//bepalen. We zetten dan tevens zetten we de property currentFrame op 15.
    //Omdat we net doen alsof ie volledig expanded is.
	if (ZZLN_posterobject.expanded){
	  ZZLN_posterobject.curFrame=15;
	  setPullupArrayZZLN_POSTER(divindex);
	}
	else{
      //wanneer de source nog niet is ingevuld moet het hogere defenitie plaatje worden 
      //geladen. In de posters wordt eerst alleen maar een lowsrc geladen. Dit is een
      //uitvergroting van de aanclickbare plaatjes die de posters laten expanden. Pas
      //wanneer nodig wordt de src van het plaatje ingevuld.
     if (!document.ZZLN_POSTER[divindex].highSource){
            loadHigherDefinitionImage(divindex);
      }
      //en bepaal de dropdown array, array van waarden die het layer laten zakken
      setDropdownArrayZZLN_POSTER(divindex);
      //geeft poster en lint de hoogste z_index
      if (ns) {
        ZZLN_posterobject.lintobj.zIndex=++document.curTopzIndex;
        ZZLN_posterobject.obj.zIndex=++document.curTopzIndex;
      }
      else {
        ZZLN_posterobject.lintobj.style.zIndex=++document.curTopzIndex;
        ZZLN_posterobject.obj.style.zIndex=++document.curTopzIndex;
     }
	}
    //Bepaal de left to right array van poster naar oorspronkelijke positie
    setLeftToRightArrayZZLN_POSTER(divindex);
  }
  //Wanneer Play gelijk aan de play property van de ZZLN_POSTER, en wanneer de ZZLN_POSTER is
  //expanded verplaats het layer volgens aanwijzingen in de values array
  if ((Play=ZZLN_posterobject.Play)&&(!ZZLN_posterobject.expanded)) {
    //deze aanroep van de functie verplaatst het layer maar van een waarde in de value array naar de volgende.
    //fnew (framenew) bepaalt wele timeslice wordt genomen.
    setTimeout('ZZLN_UpOrDownDiv("'+objName+'",'+ZZLN_posterobject.Play+')',ZZLN_posterobject.delay);
    //we zetten de waarden van het fNew frame in de layer
    fNew = ++ZZLN_posterobject.curFrame;
    if (ZZLN_posterobject.obj) {
	  if (fNew <= ZZLN_posterobject.lastFrame) {
        for (j=0; j<ZZLN_posterobject.values.length; j++) {
          //maak loup over de left en de top waarden
          props = ZZLN_posterobject.values[j];
          // laad de waarden uit de values arrays in de top en left property van het betreffende layer
          if (ns) {
            ZZLN_posterobject.obj[props.prop] = props[fNew-1];
            //neem het lint mee.
			if (j==1) {ZZLN_posterobject.lintobj[props.prop] = props[fNew-1]+ZZLN_posterobject.posterheight-overlap} else {ZZLN_posterobject.lintobj[props.prop] = props[fNew-1]+ZZLN_posterobject.extraleft};
          }
          else {
//BUGFIX weer foutjje in repaint van windowwscreen.Maak layers onzichtbaar voo explorer 5., na verplaatsing weer zichtbaar
            if (isMacAndExplFive){ZZLN_posterobject.obj.style.visibility="hidden";ZZLN_posterobject.lintobj.style.visibility="hidden";}
            ZZLN_posterobject.obj[props.prop2][props.prop] = props[fNew-1];
            if (j==1) {ZZLN_posterobject.lintobj[props.prop2][props.prop] = props[fNew-1]+ZZLN_posterobject.posterheight-overlap} else {ZZLN_posterobject.lintobj[props.prop2][props.prop] = props[fNew-1]+ZZLN_posterobject.extraleft};
            if (isMacAndExplFive){ZZLN_posterobject.obj.style.visibility="visible";ZZLN_posterobject.lintobj.style.visibility="visible";}
 	      }
        }
	  }
	  else {
         //wanneer alle frames zijn geweest zet de ZZLN_POSTER[i].Play property op false
         //het duurt nog even voordat de met set timeout weggestuurde volgende aanroep van 
         //deze functie gaat gebeuren en die is weggestuurd met true als play waarde
         ZZLN_posterobject.Play=false;
	     ZZLN_posterobject.expanded=true;
	  }
	}
  }
  //wanneer de ZZLN_POSTER is expanded draai dan de afspeel richting om en 
  //set de pullupalues in de top en left properties van de layers 
  if ((Play=ZZLN_posterobject.Play)&&(ZZLN_posterobject.expanded)) { 
    setTimeout('ZZLN_UpOrDownDiv("'+objName+'",'+ZZLN_posterobject.Play+')',ZZLN_posterobject.delay);
    fNew = --ZZLN_posterobject.curFrame;
    if (ZZLN_posterobject.obj) {
      if (fNew >= 1) {
        for (j=0; j<ZZLN_posterobject.pullupvalues.length; j++) {
 	      props = ZZLN_posterobject.pullupvalues[j];
          if (ns) {
            ZZLN_posterobject.obj[props.prop] = props[fNew-1];
			if (j==1) {ZZLN_posterobject.lintobj[props.prop] = props[fNew-1]+ZZLN_posterobject.posterheight-overlap} else {ZZLN_posterobject.lintobj[props.prop] = props[fNew-1]+ZZLN_posterobject.extraleft};
          }
          else {
            if (isMacAndExplFive){ZZLN_posterobject.obj.style.visibility="hidden";ZZLN_posterobject.lintobj.style.visibility="hidden";}
	        ZZLN_posterobject.obj[props.prop2][props.prop] = props[fNew-1];
            if (j==1) {ZZLN_posterobject.lintobj[props.prop2][props.prop] = props[fNew-1]+ZZLN_posterobject.posterheight-overlap} else {ZZLN_posterobject.lintobj[props.prop2][props.prop] = props[fNew-1]+ZZLN_posterobject.extraleft};
            if (isMacAndExplFive){ZZLN_posterobject.obj.style.visibility="visible";ZZLN_posterobject.lintobj.style.visibility="visible";}
 	      }
        }
	  }
      else {
	   ZZLN_posterobject.Play=false;
       ZZLN_posterobject.expanded=false;
	  }
    } 
  }	
}




function setDropdownArrayZZLN_POSTER(divIndex){
//bepaal de dropdown array. Hij moet precies over de hoogte van de poster zelf + knoppenbalkje  zakken
var nrofEntries=15;
var nrofSteps=nrofEntries-1;
var rate,i;
var divHeight=document.ZZLN_POSTER[divIndex].posterheight;
   rate= divHeight/nrofSteps;
   for (i=0;i<nrofEntries;i++){
//                                                          de plus 1 is om de posters net beneden de 
//                                                          de bovenkant te laten hangen. Los. Vinnik mooier.
	 document.ZZLN_POSTER[divIndex].values[1][i]=(-divHeight+Math.ceil((i)*rate))+1;
  }
}

function setLeftToRightArrayZZLN_POSTER(divIndex){
//kijk hoever het layer van zijn nul positie is verwijderd
var rate;
var nrofEntries=15;
var nrofSteps=nrofEntries-1;
var zeroLeft=document.ZZLN_POSTER[divIndex].left;
  //Deze if statement zorgt er voor dar wanneer de poster gedeeltelijk buiten beeld valt, dwz aan de linker
  //kant van het beeld, hij wanneer hij naar beneden schuift wel netjes in beeld komt te staan 
  //Dit doe je uiteraard alleen bij het uitschuiven, de default daarvan is recht naar beneden
  //verder werkt het zo dat poster1 recht tegen de kant wordt aangezet, poster 2 , mits ook meer links
  //dan startschuindown er half overheen, zodat zijn lint er net rechts van hangt, etcetera. (Net als 
  //de default postities van de posters wanneer bovenaan de pagina)
  if ((zeroLeft<startSchuinDown)&&!document.ZZLN_POSTER[divIndex].expanded){
     var extra=0;
//Volgende was om er voor te zorgen dat wanneer er niets wordt aangegeven, de posters niet over elkaar
//heen worden neergezet
//     for (var ii=0;ii<divIndex;ii++){
//    extra=extra+document.ZZLN_POSTER[ii].divWidth-document.ZZLN_POSTER[ii].extraleft;
//      extra=extra+document.ZZLN_POSTER[ii].extraleft;
//     }
     zeroLeft=2*zeroLeft-startSchuinDown-extra;
   }
  
  if (ns) {
    rate=(document.ZZLN_POSTER[divIndex].obj.left-zeroLeft)/nrofSteps;
  }  
  else {
    rate=(document.ZZLN_POSTER[divIndex].obj.style.pixelLeft-zeroLeft)/nrofSteps;
  }
  for (i=0;i<nrofEntries;i++){
	document.ZZLN_POSTER[divIndex].values[0][i]=document.ZZLN_POSTER[divIndex].left+Math.ceil(i*rate);
  }
}

function setPullupArrayZZLN_POSTER(divIndex){
//hier tellen we de extra up erbij op om 
var nrofEntries=15;
var nrofSteps=nrofEntries-1;
var distance, rate,i;
var divHeight=document.ZZLN_POSTER[divIndex].posterheight;
var ZZLN_posterobject=document.ZZLN_POSTER[divIndex];
  //zet eerst de random extraup die bepaald hoever het layer extra omhoog gaat
  setLayerextraUp(divIndex);
  if (ns){
    distance= divHeight+ZZLN_posterobject.obj.top+ZZLN_posterobject.extraUp;
  }
  else{
    distance=divHeight+ZZLN_posterobject.obj.style.pixelTop+ZZLN_posterobject.extraUp;
  }
  rate=distance/nrofSteps;
  ZZLN_posterobject.pullupvalues[0] = ZZLN_posterobject.values[0];
  for (i=0;i<ZZLN_posterobject.pullupvalues[1].length;i++){
    ZZLN_posterobject.pullupvalues[1][i]=(-ZZLN_posterobject.extraUp-divHeight+Math.ceil((i)*rate));
  }
}


function loadHigherDefinitionImage(index){
   //laad het opgevraagde plaatje eerst in het bij de ZZLN_POSTER geassocieerde imageObject
   //wanneer het compleet geladen is zet het dan pas in de imagetag op de poster
   
   document.ZZLN_POSTER[index].imageObject.src=document.ZZLN_POSTER[index].imagesrc;
   setTimeout('loadChild('+index+')',1000);
}

function loadChild(index){
var loadsrc;
 // IMAGELOGWRITE(document.ZZLN_POSTER[index].imageObject);
 // in de mac ns is het imageobject meteen complete: Ook al is ie nog niet geladen:
// dit geeft een niet gevonden melding omdat de hoogte 0 is
// daarom bebben we de mac ns browser meteen gevuld met het gezochte plaatje
// is minder mooi , maar werkt wel


  if (isMac&&ns){
    document.layers[document.ZZLN_POSTER[index].id].document.images[document.ZZLN_POSTER[index].imagename].src = document.ZZLN_POSTER[index].imageObject.src;
    document.ZZLN_POSTER[index].highSource=true;
    document.layers[document.ZZLN_POSTER[index].id].document.images[document.ZZLN_POSTER[index].loadimagename].src=  document.loadimage.src;
    return true;
  }

  if (document.ZZLN_POSTER[index].imageObject.complete){
    if (ns){
      //wanneer de imagesource leeg is geeft netscape complete is true terug maar met imageobject hoogte gelijk aan nul
      //de Mac geeft sowieso altijd een imagehoogte terug van nul, of de source nu leeg is of niet
      //daar moet ik dus nog wat op bedenken
      if (document.ZZLN_POSTER[index].imageObject.height==0){Image300NotOnServer(index);return true;} 
      document.layers[document.ZZLN_POSTER[index].id].document.images[document.ZZLN_POSTER[index].imagename].src=document.ZZLN_POSTER[index].imageObject.src;
      document.ZZLN_POSTER[index].highSource=true;
      document.layers[document.ZZLN_POSTER[index].id].document.images[document.ZZLN_POSTER[index].loadimagename].src=  document.loadimage.src;
    }
    else {
      document.images[document.ZZLN_POSTER[index].imagename].src=document.ZZLN_POSTER[index].imageObject.src;
      document.ZZLN_POSTER[index].highSource=true;
      //volgend statement s alleen voor Explorer, wanneer je daar een grotere of lagere source in de image tag ,met
      //width=300 of wat ook gooit, veranderd de hoogte van het poster. Eigenlijk is dit niet de bedoeling, we gaan
      //dat de lowsrc en de src dezelfde verhoudingen hebben, Maar door dit ene losse statement is het mogelijk een
      //een source met andere verhoudingen te laden. wanneer je dit statement dan niet hebt werkt de 
      //ZZLN_UpOrDownDiv niet meer goed, schuift ie niet helemaal uit, of te ver
      //Voor netscape geldt dit niet, daar is het niet mogelijk eens gegeven waarden van de image tag
      //te veranderen. #00 is 300, en het eerste plaatje wat geladen wordt bepaalt voor altijd de 
      //hoogte
      document.ZZLN_POSTER[index].posterheight=document.images[document.ZZLN_POSTER[index].imagename].height+posterBalkHeight+kaderBovenHeight;
      //wanneer de afmetingen van de poster veranderen moet ook de plek waar het lint er aanhangt veranderen
      document.ZZLN_POSTER[index].lintobj.style.pixelTop=document.ZZLN_POSTER[index].obj.style.pixelTop+document.ZZLN_POSTER[index].posterheight-overlap;
      document.images[document.ZZLN_POSTER[index].loadimagename].src=document.loadimage.src;
    }
  }
  else{
    //wanneer de source leeg is word in IE de imageobject hoogte gelijk aan dertig. Standaard leeg image.
    if (!ns) {if (document.ZZLN_POSTER[index].imageObject.height==30){Image300NotOnServer(index);return true;}}
    //op de Mac geeft explorer alleen maar aan dat ie niet geladen is wanneer complete false en readystae complete is.
    if (!ns&&isMac&&(document.ZZLN_POSTER[index].imageObject.readyState=="complete")){Image300NotOnServer(index);return true;}
    setTimeout('loadChild('+index+')',1000);
    if (document.ZZLN_POSTER[index].loadindex<9) {document.ZZLN_POSTER[index].loadindex++;}else{document.ZZLN_POSTER[index].loadindex=0;}
    //verander het plaatje middenin het balkje onderaan de poster 
 
    loadsrc=document.loadingImages[document.ZZLN_POSTER[index].loadindex].src;
    document.ZZLN_POSTER[index].obj.document.images[document.ZZLN_POSTER[index].loadimagename].src=loadsrc;
   }
//ENDOF MACBUG
}

function Image300NotOnServer(index){
  //verander de source in de lowsource anders krijg je elke keer als je dragt of hide weer deze 
  //foutmelding  
 document.ZZLN_POSTER[index].highSource=true;
 if (ns) {
    document.ZZLN_POSTER[index].obj.document.images[document.ZZLN_POSTER[index].loadimagename].src=zzlnRoot+"/resources/images/handvat_02_error_loading.gif";
  }
  else{
    document.images[document.ZZLN_POSTER[index].loadimagename].src=zzlnRoot+"/resources/images/handvat_02_error_loading.gif";
  }
}

function preloadLoadingImages(){
  //dat zijn de images die de bezig met laden blokjes laten zien in de posters
  //en het standaard image dat er later in moet worden gezet. Het fout image laden we alleen maar
  //wanneer we het middelgrote posterimage niet kunnen vinden.
  document.loadimage= new Image();
  document.loadimage.src=zzlnRoot+"/resources/images/handvat_02.gif";
  document.loadingImages=new Array(10);
  for (var i=0;i<document.loadingImages.length;i++){
    document.loadingImages[i]=new Image();
    document.loadingImages[i].src=zzlnRoot+"/resources/images/handvat_02_"+i+".gif";
  }
}

function checkIfPosterImageSourceIsLoaded(nrOfPosters){
//deze functie is er zodat je wanneer je al een source invult in de poster er niet eerst een lodingimage
//dingetje in de balk wordt gezet, maar gewoon een lege
// verder heeft het tot gevolg, wanneer je al; een src invult in de poster dat ie nieteen hogere defenitie
//gaat laden
//Dus hoef je ook geen imagesource in te vullen in de ZZLN_POSTER_imfo functie
var i;
  for (var i=0;i<nrOfPosters;i++) {
      if (document.ZZLN_POSTER[i].highSource){
        document.ZZLN_POSTER[i].obj.document.images[document.ZZLN_POSTER[i].loadimagename].src=document.loadimage.src;
     }
    }
 
}

function ZZLN_PosterAnimation(nrOfPosters){
var i,verHouding;
  preloadLoadingImages();
  document.curTopzIndex=3;
  Make_ZZLN_POSTER_Objects(nrOfPosters);
  catchMouseUpAndDownEventForPosterLayers();
  if (ns) {
    for (var i=0;i<nrOfPosters;i++) {
      document.ZZLN_POSTER[i].posterheight=document.ZZLN_POSTER[i].obj.document.images[document.ZZLN_POSTER[i].imagename].height+posterBalkHeight+kaderBovenHeight;
      document.ZZLN_POSTER[i].obj.top=-document.ZZLN_POSTER[i].extraUp-document.ZZLN_POSTER[i].posterheight;
      document.ZZLN_POSTER[i].obj.left=document.ZZLN_POSTER[i].left;
      document.ZZLN_POSTER[i].lintobj.left=document.ZZLN_POSTER[i].obj.left+document.ZZLN_POSTER[i].extraleft;
      document.ZZLN_POSTER[i].lintobj.top=document.ZZLN_POSTER[i].obj.top+document.ZZLN_POSTER[i].posterheight-overlap;
    }
  }
  else{
    for (i=0;i<nrOfPosters;i++){
      document.ZZLN_POSTER[i].posterheight=document.images[document.ZZLN_POSTER[i].imagename].height+posterBalkHeight+kaderBovenHeight;
      document.images[document.ZZLN_POSTER[i].imagename].style.cursor="move";
      document.images[document.ZZLN_POSTER[i].lintImagename].style.cursor="move";
      document.ZZLN_POSTER[i].obj.style.pixelTop=-document.ZZLN_POSTER[i].extraUp-document.ZZLN_POSTER[i].posterheight;   
      document.ZZLN_POSTER[i].obj.style.pixelLeft=document.ZZLN_POSTER[i].left;
      document.ZZLN_POSTER[i].lintobj.style.pixelLeft=document.ZZLN_POSTER[i].obj.style.pixelLeft+document.ZZLN_POSTER[i].extraleft;
	  document.ZZLN_POSTER[i].lintobj.style.pixelTop=document.ZZLN_POSTER[i].obj.style.pixelTop+document.ZZLN_POSTER[i].posterheight-overlap;
    }
  }
  checkIfPosterImageSourceIsLoaded(nrOfPosters);
}