
<!-- ========================================== -->
<!-- Include file 'CommonSetUpBasic.php' opened -->
<!-- ========================================== -->


<!-- ============================================== -->
<!-- Include file 'CommonSetUp.php' opened -->
<!-- ============================================== -->


<!-- ============================================== -->
<!-- Include file 'ApplicationFunctions.php' opened -->
<!-- ============================================== -->

 
<!-- =============================================== -->
<!-- Include file 'ApplicationFunctions2.php' opened -->
<!-- =============================================== -->

 
<!-- =========================================== -->
<!-- Include file 'DatabaseFunctions.php' opened -->
<!-- =========================================== -->


<!-- ==================================================== -->
<!-- Include file 'DatabaseFunctions_MailList.php' opened -->
<!-- ==================================================== -->


<!-- =================================================== -->
<!-- Include file 'DatabaseFunctions_Artists.php' opened -->
<!-- =================================================== -->


<!-- ======================================================= -->
<!-- Include file 'DatabaseFunctions_ArtistTags.php' opened -->
<!-- ======================================================= -->

 
<!-- ============================================================= -->
<!-- Include file 'DatabaseFunctions_ArtistArtworkTags.php' opened -->
<!-- ============================================================= -->

 
<!-- ==================================================== -->
<!-- Include file 'DatabaseFunctions_Artworks.php' opened -->
<!-- ==================================================== -->

 
<!-- ======================================================= -->
<!-- Include file 'DatabaseFunctions_ArtworkTags.php' opened -->
<!-- ======================================================= -->

 
<!-- ================================================= -->
<!-- Include file 'DatabaseFunctions_Poems.php' opened -->
<!-- ================================================= -->

   
<!-- ======================================== -->
<!-- Include file 'ImageFunctions.php' opened -->
<!-- ======================================== -->


<!-- ======================================= -->
<!-- Include file 'LanguageArray.php' opened -->
<!-- ======================================= -->


<!-- Date('D'): 'Mon' -->

<!-- ========================================== -->
<!-- Include file 'phpHTMLFunctions.php' opened -->
<!-- ========================================== -->

 
<!-- =================================== -->
<!-- Include file 'ShowImage.php' opened -->
<!-- =================================== -->

 
<!-- ======================================= -->
<!-- Include file 'LinkFunctions.php' opened -->
<!-- ======================================= -->

 <!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'BannerNeeded' -->
<!-- GetValue: '1' -->
<!-- GetValue: '1' -->

<!-- BannerNeeded: '1' -->
<!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'FullDescriptionNeeded' -->
<!-- GetValue: '' -->
<!-- GetValue: '' -->

<!-- FullDescriptionNeeded: '' -->
<!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'Debug' -->
<!-- GetValue: '1' -->
<!-- GetValue: '1' -->
<!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'TemplateNeeded' -->
<!-- GetValue: 'TRUE' -->
<!-- GetValue: '1' -->
<!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'PortraitShown' -->
<!-- GetValue: '1' -->
<!-- GetValue: '1' -->
<!-- PHPCSU_GetBoolean -->
<!-- _GET: '
Array
(
    [ImageFile] => Artists/Images/marije gies_image_warm.jpg
    [Language] => nl
    [TemplateNeeded] => TRUE
)

' -->
<!-- _POST: '
Array
(
)

' -->
<!-- GetParameter: 'ZoomImageShown' -->
<!-- GetValue: '1' -->
<!-- GetValue: '1' -->

<!DOCTYPE html>
<!-- The following line gives an error when the two end '>' are not separated, thus splitted over 3 lines -->
<!-- PHPHTML_addHTLMLangAttribute needs 2 attributes -->
<!-- * Language or "" -->
<!-- * $ModuleTrace, fictive value used -->
<html lang="nl"  style="font-size: 1.0em;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="Art Sanctuary">


        <title lang = 'nl'>
            
        </title>
    
<!-- CurrentURI: 'www.the-enchanted-garden.info/2023/ZoomImage.php?ImageFile=Artists/Images/marije%20gies_image_warm.jpg&Language=nl&TemplateNeeded=TRUE' -->

        <link
            rel = 'canonical'
            href = 'www.the-enchanted-garden.info/2023/ZoomImage.php?ImageFile=Artists%2FImages%2Fmarije+gies_image_warm.jpg&Language=nl'
        />
    
                <meta
                    name='description'
                    content='Mosaic with artist and artwork pictures for the international art exhibition 2023'
                >
            <meta name="keywords" content="The Enchanted Garden,Le Jardin Enchanté,De Betoverende Tuin">
    <!-- Needed in ALL webpages -->
    <!-- This gives the browser instructions on how to control the page's dimensions and scaling. -->
    <!-- The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). -->
    <!-- The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        /* Cannot be seen in the source-code (ctrl-u), thus difficult to debug */
        /* TODO: Reduce the StyleSheet */
        @import url( "StyleSheetUserInterface.css");

        /*
            How to understand @media:
            (min-width: MINpx) and (max-width: MAXpx) means:
            with a screen-size between MINpx and MAXpx execute the next statements.
            MINpx and MAXpx are inclusive, thus there can be overlap !!!
        */

        /*
            Main-screen corresponding with 'Home'
        */
        @media only screen and (max-width: 1200px) {
            #LogoASId, #SculptureImageLeftId, #WeatherForecastId, #PHPTPF_CreateLeftNavigationPanelPCId, #PHPTPF_CreateRightNavigationPanelPCId  {
                display: none;
            }
        }
        @media only screen and (max-width: 1200px) {
            #LogoGlassId, #StatisticsId {
                display: none;
            }
        }
        @media only screen and (min-width: 1200px) {
            #PHPTPF_CreateLeftNavigationPanelMobileId, #PHPTPF_CreateRightNavigationPanelMobileId {
                display: none;
            }
        }

        /*
            Number of columns in SelectionArtworkPanel
            The first menu column needs +/-100px
            An Artwork-column needs +/-350px
            Two Artwork columns need +/-100px + 350px + 350px = +/-800px
            Three Artwork columns need +/-100px + 350px + 350px + 350px = +/-1150px,
                but at 1200px the left and right navigationapanel appear, thus use 1200px
        */
        @media only screen and (max-width: 800px) {
            #DivFlexColumns1Id {
                display: block;
            }
            #DivFlexColumns2Id {
                display: none;
            }
            #DivFlexColumns3Id {
                display: none;
            }
        }
        @media only screen and (min-width: 800px) and (max-width: 1200px) {
            #DivFlexColumns1Id {
                display: none;
            }
            #DivFlexColumns2Id {
                display: block;
            }
            #DivFlexColumns3Id {
                display: none;
            }
        }
        @media only screen and (min-width: 1200px) {
            #DivFlexColumns1Id {
                display: none;
            }
            #DivFlexColumns2Id {
                display: none;
            }
            #DivFlexColumns3Id {
                display: block;
            }
        }

        /*
            In ArtistsPage, the MainImage for an Artist:
            - max-width minder dan 1200px: use 'Mobile' set-up: Geen MainImage (PHP-code makes this still possible)
            - max-width groter dan 1200px: use 'PC' set-up: MainImage on the same row as Artist-information
        */
        @media only screen and (max-width: 1200px) {
            #MainImageFramemobile {
                display: none;
            }
            #MainImageFramepc {
                display: none;
            }
        }
        @media only screen and (min-width: 1200px) {
            #MainImageFramemobile {
                display: none;
            }
            #MainImageFramepc {
                display: block;
            }
        }
    </style>

    <!-- Javascript Functions -->
    <!-- TODO: Put scripts in HTML comment for non-script users, gives issues when .js adds comments in HTML -->
    <!-- begin- and end-script-tag included in the 'OpenIncludeFile -->
    <script>
// JavascriptFuncions

var ArtistListPrefix = "ArtistList";
var LineBreakHTML = "\n";

// General function
//----------------------------------------------------------------------------

function ReadMore( ReadMoreId) {
    // Javascript to define onclick function
    // onmouseenter function is not more used
    // Needed for PHPAF_BeginReadMore and PHPAF_EndReadMore
    
  var x = document.getElementById( ReadMoreId);
  var ButtonElement = document.getElementById( "Button" + ReadMoreId);
  if (x.style.display === "none") {
    x.style.display = "block";
    ButtonElement.style.left = "200px";
    ButtonElement.innerText = ">>> Read less <<<";
  } else {
    x.style.display = "none";
    ButtonElement.style.left = "0px";
    ButtonElement.innerText = "<<< Read more >>>";
    // Mouse has to remain on the same position in the page
    // Without this line the whole webpage scrolls down
    // what is not nice for the reader
    location.href = "#" + "Button" + ReadMoreId;
  }
}    

//---------------------------------------------------------------------------

function JSTPF_Alert( AlertMessage, ModuleTrace = "Unknown"){
    var ModuleName = 'JSTPF_Alert';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        alert( AlertMessage);
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }    
}

// General function
//---------------------------------------------------------------------------

function JSTPF_CreateRightNavigationPanel(ClassName, MenuContainerId, ModuleTrace = "Unknown"){
    var ModuleName = 'JSTPF_CreateRightNavigationPanel';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        
        var ReferenceElementCollection = document.getElementsByClassName(ClassName);
        var MenuContainer = document.getElementById( MenuContainerId);
        
        var ReferenceElementIndex;
        for (ReferenceElementIndex = 0; ReferenceElementIndex < ReferenceElementCollection.length; ReferenceElementIndex++) {
            JSTPF_CreateRightNavigationaItem( ReferenceElementCollection[ReferenceElementIndex], MenuContainer);
        }
        
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }    
}

// General function
//---------------------------------------------------------------------------

function JSTPF_CreateRightNavigationaItem(ReferenceElement, MenuContainer, ModuleTrace = "Unknown"){
    var ModuleName = 'JSTPF_CreateRightNavigationaItem';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        
        var MenuElement;
        var ReferenceElementId = ReferenceElement.id;
        if (
                ReferenceElementId !== 'AnchorTopOfPage' &&
                ReferenceElementId !== 'AnchorBottomOfPage'){
            MenuElement = document.createElement("A");
            MenuContainer.appendChild(MenuElement);
            MenuElement.href = '#' + ReferenceElementId;
            if ( ReferenceElement.getAttribute("data-name") === null) {
                MenuElement.innerHTML = ReferenceElementId;
            } else {
                if ( ReferenceElement.getAttribute("data-name").length === 0){
                    MenuElement.innerHTML = ReferenceElementId;
                } else {
                    MenuElement.innerHTML = ReferenceElement.getAttribute("data-name");
                }
            }
            // Get the items in the right navigation panel: try to set Style: display:inline-block
            MenuElement.style.display = "inline-block"; // No result
            MenuElement = document.createElement("BR");
            MenuContainer.appendChild(MenuElement);
        } else {
            // 'a'-tag uses icon already defined in .php
        }

    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }    
}

// General function
//---------------------------------------------------------------------------

function JSGF_ReplaceAll( OriginalString, SearchString, ReplaceString, ModuleTrace = "Unknown"){
    // Javascript 'replace'-action only replaces one occurence not all occurences.
    // To replace all occurences a regexp have to be used,
    // it means that all special characters have to be escaped.
    // This functions works only with strings and replace all occurences.
    // It returns a new string after the replacements are executed
    
    var ModuleName = 'JSGF_ReplaceAll';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var FunctionResult = '';
    
    try {
        if( SearchString.length === 0 && ReplaceString.length === 0) {
            FunctionResult = OriginalString;
            DebugWindow = JSCF_ShowVariable( ModuleName, 'OriginalString', OriginalString, DebugWindow, ModuleTrace);
            DebugWindow = JSCF_ShowVariable( ModuleName, 'SearchString', SearchString, DebugWindow, ModuleTrace);
            DebugWindow = JSCF_ShowVariable( ModuleName, 'ReplaceString', ReplaceString, DebugWindow, ModuleTrace);
            DebugWindow = JSCF_ShowVariable( ModuleName, 'Message', 'OriginalString or ReplaceString are empty', DebugWindow, ModuleTrace);
        } else {
            FunctionResult = OriginalString.split( SearchString).join( ReplaceString);
        }
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            'OriginalString: ' + OriginalString + ': ' +
            'SearchString: ' + SearchString + ': ' +
            'ReplaceString: ' + ReplaceString + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        FunctionResult = '';
    }
    return FunctionResult;
}

//---------------------------------------------------------------------------

function JSUIF_ConvertToHTMLString( InputString, ModuleTrace = "Unknown" ){
    // 
    var ModuleName = 'JSUIF_ConvertToHTMLString';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var i = InputString.length;
        var a = []; 
      
        while ( i--) { 
            var iC = InputString[i].charCodeAt( );
            switch (iC) {
                case 34:
                case 39:
                case 96:
                case 128:
                case 145:
                case 146:
                case 147:
                case 148:
                case 180:
                case 192:
                case 193:
                case 194:
                case 196:
                case 199:
                case 200:
                case 201:
                case 202:
                case 203:
                case 206:
                case 207:
                case 224:
                case 225:
                case 226:
                case 228:
                case 231:
                case 232:
                case 233:
                case 234:
                case 235:
                case 238:
                case 239:
                case 250:
                case 251:
                case 252:
                    a[i] = '&#' + iC + ';';
                    break;
                default:
                    a[i] = InputString[i];
                    break;
            }
        } 
        // Convert the elements of an array into a string
        return a.join( ''); 
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            'InputString: ' + InputString + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        return '';
    }
}

//---------------------------------------------------------------------------
// GeneralFunction

function JSGF_CopyAttributeFromElementToImageRecord( DataAttribute, CurrentElement, ImageRecord, ModuleTrace = "Unknown"){
    var ModuleName = 'JSGF_CopyAttributeFromElementToImageRecord';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        if ( typeof CurrentElement !== "undefined" && CurrentElement !==null){
            var AttributeName = 'data-' + DataAttribute.toLowerCase( );
            if ( CurrentElement.hasAttribute( AttributeName)){
                ImageRecord[DataAttribute] = CurrentElement.getAttribute( AttributeName);
            } else {
                ImageRecord[DataAttribute] = '';
            }
        } else {
            ImageRecord[DataAttribute] = '';
        }
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            'DataAttribute: ' + DataAttribute + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        ImageRecord[DataAttribute] = '';
    }
    // if (ImageRecord[DataAttribute].length == 0){
    //     DebugWindow = JSCF_ShowVariable( ModuleName, 'DataAttribute', DataAttribute, DebugWindow, ModuleTrace);
    //     DebugWindow = JSCF_ShowVariable( ModuleName, 'CurrentElement', CurrentElement, DebugWindow, ModuleTrace);
    //     DebugWindow = JSCF_ShowVariable( ModuleName, 'ImageRecord', ImageRecord, DebugWindow, ModuleTrace);
    // }
    
    return ImageRecord;
}

//---------------------------------------------------------------------------
// GeneralFunction

function JSGF_CopyAttributesFromElementToImageRecord( CurrentElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSGF_CopyAttributesFromElementToImageRecord';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var ImageRecord = [];
    
    try {
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'ImageFile', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'ImageType', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'FullName', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'KeyName', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'ArtworkTitle', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'ImageWidth', CurrentElement, ImageRecord, ModuleTrace);
        ImageRecord = JSGF_CopyAttributeFromElementToImageRecord( 'ImageHeight', CurrentElement, ImageRecord, ModuleTrace);
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

    return ImageRecord;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_CopyAttributeFromToElement( DataAttributeName, FromElement, ToElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_CopyAttributeFromToElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        if( FromElement.hasAttribute( DataAttributeName)){
            ToElement.setAttribute( DataAttributeName, FromElement.getAttribute( DataAttributeName));
        } else {
            ToElement.setAttribute( DataAttributeName, '');
        }
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    return ToElement;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_CopyAttributesFromToElement( FromElement, ToElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_CopyAttributesFromToElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-imagefile', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-imagetype', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-imagewidth', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-imageheight', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-fullname', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-keyname', FromElement, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromToElement( 'data-artworktitle', FromElement, ToElement, ModuleTrace);
    } catch( JSError) {
        JSError.message = 'ModuleName: ' + ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }    
    return ToElement;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_CopyAttributeFromImageRecordToElement( AttributeName, FromImageRecord, ToElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_CopyAttributeFromImageRecordToElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        if ( typeof FromImageRecord[AttributeName] !== "undefined" && FromImageRecord[AttributeName] !== null){
            var DataAttributeName = 'data-' + AttributeName.toLowerCase( );
            if ( typeof ToElement !== "undefined" && ToElement !== null){
                ToElement.setAttribute( DataAttributeName, FromImageRecord[AttributeName]);
            } else {
                // Do nothing
            }
        } else {
            // Do nothing
        }
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

    return ToElement;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_CopyAttributesFromImageRecordToElement( FromImageRecord, ToElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_CopyAttributesFromImageRecordToElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'ImageFile', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'ImageType', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'ImageWidth', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'ImageHeight', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'FullName', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'KeyName', FromImageRecord, ToElement, ModuleTrace);
        ToElement = JSUIF_CopyAttributeFromImageRecordToElement( 'ArtworkTitle', FromImageRecord, ToElement, ModuleTrace);
     } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    return ToElement;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_UpdateArtist( TriggerElementId, NextKeyName, KeyName, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_UpdateArtist';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        // Refresh the page with the new artist
        var PHPLanguage = "nl";
        var PHPYear     = "2023";
        var URL =
            "ArtistPage.php?KeyName=" +
            NextKeyName +
            "&BannerNeeded=FALSE&Language=" + PHPLanguage + "&Year=" + PHPYear;
        window.open( URL, '_self');
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            'TriggerElementId: ' + TriggerElementId + ': ' +
            'NextKeyName: ' + NextKeyName + ': ' +
            'KeyName: ' +KeyName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_PrevImage( TriggerElementId, ImageFile, CheckSameArtist, UpdateAction, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_PrevImage';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        if (UpdateAction.length == 0){
            UpdateAction = 'JSUIF_UpdateImage';
        }
        JSUIF_GetNextPrevElement(
            TriggerElementId,       
            ImageFile,          // - KeyName
            false,              // - GetNextElement = true, GetPrevElement = false
            'ImageFileList',    // - ListName: Needed to select the correct list
            CheckSameArtist,    // - 'FALSE': don't check if it's the same artist
            UpdateAction      // - UpdateAction: 'JSUIF_UpdateImage' or 'JSUIF_UpdateArtist' or 'Refresh'
        );
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_NextImage( TriggerElementId, ImageFile, CheckSameArtist, UpdateAction, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_NextImage';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        if (UpdateAction.length == 0){
            UpdateAction = 'JSUIF_UpdateImage';
        }
        JSUIF_GetNextPrevElement(
            TriggerElementId,       
            ImageFile,          // - KeyName
            true,               // - GetNextElement = true, GetPrevElement = false
            'ImageFileList',    // - ListName: Needed to select the correct list
            CheckSameArtist,    // - 'FALSE': don't check if it's the same artist
            UpdateAction      // - UpdateAction: 'JSUIF_UpdateImage' or 'JSUIF_UpdateArtist' or 'Refresh'
        );
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_PrevArtist( TriggerElementId, KeyName, CheckSameArtist, UpdateAction, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_PrevArtist';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var KeyNameId = ArtistListPrefix + ' ' + KeyName;
        if (UpdateAction.length == 0){
            UpdateAction = 'JSUIF_UpdateArtist';
        }
        JSUIF_GetNextPrevElement(
            TriggerElementId,       
            KeyNameId,          // - KeyName
            false,              // - GetNextElement = true, GetPrevElement = false
            'ArtistList',       // - ListName: Needed to select the correct list
            'FALSE',            // - 'FALSE': don't check if it's the same artist
            UpdateAction      // - UpdateAction: 'JSUIF_UpdateImage' or 'JSUIF_UpdateArtist' or 'Refresh'
        );

    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_NextArtist( TriggerElementId, KeyName, CheckSameArtist, UpdateAction, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_NextArtist';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var KeyNameId = ArtistListPrefix + ' ' + KeyName;
        if (UpdateAction.length == 0){
            UpdateAction = 'JSUIF_UpdateArtist';
        }
        JSUIF_GetNextPrevElement(
            TriggerElementId,       
            KeyNameId,              // - KeyName
            true,                   // - GetNextElement = true, GetPrevElement = false
            'ArtistList',           // - ListName: Needed to select the correct list
            'FALSE',                // - 'FALSE': don't check if it's the same artist
            UpdateAction          // - UpdateAction: 'JSUIF_UpdateImage' or 'JSUIF_UpdateArtist' or 'Refresh'
        );
        
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_GetNextPrevElement(
        TriggerElementId,   // - Id of Element to be updated    
        CurrentElementId,   // - KeyName or ElementId in list
        GetNextElement,     // - GetNextElement = true, GetPrevElement = false
        ListName,           // - ListName: Needed to select the correct list
        CheckSameArtist,    // -'FALSE': don't check if it's the same artist
        UpdateAction,       // - UpdateAction: 'JSUIF_UpdateImage' or 'JSUIF_UpdateArtist' or to be defined
        ModuleTrace = "Unknown"
    ){

    var ModuleName = 'JSUIF_GetNextPrevElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var CurrentElement = document.getElementById( CurrentElementId);
        var NextElement;
        if ( typeof CurrentElement === "undefined" || CurrentElement === null){
            // Error without known cause
            // To be solved
        } else {
            if ( GetNextElement){
                NextElement = CurrentElement.nextSibling;
            } else {
                NextElement = CurrentElement.previousSibling;
            }
            var GetFirstOrLastElement = true;
            if ( JSUIF_CheckNextElementIsOK( NextElement, CurrentElement)){
                // 'FALSE': don't check if it's the same artist
                if ( CheckSameArtist != 'FALSE'){
                    if ( JSUIF_SameArtist( NextElement, CurrentElement)) {
                        GetFirstOrLastElement = false;
                    } else {
                        GetFirstOrLastElement = true;
                    }
                } else {
                    GetFirstOrLastElement = false;
                }
            } else {
                GetFirstOrLastElement = true;
            }
            
            if ( GetFirstOrLastElement){
                // GetNextElement = true: Get the first CurrentElementId for the Artist: FirstFlag = true
                // GetNextElement = false: Get the last CurrentElementId for the Artist: FirstFlag = false
                NextElement = JSAF_GetFirstOrLastElementId( CurrentElement, GetNextElement, CheckSameArtist, ListName, ModuleTrace);
            } else {
                // Nothing to do
            }   
        
            if ( UpdateAction == 'JSUIF_UpdateImage'){
                JSUIF_UpdateImage( TriggerElementId, NextElement, CurrentElement);
            } else if ( UpdateAction == 'JSUIF_UpdateArtist') {
                JSUIF_UpdateArtist( TriggerElementId, NextElement.getAttribute( 'data-keyname'), CurrentElement.getAttribute( 'data-keyname'));
            } else if ( UpdateAction == 'Refresh') {
                var CurrentURL = window.location.href;
                // Replace '%20' by ' '
                CurrentURL = JSGF_ReplaceAll( CurrentURL, '%20', ' ', ModuleTrace);
                var NextURL = '';
                // If URL contains 'ImageFile' (CurrentElement.id) the replace it by the new 'Imagefile' (NextElement.id)
                // Else add 'ImageFile' parameter to URL
                if (CurrentURL.search('ImageFile') >= 0){
                    NextURL = JSGF_ReplaceAll( CurrentURL, CurrentElement.id, NextElement.id, ModuleTrace);
                } else {
                    if (window.location.search.length > 0) {
                        // Already a query string, add a supplementary parameter
                        NextURL = CurrentURL + '&';
                    } else {
                        // No query string, add first parameter
                        NextURL = CurrentURL + '?';
                    }
                    NextURL =  NextURL + 'ImageFile=' + NextElement.id;
                }
                window.location.assign( NextURL);
            } else {
                alert ( 
                    'UpdateAction: ' +
                    UpdateAction +
                    ': Not supported!');
    
            }
        }

    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}
//---------------------------------------------------------------------------
// UserInterface

function JSAF_GetFirstOrLastElementId( CurrentElement, FirstFlag, CheckSameArtist, ListName, ModuleTrace = "Unknown"){
    var ModuleName = 'JSAF_GetFirstOrLastElementId';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var NextElement;
    
    try {
        // Get the first or last CurrentElementId for the Artist
        var ArtistKeyName = CurrentElement.getAttribute( 'data-keyname');
        var ClassNames = ListName;
        // 'FALSE': don't check if it's the same artist
        if ( CheckSameArtist != 'FALSE') {
            // Add KeyName to the ClassNames
            ClassNames = ClassNames + ' ' + JSGF_ReplaceAll( ArtistKeyName, ' ', '');
        }
        var ArtworkArray = document.getElementsByClassName( ClassNames);
        var ElementIndex = 0;
        if ( FirstFlag === true){
            ElementIndex = 0;
        } else {
            // Last artwork in the list
            ElementIndex = ArtworkArray.length -1;
        }
        NextElement = ArtworkArray[ElementIndex];

    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    
    return NextElement;
}

//---------------------------------------------------------------------------
// UserInterface

function JSAF_GetFirstOrLastArtist( KeyName, FirstFlag, ModuleTrace = "Unknown"){
    // Get the first or last KeyName for Artist
    // Prefix in element.id to identify the ArtistList
    var ModuleName = 'JSAF_GetFirstOrLastArtist';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var NextArtist;
    
    try {
        var ArtistClass = ArtistListPrefix;
        var ArtistArray = document.getElementsByClassName( ArtistClass);
        var ElementIndex = 0;
        if ( FirstFlag === true){
            ElementIndex = 0;
        } else {
            // Last artwork in the list
            ElementIndex = ArtistArray.length -1;
        }
        // Only one replacement needed, the Javascript replace can be used
        var NextArtist = ArtistArray[ElementIndex].id.replace( ArtistListPrefix + '_', '');

    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

    return NextArtist;

}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_CheckNextElementIsOK( NextElement, CurrentElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_CheckNextElementIsOK';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var NextElementIsOK = false;
    
    try {
        if ( typeof CurrentElement !== "undefined" &&
            CurrentElement !== null &&
            typeof NextElement !== "undefined" &&
            NextElement !== null){
            if ( CurrentElement.id.length == 0 || NextElement.id.length == 0){
                NextElementIsOK = false;
            } else {
                NextElementIsOK = true;
            }
        } else {
            NextElementIsOK = false;
        }  

    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

    return NextElementIsOK;
}

//---------------------------------------------------------------------------
// UserInterface

function JSUIF_SameArtist( NextElement, CurrentElement, ModuleTrace = "Unknown"){
    // Check same artist
    var ModuleName = 'JSUIF_SameArtist';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var SameArtist = false;
    
    try {
        var CurrentKeyName = CurrentElement.getAttribute( 'data-keyname');
        var NextKeyName = NextElement.getAttribute( 'data-keyname');
        if ( CurrentKeyName == NextKeyName){
            SameArtist = true;
        } else {
            SameArtist = false;
        }

    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    
    return SameArtist;
}

//---------------------------------------------------------------------------
// Debug function

function JSDEBUGF_PrintElementHTMLCode( DebugElement, ModuleTrace = "Unknown"){
    // Write innerHTML of an element to DebugWindow.document.write
    var ModuleName = 'JSDEBUGF_PrintElementHTMLCode';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var DebugElementHTML = DebugElement.innerHTML;
    
    try {
        JSDEBUGF_PrintHTMLCode( DebugElementHTML);
        
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------
// Debug function

function JSDEBUGF_PrintHTMLCode( DebugElementHTML, ModuleTrace = "Unknown"){
    // Write HTMLcode to DebugWindow.document.write
    var ModuleName = 'JSDEBUGF_PrintHTMLCode';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
    
        var ElementHTML = JSGF_ReplaceAll( DebugElementHTML, "<", "#B#", ModuleTrace);
        ElementHTML = JSGF_ReplaceAll( ElementHTML, ">", "#E#", ModuleTrace);
        if ( DebugWindow === null){
            DebugWindow = window.open( ); 
        }
        DebugWindow.document.write( 'ModuleName; ' + ModuleName + LineBreakHTML);
        DebugWindow.document.write( 'ElementHTML: ' + ElementHTML + LineBreakHTML);
        DebugWindow.document.write( LineBreakHTML);

    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------

function JSUIF_UpdateImage( TriggerElementId, NextElement, CurrentElement, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_UpdateImage';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var CurrentImageRecord = JSGF_CopyAttributesFromElementToImageRecord( CurrentElement, ModuleTrace);
        var NextImageRecord = JSGF_CopyAttributesFromElementToImageRecord( NextElement, ModuleTrace);
        JSUIF_UpdateImageUsingImageRecords( TriggerElementId, NextImageRecord, CurrentImageRecord, ModuleTrace);
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------

function JSUIF_UpdateImageUsingImageRecords( TriggerElementId, NextImageRecord, CurrentImageRecord, ModuleTrace = "Unknown"){
    var ModuleName = 'JSUIF_UpdateImageUsingImageRecords';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        var FieldIdCore = TriggerElementId;
        var FieldIdTop = FieldIdCore + '_' + 'top';
        
        var ElementTop = document.getElementById( FieldIdTop);
        if (typeof ElementTop === "undefined" || ElementTop === null){
            return;
        }
        
        var CurrentElementHTML = ElementTop.innerHTML;
        var NextElementHTML = ElementTop.innerHTML;
        
        // @@@ Not needed?
        var ContinueFlag = true;
        
        // Check on empty fields
        ModuleTrace = ModuleTrace + " & " + "Check on empty fields";
        if( CurrentImageRecord.ImageFile.length === 0  ||
            CurrentImageRecord.ArtworkTitle.length === 0 ||
            CurrentImageRecord.FullName.length === 0 ||
            CurrentImageRecord.KeyName.length === 0 ) {
        } else {
            // We try to not repeat the same value more than ones
            ModuleTrace = ModuleTrace + " & " + "We try to not repeat the same value more than ones";
            var NextImageFile = JSGF_ReplaceAll( NextImageRecord.ImageFile, ' ', '§1§1§1§1§', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, CurrentImageRecord.ImageFile, NextImageFile, ModuleTrace);
            
            var NextArtworkTitle = JSGF_ReplaceAll( NextImageRecord.ArtworkTitle, ' ', '§2§2§2§2§', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, CurrentImageRecord.ArtworkTitle, NextArtworkTitle, ModuleTrace);
            
            var NextFullName = JSGF_ReplaceAll( NextImageRecord.FullName, ' ', '§3§3§3§3§', ModuleTrace);
            // Use JSUIF_ConvertToHTMLString???
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, CurrentImageRecord.FullName, NextFullName, ModuleTrace);

            var NextKeyName = JSGF_ReplaceAll( NextImageRecord.KeyName, ' ', '§4§4§4§4§', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, CurrentImageRecord.KeyName, NextKeyName, ModuleTrace);
            
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, '§1§1§1§1§', ' ', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, '§2§2§2§2§', ' ', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, '§3§3§3§3§', ' ', ModuleTrace);
            NextElementHTML = JSGF_ReplaceAll( NextElementHTML, '§4§4§4§4§', ' ', ModuleTrace);
    
            // Change ElementTop
            ModuleTrace = ModuleTrace + " & " + "hange ElementTop";
            if (typeof ElementTop === "undefined" || ElementTop === null ||
                typeof NextElementHTML === "undefined" || NextElementHTML === null){
                // Something is wrong, Generates error message
                ModuleTrace = ModuleTrace + " & " + "Something is wrong, Generates error message";
                if ( DebugWindow === null){
                    DebugWindow = window.open( ); 
                }
                DebugWindow.document.write( 
                    'ModuleName: ' + ModuleName + LineBreakHTML);
                DebugWindow.document.write( 
                    'ModuleTrace: ' + ModuleTrace + LineBreakHTML);
                DebugWindow.document.write( 
                    'CurrentElementHTML: ');
                JSDEBUGF_PrintHTMLCode( CurrentElementHTML); // Write to DebugWindow
                DebugWindow.document.write( 
                    'NextElementHTML: ');
                JSDEBUGF_PrintHTMLCode( NextElementHTML); // Write to DebugWindow
                DebugWindow.document.write( 
                    LineBreakHTML);
            } else {
                // All oK, continue normal processing
                ModuleTrace = ModuleTrace + " & " + "All oK, continue normal processing";
                ElementTop.innerHTML = NextElementHTML;
                ElementTop = JSUIF_CopyAttributesFromImageRecordToElement( NextImageRecord, ElementTop, ModuleTrace, ModuleTrace);
                
                // Change attributes also in elements corresponding with FieldIdImage & FieldIdCell
                ModuleTrace = ModuleTrace + " & " + "Change attributes also in elements corresponding with FieldIdImage & FieldIdCell";
                var FieldIdCell = FieldIdCore + '_' + 'cell';
                var ElementCell = document.getElementById( FieldIdCell);
                if (typeof ElementCell === "undefined" || ElementCell === null) {
                    // Something is wrong, Generates error message
                    ModuleTrace = ModuleTrace + " & " + "Something is wrong, Generates error message";
                    if ( DebugWindow === null){
                        DebugWindow = window.open( ); 
                    }
                    DebugWindow.document.write( 
                        'ModuleName: ' + ModuleName + LineBreakHTML);
                    DebugWindow.document.write( 
                        'ModuleTrace: ' + ModuleTrace + LineBreakHTML);
                    DebugWindow.document.write( 
                        'FieldIdCell: ' + FieldIdCell);
                    DebugWindow.document.write( 
                        LineBreakHTML);
                } else {
                    // All oK, continue normal processing
                    ModuleTrace = ModuleTrace + " & " + "All oK, continue normal processing";
                    ElementCell = JSUIF_CopyAttributesFromImageRecordToElement( NextImageRecord, ElementCell, ModuleTrace);
                    var FieldIdImage = FieldIdCore + '_' + 'image';
                    var ElementImage = document.getElementById( FieldIdImage);
                    ElementImage = JSUIF_CopyAttributesFromImageRecordToElement( NextImageRecord, ElementImage, ModuleTrace);
                }
            }
        }
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------

function JSUIF_ResizeToExtra( OriginalWidth, OriginalHeight, MinimalWidth, MinimalHeight, ModuleTrace = "Unknown"){
    // Resize so that the image covers at least the whole rectangle MinimalWidth, MinimalHeight
    var ModuleName = 'JSUIF_ResizeToExtra';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var NewWidth = 0;
    var NewHeight = 0;
    
    try {
    	var OriginalRatio = OriginalHeight / OriginalWidth;
    	if ( MinimalHeight <= MinimalWidth * OriginalRatio){
    	    // We use MinimalWidth as reference and calculate the corresponding NewHeight
    	    NewWidth = MinimalWidth;
    	    NewHeight = Math.floor( MinimalWidth * OriginalRatio);
    	} else {
    	    // MinimalHeight has to be used as a reference
    	    NewWidth = Math.floor( MinimalHeight / OriginalRatio);
    	    NewHeight = MinimalHeight;
    	}
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
	
	return [ NewWidth, NewHeight];
}

//---------------------------------------------------------------------------

function JSUIF_ShowMessage( ModuleName, Message, AlertOnlyFlag, ModuleTrace = "Unknown"){
    var FullMessage =
            'ModuleName: ' + ModuleName + ': ' +
            'Message: ' + Message;
    JSTPF_Alert( FullMessage, ModuleTrace);
    if (typeof AlertOnlyFlag === undefined || !AlertOnlyFlag){
        if ( DebugWindow === null){
            DebugWindow = window.open( ); 
        }
        DebugWindow.document.write( FullMessage);
        return DebugWindow;
    }
}

//---------------------------------------------------------------------------

function JSUIF_OpenFullscreen( CurrentElementId, ModuleTrace = "Unknown") {
    var ModuleName = "JSUIF_OpenFullscreen";
    ModuleTrace = ModuleTrace + ModuleName;
    
    var CurrentElement = null;

    try {
        CurrentElement = document.getElementById( CurrentElementId);
        if (CurrentElement.requestFullscreen) {
            CurrentElement.requestFullscreen();
        } else if (CurrentElement.webkitRequestFullscreen) { /* Safari */
            CurrentElement.webkitRequestFullscreen();
        } else if (CurrentElement.msRequestFullscreen) { /* IE11 */
            CurrentElement.msRequestFullscreen();
        } else {
            JSTPF_Alert(
                "Votre navigateur web ne permet pas l'affichage en mode plein écran.\n" +
                "Uw webbrowser laat het tonen op het volledige scherm niet doe.\n" +
                "Your web browser does not allow you to display in full screen mode.\n", ModuleTrace);
        }
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//---------------------------------------------------------------------------

function JSUIF_CloseFullscreenNOTNEEDED( ModuleTrace = "Unknown") {
    var ModuleName = "JSUIF_CloseFullscreen";
    ModuleTrace = ModuleTrace + ModuleName;
    
    try {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { /* Safari */
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE11 */
            document.msExitFullscreen();
        } else {
            JSTPF_Alert(
                "Votre navigateur web ne permet pas l'affichage en mode plein écran.\n" +
                "Uw webbrowser laat het tonen op het volledige scherm niet doe.\n" +
                "Your web browser does not allow you to display in full screen mode.\n", ModuleTrace);
        }
    } catch( JSError) {
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}</script>
<script>
var PrefixCellId = 'cell';
var PrefixImageId = 'image';
var CaptionIdPrefix = 'caption';
// var ImageUpdateIntervalSeconds = 2000;
var ImageUpdateIntervalSeconds = 2000;
var RemoveHooverImageIntervalSeconds = 5000;

// Parameters to update images
var ImageFileShowArraySizeMax = 50; // update to ImageFileArrayOriginal.length / 2
var ImageFileArray = [];
var ImageFileShowArray = [];
var LineBreakHTML = '<br>';

// Parameters for debugging
var DebugWindow = null;
var DebugFlag = false;

function JSMPF_CreateMosaic(TableId, ThumbnailDirectory, HooverImageDirectory, ZoomImageDirectory, TemplateNeeded, ModuleTrace = "Unknown"){
    var ModuleName = 'JSMPF_CreateMosaic';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    var ImageArrayCellNumberMax;
    
    JSTPF_Alert( "JSMPF_CreateMosaic" + " started");
    
    try {

        // Number of the visible images; number of the cell; Array index starts with 0
        var ImageArrayCellNumber = -1;
        
        var CellWidthMax = 300;
        var CellHeightMax = 300;
        var WindowWidthPercentage = 1;
        var WindowHeightPercentage = 1;
    
        // Get list with images
        JSMPF_GetListWithImageFiles( ModuleTrace);
    
        var TableElement = document.getElementById(TableId);
        var ArrayNumberMax = JSMPF_CalculateTableCellNumberMax(CellWidthMax, CellHeightMax, WindowWidthPercentage, WindowHeightPercentage, TemplateNeeded, ModuleTrace);
        var ColumnNumberMax = ArrayNumberMax.ColumnNumberMax;
        var RowNumberMax = ArrayNumberMax.RowNumberMax;
    
        var QueryString = '';
        var RowNumber, ColumnNumber;
        for (RowNumber = 1; RowNumber <= RowNumberMax; RowNumber++){
            for (ColumnNumber = 1; ColumnNumber <= ColumnNumberMax; ColumnNumber++){
                // Number of the visible image; number of the cell; Array index starts with 0
                ImageArrayCellNumber += 1;
                QueryString = AddMosaicCell(PrefixCellId, QueryString, ImageArrayCellNumber);
                QueryString = AddMosaicCellContent(QueryString);
            }
        }
        ImageArrayCellNumberMax = ImageArrayCellNumber;
        
        // Refresh page with RowNumberMax, ColumnNumberMax, ImageFileShowArray[*]['ImageFile']
        var CurrentHREF = window.location.href;
        var NextHREF = CurrentHREF.replace('MosaicPage.php', 'MosaicPage2.php'); // Create 2nd url including the same query-string
        // Check if there is already a query string
        if (NextHREF.indexOf("?") >=0){
            // There is already a query string, add '&'
            NextHREF = NextHREF + '&';
        } else {
            // No query string, add '?'
            NextHREF = NextHREF + '?';
        }
        // Add parameters
        NextHREF = NextHREF + 'RowNumberMax=' + RowNumberMax;
        NextHREF = NextHREF + '&' + 'ColumnNumberMax=' + ColumnNumberMax;
        NextHREF = NextHREF + '&' + 'PrefixCellId=' + PrefixCellId;
        NextHREF = NextHREF + QueryString;
    
        window.open(
            NextHREF,
            '_self');
            
    } catch( JSError){
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    
//---------------------------------------------------------------------------
    function JSMPF_CalculateTableCellNumberMax(CellWidthMax, CellHeightMax, WindowWidthPercentage, WindowHeightPercentage, TemplateNeeded, ModuleTrace = "Unknown"){
        var ModuleName = 'JSMPF_CalculateTableCellNumberMax';
        ModuleTrace = ModuleTrace + " & " + ModuleName;

        var ColumnNumberMax;
        var RowNumberMax;
        
        try {
            
            var WindowWidth = window.innerWidth * WindowWidthPercentage;
            var WindowHeight = window.innerHeight * WindowHeightPercentage;
            
            if (typeof TemplateNeeded === 'undefined'){
                TemplateNeeded = true;
            }
            if (TemplateNeeded === true){
                // To be replaced by the use of margins (top, right, bottom, left)
                WindowWidth = WindowWidth * 0.7;
                WindowHeight = WindowHeight - 350;
            }
    
            ColumnNumberMax = Math.floor(WindowWidth / CellWidthMax);
            if (ColumnNumberMax <= 1){
                ColumnNumberMax = 1;
            }
            
            RowNumberMax = Math.floor(WindowHeight / CellWidthMax);
            if (RowNumberMax <= 1){
                RowNumberMax = 1;
            }
            
        } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        }
        
        return {
            ColumnNumberMax : ColumnNumberMax,
            RowNumberMax : RowNumberMax
        };
    }
//---------------------------------------------------------------------------

    function AddMosaicCell( PrefixCellId, QueryString, ImageArrayCellNumber, ModuleTrace = "Unknown"){
        var ModuleName = 'AddMosaicCell';
        ModuleTrace = ModuleTrace + " & " + ModuleName;
        
        var ReturnMessage;
        ReturnMessage = "";
        
        try {
            var TDElementId = PrefixCellId + ImageArrayCellNumber;
            ReturnMessage = QueryString + "&" + TDElementId + "=";
            
        } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        }
        
        return ReturnMessage;
    }
    
//---------------------------------------------------------------------------

    function AddMosaicCellContent(TDElementOrQueryString, ModuleTrace = "Unknown"){
        var ModuleName = 'AddMosaicCellContent';
        ModuleTrace = ModuleTrace + " & " + ModuleName;
        
        try {
            TDElementOrQueryString = TDElementOrQueryString + JSMPF_SelectRandomImageFile()['ImageFile'];
        } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        }
        
        return TDElementOrQueryString;
    }
}

//---------------------------------------------------------------------------

function JSMPF_ContinueMosaic(
            TableId,
            ThumbnailDirectory,
            HooverImageDirectory,
            ZoomImageDirectory,
            RowNumberMax,
            ColumnNumberMax,
            PrefixCellId,
            ModuleTrace = "Unknown"){
    var ModuleName = 'JSMPF_ContinueMosaic';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {

        DebugFlag = false;
        DebugWindow = null;
    
        // Get list with images
        JSMPF_GetListWithImageFiles( ModuleTrace);
    
        var TableElement = document.getElementById(TableId);
    
        var RowNumber, ColumnNumber;
        var ImageArrayCellNumber = -1;
        var TDElementId;
        var TDElement;
        var ImageFile;
        for (RowNumber = 1; RowNumber <= RowNumberMax; RowNumber++){
            for (ColumnNumber = 1; ColumnNumber <= ColumnNumberMax; ColumnNumber++){
                // Number of the visible image; number of the cell; Array index starts with 0
                ImageArrayCellNumber += 1;
                TDElementId = PrefixCellId + ImageArrayCellNumber + '_' + 'cell';
                TDElement = document.getElementById(TDElementId);
                if (typeof TDElement === 'undefined' || TDElement === null){
                    if (DebugWindow === null){
                        DebugWindow = window.open();
                    }
                    DebugWindow.document.write('ModuleName: ' + ModuleName + LineBreakHTML);
                    DebugWindow.document.write('TDElementId: ' + TDElementId + ': ' + 'No corresponding TDElement!' + LineBreakHTML);
                } else {
                    ImageFile = TDElement.getAttribute('data-imagefile');
                }
            }
        }
        ImageArrayCellNumberMax = ImageArrayCellNumber;
        // var ImageUpdateIntervalId is only needed as a return of 'setInterval'
        var ImageUpdateIntervalId = setInterval(JSMPF_RefreshMosaicPage, ImageUpdateIntervalSeconds);

    } catch( JSError){
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }


//---------------------------------------------------------------------------
// Function definition included in parent function is needed, otherwhise errors are generated:
// JSMPF_RefreshMosaicPage: ImageArrayCellNumberMax is not defined
// Issue: this function is asynchronuous called by the previous function 'JSMPF_ContinueMosaic' (setInterval(JSMPF_RefreshMosaicPage, ImageUpdateIntervalSeconds)),
// thus 'global' variable needed!

    function JSMPF_RefreshMosaicPage( ModuleTrace = "JSMPF_ContinueMosaic & setInterval & JSMPF_ContinueMosaic"){
        var ModuleName = 'JSMPF_RefreshMosaicPage';
        ModuleTrace = ModuleTrace + " & " + ModuleName;
        
        try {
        
            // Calc random ImageArrayCellNumber
            ModuleTrace = ModuleTrace + " & " + "Calc random ImageArrayCellNumber";
            // The first cell has number 0
            // The last cell has number ImageArrayCellNumberMax, retrieved from the previous function 
            if (typeof ImageArrayCellNumberMax === 'undefined'){
                ImageArrayCellNumber = 1;
            } else {
                if (ImageArrayCellNumberMax <= 1 ){
                    ImageArrayCellNumber = 1;
                } else {
                    ImageArrayCellNumber = Math.floor(Math.random() * (ImageArrayCellNumberMax + 1));
                    if (ImageArrayCellNumber >= ImageArrayCellNumberMax){
                        ImageArrayCellNumber = ImageArrayCellNumberMax;
                    }
                }
            }
            var TriggerElementId = PrefixCellId + ImageArrayCellNumber;
            TDElement = document.getElementById(TriggerElementId + '_' + 'cell');
            var CurrentImageRecord = JSGF_CopyAttributesFromElementToImageRecord(TDElement, ModuleTrace);
            var NextImageRecord = JSMPF_SelectRandomImageFile( ModuleTrace);
            
            // Adapt Image
            ModuleTrace = ModuleTrace + " & " + "Adapt Image";
            DebugFlag = false;
            if (DebugFlag){
                if (DebugWindow === null){
                    DebugWindow = window.open();
                }
                DebugWindow.document.write('ModuleName: ' + ModuleName + LineBreakHTML);
                DebugWindow.document.write('TriggerElementId: ' + TriggerElementId + LineBreakHTML);
                DebugWindow.document.write('NextImageRecord[ImageFile]: ' + NextImageRecord['ImageFile'] + LineBreakHTML);
                DebugWindow.document.write('CurrentImageRecord[ImageFile]: ' + CurrentImageRecord['ImageFile'] + LineBreakHTML);
            }
            DebugFlag = false;
            JSUIF_UpdateImageUsingImageRecords(TriggerElementId, NextImageRecord, CurrentImageRecord);
    
        } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        }
    }
}

//-----------------------------------------------------------------------------------

function JSMPF_GetListWithImageFiles( ModuleTrace = "Unknown"){
    var ModuleName = "JSMPF_GetListWithImageFiles";
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        var ImageFileArrayOriginal = document.getElementsByClassName('ImageFileList');
        var ItemNumber;
        ImageFileShowArraySizeMax = ImageFileArrayOriginal.length / 2;
    
        for (ItemNumber = 0; ItemNumber < ImageFileArrayOriginal.length; ItemNumber++){
            ImageFileArray.push( ImageFileArrayOriginal.item(ItemNumber));
        }
        
    } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
        
}

//-----------------------------------------------------------------------------------

function JSMPF_SelectRandomImageFile( ModuleTrace = "Unknown"){
    var ModuleName = 'JSMPF_SelectRandomImageFile';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    var ImageRecord;

    try {
        var ImageFileArraySize = ImageFileArray.length;
        var RandomNumber = Math.floor(Math.random() * ImageFileArraySize);
        // Store data in ImageRecord
        ImageRecord  = JSGF_CopyAttributesFromElementToImageRecord(ImageFileArray[RandomNumber], ModuleTrace);
        // Move Image to ImageFileShowArray
        if (ImageFileShowArray.length >= ImageFileShowArraySizeMax){
            // The oldest entry has to be moved on top of the ImageFileArray
            ImageFileArray.push(ImageFileShowArray.shift());
        }
        ImageFileShowArray.push(ImageFileArray[RandomNumber]);
        // Move image out of ImageFileArray
        ImageFileArray.splice(RandomNumber, 1);
    } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }        
    
    return ImageRecord;
}
    
//-----------------------------------------------------------------------------------

function JSMPF_EndHoover( ModuleTrace = "Unknown"){
    var ModuleName = 'JSMPF_EndHoover';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        // Adapt HooverImage to initial settings
        var HooverImageDiv = document.getElementById('HooverImageDiv');
        HooverImageDiv.style.opacity = 0;
        HooverImageDiv.style.zIndex = -10;
    } catch( JSError){
            JSError.message = ModuleName + ': ' + JSError.message;
            DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }

}
    
//-----------------------------------------------------------------------------------

function JSMPF_StartHoover(UserEvent, ImageFile, ThumbnailDirectory, HooverImageDirectory, ZoomImageDirectory, Language, ModuleTrace = "Unknown"){
    var ModuleName = 'JSMPF_StartHoover';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    // To be corrected
    var Language = 'en';
    DebugFlag = false;
    
    try {
        
        // The default action that belongs to the event is blocked to occur
        UserEvent.preventDefault(); 
        UserEvent = UserEvent || window.event;
        
        // Enable 'MouseLeave' on table
        
        var HooverImage = document.getElementById('HooverImage');
    
        var TriggerElement = UserEvent.currentTarget;
        var TriggerElementId = TriggerElement.id;
        
        if(DebugFlag){
            if (DebugWindow === null){
                DebugWindow = window.open(); 
            }
            DebugWindow.document.write('ModuleName; ' + ModuleName + LineBreakHTML);
            DebugWindow.document.write('ImageFile; ' + ImageFile + LineBreakHTML);
            DebugWindow.document.write('TriggerElementId: ' + TriggerElementId + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }

        // Get the parameters of the ImageShown, corresponds with TriggerElement
        //NOTNEEDED: var TriggerImageId = TriggerElementId.replace(PrefixCellId, PrefixImageId);
        //NOTNEEDED: var TriggerImage = document.getElementById(TriggerImageId);
    
    
        // Calculate position of HooverImage
        // - Calculate sizes (we suppose thet the HooverImageRectangle is already updated)
        var OriginalmageWidth = TriggerElement.getAttribute('data-imagewidth');
        var OriginalImageHeight = TriggerElement.getAttribute('data-imageheight');
        // HooverImage in ResizedExtraDirectory: minimal size = 300px
        // Calculate the correct HooverImageWidth & HooverImageHeight
        var HooverImageDimensions = JSUIF_ResizeToExtra(OriginalmageWidth, OriginalImageHeight, 300, 300, ModuleTrace);
        var HooverImageWidth = HooverImageDimensions[0];
        var HooverImageHeight = HooverImageDimensions[1];
        // - Image is positioned in the 'td'-element / TriggerElement
        var TriggerElementRectangle = TriggerElement.getBoundingClientRect(); // Position compared to the window
        var TriggerElementLeft = TriggerElementRectangle.left + window.pageXOffset; // To correct fr scrolling
        var TriggerElementTop = TriggerElementRectangle.top + window.pageYOffset; // To correct for scrolling
        var TriggerElementWidth = TriggerElementRectangle.width;
        var TriggerElementHeight = TriggerElementRectangle.height;
        // - Calculate positions
        var HooverImageLeft = TriggerElementLeft - (HooverImageWidth - TriggerElementWidth) / 2;
        var HooverImageTop = TriggerElementTop - (HooverImageHeight - TriggerElementHeight) / 2;
        // - Convert to strings in 'px' units
        var HooverImageLeftString = HooverImageLeft + 'px';
        var HooverImageWidthString = HooverImageWidth + 'px';
        var HooverImageTopString = HooverImageTop + 'px';
        var HooverImageHeightString = HooverImageHeight + 'px';
        
        // Change Image in HooverImage and make it visible on top of the screen
        // - Adapt HooverImage position and size
        HooverImage.style.left = HooverImageLeftString;
        HooverImage.style.width = HooverImageWidthString;
        HooverImage.style.top = HooverImageTopString;
        HooverImage.style.height = HooverImageHeightString;
        HooverImage = JSUIF_CopyAttributesFromToElement(TriggerElement, HooverImage, ModuleTrace);
    
        // - Make it visible
        var HooverImageDiv = document.getElementById('HooverImageDiv');
        HooverImageDiv.style.opacity = 1;
        HooverImageDiv.style.zIndex = 20;
        HooverImage.src = HooverImageDirectory + ImageFile;
    
        // Correct href in HooverImageLink-element
        ImageFile = HooverImage.getAttribute('data-imagefile');
        var ImageType = HooverImage.getAttribute('data-imagetype');
        var KeyName = HooverImage.getAttribute('data-keyname');
        ImageType = ImageType.trim().toLowerCase();
        var href = '';
        if (ImageType == 'image'){
            href = 
                'ZoomImage.php' +
                    '?Language=' + Language +
                    '&TemplateNeeded=FALSE' +
                    '&ImageFile=' + ZoomImageDirectory + ImageFile;
        } else if (ImageType == 'portrait'){
            href = 'ArtistPage.php?' + 'KeyName=' + KeyName + '&BannerNeeded=FALSE&Language=' + Language;
        } else {
            
        }
        document.getElementById('HooverImageLink').href = href;
        
        if(DebugFlag){
            if (DebugWindow === null){
                DebugWindow = window.open(); 
            }
            DebugWindow.document.write('ModuleName: ' + ModuleName + LineBreakHTML);
            DebugWindow.document.write('ImageType: ' + ImageType + LineBreakHTML);
            DebugWindow.document.write('href: ' + href + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }
    
        // Set timer to remove the HooverImage
        // It works only when moving out of TableElement
        setTimeout(function(){JSMPF_EndHoover( ModuleTrace);}, RemoveHooverImageIntervalSeconds);
        
    } catch( JSError){
        JSError.message = ModuleName + ': ' + JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
    
    DebugFlag = false;
    
}</script>
    <script>

// URL parameters
// NEEDED: the PHP-variable can be copied to JS-variable
//---------------------------------------------------------------------------
        
        var ArtworkTitle = '';
        var Email = '';
        var FirstName = '';
        var FullDescriptionNeeded = '';
        var FullName = '';
        var ImageType = '';
        var LastName = '';
        var KeyName = '';
        var Language = 'nl';
        var Selection = 'NewArtists';
        var Year = '2023';
            
        function GetScreenWidth(){
          const element = document.getElementById("BodyId");
          let text = "clientHeight: " + element.clientHeight + "px<br>";
          text += "clientWidth: " + element.clientWidth + "px";
          alert(text);
        }
        function resizeListener() {
          GetScreenWidth();
        }
        // Only for testing: window.addEventListener("resize", resizeListener);
    
        window.onload = function( ){
            // Function not needed
            var ModuleName = 'window.onload';
            // Only for testing: GetScreenWidth();
        }

//---------------------------------------------------------------------------
// UserInterfaceFunction

        function JSCF_ShowVariable(ModuleName, VariableName, VariableValue, Debugwindow){
            if ( typeof DebugWindow === "undefined" || DebugWindow === null){
                DebugWindow = window.open();
            }
            DebugWindow.document.write( 'ModuleName: ' + ModuleName + LineBreakHTML);
            DebugWindow.document.write( 'VariableName: ' + VariableName + LineBreakHTML);
            // Works with all data types
            DebugWindow.document.write( 'VariableValue: ' + JSON.stringify(VariableValue) + LineBreakHTML);
            return DebugWindow;
        }

//---------------------------------------------------------------------------

    </script>

<!-- </head>-end tag can NOT be created in this include file, otherwhise application specific scripts or include-files can not be added -->
<!-- </head>  -->Image n'est pas disponible<br>Foto is niet beschikbaar<br>Image is not available<br>OriginalImageFile: 'Artists/Images/marije gies_image_warm.jpg'<br>OriginalImageFile is NOT a FILE!<br>    <style>
        /* The CSS 'box-sizing: border-box' property includes the padding and border in an element's total width and height. */
        /* It does not include the margins */
        /* All calculattions are done on the border-box, it means that a part of the image will be covered by the border */
        /* Margin has to be set to 0px. If more needed, then a script modification is needed */
        * {
            box-sizing: border-box;
            margin: 0px;
        }
        
        /* Put the zoomed image relative to the content. */
        .img-zoom-container {
            position: relative;
        }
        
        .ZoomImageClass {
            cursor: zoom-in;
            /* When scrolling the cursor changes to grab */
            /* cursor: grab; */
            /* Put this class on the bottom of all other classes using z-index */
            z-index: 10;
            position: relative;
            border: 2px solid #000000;
            border-style: double;
            top: 0;
            left: 0;
            /* Set the size of the ZoomImage */
            /* @@@TODO@@@: Use the dimensions of the window */
            width: 900px; /* Parameter ZoomImageWidth; default value for non-javascript users */
            height: 600px; /* Parmeter ZoomImageHeight; default value for non-javascript users */
        }
    </style>
    <!-- Fullscreen icon definition file -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<!-- ============================================ -->
<!-- Include file 'ZoomImageFunctions.php' opened -->
<!-- ============================================ -->

 <script>
var UserInstructionsShown;
UserInstructionsShown = false;

function JSIZ_ImageZoom(ZoomWindowID, OriginalImageFile, OriginalImageWidth, OriginalImageHeight, Language = 'Unknown', ModuleTrace = 'Unknown') {
    var ModuleName = 'JSIZ_ImageZoom';
    ModuleTrace = ModuleTrace + ModuleName;

    var LineBreak = '\r\n';
    var LineBreakHTML = '<br>';
    var DebugFlag = false;
    var DebugWindow = null;
    
    if (DebugFlag) {
        if (DebugWindow === null){
            DebugWindow = window.open();
        }
        DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
        DebugWindow.document.write('OriginalImageWidth: ' + OriginalImageWidth + LineBreakHTML);
        DebugWindow.document.write('OriginalImageHeight: ' + OriginalImageHeight + LineBreakHTML);
        DebugWindow.document.write(LineBreakHTML);
    }
    
    // Parameters
    var ZoomFactor = 1.05;
    var OriginalImageRatio = OriginalImageHeight / OriginalImageWidth;
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var WindowRatio = WindowHeight / WindowWidth;
    // ZoomWindow: Use 90% of the window
    // var ZoomVersusWindowPercentage = 0.9;
    var ZoomVersusWindowPercentage = 1.0; // Not implemented other percentages <> 1.0
    
    // StatusVariables
    // Scrolling allowed or not
    var ScrollingAllowed = false;
    // Show User Instruction Screen, only once
    // Defined above as global: var UserInstructionsShown = false;
    // MousePosition relative to ZoomWindow
    var CurrentPositionInZoomWindowX;
    var CurrentPositionInZoomWindowY;
    // Reference cursor position by start cursor down
    var ReferenceCursorX;
    var ReferenceCursorY;

    // ViewOnImage: the part of / view on the OriginalImage we want to see
    // ===================================================================
    // Define ViewOnImage
    // Defines the part / view of the OriginalImage we want to see
    var ViewOnImageWidthMax = OriginalImageWidth;
    var ViewOnImageWidthMin = WindowWidth;
    var ViewOnImageHeightMax = OriginalImageHeight;
    var ViewOnImageHeightMin = WindowHeight;
    // Initial values for ViewOnImage: view on the whole image
    var ViewOnImageWidth = ViewOnImageWidthMax;
    var ViewOnImageLeft = 0;
    var ViewOnImageCenterX = ViewOnImageLeft + ViewOnImageWidth/2;
    var ViewOnImageHeight = ViewOnImageHeightMax;
    var ViewOnImageTop = 0;
    var ViewOnImageCenterY = ViewOnImageTop + ViewOnImageHeight/2;
    
    // Define ZoomWindow: Part of the window used to show ViewOnImage
    // ==============================================================
    var ZoomWindow = document.getElementById(ZoomWindowID);
    var ZoomWindowWidth = 0;
    var ZoomWindowHeight = 0;
    var ZoomWindowWidthMin = 0;
    var ZoomWindowWidthMax = WindowWidth;
    var ZoomWindowHeightMin = 0;
    var ZoomWindowHeightMax = WindowHeight;
    CurrentPositionInZoomWindowX = WindowWidth / 2;
    CurrentPositionInZoomWindowY = WindowHeight / 2;
    
    // Define Background
    // =================
    ZoomWindow.style.backgroundImage = "url('" + OriginalImageFile + "')";
    // W3Schools advice to set always a back-ground color, but it doesn't work:
    // ZoomWindow.style.background-color: #cccccc;
    var BackgroundWidth = 0;
    var BackgroundLeft = 0;
    var BackgroundCenterX = 0;
    var BackgroundHeight = 0;
    var BackgroundTop = 0;
    var BackgroundCenterY = 0;

    AdaptZoomWindow();

    DebugFlag = false;
    if (DebugFlag) {
        if (DebugWindow === null){
            DebugWindow = window.open();
        }
        DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageLeft: ' + ViewOnImageLeft + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageWidth: ' + ViewOnImageWidth + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageTop: ' + ViewOnImageTop + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageHeight: ' + ViewOnImageHeight + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageCenterX: ' + ViewOnImageCenterX + LineBreakHTML);
        DebugWindow.document.write('ViewOnImageCenterY: ' + ViewOnImageCenterY + LineBreakHTML);
        DebugWindow.document.write(LineBreakHTML);
    }
    DebugFlag = false;
    
    // Eventhandlers
    // =============
    // Initial event: show information by hoovering over
    // -------------------------------------------------
    ZoomWindow.addEventListener("mouseover", ShowUserInstructionsEvent);
    
    // Zoom in or out:
    // ---------------
    // Use the mouse wheel
    ZoomWindow.addEventListener("wheel", ChangeZoomEvent);
    // @@@ Uses the 'pg up'- and 'pg dn'-keys

    // Enable scrolling with Mouse Down in ZoomWindow
    // ---------------------------------------------
    ZoomWindow.addEventListener("mousedown", MouseDownEvent);
    
    // Disable scrolling with Mouse Up in ZoomWindow
    // --------------------------------------------
    ZoomWindow.addEventListener("mouseup", MouseUpEvent);
    
    // Move the lens:
    // --------------
    // The cursor moves over the ZoomWindow or the Lens:
    // Set by "mousedown": ZoomWindow.addEventListener("mousemove", MoveLensEvent);
    // Touch the ZoomWindow:
    // Set by "mousedown": ZoomWindow.addEventListener("touchmove", MoveLensEvent);
    // @@@ Use the left, right, up and down arrows = cursor movements

//-----------------------------------------------------------------------------

    function AdaptZoomWindow(){
        CalculateZoomWindowFromViewOnImage();
        CalculateBackgroundFromViewOnImage();
    }

//-----------------------------------------------------------------------------

    function CalculateZoomWindowFromViewOnImage(){
        // Calculate dimensions of ZoomWindow in Window
        ModuleName = 'CalculateZoomWindowFromViewOnImage';
        var ViewOnImageRatio = ViewOnImageHeight / ViewOnImageWidth;
    	if (WindowHeight >= WindowWidth * ViewOnImageRatio) {
    		ZoomWindowWidth = WindowWidth;
    	    ZoomWindowHeight = WindowWidth * ViewOnImageRatio;
    	} else {
    		ZoomWindowHeight = WindowHeight;
    		ZoomWindowWidth = WindowHeight / ViewOnImageRatio;
    	}
    	// Calculate position of ZoomWindow in Window
    	// Independent of ViewOnImage
    	var ZoomWindowLeft = (WindowWidth - ZoomWindowWidth) / 2;
    	var ZoomWindowTop = (WindowHeight - ZoomWindowHeight) / 2;
    	// Adapt properties of ZoomWindow
    	ZoomWindow.style.left =  Math.round(ZoomWindowLeft) + 'px';
    	ZoomWindow.style.width = Math.round(ZoomWindowWidth) + 'px';
    	ZoomWindow.style.top =  Math.round(ZoomWindowTop) + 'px';
    	ZoomWindow.style.height =  Math.round(ZoomWindowHeight) + 'px';
    	
        DebugFlag = false;
        if (DebugFlag) {
            if (DebugWindow === null){
                DebugWindow = window.open();
            }
            DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
            DebugWindow.document.write('ZoomWindowLeft: ' + ZoomWindowLeft + LineBreakHTML);
            DebugWindow.document.write('ZoomWindowWidth: ' + ZoomWindowWidth + LineBreakHTML);
            DebugWindow.document.write('ZoomWindowTop: ' + ZoomWindowTop + LineBreakHTML);
            DebugWindow.document.write('ZoomWindowHeight: ' + ZoomWindowHeight + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }
        DebugFlag = false;
    }
    
//-----------------------------------------------------------------------------

    function CalculateBackgroundFromViewOnImage(){
        // Calculate dimensions of Background compared to ZoomWindow
        ModuleName = 'CalculateBackgroundFromViewOnImage';
        BackgroundWidth = ZoomWindowWidth * OriginalImageWidth / ViewOnImageWidth;
        BackgroundHeight = ZoomWindowHeight * OriginalImageHeight  / ViewOnImageHeight;
    	// Calculate position of Background in Window
    	BackgroundLeft = -ViewOnImageLeft * ZoomWindowWidth / ViewOnImageWidth;
    	BackgroundTop = -ViewOnImageTop * ZoomWindowHeight / ViewOnImageHeight;
       	// Adapt properties of Background
        ZoomWindow.style.backgroundPosition =
            Math.round(BackgroundLeft) + "px " + Math.round(BackgroundTop) + "px";
        ZoomWindow.style.backgroundSize =
            Math.round(BackgroundWidth) + "px " + Math.round(BackgroundHeight) + "px";
            
        DebugFlag = false;
        if (DebugFlag) {
            if (DebugWindow === null){
                DebugWindow = window.open();
            }
            DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
            DebugWindow.document.write('BackgroundLeft: ' + BackgroundLeft + LineBreakHTML);
            DebugWindow.document.write('BackgroundWidth: ' + BackgroundWidth + LineBreakHTML);
            DebugWindow.document.write('BackgroundTop: ' + BackgroundTop + LineBreakHTML);
            DebugWindow.document.write('BackgroundHeight: ' + BackgroundHeight + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }
    }
    
//-----------------------------------------------------------------------------

    function ChangeZoomEvent(UserEvent){
        ModuleName = 'ChangeZoomEvent';
        
        UserEvent.preventDefault(); // The default action that belongs to the event will not occur
        
        // Expand or reduce ViewOnImage in both directions: ViewOnImageWidth and ViewOnImageHeight
        if (UserEvent.deltaY < 0){
            // Corresponds with scrolling to the top of the screen,
            // corresponds with zooming-in and smaller ViewOnImage
            ViewOnImageWidth = ViewOnImageWidth / ZoomFactor;
            ViewOnImageHeight = ViewOnImageHeight / ZoomFactor;
        } else {
            // Corresponds with scrolling to the bottom of the screen,
            // corresponds with zooming-out and bigger ViewOnImage
            ViewOnImageWidth = ViewOnImageWidth * ZoomFactor;
            ViewOnImageHeight = ViewOnImageHeight * ZoomFactor;
        }
        
        // Check if we can expand in one direction
        // without changing CenterX or CenterY
        var ViewOnImageRatio = ViewOnImageHeight / ViewOnImageWidth;
        if (WindowRatio > ViewOnImageRatio){
            // Window taller than ViewOnImage: Increase the ViewOnImageHeight
            ViewOnImageHeight = ViewOnImageWidth * Math.min(ViewOnImageRatio * ZoomFactor, WindowRatio);
        } else if (WindowRatio == ViewOnImageRatio){
            // Do nothing
        } else if (WindowRatio < ViewOnImageRatio){
            // ViewOnImage wider than Window: try to decrease the ViewOnImageWidth
            ViewOnImageWidth = ViewOnImageHeight / Math.min(ViewOnImageRatio * ZoomFactor, WindowRatio);
        }

        // Check minimal limits
        if (ViewOnImageWidth < ViewOnImageWidthMin && ViewOnImageHeight < ViewOnImageHeightMin) {
            if (Language == 'en') {
                 JSTPF_Alert(
                    "Only 'Zoom-out' is possible" + LineBreak +
                    LineBreak);
            } else if (Language == 'fr') {
                JSTPF_Alert(
                    "Seulement 'Zoom-out' est possible" + LineBreak +
                    LineBreak);
            } else if (Language == 'nl') {
                JSTPF_Alert(
                    "Enkel 'Zoom-out' is mogelijk" + LineBreak +
                    LineBreak);
            } else {
                JSTPF_Alert(
                    "Seulement 'Zoom-out' est possible" + LineBreak +
                    "Enkel 'Zoom-out' is mogelijk" + LineBreak +
                    "Only 'Zoom-out' is possible" + LineBreak +
                    LineBreak);
            }
            ZoomWindow.style.cursor = "zoom-out"; 
        }
        if (ViewOnImageWidth < ViewOnImageWidthMin) {
            ViewOnImageWidth = ViewOnImageWidthMin;
        }
        if (ViewOnImageHeight < ViewOnImageHeightMin) {
            ViewOnImageHeight = ViewOnImageHeightMin;
        }

        // Check maximal limits
        // Can have an impact on ViewOnImageCenterX & ViewOnImageCenterY
        if (ViewOnImageWidth > ViewOnImageWidthMax && ViewOnImageHeight > ViewOnImageHeightMax) {
            if (Language == 'en') {
                 JSTPF_Alert(
                    "Only 'Zoom-in' is possible" + LineBreak +
                    LineBreak);
            } else if (Language == 'fr') {
                JSTPF_Alert(
                    "Seulement 'Zoom-in' est possible" + LineBreak +
                    LineBreak);
            } else if (Language == 'nl') {
                JSTPF_Alert(
                    "Enkel 'Zoom-in' is mogelijk" + LineBreak +
                    LineBreak);
            } else {
                JSTPF_Alert(
                    "Seulement 'Zoom-in' est possible" + LineBreak +
                    "Enkel 'Zoom-in' is mogelijk" + LineBreak +
                    "Only 'Zoom-in' is possible" + LineBreak +
                    LineBreak);
            }
            ZoomWindow.style.cursor = "zoom-in"; 
        }
        if (ViewOnImageWidth > ViewOnImageWidthMax) {
            ViewOnImageWidth = ViewOnImageWidthMax;
            ViewOnImageCenterX = ViewOnImageWidthMax / 2;
        }
        if (ViewOnImageHeight > ViewOnImageHeightMax) {
            ViewOnImageHeight = ViewOnImageHeightMax;
            ViewOnImageCenterY = ViewOnImageHeightMax / 2;
        }
        
        // Can have an impact on ViewOnImageCenterX & ViewOnImageCenterY
        CheckViewOnImagePartofOriginalImage();

        // Reposition ViewOnImage:
        // - ViewOnImageCenterX & ViewOnImageCenterY do NOT move;
        // - Calculate Left & Top corner.
        ViewOnImageLeft = ViewOnImageCenterX - ViewOnImageWidth / 2;
        ViewOnImageTop = ViewOnImageCenterY - ViewOnImageHeight / 2;
        
        DebugFlag = false;
        if (DebugFlag) {
            if (DebugWindow === null){
                DebugWindow = window.open();
            }
            DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageLeft: ' + ViewOnImageLeft + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageWidth: ' + ViewOnImageWidth + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageTop: ' + ViewOnImageTop + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageHeight: ' + ViewOnImageHeight + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageCenterX: ' + ViewOnImageCenterX + LineBreakHTML);
            DebugWindow.document.write('ViewOnImageCenterY: ' + ViewOnImageCenterY + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }
        DebugFlag = false;

        AdaptZoomWindow();
    }
    
//-----------------------------------------------------------------------------

    function CheckViewOnImagePartofOriginalImage(){
        // ViewOnImage is smaller than OriginalImage
        if (OriginalImageWidth < ViewOnImageWidth){
            ViewOnImageWidth = OriginalImageWidth;
            ViewOnImageCenterX = OriginalImageWidth / 2;
        }
        if (OriginalImageHeight < ViewOnImageHeight){
            ViewOnImageHeight = OriginalImageHeight
            ViewOnImageCenterY = OriginalImageHeight / 2;
        }
        
        // ViewOnImage too much to the left or to the right
        if (ViewOnImageLeft < 0) {
            ViewOnImageLeft = 0;
            ViewOnImageCenterX = ViewOnImageWidth / 2;
        }
        if (ViewOnImageLeft > OriginalImageWidth - ViewOnImageWidth) {
            ViewOnImageLeft = OriginalImageWidth - ViewOnImageWidth;
            ViewOnImageCenterX = OriginalImageWidth - ViewOnImageWidth / 2;
        }

        // ViewOnImage too high or too low
        if (ViewOnImageTop < 0) {
            ViewOnImageTop = 0;
            ViewOnImageCenterY = ViewOnImageHeight / 2;
        }
        if (ViewOnImageTop > OriginalImageHeight - ViewOnImageHeight) {
            ViewOnImageTop = OriginalImageHeight - ViewOnImageHeight;
            ViewOnImageCenterY = OriginalImageHeight - ViewOnImageHeight / 2;
        }
    }

//-----------------------------------------------------------------------------

    function GetCursorPositionInElement(UserEvent, Element) {
        // Get the cursor position (pixels) in the Element
        // relative to the Element top-left corner
        var ElementRectangle, CursorX = 0, CursorY = 0;
        UserEvent = UserEvent || window.event;
        CursorX = UserEvent.pageX;
        CursorY = UserEvent.pageY;
        // Calculate the cursor's CursorX and CursorY coordinates, relative to the image:
        ElementRectangle =
            ScrollingCorrectionRectangle(
                Element.getBoundingClientRect()); // Relative to the top-left of the viewport...
        CursorX = CursorX - ElementRectangle.left;
        CursorY = CursorY - ElementRectangle.top;
        return {CursorX : CursorX, CursorY : CursorY};
    }
    
//-----------------------------------------------------------------------------

    function MoveLensEvent(UserEvent) {
        var ModuleName = 'MoveLensEvent';
        
        UserEvent.preventDefault(); // The default action that belongs to the event will not occur

        // Get the delta cursor position relative to the ZoomWindow
        // ReferenceCursorX & ReferenceCursorY used as reference points
        var CursorX, CursorY;
        // Scrolling allowed
        if (ScrollingAllowed) {
            var CursorPos= GetCursorPositionInElement(UserEvent, ZoomWindow);
            CursorX = CursorPos.CursorX;
            CursorY = CursorPos.CursorY;
        } else {
            // Cursor position doesn't change
            CursorX = ReferenceCursorX;
            CursorY = ReferenceCursorY;
        }
        // Delta muliplied by 0,5% of window size.
        var CursorDeltaX = (ReferenceCursorX - CursorX) * WindowWidth / 200;
        var CursorDeltaY = (ReferenceCursorY- CursorY) * WindowHeight / 200;
        
        DebugFlag = false;
        if (DebugFlag) {
            if (DebugWindow === null){
                DebugWindow = window.open();
            }
            DebugWindow.document.write(ModuleName + ' Started' + LineBreakHTML);
            DebugWindow.document.write('CursorDeltaX: ' + CursorDeltaX + LineBreakHTML);
            DebugWindow.document.write('CursorDeltaY: ' + CursorDeltaY + LineBreakHTML);
            DebugWindow.document.write(LineBreakHTML);
        }

        // Change ViewOnImage values
        // ViewOnImageWidth: doesn't change
        ViewOnImageLeft = ViewOnImageLeft + CursorDeltaX;
        ViewOnImageCenterX = ViewOnImageCenterX + CursorDeltaX;
        // ViewOnImageHeight; doesn't change
        ViewOnImageTop = ViewOnImageTop + CursorDeltaY;
        ViewOnImageCenterY = ViewOnImageCenterY + CursorDeltaY;

        // Move the reference point to the new position
        ReferenceCursorX = CursorX;
        ReferenceCursorY = CursorY;

        // Check limits
        CheckViewOnImagePartofOriginalImage();
        
        AdaptZoomWindow();
    }
    
//-----------------------------------------------------------------------------

    function MouseDownEvent(UserEvent){
        if (UserEvent.button === 0){ // IE8 and lower: 1
            ScrollingAllowed = !ScrollingAllowed;
            var CursorPos= GetCursorPositionInElement(UserEvent, ZoomWindow);
            ReferenceCursorX = CursorPos.CursorX;
            ReferenceCursorY = CursorPos.CursorY;
            ZoomWindow.style.cursor = 'grab';
            // The following 2 properties are NOT defined:
            //NOTDEFINED: ZoomWindow.style.cursor.width = '100px';
            //NOTDEFINED: ZoomWindow.style.cursor.height = '100px';
            ZoomWindow.addEventListener("mousemove", MoveLensEvent);
            ZoomWindow.addEventListener("touchmove", MoveLensEvent);
            // @@@ Use the left, right, up and down arrows = cursor movements            
        } else {
            ShowUserInstructionsFunction(UserEvent);
        }
    }

//-----------------------------------------------------------------------------

    function MouseUpEvent(UserEvent){
        if (UserEvent.button === 0){ // IE8 and lower: 1
            ScrollingAllowed = !ScrollingAllowed;
            var CursorPos= GetCursorPositionInElement(UserEvent, ZoomWindow);
            var CursorX = CursorPos.CursorX;
            var CursorY = CursorPos.CursorY;
            ZoomWindow.style.cursor = "zoom-in"; 
            ZoomWindow.removeEventListener("mousemove", MoveLensEvent);
            ZoomWindow.removeEventListener("touchmove", MoveLensEvent);
            ReferenceCursorX = undefined;
            ReferenceCursorY = undefined;
            // @@@ Use the left, right, up and down arrows = cursor movements            
        } else {
            ShowUserInstructionsFunction(UserEvent);
        }
    }

//-----------------------------------------------------------------------------

    function ScrollingCorrectionRectangle(Rectangle){
        // Consider any page scrolling:
            // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
            // If you need the bounding rectangle relative to the top-left corner of the document,
            // just add the current scrolling position to the top and left properties
            // (these can be obtained using window.scrollX and window.scrollY)
            // to get a bounding rectangle which is independent from the current scrolling position.
            // Scripts requiring high cross-browser compatibility can use window.pageXOffset and window.pageYOffset
            // instead of window.scrollX and window.scrollY.
        Rectangle.top = Rectangle.top + window.pageYOffset;
        Rectangle.bottom = Rectangle.bottom + window.pageYOffset;
        Rectangle.left = Rectangle.left + window.pageXOffset;
        Rectangle.right = Rectangle.right + window.pageXOffset;
        return Rectangle;
    }
    
//-----------------------------------------------------------------------------

    function ShowUserInstructionsEvent(UserEvent){
        if (!UserInstructionsShown){
            ShowUserInstructionsFunction(UserEvent);
        } else {
            // UserInformation already shown
            // Do nothing
        }
    }
    
//-----------------------------------------------------------------------------

    function ShowUserInstructionsFunction(UserEvent){
        UserInstructionsShown = true;
    }

//-----------------------------------------------------------------------------

    function ShowUserInstructionsFunctionOLD(UserEvent){
        if (Language == 'en') {
             JSTPF_Alert(
                "How to use the zoom-functionality ?" + LineBreak +
                LineBreak +
                "Use the 'Mouse Wheel' to zoom-in (up) or to zoom-out (down)." + LineBreak +
                "You haveve to start with zoom-in ('Mouse Wheel' up)." + LineBreak +
                "Keep the left button down to scroll through the image in all directions." + LineBreak +
                "To read these instructions again push on the right button." + LineBreak +
                LineBreak);
        } else if (Language == "fr") {
            JSTPF_Alert(
                "Comment utiliser la fonction zoom ?" + LineBreak +
                LineBreak +
                "Utilisez la 'molette de la souris' pour agrandir (zoom-in / tourner vers le haut) ou pour réduire (zoom-out / tourner vers le bas) les détails." + LineBreak +
                "Il faut commencer par agrandir les détails (tourner vers le haut)." + LineBreak +
                "Maintenez le bouton gauche enfoncé pour faire défiler l'image dans toutes les directions." + LineBreak +
                "Pour relire ces instructions, appuyez / cliquer sur le bouton de droite." + LineBreak +
                LineBreak);
        } else if (Language == "nl") {
            JSTPF_Alert(
                "Hoe gebruikt u de zoom-functionaliteit?" + LineBreak +
                LineBreak +
                " Gebruik het 'muiswiel' om de details te vergroten (muiswiel naar boven / omhoog draaien) of om te verkleinen (muiswiel naar beneden / omlaag draaien)" + LineBreak +
                "U moet starten met  het vergroten van de details (muiswiel naar boven / omhoog draaien)." + LineBreak +
                "Houd de linkerknop ingedrukt om in alle richtingen door het beeld te bewegen / scrollen." + LineBreak +
                "Om deze instructies nogmaals te lezen druk je op de rechter muisknop." + LineBreak +
                LineBreak);
        } else {
            JSTPF_Alert(
                 "How to use the zoom-functionality ?" + LineBreak +
                LineBreak +
                "Use the 'Mouse Wheel' to zoom-in (up) or to zoom-out (down)." + LineBreak +
                "You haveve to start with zooming in ('Mouse Wheel' up)." + LineBreak +
                "Keep the left button down to scroll through the image in all directions." + LineBreak +
                "To read these instructions again push on the right button." + LineBreak +
                LineBreak);
        }
        UserInstructionsShown = true;
     }

//-----------------------------------------------------------------------------

}</script>

<!-- ================================== -->
<!-- Include file 'Template.php' opened -->
<!-- ================================== -->


<!-- ===================================================== -->
<!-- Include file 'TemplateLeftNavigationPanel.php' opened -->
<!-- ===================================================== -->


<!-- ===================================================== -->
<!-- Include file 'TemplateRightNavigationPanel.php' opened -->
<!-- ===================================================== -->

<script>
// When resizing to 'Minimal' then 'onmouseleave' ('JSTMF_ContentElementNormalSize()') doesn't work
var TemporaryBlockingHooverOutFlag = false;
var DebugWindow = null;

window.onerror = function (msg, url, line, Column, JSError) {
    var ModuleTrace = "NoTrace available";
    var ModuleName = "window.onerror";
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var Message = ModuleTrace + ": " + "Caught[via window.onerror]: '" + msg + "' from " + url + ":" + line;
    JSError.message = Message;
    console.log( Message);
    DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    return true;
};

//-----------------------------------------------------------------------

function MyErrorHandlerJS( JSError, DebugWindowLocal = null, ModuleTrace = "Unknown"){
    // DebugWindowLocal: not needed, is a global variable
    var ModuleName = "MyErrorHandlerJS";
    ModuleTrace =  ModuleTrace + " & " + ModuleName;
    
    var Message;
    var AlertOnlyFlag = false;

    Message =
        "Javascript Error:\n" +
            "-> Name: <" + JSError.name + ">;\n" +
            "-> Message: <" + JSError.message + ">;\n" +
            "-> ModuleTrace: <" + ModuleTrace + ">\n" +
            "\n";
    JSUIF_ShowMessage( ModuleName, Message, AlertOnlyFlag, ModuleTrace);
    
    return DebugWindow;
}

//---------------------------------------------------------------------------

function JSUIF_ShowMessage( ModuleName, Message, AlertOnlyFlag, ModuleTrace = "Unknown"){
    // var ModuleName already defined;
    // ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    var FullMessage =
            'ModuleName: ' + ModuleName + ': ' +
            'ModuleTrace: ' + ModuleTrace + ': ' +
            'Message: ' + Message;
    JSTPF_Alert( FullMessage);
    if (typeof AlertOnlyFlag === undefined || !AlertOnlyFlag){
        if ( DebugWindow === null){
            DebugWindow = window.open( ); 
        }
        DebugWindow.document.write( FullMessage);
        return DebugWindow;
    }
}

//-----------------------------------------------------------------------

function JSTMF_ContentElementMaximalSize( TriggerElementId, ModuleTrace = "Unknown") {
    var ModuleName = 'JSTMF_ContentElementMaximalSize';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    try {
        JSTMF_ContentElementChangeSize( TriggerElementId, 'none', 'auto', ModuleTrace);
        TemporaryBlockingHooverOutFlag = false;
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//-----------------------------------------------------------------------

function JSTMF_ContentElementNormalSize( TriggerElementId, ModuleTrace = "Unknown") {
    var ModuleName = 'JSTMF_ContentElementNormalSize';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        if (TemporaryBlockingHooverOutFlag === true){
            // No resizing
        } else {
            JSTMF_ContentElementChangeSize( TriggerElementId, '200px', 'scroll', ModuleTrace);
        }
        TemporaryBlockingHooverOutFlag = false;
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//-----------------------------------------------------------------------

function JSTMF_ContentElementMinimalSize( TriggerElementId, ModuleTrace = "Unknown") {
    var ModuleName = 'JSTMF_ContentElementMinimalSize';
    ModuleTrace = ModuleTrace + " & " + ModuleName;
    
    // JSTPF_Alert('ModuleName' + ': ' + ModuleName + ': ' + 'TriggerElementId' + ': ' + TriggerElementId)

    try {
        JSTMF_ContentElementChangeSize( TriggerElementId, '100px', 'scroll', ModuleTrace);
        TemporaryBlockingHooverOutFlag = true;
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//-----------------------------------------------------------------------

function JSTMF_ContentElementChangeSize( TriggerElementId, MaxHeight, OverflowY, ModuleTrace = "Unknown") {
    var ModuleName = 'JSTMF_ContentElementChangeSize';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    try {
        if (MaxHeight.toLowerCase().trim() === 'auto'){
            // Height uses 'auto', MaxHeight uses 'none'
            MaxHeight = 'none';
        }
        var ContentElement = JSTMF_GetContentElement( TriggerElementId, ModuleTrace);
        if (ContentElement !== null){
            ContentElement.style.maxHeight = MaxHeight;
            ContentElement.style.overflowY = OverflowY;
        }
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
    }
}

//-----------------------------------------------------------------------

function JSTMF_GetContentElement( TriggerElementId, ModuleTrace = "Unknown") {
    var ModuleName = 'JSTMF_GetContentElement';
    ModuleTrace = ModuleTrace + " & " + ModuleName;

    var ContentElement = null;
    try {
        var TopElementId = TriggerElementId;
        var ContentElementId = TopElementId + '_content';
        ContentElement = document.getElementById( ContentElementId);
        // JSTPF_Alert(ModuleName + ': ' + 'TopElementId' + ': ' + TopElementId + ': ' + 'TriggerElementId' + ': ' + TriggerElementId + ': ' + 'ContentElementId' + ': ' + ContentElementId)
    } catch( JSError) {
        JSError.message =
            'ModuleName: ' + ModuleName + ': ' +
            JSError.message;
        DebugWindow = MyErrorHandlerJS( JSError, DebugWindow, ModuleTrace);
        ContentElement = null;
    }
    
    return ContentElement;
}

//-----------------------------------------------------------------------

</script>

            <!-- Google tag (gtag.js) - Google Analytics -->
            <script async src='https://www.googletagmanager.com/gtag/js?id=UA-83919159-2'>
            </script>
            <script>
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
            
              gtag('config', 'UA-83919159-2');
            </script>
            <meta name='google-site-verification' content='ZPaZpHoxifuWLiax0428luC0ho--1lyLk2cy66CSRNo' />
            </head>
             <body lang="nl"  onerror = "MyErrorHandlerJS( error)" style = "background-image: url('OtherPictures/Himmelrom_1600x0900_opacity50.jpg')" id = 'BodyId'  >

                <div id="fb-root"></div>
                <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0" nonce="S7L7TAbl"></script>
                    <!== AccessKey alt+b for buy ==>
        <a
            target="_blank"
            href =
                "WIP_CreateBuyList.php?QRCodeNeeded=true&PictureNeeded=true&KeyName=                    "
            accesskey="b">
        </a>
        <!== AccessKey alt+p for marketing flyer artist (print version) ==>
        <a
            target="_blank"
            href =
                "CreateArtistPromotionPagePrint.php?KeyName=                    "
            accesskey="p">
        </a>
        <!== AccessKey alt+p for marketing flyer artist (web version) ==>
        <a
            target="_blank"
            href =
                "CreateArtistPromotionPageWeb.php?KeyName=                    "
            accesskey="w">
        </a>

          <table lang="nl"  id = 'MainContainer' style= ' width: 100%;  ' >
               <tr lang="nl"  style = ' width: 100%;  ' >
                    <td lang="nl"  rowspan='2' style='background-color: rgba(0,0,0,0.25);'  >
                         <div lang="nl"  id = 'WeatherForecastId' >
                              <p lang="nl"  style=" font-size: 100%;  font-weight: bold;  line-height: 100%;  text-align: center;  " >Weervoorspelling </p>

                    <iframe
                        src="https://gadgets.buienradar.nl/gadget/zoommap/?lat=50.75715&lng=4.88711&overname=2&zoom=13&naam=zetrud&size=2&voor=1"
                        scrolling=no
                        width=256
                        height=256
                        frameborder=no>
                    </iframe>
                                         </div>
                    </td>
                    <td lang="nl"  colspan = "1" style=" position: relative; background-image: url('OtherPictures/BannerBackground_2023_0300px.jpg'); background-repeat: repeat; display: flex; flex-direction: row; justify-content: space-around;  " >
                         <div lang="nl"  id = 'SculptureImageLeftId' >
                              <img lang="nl"  src="OtherPictures/BannerPictureLeft_marie%20thys_image_grand%20lievre_0150x0150.png" alt="OtherPictures/BannerPictureLeft_marie%20thys_image_grand%20lievre_0150x0150.png" style=" height: 150px; 
                                width: auto;
                                position: relative;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%); "  " >
                         </div>
                         <p lang="nl"  style=" text-align: center; " >
                              <span lang="nl"  style=" color:gold; font-size:2.0em; font-weight: bolder; line-height: normal; " >Zoom - nl </span>
<br>                              <span lang="nl"  style=" color:white; font-size:1.6em; font-weight: bold; line-height: normal; " >Welkom tot de Internationale Kunst Tentoonstelling </span>
<br>                              <span lang="nl"  style=" color:gold; font-size:1.6em; font-weight: bold; font-style: italic; line-height: normal; " >Tot ziens, tot in 2024 in een vernieuwde tuin met nieuwe kunstenaars, nieuwe kunstwerken rond het thema 'Water ...' </span>
<br>                              <span lang="nl"  style=" color:white; font-size:1.2em; font-weight:normal; line-height: normal; " >We passen de tentoonstellings- en tuinconcepten aan, we herstellen de tuin na tienduizenden bezoekers, dus tot de volgende editie. </span>
                         </p>
                    </td>
                    <td lang="nl"  style=" height: 150px; background-image: url('OtherPictures/BannerBackground_2023_0300px.jpg'); background-repeat: repeat; " >
                         <div lang="nl"  id = 'LogoGlassId'  style=" height: 150px; " >
                              <img lang="nl"  src="OtherPictures/Logos/Art%20Sanctuary%20logo_0100px.png" alt="OtherPictures/Logos/Art%20Sanctuary%20logo_0100px.png" style="
                                height: 100px;
                                width: auto;
                                position: relative;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%); "  >
                         </div>
                    </td>
               </tr>

                    <TR>
                        <!-- Cell used by Buienradar -->
                        <TD colspan = "1" style="background-color: rgba(0,0,0,0.25);">
                        <!-- if Buienradar is not used: <TD colspan = "2" style="background-color: rgba(0,0,0,0.25);"> -->
                               <div lang="nl"  style=" color:white; font-size:150%; font-weight:bold; text-align:center; " >
                    <a lang="nl"  href="Reservation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Reserveer uw bezoek </a>
 -                     <a lang="nl"  href="TicketRegistration.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Ticket Registratie </a>
 -                     <a lang="nl"  href="PracticalInformation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Om ons te bezoeken - Informatie </a>
               </div>

                        <TD style="background-color: rgba(0,0,0,0.25); ">
                            <div id = "StatisticsId">
                                <P style="margin: 10px; text-align: center; font-weight: bold; ">
                                    Stat. 24u
                                </P>
                                <P style="margin: 10px; text-align: center; font-weight: normal; ">
                                        #Bezoekers:&nbsp;999<BR>
                                        #Pagina's:&nbsp;11344<BR>
                                </P>
                            </div>
                        </TD>
                    </TR>
                               <tr lang="nl"  style=" width: 100%; " >
                    <td lang="nl"  style=" background-color: rgba(0,0,0,0.25); " >
                    </td>
                    <td lang="nl"  colspan = "1 style=" background-color: rgba(0,0,0,0.25); " >
                         <div lang="nl"  style="
                                color:white;
                                background-color: rgba(0,0,0,0.25);
                                font-size:100%;
                                font-weight:900;
                                text-align: center;
                            " " >

        Om de kosten te dekken, vragen we de bezoeker een bijdrage van 6 EUR per persoon.
        Kinderen onder de 12 jaar betalen geen bijdrage.
        Groepen van meer dan 10 personen betalen 6 EUR per persoon.
        Drankjes en snacks zijn niet bij de entreeprijs inbegrepen. Deze kosten 2 of 4 EUR.
    <br>                              <a lang="nl"  href="https://www.google.be/maps/dir/Art+Sanctuary,+Rue+du+Tilleul+22,+1370+Jodoigne" target="_blank" style=" display:inline; color:white; font-weight:normal; " >
                                   <img lang="nl"  src="Icons/LocationIconSmall.png" alt="Rue du Tilleul 22, 1370 Jodoigne, Belgium" style=" width:20px; height:20px; display:inline; " >
                                   <p lang="nl"  style=" display:inline; " >Rue du Tilleul 22, 1370 Jodoigne, Belgium </p>
                              </a>
&nbsp; &nbsp;                              <a lang="nl"  href = 'tel:+32493628540'  target="_blank" style=" display:inline; " >
                                   <img lang="nl"  src = "Icons/PhoneIconSmall.png" alt = "Phone +32 (0) 493 628 540"  style=" width:20px; height:20px; display:inline; " >
                                   <p lang="nl"  style=" display:inline; color:white; font-weight:normal; " >Phone: +32 (0) 493 628 540  </p>
                              </a>
&nbsp; &nbsp;                              <a lang="nl"  href="mailto:artsanctuary@live.com;info@ignace-clarysse.com" target="_blank" style=" display:inline; " >
                                   <img lang="nl"  src="Icons/MailIconSmall.png" alt="mailto:artsanctuary@live.com;info@ignace-clarysse.com" style=" width:20px; height:20px; display:inline; " >
                                   <p lang="nl"  style=" display:inline; color:white; font-weight:normal; " >Email: artsanctuary@live.com;info@ignace-clarysse.com </p>
                              </a>
&nbsp; <br><a
                href = '/2023/ZoomImage.php?ImageFile=Artists/Images/marije%20gies_image_warm.jpg&TemplateNeeded=TRUE&Language=fr'
                style =
                    'color: white;
                    font-weight: normal; '>
                <img
                    src = 'Icons/FrenchFlag.png' alt = 'Français' style = 'display:inline; height: 16px; width: auto; '>Français</a> <a
                href = '/2023/ZoomImage.php?ImageFile=Artists/Images/marije%20gies_image_warm.jpg&TemplateNeeded=TRUE&Language=nl'
                style =
                    'color: white;
                    font-weight: normal; '>
                <img
                    src = 'Icons/NetherlandsFlag.png' alt = 'Nederlands' style = 'display:inline; height: 16px; width: auto; '>Nederlands</a> <a
                href = '/2023/ZoomImage.php?ImageFile=Artists/Images/marije%20gies_image_warm.jpg&TemplateNeeded=TRUE&Language=en'
                style =
                    'color: white;
                    font-weight: normal; '>
                <img
                    src = 'Icons/UKFlag.png' alt = 'English' style = 'display:inline; height: 16px; width: auto; '>English</a>                          </div>
                    </td>
                    <td lang="nl"  style=" background-color: rgba(0,0,0,0.25); " >
                    </td>
               </tr>
               <tr lang="nl"  style=" width: 100%; " >
<td id = 'LeftNavigationPanelGeneralId' rowspan = '99'>
            <div
                style = '
                    position: absolute;
                    top: 400px;
                    width: 250px;
                    text-align: center;
                    color: blue;
                '
        
        <div
            id = 'PHPTPF_CreateLeftNavigationPanelPCId'
            //NOIMPACT, in the middle of the cell: style = '
            //NOIMPACT, in the middle of the cell:  position: relative;
            //NOIMPACT, in the middle of the cell:  top: 0%;
            //NOIMPACT, in the middle of the cell: '
        >
                        <div lang="nl"  id="LeftNavigationPanelPCId" >
                         <a lang="nl"  href="index.php?Language=nl" target="_TOP" style="display: inline-block; " >
                              <img lang="nl"  src="Icons/HomeIcon.jpg" width="100" alt="Home" >
                         </a>
                         <br lang="nl"  >
                         <a lang="nl"  href="https://www.buienradar.be/weer/sainte-marie-geest/be/2787436?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Weervoorspelling </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionPanel.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Zoek in de catalogus </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtist.php?Language=nl&Selection=NewArtists&BannerNeeded=FALSE&TemplateNeeded=TRUE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe kunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtist.php?Language=nl&Selection=NewGlassArtists&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe glaskunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="CreateCatalogue.php?InputLanguage=nl&Year=2023&BannerNeeded=FALSE&TemplateNeeded=TRUE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Alle Kunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtwork.php?ArtworkInCollection=TRUE&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Kunstwerken in collectie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtwork.php?NewArtwork=TRUE&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe kunstwerken </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GardenWalk.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Tuinbezoek in Fotos </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="PracticalInformation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Om ons te bezoeken - Informatie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="Reservation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Reserveer uw bezoek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GroupVisitPage.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Groepsbezoek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GroupVisitBudgetPage.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Groepsbezoek kosten </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="DocumentationDownload.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Downloads </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="TicketRegistration.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Ticket Registratie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="ContentPage.php?ContentPage=WhatToDoAfterVisit&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Wat te doen na uw bezoek? </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Sociale media </p>

            <div class="fb-share-button" data-href="https://www.facebook.com/SanctuaryArt" data-layout="button" data-size="large">
                <a
                    target="_blank"
                    href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.facebook.com%2FSanctuaryArt&amp;src=sdkpreparse"
                    class="fb-xfbml-parse-ignore">
                    Share on Facebook
                </a>
            </div>
        
            <div class="fb-share-button" data-href="https://www.facebook.com/SanctuaryArt" data-layout="button" data-size="large">
                <a
                    target="_blank"
                    href="https://g.page/r/CVif5W-GggzSEB0/review"
                >
                    Share your review on Google
                </a>
            </div>
                                 <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Glaskunstenaars </p>

<!-- OpenDatabase: 'START'-->
                         <a lang="nl"  href='ArtistPage.php?KeyName=Ale%20Moshenek&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ale Moshenek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=amber%20hiscott&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Amber Hiscott </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=bjane%20cowie&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >B. Jane Cowie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=raf%20roefflaer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Captain Bebop & B-Art  </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=charlotte%20chicot&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Charlotte-Sophie Chicot-Messenger </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=daniel%20olislaegers&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Dani&euml;l Olislaegers </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=danny%20beinsberger&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Danny Beinsberger </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=emma%20aiken&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Emma Butler-Cole Aiken </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=emma%20white&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Emma White </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=florence%20ruzicka&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Florence Ruzicka </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=gundula%20menking&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Gundula Menking </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=helen%20hancock&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Helen Hancock </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=helen%20twigge-molecey&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Helen Twigge-Molecey </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hendrike%20huijsmans&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hendrike Huijsmans </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=irene%20van%20der%20does%20de%20bye&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Irene van der Does de Bye </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jan%20falta&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jan Falta </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean-francois%20constant&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean-Fran&ccedil;ois Constant </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jessie%20lee&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jessie Lee </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=julie%20coakley&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Julie Coakley </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=kati%20kerstna&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Kati Kerstna </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=laurie%20sheridan&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Laurie Sheridan </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marc%20hadermann&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marc Hadermann </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marc%20paja&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marc-Paja Hadermann-Van Dyck </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marije%20gies&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marije Gies </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marja%20steinmetz&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marja Steinmetz  </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=paja%20van%20dyck&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Paja Van Dyck </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=sarah%20stuchfield&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Sarah Stuchfield </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=yaron%20meyer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Yaron Meyer </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=yasin-mohammed%20jamali&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Yasin Jamali </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Andere kunstenaars </p>

<!-- OpenDatabase: 'START'-->
                         <a lang="nl"  href='ArtistPage.php?KeyName=abou%20sidibe&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Abou Sidib&eacute; </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=adje%20martens&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Adje Martens </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=alameezo&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Alameezo </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=anmarie%20leon&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Anmarie L&eacute;on </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ann%20geirnaerdt&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ann Geirnaerdt </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=anne%20de%20Labouret&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Anne de Labouret </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=art%20sanctuary&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Art Sanctuary </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=bettina%20silverio&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Bettina Silverio </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=brigitte%20de%20callatay&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Brigitte de Callata&yuml; </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=catherine%20millet&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Catherine Millet </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=chris%20engels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Chris Engels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christian%20delory&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christian Delory </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christien%20dutoit&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christien Dutoit </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christoph%20goldberg&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christoph Goldberg </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=cor%20de%20ree&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Cor de Ree </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=daniella%20rubinovitz&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Daniella Rubinovitz </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=duometis&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Duom&eacute;tis </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ellen%20rijsdorp&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ellen Rijsdorp </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=elya%20yalonetski&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Elya Yalonetski </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=eveline%20bekkering&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Eveline Bekkering </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=evelyn%20hamoir&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Evelyn Hamoir </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=guy%20deltour&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Guy Deltour </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hans%20koenen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hans Koenen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hedwig%20du%20jardin&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hedwig Du Jardin </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hella%20meyer-alber&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hella Meyer-Alber </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=heren4&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Heren4 </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hermien%20buytendijk&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hermien Buytendijk </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jack%20van%20iwaarden%20de%20vreede&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jack van Iwaarden de Vreede </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=janneke%20bruines&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Janneke Bruines </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean%20de%20la%20kethulle&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean de la Kethulle </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean-luc%20absil&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean-Luc Absil </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=joel%20sadaune&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jo&euml;l Sadaune </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lebuin%20dhaese&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lebu&iuml;n D'Haese </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=leen%20kessels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Leen Kessels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lei%20hannen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lei Hannen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lieuwke%20loth&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lieuwke Loth </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=loes%20knoben&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Loes Knoben </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=louis%202%20verdal&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Louis 2 Verdal </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ludo%20giels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ludo Giels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=luk%20luts&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Luk Luts </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lut%20de%20baere&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lut De Baere </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=mag%20vermeiren&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Mag Vermeiren </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marianne%20ouwendijk&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marianne Ouwendijk </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marie%20thys&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marie Thys </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=music-beer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >MUSIC BEER FOUNDATION </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=nele%20schildermans&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Nele Schildermans </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=peter%20adams&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Peter Adams </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=philippe%20nicodeme&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Philippe Nicod&egrave;me </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=plaidsenshawls&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Plaids en Shawls </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=roland%20menten&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Roland Menten </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=roos%20mannaerts&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Roos Mannaerts </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=stanwood&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Stanwood Wind Sculptures </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=stella%20marquet&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Stella Marquet </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=steve%20hubback&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Steve Hubback </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=tim%20roosen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Tim Roosen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=tone%20aanderaa&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Tone Aanderaa </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=toni%20kanwa%20adikusumah&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Toni Kanwa Adikusumah </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=veronique%20kalitventzeff&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >V&eacute;ronique Kalitventzeff </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=will%20schropp&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Will Schropp </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=willy%20peeters&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Willy Peeters </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=woodstock%20chimes&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Woodstock chimes </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=xavier%20dumont&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Xavier Dumont </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                    </div>

        </div>
    </div>
        <div
            class = 'MenuIconClass'
            onclick = 'ShowLeftNavigationPanelMobileFunction()'
            id = 'PHPTPF_CreateLeftNavigationPanelMobileId'
        >
            <div style = 'position:fixed; top:200px; left:0px; '>
                <div  style = 'text-align: center; padding: 5px; font-size: 24px; display: inline-block; '>
                    <img
                        src = 'https://toppng.com/uploads/preview/menu-icon-png-3-lines-11552739298tzauhvnjiw.png'
                        alt = 'LeftNavigationPanel'
                        style = 'width: 40px; height: 40px; padding:5px; display: inline-block; '>
                    <b><i><br>M<br>a<br>i<br>n<br> <br>M<br>e<br>n<br>u<br></i></b>
                </div>    
                        <div lang="nl"  class="LeftNavigationPanelClass" id="LeftNavigationPanelMobileId" >
                         <a lang="nl"  href="index.php?Language=nl" target="_TOP" style="display: inline-block; " >
                              <img lang="nl"  src="Icons/HomeIcon.jpg" width="100" alt="Home" >
                         </a>
                         <br lang="nl"  >
                         <a lang="nl"  href="https://www.buienradar.be/weer/sainte-marie-geest/be/2787436?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Weervoorspelling </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionPanel.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Zoek in de catalogus </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtist.php?Language=nl&Selection=NewArtists&BannerNeeded=FALSE&TemplateNeeded=TRUE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe kunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtist.php?Language=nl&Selection=NewGlassArtists&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe glaskunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="CreateCatalogue.php?InputLanguage=nl&Year=2023&BannerNeeded=FALSE&TemplateNeeded=TRUE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Alle Kunstenaars </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtwork.php?ArtworkInCollection=TRUE&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Kunstwerken in collectie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="SelectionArtwork.php?NewArtwork=TRUE&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Nieuwe kunstwerken </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GardenWalk.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Tuinbezoek in Fotos </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="PracticalInformation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Om ons te bezoeken - Informatie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="Reservation.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Reserveer uw bezoek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GroupVisitPage.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Groepsbezoek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="GroupVisitBudgetPage.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Groepsbezoek kosten </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="DocumentationDownload.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Downloads </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="TicketRegistration.php?Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_BLANK" style=" font-weight:bold; text-align:center; " >Ticket Registratie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href="ContentPage.php?ContentPage=WhatToDoAfterVisit&Language=nl&TemplateNeeded=TRUE&BannerNeeded=FALSE" target="_TOP" style=" font-weight:bold; text-align:center; " >Wat te doen na uw bezoek? </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Sociale media </p>

            <div class="fb-share-button" data-href="https://www.facebook.com/SanctuaryArt" data-layout="button" data-size="large">
                <a
                    target="_blank"
                    href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.facebook.com%2FSanctuaryArt&amp;src=sdkpreparse"
                    class="fb-xfbml-parse-ignore">
                    Share on Facebook
                </a>
            </div>
        
            <div class="fb-share-button" data-href="https://www.facebook.com/SanctuaryArt" data-layout="button" data-size="large">
                <a
                    target="_blank"
                    href="https://g.page/r/CVif5W-GggzSEB0/review"
                >
                    Share your review on Google
                </a>
            </div>
                                 <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Glaskunstenaars </p>

<!-- OpenDatabase: 'START'-->
                         <a lang="nl"  href='ArtistPage.php?KeyName=Ale%20Moshenek&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ale Moshenek </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=amber%20hiscott&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Amber Hiscott </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=bjane%20cowie&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >B. Jane Cowie </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=raf%20roefflaer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Captain Bebop & B-Art  </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=charlotte%20chicot&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Charlotte-Sophie Chicot-Messenger </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=daniel%20olislaegers&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Dani&euml;l Olislaegers </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=danny%20beinsberger&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Danny Beinsberger </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=emma%20aiken&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Emma Butler-Cole Aiken </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=emma%20white&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Emma White </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=florence%20ruzicka&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Florence Ruzicka </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=gundula%20menking&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Gundula Menking </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=helen%20hancock&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Helen Hancock </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=helen%20twigge-molecey&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Helen Twigge-Molecey </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hendrike%20huijsmans&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hendrike Huijsmans </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=irene%20van%20der%20does%20de%20bye&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Irene van der Does de Bye </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jan%20falta&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jan Falta </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean-francois%20constant&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean-Fran&ccedil;ois Constant </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jessie%20lee&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jessie Lee </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=julie%20coakley&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Julie Coakley </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=kati%20kerstna&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Kati Kerstna </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=laurie%20sheridan&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Laurie Sheridan </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marc%20hadermann&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marc Hadermann </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marc%20paja&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marc-Paja Hadermann-Van Dyck </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marije%20gies&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marije Gies </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marja%20steinmetz&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marja Steinmetz  </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=paja%20van%20dyck&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Paja Van Dyck </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=sarah%20stuchfield&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Sarah Stuchfield </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=yaron%20meyer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Yaron Meyer </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=yasin-mohammed%20jamali&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Yasin Jamali </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <div lang="nl"  style="line-height:150%;" >
                              <br lang="nl"  >
                         </div>
                         <p lang="nl"  style=" font-weight:bold; text-align:center; border: 1px solid black; " >Andere kunstenaars </p>

<!-- OpenDatabase: 'START'-->
                         <a lang="nl"  href='ArtistPage.php?KeyName=abou%20sidibe&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Abou Sidib&eacute; </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=adje%20martens&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Adje Martens </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=alameezo&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Alameezo </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=anmarie%20leon&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Anmarie L&eacute;on </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ann%20geirnaerdt&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ann Geirnaerdt </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=anne%20de%20Labouret&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Anne de Labouret </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=art%20sanctuary&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Art Sanctuary </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=bettina%20silverio&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Bettina Silverio </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=brigitte%20de%20callatay&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Brigitte de Callata&yuml; </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=catherine%20millet&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Catherine Millet </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=chris%20engels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Chris Engels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christian%20delory&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christian Delory </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christien%20dutoit&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christien Dutoit </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=christoph%20goldberg&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Christoph Goldberg </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=cor%20de%20ree&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Cor de Ree </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=daniella%20rubinovitz&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Daniella Rubinovitz </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=duometis&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Duom&eacute;tis </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ellen%20rijsdorp&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ellen Rijsdorp </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=elya%20yalonetski&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Elya Yalonetski </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=eveline%20bekkering&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Eveline Bekkering </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=evelyn%20hamoir&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Evelyn Hamoir </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=guy%20deltour&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Guy Deltour </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hans%20koenen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hans Koenen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hedwig%20du%20jardin&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hedwig Du Jardin </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hella%20meyer-alber&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hella Meyer-Alber </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=heren4&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Heren4 </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=hermien%20buytendijk&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Hermien Buytendijk </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jack%20van%20iwaarden%20de%20vreede&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jack van Iwaarden de Vreede </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=janneke%20bruines&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Janneke Bruines </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean%20de%20la%20kethulle&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean de la Kethulle </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=jean-luc%20absil&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jean-Luc Absil </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=joel%20sadaune&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Jo&euml;l Sadaune </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lebuin%20dhaese&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lebu&iuml;n D'Haese </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=leen%20kessels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Leen Kessels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lei%20hannen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lei Hannen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lieuwke%20loth&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lieuwke Loth </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=loes%20knoben&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Loes Knoben </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=louis%202%20verdal&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Louis 2 Verdal </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=ludo%20giels&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Ludo Giels </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=luk%20luts&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Luk Luts </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=lut%20de%20baere&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Lut De Baere </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=mag%20vermeiren&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Mag Vermeiren </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marianne%20ouwendijk&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marianne Ouwendijk </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=marie%20thys&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Marie Thys </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=music-beer&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >MUSIC BEER FOUNDATION </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=nele%20schildermans&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Nele Schildermans </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=peter%20adams&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Peter Adams </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=philippe%20nicodeme&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Philippe Nicod&egrave;me </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=plaidsenshawls&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Plaids en Shawls </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=roland%20menten&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Roland Menten </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=roos%20mannaerts&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Roos Mannaerts </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=stanwood&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Stanwood Wind Sculptures </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=stella%20marquet&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Stella Marquet </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=steve%20hubback&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Steve Hubback </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=tim%20roosen&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Tim Roosen </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=tone%20aanderaa&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Tone Aanderaa </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=toni%20kanwa%20adikusumah&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Toni Kanwa Adikusumah </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=veronique%20kalitventzeff&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >V&eacute;ronique Kalitventzeff </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=will%20schropp&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Will Schropp </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=willy%20peeters&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Willy Peeters </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=woodstock%20chimes&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Woodstock chimes </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                         <a lang="nl"  href='ArtistPage.php?KeyName=xavier%20dumont&TemplateNeeded=1&BannerNeeded=FALSE&Language=nl' style=' color: blue; font-weight: bold; text-align: center;  ' >Xavier Dumont </a>
                         <div lang="nl"  style="line-height:50%;" >
                              <br lang="nl"  >
                         </div>
                    </div>

            </div>
        </div>
    
        <script>
        // When the user clicks on div, open the popup
        function ShowLeftNavigationPanelMobileFunction() {
          ShowNavigationPanelMobileFunction('LeftNavigationPanelMobileId');
        }
        // When the user clicks on div, open the popup
        function ShowRightNavigationPanelMobileFunction() {
          ShowNavigationPanelMobileFunction('RightNavigationPanelMobileId');
        }
        function ShowNavigationPanelMobileFunction( NavigationPanelId) {
          var popup = document.getElementById(NavigationPanelId);
          popup.classList.toggle('show');
          popup.focus();
        }
        </script>
    </td>                    <td lang="nl"  class = "InPageMenuClass" id="AnchorTopOfPage" style=" vertical-align: top;  " >
                         <p lang="nl"  class = "InPageMenuClass" id="AnchorBottomOfPage" ></p>
                    </td>
<td></td>               </tr>
          </table>
</body>
</html>