// ****************************** 
// *    Javascript slideshow    *
// *            by              *
// *        Pim  Kusters        *
// *         28-11-2008         *
// ******************************

// declaratie globale variabelen
// -----------------------------
// foto's en afmetingen in de array FOTO laden
// array waar de foto's binnenkomen
var FOTO = null;

// startwaardes van de foto's
var imgRechts               =   1;
var imgLinks; 
var imgMidden               =   0;
var COUNTER                 =   0;


// opjecten in variabelen laden
var Midden                  =   273;
var Container               =   document.getElementById("slidecontainer");
var divRechts               =   document.getElementById("div_rechts");
var divLinks                =   document.getElementById("div_links");
var divMidden               =   document.getElementById("div_groot");
var fotoRechts              =   document.getElementById("foto_rechts");
var fotoLinks               =   document.getElementById("foto_links");
var fotoMidden              =   document.getElementById("foto_groot");
var BorderMidden            =   document.getElementById("borderMidden");
var BorderRechts            =   document.getElementById("borderRechts");
var BorderLinks             =   document.getElementById("borderLinks");
var FOTORECHTS              =   document.FotoRechts;
var FOTOLINKS               =   document.FotoLinks;
var FOTOMIDDEN              =   document.FotoMidden;

// snelheid in stappen
var Speed = 10;
// pauze in miliseconden
var Sleep = 20;
// margin van de foto's t.o.v. de divs
var margin = 3;
// browser
var BrowserName=navigator.appName;

// vaste waarden voor de startplaatsen van de div's
var divMidden_start_top     =   10;
var divMidden_start_hoogte ;
var divRechts_start_top     =   300;
var divRechts_start_links   =   428;
var divLinks_start_top      =   300;
var divLinks_start_links    =   2;
var fotoKlein_start_hoog    =   90;
var fotoKlein_start_breed   =   120;


// lege variabelen die toch globaal moeten zijn    
var richting;
var TEST;
var KLAAR;
var CHECK;
var ani_check;
var bew_Links_rechts;
var bew_Links_omhoog;
var bew_Rechts_links;       
var bew_Rechts_omhoog;  
var bew_Midden_omlaag;
var bew_Midden_links;     
var verhoging_Rechts;      
var verbreding_Rechts;
var verhoging_Links;
var verbreding_Links;       
var verkleining_Midden;
var versmalling_Midden;
var imgLeft;
var imgRight;
var imgMidden;
var dark;
var viewportwidth;
var viewportheight;
var tnode;
var tfoto;
var divRechts_hoogte;
var divLinks_hoogte;

// check voor de resize
var ReSize	=	false;
var FOTOSHOW = false;

// aanmaken van de gebruikte functies
//-----------------------------------
// initialisatie
function slideshow_start(beeldjes)
{
	FOTO = beeldjes;
	imgLinks                =  FOTO.length-1;
	
	// eerste initialisatie
	reset(true);
}

function thumbClick(nummer)
{
     if(ani_check == true && CHECK == true)
     {
        reset(nummer);
     }
}

// Reset functie ; deze is voor het terugzetten van de beginwaarden
function reset(test)
{  
    if(test === true)
    {
        COUNTER++;
    }
    
    else if(test === false)
    {
        COUNTER--;
    }
    else 
    {
        COUNTER = test;
    }      
    
    // verplaatsen van de foto's in de divs
    if(COUNTER > FOTO.length-1)
    {
        COUNTER = 0;
    }
    
    if(COUNTER < 0)
    {
        COUNTER = FOTO.length-1;
    }
    
    if(test === true)
    {
        imgMidden   =   COUNTER;
        imgRechts   =   COUNTER +1;
        imgLinks    =   COUNTER -1; 
        
        if(imgLinks < 0)
        {
            imgLinks = FOTO.length-1;
        }
        
        if(imgRechts > FOTO.length-1)
        {
            imgRechts = 0;
        }
       
   }
   else if(test === false)
   {
        imgMidden = COUNTER;
        imgRechts = COUNTER +1;
        
        if(imgRechts > FOTO.length-1)
        {
            imgRechts = 0;
        }
        imgLinks  = COUNTER -1;
        
        if(imgLinks < 0)
        {
            imgLinks = FOTO.length-1;
        }   
   }
   else
   {    
        COUNTER = test;
        imgMidden = COUNTER;
        imgRechts = COUNTER +1;
        imgLinks  = COUNTER -1;
        
        if(imgLinks < 0)
        {
            imgLinks = FOTO.length-1;
        }
        
        if(imgRechts > FOTO.length-1)
        {
            imgRechts = 0;
        }
   }
   
    // check voor extreem brede foto's in de middelste div
	if(270 * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) >= 530)
	{
		divMidden_start_hoogte = Math.round((FOTO[imgMidden]['hoog'] / FOTO[imgMidden]['breed']) * 530);
	}
	else
	{
		divMidden_start_hoogte = 270;
	}

	// start waarden voor de divs
    // --------------------------
    // initialisatie foto's
	
    FOTOMIDDEN.src     =   FOTO[imgMidden]['plaatje'];
    FOTORECHTS.src     =   FOTO[imgRechts]['plaatje'];
    FOTOLINKS.src      =   FOTO[imgLinks]['plaatje'];
    
	FOTOMIDDEN.style.height	= FOTO[imgMidden]['hoog']	+"px";
	FOTORECHTS.style.height	= FOTO[imgRechts]['hoog']	+"px";
	FOTOLINKS.style.height	= FOTO[imgLinks]['hoog']	+"px";
	
	FOTOMIDDEN.style.width	= FOTO[imgMidden]['breed']	+"px";
	FOTORECHTS.style.width	= FOTO[imgRechts]['breed']	+"px";
	FOTOLINKS.style.width  	= FOTO[imgLinks]['breed']	+"px";
		
    // afstand vanaf de container rand links 
    divMidden.style.left        =   (Midden - Math.round((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])/ 2)) +"px";
    divRechts.style.left        =   divRechts_start_links   +"px";
    divLinks.style.left         =   divLinks_start_links    +"px";

    // afstand vanaf de container rand boven
    divMidden.style.top         =   divMidden_start_top     +"px";
    divRechts.style.top         =   divRechts_start_top     +"px";
    divLinks.style.top          =   divLinks_start_top      +"px";
    
    // hoogte van de divs
    divMidden.style.height      =   divMidden_start_hoogte  +"px";
    divRechts.style.height      =   fotoKlein_start_hoog    +"px";
    divLinks.style.height       =   fotoKlein_start_hoog    +"px";
    BorderMidden.style.height   =   (divMidden_start_hoogte - (40 * 2)) +"px";
    BorderRechts.style.height   =   (fotoKlein_start_hoog - (40 * 2))   +"px";
    BorderLinks.style.height    =   (fotoKlein_start_hoog - (40 * 2))   +"px";
      
    // breedte van de divs
    divMidden.style.width       =   divMidden_start_hoogte * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) +"px";
    divRechts.style.width       =   fotoKlein_start_breed   +"px";
    divLinks.style.width        =   fotoKlein_start_breed   +"px";
    BorderMidden.style.width    =   ((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) - (40 * 2))  +"px";
    BorderRechts.style.width    =   (fotoKlein_start_breed - (40 * 2))  +"px";
    BorderLinks.style.width     =   (fotoKlein_start_breed - (40 * 2))  +"px";
               
    // initialisering van gebruikte vaste punten
    bew_Links_rechts            =   divLinks_start_links;
    bew_Links_omhoog            =   divLinks_start_top;
    bew_Rechts_links            =   divRechts_start_links;
    bew_Rechts_omhoog           =   divRechts_start_top;
    bew_Midden_omlaag           =   divMidden_start_top;
    verhoging_Rechts            =   fotoKlein_start_hoog;
    verbreding_Rechts           =   fotoKlein_start_breed;
    verhoging_Links             =   fotoKlein_start_breed;
    verbreding_Links            =   fotoKlein_start_breed;
    verkleining_Midden          =   divMidden_start_hoogte;
    versmalling_Midden          =   divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'];
    bew_Midden_links            =   (Midden - (versmalling_Midden / 2));
    
    // plaatsing van de foto's 
    fotoMidden.style.width      =   (divMidden_start_hoogte * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])) - (margin * 2)    +"px";
    fotoMidden.style.height     =   divMidden_start_hoogte - (margin * 2)   +"px";
    fotoMidden.style.left       =   (Midden - Math.round((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])/ 2)) + margin   +"px";
    fotoMidden.style.top        =   divMidden_start_top + margin    +"px";
    FOTOMIDDEN.style.height     =   divMidden_start_hoogte - (margin * 2)   +"px";    
    FOTOMIDDEN.style.width      =   (divMidden_start_hoogte * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])) - (margin * 2)    +"px";
   
    fotoRechts.style.width      =   fotoKlein_start_breed - (margin * 2)	+"px";
    fotoRechts.style.height     =   fotoKlein_start_hoog - (margin * 2)		+"px";
    fotoRechts.style.left       =   divRechts_start_links + margin			+"px";
    fotoRechts.style.top        =   divRechts_start_top + margin			+"px";
    FOTORECHTS.style.height     =   fotoKlein_start_hoog - (margin * 2)		+"px";    
    FOTORECHTS.style.width      =   (fotoKlein_start_hoog * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])) - (margin * 2)    +"px";
   
    fotoLinks.style.width       =   fotoKlein_start_breed - (margin * 2)    +"px";
    fotoLinks.style.height      =   fotoKlein_start_hoog - (margin * 2)		+"px";
    fotoLinks.style.left        =   divLinks_start_links + margin			+"px";
    fotoLinks.style.top         =   divLinks_start_top + margin				+"px";
    FOTOLINKS.style.height      =	fotoKlein_start_hoog - (margin * 2)		+"px";    
    FOTOLINKS.style.width       =   (fotoKlein_start_hoog * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])) - (margin * 2)    +"px";
   
	
    FOTORECHTS.style.left       =   "0px";
    FOTORECHTS.style.top        =   "0px";
    FOTOLINKS.style.left        =   "0px";
    FOTOLINKS.style.top         =   "0px";
    FOTOMIDDEN.style.top        =   "0px";
    FOTOMIDDEN.style.left       =   "0px";
    	
	// Browserchecks voor plaatsingen van de foto's
	
	if(BrowserName == 'Microsoft Internet Explorer')
	{
	    var photo_right_width = fotoRechts.style.pixelWidth;
	    var photo_right_height = fotoRechts.style.pixelHeight; 
	}
	else
	{
	    var photo_right_width = fotoRechts.clientWidth;
	    var photo_right_height = fotoRechts.clientHeight;   
	}
	
	
	
    if(photo_right_width < (photo_right_height * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])))
    { 
		if(BrowserName == 'Microsoft Internet Explorer')
		{
			FOTORECHTS.style.width     =   fotoRechts.style.pixelWidth   +"px";
			FOTORECHTS.style.height    =   FOTORECHTS.style.pixelWidth * (FOTO[imgRechts]['hoog'] / FOTO[imgRechts]['breed'])    +"px";
			FOTORECHTS.style.top       =   (fotoRechts.style.pixelHeight - FOTORECHTS.style.pixelHeight)/2    +"px";
		}
		else
		{
			FOTORECHTS.style.width     =   fotoRechts.clientWidth   +"px";
			FOTORECHTS.style.height    =   FOTORECHTS.clientWidth * (FOTO[imgRechts]['hoog'] / FOTO[imgRechts]['breed'])    +"px";
			FOTORECHTS.style.top       =   (fotoRechts.clientHeight - FOTORECHTS.clientHeight)/2    +"px";
		}
	}
    else
    {
		if(BrowserName == 'Microsoft Internet Explorer')
		{
			FOTORECHTS.style.height    =   fotoRechts.style.height ;
			FOTORECHTS.style.width     =   FOTORECHTS.style.pixelHeight * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])   +"px";
			FOTORECHTS.style.left      =   (fotoRechts.style.pixelWidth  - FOTORECHTS.style.pixelWidth)/2  +"px";   
		}
		else
		{
			FOTORECHTS.style.height    =   fotoRechts.style.height ;
			FOTORECHTS.style.width     =   FOTORECHTS.clientHeight * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])   +"px";
			FOTORECHTS.style.left      =   (fotoRechts.clientWidth  - FOTORECHTS.clientWidth)/2  +"px";   
		}
    }
    
    if(BrowserName == 'Microsoft Internet Explorer')
	{
	    var photo_left_width = fotoLinks.style.pixelWidth;
	    var photo_left_height = fotoLinks.style.pixelHeight; 
	}
	else
	{
	    var photo_left_width = fotoLinks.clientWidth;
	    var photo_left_height = fotoLinks.clientHeight;   
	}
    
    if(photo_left_width < (photo_left_height * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])))
    {
		if(BrowserName == 'Microsoft Internet Explorer')
		{
			FOTOLINKS.style.width      =   fotoLinks.style.pixelWidth     +"px";
			FOTOLINKS.style.height     =   FOTOLINKS.style.pixelWidth  * (FOTO[imgLinks]['hoog'] / FOTO[imgLinks]['breed'])   +"px";
			FOTOLINKS.style.top        =   (fotoLinks.style.pixelHeight - FOTOLINKS.style.pixelHeight)/2  +"px";
		}
		else
		{
			FOTOLINKS.style.width      =   fotoLinks.clientWidth     +"px";
			FOTOLINKS.style.height     =   FOTOLINKS.clientWidth  * (FOTO[imgLinks]['hoog'] / FOTO[imgLinks]['breed'])   +"px";
			FOTOLINKS.style.top        =   (fotoLinks.clientHeight - FOTOLINKS.clientHeight)/2  +"px";
		}
	}
    
    else
    {   
		if(BrowserName == 'Microsoft Internet Explorer')
		{
			FOTOLINKS.style.height     =   fotoLinks.style.pixelHeight   +"px";
			FOTOLINKS.style.width      =   FOTOLINKS.style.pixelHeight * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])  +"px";
			FOTOLINKS.style.left       =   (fotoLinks.style.pixelWidth - FOTOLINKS.style.pixelWidth)/2    +"px";   
		}
		else
		{
			FOTOLINKS.style.height     =   fotoLinks.clientHeight   +"px";
			FOTOLINKS.style.width      =   FOTOLINKS.clientHeight * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])  +"px";
			FOTOLINKS.style.left       =   (fotoLinks.clientWidth - FOTOLINKS.clientWidth)/2    +"px";   
		}
	}
    
    // kijk of de animatie al klaar is
    ani_check   =   true;
    CHECK       =   true;
}

// BEWEGINGEN ; deze functie start de bewegingen op
function BEWEGINGEN(richting)
{   
    // als de animatie bezig is mogen er geen commando's doorkomen
    if(ani_check == true)    
    { 
        //check de bewegingsrichting
        if(richting == 'vooruit')
        {
            TEST = true;
        }
        
        if(richting == 'achteruit')
        {
            TEST = false;
        }
        
        // zet check op false... animatie is bezig
        ani_check   =   false;
        
       	// roep de beweging onder aan
		hoogte(TEST);		
        BewegingRechts(TEST);
        BewegingOnder(TEST);
		ResizeMidden(TEST);
   }
}

//middenhoogte berekenen
function hoogte(test)
{
	//hoogte midden
	if(270 * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) >= 530)
	{
		divMidden_start_hoogte = Math.round((FOTO[imgMidden]['hoog'] / FOTO[imgMidden]['breed']) * 530);
	}
	else
	{
		divMidden_start_hoogte = 270;
	}
	
	//hoogte rechts
	if(270 * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']) >= 530)
	{
		divRechts_hoogte = Math.round((FOTO[imgRechts]['hoog'] / FOTO[imgRechts]['breed']) * 530);
	}
	else
	{
		divRechts_hoogte = 270;
	}
	
	//hoogte links
	if(270 * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog']) >= 530)
	{
		divLinks_hoogte = Math.round((FOTO[imgLinks]['hoog'] / FOTO[imgLinks]['breed']) * 530);
	}
	else
	{
		divLinks_hoogte = 270;
	}
}

// BewegingOnder ; deze functie start de beweging van
// de linker of de rechter div, afhankelijk van de richting
function BewegingOnder(test)
{
   // beweeg divLinks naar de plek van divRechts
   //check de beweginsrichting
   if(test == true)
   {          
        
        // check of de div op zijn plek is
        if(divLinks.offsetLeft < divRechts_start_links)
        {   
            var Switch = false;
            // initialiseer de bewegingen
            bew_Links_rechts        +=  (divRechts_start_links - divLinks_start_links)/(Speed * 2.5);
            divLinks.style.left     =   bew_Links_rechts    +"px"; 
            fotoLinks.style.left    =   divLinks.offsetLeft + margin    +"px";
                              
            // selecteer het punt van fotoswitch
            if(divLinks.offsetLeft == 206 )
            {
                imgLinks = imgRechts +1;
                
                if(imgLinks < 0)
                {
                    imgLinks = FOTO.length-1;
                }
                
                if(imgLinks > FOTO.length-1)
                {
                    imgLinks = 0;
                }
                FOTOLINKS.src      =   FOTO[imgLinks]['plaatje'];
                Switch = true; 
            }
            
            if(Switch == true)
            {
                
                if(fotoLinks.clientWidth < (fotoLinks.clientHeight * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])))
                    {   
                        FOTOLINKS.style.left       =   "0px";
                        FOTOLINKS.style.width      =   (fotoLinks.clientWidth)  +"px";
                        FOTOLINKS.style.height     =   FOTOLINKS.clientWidth * (FOTO[imgLinks]['hoog'] / FOTO[imgLinks]['breed'])   +"px";
                        FOTOLINKS.style.top        =   (fotoLinks.clientHeight - FOTOLINKS.clientHeight)/2  +"px";
                    }
                    
                    else
                    {
                        FOTOLINKS.style.top        =   "0px";
                        FOTOLINKS.style.height     =   fotoLinks.clientHeight   +"px";
                        FOTOLINKS.style.width      =   (FOTOLINKS.clientHeight * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog']))    +"px";
                        FOTOLINKS.style.left       =   (fotoLinks.clientWidth - FOTOLINKS.clientWidth)/2    +"px";   
                    }         
            }
            
        setTimeout('BewegingOnder(TEST)',Sleep);
        }       
   }
   
   if(test == false)
   {          
        //check of de div op zijn plek is
        if(divRechts.offsetLeft > divLinks_start_links)
        {
            var Switch = false;
            // initialiseer de bewegingen
            bew_Rechts_links        -=  Math.round((divRechts_start_links - divLinks_start_links)/(Speed * 2.5));
            divRechts.style.left    =   bew_Rechts_links-1  +"px";
            fotoRechts.style.left   =   divRechts.offsetLeft + margin   +"px";
            
            // selecteer het punt van fotoswitch
            if(divRechts.offsetLeft == 206)
            {
                imgRechts = imgLinks -1;
                
                if(imgRechts < 0)
                {
                    imgRechts = FOTO.length-1;
                }
                
                if(imgRechts > FOTO.length-1)
                {
                    imgRechts = 0;
                }
                FOTORECHTS.src     =    FOTO[imgRechts]['plaatje'];
                Switch             =    true; 
                CHECK              =    false;
            }
            
            if(Switch == true)
            {
                
                if(fotoRechts.clientWidth < (fotoRechts.clientHeight * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])))
                    {   
                        FOTORECHTS.style.left       =   "0px";
                        FOTORECHTS.style.width      =   (fotoRechts.clientWidth)    +"px";
                        FOTORECHTS.style.height     =   FOTORECHTS.clientWidth * (FOTO[imgRechts]['hoog'] / FOTO[imgRechts]['breed'])   +"px";
                        FOTORECHTS.style.top        =   (fotoRechts.clientHeight - FOTORECHTS.clientHeight)/2   +"px";
                    }
                    
                    else
                    {
                        FOTORECHTS.style.top        =   "0px";
                        FOTORECHTS.style.height     =   fotoRechts.clientHeight     +"px";
                        FOTORECHTS.style.width      =   (FOTORECHTS.clientHeight * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']))    +"px";
                        FOTORECHTS.style.left       =   (fotoRechts.clientWidth - FOTORECHTS.clientWidth)/2     +"px";   
                    }        
            }
            setTimeout('BewegingOnder(TEST)',Sleep);
        }
    }
}

// BewegingRechts; deze functie beweegt de rechter div omhoog
// of hij verkleint de middelste div en verlaagt deze in hoogte
// dit afhankelijk van de gekozen richting
function BewegingRechts(test)
{   
    if(test == true)
    {
        
        if(divRechts.offsetTop > Math.round(((divRechts_hoogte / 2) + divMidden_start_top) - (divRechts.clientHeight /2)))
        {
           // beweging van de rechter div omhoog tot het midden van de middelste div
           bew_Rechts_omhoog        -=  (divRechts_start_top - (((divRechts_hoogte / 2) + divMidden_start_top) - (fotoKlein_start_hoog /2)))/Speed;
           divRechts.style.top      =   bew_Rechts_omhoog   +"px";
           fotoRechts.style.top     =   divRechts.offsetTop + margin    +"px";
           
           setTimeout('BewegingRechts(TEST)',Sleep);
        }
		
        if(divRechts.offsetTop <= Math.round(((divRechts_hoogte / 2) + divMidden_start_top) - (divRechts.clientHeight /2)))
        {
            BewegingRechtsHorizontaal(TEST);
        }
    } 
    
    // check op de bewegingsrichting
    if(test == false)
    {      
        if(BrowserName == 'Microsoft Internet Explorer')
        {
            if(divMidden.style.pixelHeight > fotoKlein_start_hoog)
            {
                // initialiseer de bewegingen
                verkleining_Midden          -=  (divMidden_start_hoogte - fotoKlein_start_hoog)/Speed;
                divMidden.style.height      =   verkleining_Midden  +"px";
                fotoMidden.style.height     =   divMidden.style.pixelHeight - (margin * 2)   +"px";
                BorderMidden.style.height   =   (divMidden.style.pixelHeight - (40* 2))  +"px";
                FOTOMIDDEN.style.height     =   fotoMidden.style.height;
                
                // check of de div al op de juiste hoogte is
                if(divMidden.offsetTop <= ((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)))
                {
                    // initialiseer de bewegingen
                    bew_Midden_omlaag       +=  (((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) - divMidden_start_top)/Speed;
                    divMidden.style.top     =   bew_Midden_omlaag   +"px";
                    fotoMidden.style.top    =   divMidden.offsetTop + margin    +"px";
                    FOTOMIDDEN.style.top    =   "0px";
                    
                    // check of de eind hoogte bereikt is
                    if(divMidden.style.pixelHeight == fotoKlein_start_hoog && divMidden.offsetTop >= (0.9*((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2))))
                    {
                        BewegingMidden(TEST);
                    }    
                    setTimeout('BewegingRechts(TEST)',Sleep)
                }
            }
        }
        else
        {
            if(divMidden.clientHeight > fotoKlein_start_hoog)
            {
                // initialiseer de bewegingen
                verkleining_Midden          -=  (divMidden_start_hoogte - fotoKlein_start_hoog)/Speed;
                divMidden.style.height      =   verkleining_Midden  +"px";
                fotoMidden.style.height     =   divMidden.clientHeight - (margin * 2)   +"px";
                BorderMidden.style.height   =   (divMidden.clientHeight - (40* 2))  +"px";
                FOTOMIDDEN.style.height     =   fotoMidden.style.height;
                
                // check of de div al op de juiste hoogte is
                if(divMidden.offsetTop <= ((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)))
                {
                    // initialiseer de bewegingen
                    bew_Midden_omlaag       +=  (((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) - divMidden_start_top)/Speed;
                    divMidden.style.top     =   bew_Midden_omlaag   +"px";
                    fotoMidden.style.top    =   divMidden.offsetTop + margin    +"px";
                    FOTOMIDDEN.style.top    =   "0px";
                    
                    // check of de eind hoogte bereikt is
                    if(divMidden.clientHeight == fotoKlein_start_hoog && divMidden.offsetTop >= (0.9*((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2))))
                    {
                        BewegingMidden(TEST);
                    }    
                    setTimeout('BewegingRechts(TEST)',Sleep)
                }
            }
        }
    }      
}   
     
// BewegingRechtsHorizontaal ; deze functie  beweegt de rechter div naar
// zijn positie en verbreed hem        
function BewegingRechtsHorizontaal(test)       
{  
    
    if(test == true)
    {
        if(divRechts.offsetLeft >= Math.round(Midden - ((divRechts_hoogte * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])) /2))) 
        {   
			
			
            
			// beweging van de rechter div naar links tot het midden van de middelste div
			bew_Rechts_links        -=  ((divRechts_start_links - (Midden - Math.round((divRechts_hoogte * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])) /2)))/Speed);
            
            if(bew_Rechts_links < Midden - Math.round((divRechts_hoogte * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])) /2))
            {
                divRechts.style.left    =    Midden - Math.round((divRechts_hoogte * (FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])) /2)   +"px";
                fotoRechts.style.left   =   divRechts.offsetLeft + margin   +"px"; 
                FOTORECHTS.style.left   =   "0px";
                
            }
            
            else
            {            
                divRechts.style.left    =   (bew_Rechts_links+1)    +"px";
                fotoRechts.style.left   =   divRechts.offsetLeft + margin   +"px"; 
                FOTORECHTS.style.left   =   "0px";
                
            }
           
		         
            // verbreding van de rechter div 
            if(verbreding_Rechts < Math.round(divRechts_hoogte * FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']))
            {		
                // initialiseer de bewegingen
                verbreding_Rechts           +=  ((divRechts_hoogte * FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']) - fotoKlein_start_breed)/Speed;
                
                if(verbreding_Rechts > Math.round(divRechts_hoogte * FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']))
                {
                    divRechts.style.width       =   (divRechts_hoogte * FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog'])   +"px";
                    fotoRechts.style.width      =   divRechts.clientWidth - (margin * 2)    +"px";
                    BorderRechts.style.width    =   (divRechts.clientWidth - (40 * 2))  +"px";
                    FOTORECHTS.style.width      =   fotoRechts.style.width;
                
                }
                
                else
                {               
                    divRechts.style.width       =   verbreding_Rechts   +"px";
                    fotoRechts.style.width      =   divRechts.clientWidth - (margin * 2)    +"px";
                    BorderRechts.style.width    =   (divRechts.clientWidth - (40 * 2))  +"px";
                    FOTORECHTS.style.width      =   fotoRechts.style.width;
                }
                setTimeout('BewegingRechts(TEST)',Sleep);
            }						
        }
        
        //check of de beweging klaar is en roep de verhogingsfunctie aan
		
        if(divRechts.offsetLeft == Math.round(Midden - Math.round((divRechts_hoogte * FOTO[imgRechts]['breed'] / FOTO[imgRechts]['hoog']) /2)) && divRechts.offsetTop > divMidden_start_top)
        { 
            ResizeRechts(TEST);
        }
    } 
}

// ResizeRechts ; deze functie verhoogd de rechter div als hij in het midden is
// afhankelijk van de richting verplaatst hij de linker div naar het midden
function ResizeRechts(test)
{   
    // test op bewegingsrichting
    if(test == true)
    { 
        
        // check of de div al op de juiste hoogte is
        if(divRechts.clientHeight < divRechts_hoogte && ani_check == false)
        {
			
            // initialiseer de bewegingen
            verhoging_Rechts            +=  ((divRechts_hoogte - divMidden_start_top) - fotoKlein_start_hoog)/Speed;
            divRechts.style.height      =   verhoging_Rechts-7  +"px";
            fotoRechts.style.height     =   divRechts.clientHeight - (margin * 2)   +"px";
            BorderRechts.style.height   =   (divRechts.clientHeight - (40 * 2)) +"px";
            FOTORECHTS.style.height     =   fotoRechts.style.height
            
            // beweging omhoog
            bew_Rechts_omhoog           -=  (((divRechts_hoogte / 2) - (fotoKlein_start_hoog / 2)) - divMidden_start_top)/Speed;
            divRechts.style.top         =   bew_Rechts_omhoog-2     +"px";
            fotoRechts.style.top        =   divRechts.offsetTop + margin    +"px";
            FOTORECHTS.style.top        =   "0px";
             
            setTimeout('ResizeRechts(TEST)',Sleep);
        }    
    }
    
    if(test == false)
    {  
        if(divLinks.offsetLeft < Math.round(0.99*(Midden - ((divLinks_hoogte * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])) /2))))
        {   
            // initialiseer de bewegingen    
            verbreding_Links            +=  Math.round((divLinks_hoogte * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])) - fotoKlein_start_breed)/Speed;
            
            if(verbreding_Links > divLinks_hoogte * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog']))
            {
                divLinks.style.width    =  Math.round(divLinks_hoogte * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog']))+"px";
            }
           
            else
            {
                divLinks.style.width    =   verbreding_Links +"px";
            }
            fotoLinks.style.width       =   divLinks.clientWidth - (margin * 2)     +"px";
            BorderLinks.style.width     =   (divLinks.clientWidth - (40 * 2))   +"px"
            FOTOLINKS.style.width       =   fotoLinks.style.width;
            
            // beweging naar rechts
            
            bew_Links_rechts            +=  (Midden - Math.round((divLinks_hoogte * FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog'])/ 2))/Speed;
            divLinks.style.left         =   bew_Links_rechts -2 +"px";
            fotoLinks.style.left        =   divLinks.offsetLeft + margin    +"px";
            FOTOLINKS.style.left        =   "0px";
            
            setTimeout('ResizeRechts(TEST)',(Sleep*3));
            KLAAR = false;
        } 
		
        if(divLinks.offsetLeft >= Math.round(0.99*(Midden - ((divLinks_hoogte * (FOTO[imgLinks]['breed'] / FOTO[imgLinks]['hoog']))) / 2)) && KLAAR == false)
        { 
            KLAAR = true;
            vergrootLinks();
        }     
    }       
}
// vergrootLinks ; deze functie vergroot de linker div
function vergrootLinks()
{ 
    // check of de div al op de juiste hooget is
    if(divLinks.clientHeight < divLinks_hoogte && CHECK == false)
    { 
        // initialiseer de bewegingen
        verhoging_Links             +=  ((divLinks_hoogte - divMidden_start_top) - fotoKlein_start_hoog)/Speed;
        divLinks.style.height       =   verhoging_Links -3  +"px";
        fotoLinks.style.height      =   divLinks.clientHeight - (margin * 2)    +"px";
        BorderLinks.style.height    =   (divLinks.clientHeight - (40 * 2))  +"px";
        FOTOLINKS.style.height      =   fotoLinks.style.height;
        
        // beweging omhoog
        bew_Rechts_omhoog           -=  (((divLinks_hoogte / 2) - (fotoKlein_start_hoog / 2)) + divMidden_start_top)/Speed;
        divLinks.style.top          =   bew_Rechts_omhoog   +"px"; 
        fotoLinks.style.top         =   divLinks.offsetTop + margin     +"px";
        FOTOLINKS.style.top         =   "0px";
        
        setTimeout('vergrootLinks()',Sleep);
        KLAAR = false;
    }
   
    if(divLinks.clientHeight >= divLinks_hoogte && KLAAR == false)
    {
        KLAAR   =   true;
        CHECK   =   true;
    }    
}

// resizeMidden ; deze functie verkleint de middelste div en brengt hem omlaag
// afhankelijk van de richting brengt hij de linker div omhoog
function ResizeMidden(test)
{
    // test op bewegingsrichting
    if(test == true)
    {   
       if(BrowserName == 'Microsoft Internet Explorer')
        {
            // check of de div al op de juiste groote is
            if(divMidden.style.pixelHeight > fotoKlein_start_hoog)
            {   
                // initialiseer de bewegingen
                verkleining_Midden          -=  (divMidden_start_hoogte - fotoKlein_start_hoog)/Speed;
                divMidden.style.height      =   verkleining_Midden  +"px";
                fotoMidden.style.height     =   divMidden.style.pixelHeight - (margin * 2)   +"px";
                BorderMidden.style.height   =   divMidden.style.pixelHeight - (40 * 2) +"px";
                FOTOMIDDEN.style.height     =   fotoMidden.style.height;
                 
                // check of de div al op de juiste hoogte is
                if(divMidden.offsetTop <= ((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) )
                {
                    // initialiseer de bewegingen
                    bew_Midden_omlaag       +=  (((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) - divMidden_start_top)/Speed;
                    divMidden.style.top     =   bew_Midden_omlaag +"px";
                    fotoMidden.style.top    =   divMidden.offsetTop + margin +"px";
                               
                    // check of de goede hoogte bereikt is
                    if(divMidden.clientHeight <= fotoKlein_start_hoog && divMidden.offsetTop >= Math.round(0.99*((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2))))
                    {
                        BewegingMidden(TEST);
                    }    
                    setTimeout('ResizeMidden(TEST)',Sleep)
                }
            }  
         }
         else
         {
            // check of de div al op de juiste groote is
            if(divMidden.clientHeight > fotoKlein_start_hoog)
            {   
                // initialiseer de bewegingen
                verkleining_Midden          -=  (divMidden_start_hoogte - fotoKlein_start_hoog)/Speed;
                divMidden.style.height      =   verkleining_Midden  +"px";
                fotoMidden.style.height     =   divMidden.clientHeight - (margin * 2)   +"px";
                BorderMidden.style.height   =   divMidden.clientHeight - (40 * 2) +"px";
                FOTOMIDDEN.style.height     =   fotoMidden.style.height;
                 
                // check of de div al op de juiste hoogte is
                if(divMidden.offsetTop <= ((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) )
                {
                    // initialiseer de bewegingen
                    bew_Midden_omlaag       +=  (((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) - divMidden_start_top)/Speed;
                    divMidden.style.top     =   bew_Midden_omlaag +"px";
                    fotoMidden.style.top    =   divMidden.offsetTop + margin +"px";
                               
                    // check of de goede hoogte bereikt is
                    if(divMidden.clientHeight <= fotoKlein_start_hoog && divMidden.offsetTop >= Math.round(0.99*((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2))))
                    {
                        BewegingMidden(TEST);
                    }    
                    setTimeout('ResizeMidden(TEST)',Sleep)
                }
            }  
         } 
    }
    if(test == false)
    {
        
        if(divLinks.offsetTop > Math.round(((divLinks_hoogte / 2) + divMidden_start_top) - (divLinks.clientHeight /2)))
        {
           // beweging van de rechter div omhoog tot het midden van de middelste div
           bew_Rechts_omhoog      -=  (divLinks_start_top - (((divLinks_hoogte / 2) + divMidden_start_top) - (fotoKlein_start_hoog /2)))/Speed;
           divLinks.style.top     =   bew_Rechts_omhoog     +"px";
           fotoLinks.style.top    =   divLinks.offsetTop + margin   +"px";
           
           setTimeout('ResizeMidden(TEST)',Sleep);
        }   
       
        if(divLinks.offsetTop <= Math.round(1.01*(((divLinks_hoogte / 2) + divMidden_start_top) - (divRechts.clientHeight /2))))
        {
           ResizeRechts(TEST);
        }
            
    }
}

// BewegingMidden ; verplaats de middelste div naar links
// afhankelijk van de richting verplaatst hij de middelste div naar rechts\
// en versmalt hem
function BewegingMidden(test)
{
    // test op de bewegingsrichting
    if(test == true)
    { 
        
        //check of de div al op de goede plek aangekomen is
		
        if(divMidden.offsetLeft > divLinks_start_links )
        {    
            // initialiseer de bewegingen         
            bew_Midden_links            -=  ((Midden - ((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) /2)) - divLinks_start_links)/Speed;
            divMidden.style.left        =   bew_Midden_links    +"px";
            fotoMidden.style.left       =   divMidden.offsetLeft + margin   +"px";
            
            // versmal de div
            versmalling_Midden          -=  ((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) - fotoKlein_start_breed)/Speed;
            divMidden.style.width       =   versmalling_Midden  +"px";
            fotoMidden.style.width      =   divMidden.clientWidth - (margin * 2)    +"px";
            BorderMidden.style.width    =   divMidden.clientWidth - (40 * 2)   +"px";
            FOTOMIDDEN.style.width      =   fotoMidden.style.width;
                
            // check of de div op dezelfde links marge is aangekomen als het beginpunt van de linker div
			if(divMidden.offsetLeft <= divLinks_start_links)
            {   
               
                if(fotoMidden.clientWidth < (fotoMidden.clientHeight * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])))
                {
                    FOTOMIDDEN.style.width     =   fotoMidden.clientWidth   +"px";
                    FOTOMIDDEN.style.height    =   FOTOMIDDEN.clientWidth * (FOTO[imgMidden]['hoog'] / FOTO[imgMidden]['breed'])    +"px";
                    FOTOMIDDEN.style.top       =   (fotoMidden.clientHeight - FOTOMIDDEN.clientHeight)/2    +"px";
                }
               
                else
                {   
                    FOTOMIDDEN.style.height    =   fotoMidden.clientHeight  +"px";
                    FOTOMIDDEN.style.width     =   FOTOMIDDEN.clientHeight * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])   +"px";
                    FOTOMIDDEN.style.left      =   (fotoMidden.clientWidth - FOTOMIDDEN.clientWidth)/2  +"px";   
                }
            
                BewegingMiddenVertikaal(TEST);
            }
            setTimeout('BewegingMidden(TEST)',Sleep);   
        }    
    }
   
    if(test == false)
    {   
        // check of de div al op de juiste plek is aangekomen 1% speling ivm met vreemde uitkomsten
        
        if(divMidden.offsetLeft <= (divRechts_start_links - (divRechts_start_links /100)))
        {  
            // initialiseer de bewegingen
            bew_Midden_links            +=  (divRechts_start_links - ((Midden - ((divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']) /2))))/Speed;
            divMidden.style.left        =   bew_Midden_links    +"px";
            fotoMidden.style.left       =   divMidden.offsetLeft + margin   +"px";
            
            // versmalling div
            versmalling_Midden          +=  (fotoKlein_start_breed - (divMidden_start_hoogte * FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog']))/Speed;
            divMidden.style.width       =   versmalling_Midden  +"px";
            fotoMidden.style.width      =   divMidden.clientWidth - (margin * 2)    +"px";
            BorderMidden.style.width    =   divMidden.clientWidth  - (40 * 2)  +"px";
            FOTOMIDDEN.style.width      =   fotoMidden.style.width;
            
            // check of de div op dezelfde links marge is aangekomen als het beginpunt van de rechter div
            if(divMidden.offsetLeft >= (divRechts_start_links - (divRechts_start_links /100)))
            {
                
                if(fotoMidden.clientWidth < (fotoMidden.clientHeight * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])))
                {
                    FOTOMIDDEN.style.width     =   fotoMidden.clientWidth   +"px";
                    FOTOMIDDEN.style.height    =   FOTOMIDDEN.clientWidth * (FOTO[imgMidden]['hoog'] / FOTO[imgMidden]['breed'])    +"px";
                    FOTOMIDDEN.style.top       =   (fotoMidden.clientHeight - FOTOMIDDEN.clientHeight)/2    +"px";
                }
                
                else
                {   
                    FOTOMIDDEN.style.height    =   fotoMidden.clientHeight  +"px";
                    FOTOMIDDEN.style.width     =   FOTOMIDDEN.clientHeight * (FOTO[imgMidden]['breed'] / FOTO[imgMidden]['hoog'])   +"px";
                    FOTOMIDDEN.style.left      =   (fotoMidden.clientWidth - FOTOMIDDEN.clientWidth)/2  +"px";   
                }
                BewegingMiddenVertikaal(TEST);
            }
            setTimeout('BewegingMidden(TEST)',Sleep);
        }
    }
}
        
// BewegingMiddenVertikaal ; beweegt de middelste div naar beneden        
function BewegingMiddenVertikaal(test)
{       
    KLAAR   =   false; 
    
    if(test == true)
    {             
        // en of de hoogte vanaf de top kleiner is dan het midden van de hoofdfoto.
        if(divMidden.offsetTop < divLinks_start_top)
        {
            // initialiseer de bewegingen
            bew_Midden_omlaag      -=  ((((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2)) ) - divLinks_start_top)/Speed;
            divMidden.style.top    =   bew_Midden_omlaag    +"px";  
            fotoMidden.style.top   =   divMidden.offsetTop + margin     +"px";         
        
            //check de positie van de div tov de startwaarde van de linker div
            if(divMidden.offsetTop < divLinks_start_top)
            {                 
                setTimeout('BewegingMiddenVertikaal(TEST)',Sleep);        
            }
        }
        
        if(divMidden.offsetTop >= divLinks_start_top && KLAAR == false)
        {
            KLAAR   =   true;
            reset(TEST);
        }       
    }
    
    if(test == false)
    {          
        // check of de div op dezelfde top hoogte is als de startwaarde van de rechter div
        if(divMidden.offsetTop < divRechts_start_top)
        {   
            // initialiseer de bewegingen
            bew_Midden_omlaag      -=  ((((divMidden_start_hoogte / 2) - (fotoKlein_start_hoog / 2))) - divRechts_start_top)/Speed;
            divMidden.style.top    =   bew_Midden_omlaag    +"px";
            fotoMidden.style.top   =   divMidden.offsetTop + margin     +"px";           
        
            //check de positie van de div tov de startwaarde van de rechter div
            if(divMidden.offsetTop < divRechts_start_top)
            {   
                setTimeout('BewegingMiddenVertikaal(TEST)',Sleep);        
            }            
        }
        
        if ((divMidden.offsetTop == divRechts_start_top) && (KLAAR == false))
        {
            KLAAR   =   true;
            reset(TEST);
        }
    }
}

// browserdetectie
function browserDetectie()
{
	 // mozilla/netscape/opera/IE7
	 if (typeof window.innerWidth != 'undefined')
	 {
		  viewportwidth = window.innerWidth,
		  viewportheight = window.innerHeight
	 }
	 // IE6

	 else if (typeof document.documentElement != 'undefined'
		 && typeof document.documentElement.clientWidth !=
		 'undefined' && document.documentElement.clientWidth != 0)
	 {
		   viewportwidth = document.documentElement.clientWidth,
		   viewportheight = document.documentElement.clientHeight
	 }
	 
	 // oudere versies IE
	 
	 else
	 {
		   viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
		   viewportheight = document.getElementsByTagName('body')[0].clientHeight
	 }
		
}
// show : foto zichtbaar				true/false
// knop : klik of resize				true/false
// FOTOSHOW : foto al zichtbaar			true/false

function showPix(show,knop)
{
	browserDetectie();
	if(knop == false && FOTOSHOW == true)
	{
		if(BrowserName != 'Microsoft Internet Explorer')
		{
		    grayOut(true,knop);
		}
		if(navigator.userAgent.indexOf('MSIE 6') < 0)
		{
		    showFoto(true,knop);
		}
	}
	else if(knop == false && FOTOSHOW == false)
	{
		if(BrowserName != 'Microsoft Internet Explorer')
		{
		    grayOut(false,knop);
		}
		if(navigator.userAgent.indexOf('MSIE 6') < 0)
		{
		    showFoto(false,knop);
		}
	}
	else
	{
		if(BrowserName != 'Microsoft Internet Explorer')
		{
		    grayOut(show,knop);
		}
		if(navigator.userAgent.indexOf('MSIE 6') < 0)
		{
		    showFoto(show,knop);
	    }
	}
}
var DIV								=	document.createElement('div');
var nummer = new Array();
function showFoto(test,knop)
{
	
	var foto						=	document.getElementById("showfoto");
	foto.appendChild(DIV);

	if(test)
	{
		
		DIV.style.display			=	'block';
		DIV.style.height			=	FOTO[imgMidden]['hoog']	+ (margin * 2)+"px";
		DIV.style.width				=	FOTO[imgMidden]['breed'] + (margin * 2)+"px";	
		
		if(BrowserName == 'Microsoft Internet Explorer')
		{ 
		    if(DIV.style.pixelHeight > (viewportheight-161))
		    {
		        DIV.style.height = (viewportheight-161) +"px";
		        DIV.style.width = (viewportheight-161) * (FOTO[imgMidden]['breed']/FOTO[imgMidden]['hoog'])+"px";
		    }
		}
		else
		{
		    if(DIV.clientHeight > (viewportheight-161))
		    {
		        DIV.style.height = (viewportheight-161) +"px";
		        DIV.style.width = (viewportheight-161) * (FOTO[imgMidden]['breed']/FOTO[imgMidden]['hoog'])+"px";
		    }
		}
		
		
		DIV.style.zIndex			=	300;
		DIV.style.position			=	'fixed';  //  geeft de waardes aan de <body> tag
		DIV.style.left				=	(document.getElementsByTagName('body')[0].clientWidth - DIV.clientWidth) / 2  +"px";
		DIV.style.top				=	(600 - DIV.clientHeight) /2 +"px";
		if(DIV.offsetTop <= 162)
		{
		    DIV.style.top           =   '161px';
		}
			
		// de html in de binnenkant van de div
		DIV.innerHTML				=	'<div style="position:relative;"><div id = "vergrote_foto" style="position:absolute; z-index:255; top:'+margin+'px; left:'+margin+'px;"><img name="vergrote_foto" style=" z-index:255;" src="'+FOTO[imgMidden]['plaatje']+'" alt="" /></div><div style="position:absolute; z-index:260;"><table  cellspacing="0" style="z-index:260; width:100%; height:100%;">'+
											'<tr>'+
												'<td valign = "top" style = "z-index:260; text-align: left; margin:0px; padding:0px;"><img src="images/slideshow/corner_upper_left_hq.png"  alt=""/><\/td>'+
												'<td style  = "z-index:260; margin:0px; padding:0px; background: url(images/slideshow/border_top_hq.png) repeat-x top;"><img src="images/slideshow/nix.gif"  alt=""/><\/td>'+
												'<td valign = "top" style = "z-index:260; text-align: right; margin:0px; padding:0px;"><img src="images/slideshow/corner_upper_right_hq.png"  alt=""/><\/td>'+
											'<\/tr>'+
											'<tr>'+
												'<td style = "z-index:260; margin:0px; padding:0px; background: url(images/slideshow/border_left_hq.png) repeat-y left;"><img src="images/slideshow/nix.gif"  alt=""/><\/td>'+
												'<td id="middenCell" style = "z-index:260; margin:0px; padding:0px;"><img src="images/slideshow/nix.gif"  alt="" /><\/td>'+
												'<td style = "z-index:260; margin:0px; padding:0px; background: url(images/slideshow/border_right_hq.png) repeat-y right;"><img src="images/slideshow/nix.gif"  alt=""/><\/td>'+
											'<\/tr>'+
											'<tr>'+
												'<td valign = "bottom" style = "z-index:260; text-align: left; margin:0px; padding:0px;"><img src="images/slideshow/corner_bottom_left_hq.png"  alt=""/><\/td>'+
												'<td style = "z-index:260; margin:0px; padding:0px; background: url(images/slideshow/border_bottom_hq.png) repeat-x bottom;"><img src="images/slideshow/nix.gif"  alt=""/><\/td>'+
												'<td valign = "bottom" style = "z-index:260; text-align: right; margin:0px; padding:0px;"><img src="images/slideshow/corner_bottom_right_hq.png"  alt=""/><\/td>'+
											'<\/tr>'+
										'<\/table></div></div>';
										
		document.vergrote_foto.style.height   = DIV.clientHeight - (margin*2) +"px";
		document.vergrote_foto.style.width    = DIV.clientWidth - (margin*2)+"px";
										
		var MiddenCell = document.getElementById("middenCell");
		MiddenCell.style.height	=	(DIV.clientHeight - 80)	+"px";
		MiddenCell.style.width	=	(DIV.clientWidth - 80)	+"px";
		nummer += FOTO[imgMidden]['plaatje']; 
		FOTOSHOW = true;
	}
	if(!test)
	{	
		DIV.innerHTML = '';
		DIV.style.display	= 'none';
		FOTOSHOW = false;
	}
}

function grayOut(vis,knop,options) 
{
	
	  var options	= options || {}; 
	  var zindex	= options.zindex || 100;
	  var opacity	= options.opacity || 70;
	  var opaque	= (opacity / 100);
	  var bgcolor	= options.bgcolor || '#000000';
	  dark			= document.getElementById('Grijskleur');
	  if (!dark) {
		var tbody					=	document.getElementsByTagName("body")[0];
			tnode					=	document.createElement('div');					
			tnode.style.position	=	'absolute';										
			tnode.style.top			=	'0px';											
			tnode.style.left		=	'0px';										
			tnode.style.overflow	=	'hidden';										           
			tnode.style.display		=	'none';											
			tnode.id				=	'Grijskleur';						
			tbody.appendChild(tnode);													
			dark					=	document.getElementById('Grijskleur'); 	
	}
	  if (vis) {
		 
		
		if(viewportheight > document.getElementsByTagName('body')[0].clientHeight)
		{	
			var pageWidth	=	viewportwidth +"px";
			var pageHeight	=	viewportheight +"px";
		}
		else
		{
			var pageWidth	=	document.getElementsByTagName('body')[0].clientWidth 	+"px";
			var pageHeight	=	document.getElementsByTagName('body')[0].clientHeight +20	+"px";
		}
		  
		dark.style.opacity			=	opaque;                      
		dark.style.MozOpacity		=	opaque;                   
		dark.style.filter			=	'alpha(opacity='+opacity+')'; 
		dark.style.zIndex			=	zindex;        
		dark.style.backgroundColor	=	bgcolor;  
		dark.style.width			=	pageWidth;
		dark.style.height			=	pageHeight;
		dark.style.display			=	'block';                
		} 
		else 
		{
			dark.style.display			=	'none';
		}
}