// Moves the slideshow foward "one set" of images.
        function slideshowPreviousSet()
        {
            var iNumImagesInSet;
                iNumImagesInSet = 3;
            iNewPosition -= iNumImagesInSet;
            if(iNewPosition < 1)
                iNewPosition = iImgCount;
            move();
        } 

        function slideshowNext()
        {
            iNewPosition++;
            if(iNewPosition > iImgCount)
                iNewPosition = 1;
            move();
        }
        
        function slideshowTo(imageNumber)
        {
            //alert('slideshowTo: ');
            iNewPosition = imageNumber;
            if(iNewPosition > iImgCount || iNewPosition < 1)
                iNewPosition = 1;
            move();
        }

        function toggleSlideshow()
        {
            //alert('toggleSlideshow: ');
	        if (oSlideshowTimeout == null)
	            playSlideshow();
	        else
		        pauseSlideshow();
        }

        function playSlideshow()
        {
            // Note: set the timeout with usual 
            //timing becuase if a "move" was in progress, we need to let it finish.
            oSlideshowTimeout = window.setTimeout('swapSlideshowImages()', iSlideshowTimeout);
	        // Change out the image to "pause"
	        var regEx = /slideshow_play/gi;
	        document.getElementById('Master_ssp_' + 'slideshowToggleImage').src = document.getElementById('Master_ssp_'  + 'slideshowToggleImage').src.replace(regEx, 'slideshow_pause');
        }

        function pauseSlideshow()
        {
            // Check to see if the slideshow is turned on. If not, just bail.
            if(oSlideshowTimeout == null)
                return;
	        window.clearTimeout(oSlideshowTimeout);
	        oSlideshowTimeout = null;
	        // Change out the image to "play"
	        var regEx = /slideshow_pause/gi;
	        document.getElementById('Master_ssp_' + 'slideshowToggleImage').src = document.getElementById('Master_ssp_' + 'slideshowToggleImage').src.replace(regEx, 'slideshow_play');
        }

        function swapSlideshowImages()
        {
            slideshowNext();
            oSlideshowTimeout = window.setTimeout('swapSlideshowImages()', iSlideshowTimeout);
        }

        function isSlideshowRunning()
        {
            // If the timeout object is set then the slideshow is running
            return (oSlideshowTimeout != null);
        }

        function getSlideshowControlsTimeout()
        {
            var iControlsTimeout;
            // If the slideshow is turned on, use the slideshow's timout period. If not, use the move animation's.
            if(isSlideshowRunning())
                iControlsTimeout = iSlideshowDisableControlsTimeout;
            else
                iControlsTimeout = iMoveAnimationDuration * 1000; // iMoveAnimation is in seconds; we need miliseconds, so mult by 1000
            return iControlsTimeout;
        }

        // Pass in the id of an object to "fade in" 
        //and it'll take care of the rest.
        function fadeIn(id) { fade(id, iOpacityFadeStepSize, 100); }

        // Pass in the id of an object to "fade in" and it'll take care of the rest.
        function fadeInToOpacity(id, targetOpacity) { fade(id, iOpacityFadeStepSize, targetOpacity); }

        // Pass in the id of an object to "fade out" and it'll take care of the rest.
        function fadeOutToOpacity(id) { fade(id, -iOpacityFadeStepSize, 0); }

        // Pass in the id of an object to "fade out" and it'll take care of the rest.
        function fadeOut(id) { fade(id, -iOpacityFadeStepSize, 0); }
        
        // This is the method that does the work of fading.
        function fade (id, incrementOpacity, targetOpacity)
        {
 	        var object = document.getElementById(id).style;

            // Different browsers handle opacity settings via different attributes...
 	        var currentOpacity;  // A number from 1 to 100.
            if(object.filter != null && object.filter != undefined) // Internet Explorer
                currentOpacity = getIEAlphaOpacity(object);
            if(object.opacity != null && object.opacity != undefined) // Opera
                currentOpacity = object.opacity * 100;
            if(object.MozOpacity != null && object.MozOpacity != undefined) // Mozilla
                currentOpacity = object.MozOpacity * 100;
            if(object.KhtmlOpacity != null && object.KhtmlOpacity != undefined) // Konquerer
                currentOpacity = object.KhtmlOpacity * 100;

 	        var newOpacity = Number(currentOpacity) + Number(incrementOpacity);   // A number from 1 to 100.
            // alert('currentOpacity = ' + currentOpacity + '; newOpacity = ' + newOpacity + '; targetOpacity = ' + targetOpacity + '; incrementOpacity = '  + incrementOpacity);
            
	        // Stop when: incrementOpacity is positive (fade in), stop at 100; when negative (fade out), stop at 0; opacity = targetOpacity.
	        if ( (incrementOpacity > 0 && currentOpacity >= 100) || (incrementOpacity < 0 && currentOpacity <= 0) || (currentOpacity ==  targetOpacity) )
	        {
    	        // We're done fading. Do nothing!
    	    }
    	    else
    	    {
                // We're not yet fully opaque. 
                //Call this method recursively.
	            if(object.filter != null && object.filter != undefined) // Internet Explorer
	                object.filter = "alpha(opacity=" + newOpacity + ")";
	            if(object.opacity != null && object.opacity != undefined) // Opera
	                object.opacity = (newOpacity / 100);
	            if(object.MozOpacity != null && object.MozOpacity != undefined) // Mozilla
	                object.MozOpacity = (newOpacity / 100);
	            if(object.KhtmlOpacity != null && object.KhtmlOpacity != undefined) // Konquerer
	                object.KhtmlOpacity = (newOpacity / 100);

		        setTimeout("fade('" + id + "', " + incrementOpacity + ", " + targetOpacity + ")", 1);
		    }
	     };
        
        
        // IE's handling of opacity is obtuse and requires parsing :(
        // Note that this implementation is specific to our usage!
        function getIEAlphaOpacity(object)
        {
            // For reference:
            // http://msdn2.microsoft.com/en-us/library/ms532910.aspx
            // http://msdn2.microsoft.com/en-us/library/ms532847.aspx

            var sFilter = object.filter;
            var iStartIndex = sFilter.indexOf('opacity='); // Location of the start of the opacity number
            var iOpacity;

            // if no filter is defined, return IE's default opacity
            
            if(sFilter.Length == 0 || iStartIndex == -1)
                iOpacity = 0; // 0 is the default opacity in IE (fully visible)
            else
            {
                // We are (hopefully!) parsing a string 
                // that looks like this: alpha(opacity=20)
                iOpacity = sFilter.substring(iStartIndex + 8, (sFilter.length - 1));
            }

            return Number(iOpacity); // Return the value as a number (rather than as as string)
        }


        function move()
        {
            document.getElementById('lgli').style.opacity = 0; // Set the opacity to 0 right away; don't fade out 'cuz it'll cause screwy  results.
            document.getElementById('lgli').src = eval('lgli' + iNewPosition).src;

            // Try to dynamically load the height and width of the image. If not available, use the expected size of 302h x 400w.
             var iHeight = eval('lgli' + iNewPosition).height
             var iWidth = eval('lgli' + iNewPosition).width
             //if(iHeight != undefined && iHeight > 1)
             //iHeight += 'px'
             //else
              //  iHeight = '302px';
             //if(iWidth != undefined && iWidth > 1)
               //  iWidth += 'px'
             //else
             //    iWidth = '400px';

            
             //var iHeight = '350px'
            // var iWidth = '400px';
            
            
            //if(iHeight != undefined && iHeight > 1)
            //    iHeight += 'px'
            //else
            //    iHeight = '302px';
            //if(iWidth != undefined && iWidth > 1)
            //    iWidth += 'px'
            //else
            //    iWidth = '400px';
            
            // volgende regel was iHeight ipv "xx%" dit geeft nu % van 
            document.getElementById('lgli').style.height = "100%";
            document.getElementById('lgli').style.width = "60%";

            fadeIn('lgli'); // Fade the new image in (it's asynchronous)
            document.getElementById('currentPosition').innerHTML = iNewPosition;

            // Scroll logic for the 3-wide thumbnails (on the main page):
            // Scroll when the new position is not within the last three    ** or **
            // Scroll when the current position is not withint the last 3 thumbnails
            // --> Together this logic (seems to) 
            // allow users to "prev" from position #1 to the last thumbnail, as well as vice versa.
            
            {
                // If we are at the pic set then when we scroll
                if (iCurrentPosition == iImgCount)
                    var pixelsToMove = (iImgCount - 3) * iScrollOffsetPixels;
                else
                    var pixelsToMove = (iCurrentPosition - iNewPosition) * iScrollOffsetPixels;

                //new Effect.Move('smallImagesBoxInside', { x: pixelsToMove, y: 0, transition: Effect.Transitions.sinoidal,  duration:iMoveAnimationDuration });
                new Effect.ScrollHorizontal('smallImagesBoxOutside', {to: ((iNewPosition-1) * iScrollOffsetPixels), duration:iMoveAnimationDuration}); //  This is a scriptalicious.js effect
            }
            iCurrentPosition = iNewPosition;
        }
        
        function initialize()
        {
            {
                // Set up the large and small images
                document.getElementById('lgli').src = lgli1.src;
                document.getElementById('smli1').className = 'thumbnail_border_sel';

                // Reset the size of the smallImagesInsideBox to that of the table that contains all the small images.
                // This ensures that the scrollbar is properly sized & scrolls only within the area that is occupied by the images.
                document.getElementById('smallImagesBoxInside').style.width = document.getElementById('smallImagesTable').offsetWidth;

                // Set the thumbnail to the current 
                // position (which will be 1 on page load). Done because sometimes on page reload (F5),
                // the 3-wide is fussed up in FireFox.
                slideshowTo(iCurrentPosition)
            }
        }
        
        // BEGIN: Inline JavaScript
        // PROGRAMMER WARNING: All of the arrays in this control are one-based. They are not zero-based as ususal. In other words,
        // the first item in the array is MyArray[1], not MyArray[0]. It was a stupid design choice that I (Vince) never fixed. :(

        // BEGIN: Image arrays
        var arySmallPic = new Array(19);var aryImageCaption = new Array(19);arySmallPic[1] = new Object();
        lgli1 = new Image();lgli1.src = "fotos/tuin01z.jpg";aryImageCaption[1] = new Object();aryImageCaption[1].value = "";
        lgli2 = new Image();lgli2.src = "fotos/tuin04z.jpg";aryImageCaption[2] = new Object();aryImageCaption[2].value = "";
         lgli3 = new Image();lgli3.src = "fotos/achter1z.jpg";aryImageCaption[3] = new Object();aryImageCaption[3].value = "";
        lgli4 = new Image();lgli4.src = "fotos/tuin02z.jpg";aryImageCaption[4] = new Object();aryImageCaption[4].value = "";
        lgli5 = new Image();lgli5.src = "fotos/tuin03z.jpg";aryImageCaption[5] = new Object();aryImageCaption[5].value = "";
        lgli6 = new Image();lgli6.src = "fotos/kantoorvoor1z.jpg";aryImageCaption[6] = new Object();aryImageCaption[6].value = "";
        lgli7 = new Image();lgli7.src = "fotos/kantoorachter1z.jpg";aryImageCaption[7] = new Object();aryImageCaption[7].value = "";
        lgli8 = new Image();lgli8.src = "fotos/ornament21z.jpg";aryImageCaption[8] = new Object();aryImageCaption[8].value = "";
        lgli9 = new Image();lgli9.src = "fotos/ornament12z.jpg";aryImageCaption[9] = new Object();aryImageCaption[9].value = "";
        lgli10 = new Image();lgli10.src = "fotos/tussendeur1z.jpg";aryImageCaption[10] = new Object();aryImageCaption[10].value = "";
        lgli11 = new Image();lgli11.src = "fotos/tussendeur12z.jpg";aryImageCaption[11] = new Object();aryImageCaption[11].value = "";
        lgli12 = new Image();lgli12.src = "fotos/keuken2z.jpg";aryImageCaption[12] = new Object();aryImageCaption[12].value = "";
        lgli13 = new Image();lgli13.src = "fotos/keuken22z.jpg";aryImageCaption[13] = new Object();aryImageCaption[13].value = "";
        lgli14 = new Image();lgli14.src = "fotos/eetkamer2z.jpg";aryImageCaption[14] = new Object();aryImageCaption[14].value = "";
        lgli15 = new Image();lgli15.src = "fotos/zitkamer2z.jpg";aryImageCaption[15] = new Object();aryImageCaption[15].value = "";
        lgli16 = new Image();lgli16.src = "fotos/slaapkamer23z.jpg";aryImageCaption[16] = new Object();aryImageCaption[16].value = "";
        lgli17 = new Image();lgli17.src = "fotos/slaapkamer13z.jpg";aryImageCaption[17] = new Object();aryImageCaption[17].value = "";
        lgli18 = new Image();lgli18.src = "fotos/douche3z.jpg";aryImageCaption[18] = new Object();aryImageCaption[18].value = "";
        lgli19 = new Image();lgli19.src = "fotos/badkamer3z.jpg";aryImageCaption[19] = new Object();aryImageCaption[19].value = "";

        // END: Image arrays

        var bProcessingCommand = false; // Are we currently processing a slideshow command?
        // DIT IS AANTAL SLIDES ZIE OOK HOGER
        var iImgCount = 19;
        var iCurrentPosition = 1;
        var iNewPosition = 1;
        var iScrollOffsetPixels = 132;
        var iMoveAnimationDuration = 1.0; // Duration of the move annimation in seconds, given as a float.
        var iSlideshowTimeout = 4000; // Time, in miliseconds, between image transitions. MUST be greater than iMoveAnimationDuration otherwise UI gets screwy.
        var oSlideshowTimeout = null; // The timeout object.
        var iSlideshowDisableControlsTimeout = iSlideshowTimeout; // Time, in miliseconds, that keystroke monitoring will be supressed.
        var iOpacityFadeStepSize = 10; // The amount that the opacity is increase every time through the recursive fadeIn() and fadeOut() calls.
        
        var iOverlayOpacity = 80;
        var iMaxImageCaptionCharsBeforeTruncation = 115; // The max number of characters to show for an image caption before truncating and showing ellipses.
        var bShowingFullImageCaption = true; // Are we showing the full image caption? (Or are we showing ellipses?) 
        var iImageCaptionTableCellHeight = 35;
        var bSlideshowIsAllowed = true;
        var PrintMode = '';
        
        // Call the initialize method after a slight delay; some browsers (Firefox, others?) need a little time to load the first large image.
        // We use the large image's dimensions in the initialize function.
        window.setTimeout('initialize(false);', 250);
        window.setTimeout('initialize(true);', 250);
        
        // END: Inline JavaScript