<!--
Apr 16 2025. INDEX.php in ROOT directory points to ROOT/villa/villa-root.php
             ROOT/ is (in Plesk) Home Directory/httpdocs/

CONTENTS of INDEX.php:
//////////////////////////////////////////////////////////
include $_SERVER['DOCUMENT_ROOT']."/villa/root/villa-root.php";
//////////////////////////////////////////////////////////

Apr 14 2025. Website development began in ROOT/show/. The main file is ROOT/show/Villa.php, which runs with 
             supporting files present in show/ and its subfolders (e.g. show/gallery/) using the link
             eyefarer.net/show/villa.php. On Mar 19, project files were copied to ROOT/villa/, and development
             is currently done there. The original project files in ROOT/villa/ are:

               beachbar.jpg         Bicon.png        diver.jpg        FSicon.jpg         kayaks.jpg
               Licon.png            NLFlag.jpg       Overview.jpg     pool.jpg           poolfood.jpg
               Ricon.png            snorkel.jpg      sundeck.jpg      USFlag.jpg         VillaBeach.jpg
               VillaBeach.thmb.jpg  VillaGallery.js  VillaGallery.js  VillaMap.jpg       XFicon.png
               Xicon.png
               Villa.php            villa-root.php

             Note that in April, the image files were moved to a separate folder named images/.

             The version launched by the link eyefarer.net is, from ROOT/INDEX.php, villa-root.php. This is the
             release version. To convert Villa to villa-root, it is necessary to change the javascript paths.
             This is done in two places, the php code and the external js file sourcings.

             The php code is the same in both versions, except that js file names assigned in php are prepended
             in villa-root with villa/root/. The php code changes directory to villa/root/, so the php filenames are
             the same in both versions, but the js scripts created by php in effect execute in ROOT/ for
             villa-root (launched in ROOT/) and in ROOT/villa/ for Villa (launched in ROOT/villa/).

             The external js file sourcings, also in scripts, likewise must be prepended with villa/root/ in villa-root.

             Note that prior to Apr 7, villa-root was in villa/ and used the same external js files and support
             folders. Now (Apr 14) villa-root is in villa/root/ and uses separate external js files as well
             as separate copies of the support folders.

             (There are also activity monitors used for development which are suppressed in villa-root.)

             In this (Apr 2025) version, these edits are marked below with // ROOT EDIT

             Also on Mar 19, php coded was added to automate conversion from Villa to villa-root (develop to release).
             The php variable $PUBLISHVERSION is set to 0 for Villa and to 1 for villa-root. No other changes are
             required.

             Note that although this site is being developed in a subfolder to the root in the eyefarer account,
             the plan is eventually to migrate it to its own account, and then the episodic conversions
             will not be needed.

             Also note that currently, the external js files are simply used globally. The code in those files thus
             behaves more or less as inline script in this file. This is considered bad practice, and has the
             disadvantages of a single large source code file, albeit with the advantages of separate files.

             The use on inline script is itself today unfashionable, and can create security issues. I also
             understand that inline script can't be cached. This code was originally written exclusively inline,
             and much of it subsequently migrated to external files. However, parts of the migration led to load-abort
             issues, and the inline which remains is largely there to avoid this. With a couple of exceptions [notably
             ImageLoader()], the inline code is variable declarations and assignments. Until I learn how to avoid
             the load fails with external code, my plan is to keep the inline scripts. I suspect it is the prevention
             of caching that prevents the load fails.


Apr 3 2025.  I found the website would not load on XP Chrome 49 (2016), due to the animation method of elements and
             the js async function in VillaReserve.js. To restore the older functionality (for testing purposes),
             I moved the animation code to a separate js file which is not sourced in php if the OS is legacy
             Windows. (For a while I had two separate external js files.) However, the animation fails sometimes,
             apparently because the js file is not seen. This also is probably a caching issue and hopefully can
             be fixed by moving the animation back to the original js file.

             Also note that the bind function method amd DOMRect are problematic for the same reason, but I did not
             really need those features or, as yet, the async function, so all of those have been removed.

May 15 2025. This array initialization also balks the old Chrome: Array.from( { length: 2 }, () => ({...userinfo}) );

Apr 6 2025.  The html code showed by browser inspect I assume is the DOM version run by the browser. This is in contrast
             with the html code, and script, in the source file (php or html).

             Any js script in the source file, if outside the head and body, is moved inside in the DOM. Typically, if it is
             below the body, it goes inside the body, otherwise inside the head. If it is inside the head (can't go inside style),
             or inside the body, or a child of the body, it stays there, i.e., is placed the same in the DOM as in the source.
             The same is true for php scripts in the source, except for comments. A (html) commented js script, like
             an uncommented script, is moved inside head/body, while a commented php script, if outside, is left outside.

             Note that <S> and <S> in the source code produce the same result in DOM, where <S> = 
             <script src = file></script>, for example. The DOM <S> is placed the same (if not commented out). However, the
             php version permits variables to be used for the file name, and the js version does not. A php script then can
             be used as, in effect, a compiler directive to include differing file versions subject to, for example, the
             OS or browser type or version.

             ( <S> inside html comment markers in the source appears as <S> inside comment markers in the DOM )

             My understanding is that all the php scripts are executed by the server before code is sent to the browser.
             What the browser gets is used to create the DOM for that website, and the placement of php scripts in the
             source determines where any echoed js scripts will appear in the DOM, and thus in code execution, for the website.


   THIS DOESN'T WORK (VillaLibrary gets called but page won't load)
   <script> 
      var scpt = document.createElement('script');
      scpt.src = 'VillaLibrary.js'; // variable can be used here
      document.appendChild(scpt);
   </script>

   THIS DOESN'T WORK EITHER
   <script id='libraryfile'></script>
   <script> document.getElementById('libraryfile').src = 'Villalibrary.js'; </script>

   THIS WORKS BUT DOESN'T PERMIT VARIABLE for .js
       <script src = 'VillaLibrary.js'></script>

-->

<script src = 'villa/VillaLibrary.js'></script><script src = 'villa/VillaWebsite.js'></script><script> PUBLISHVERSION = '1'; </script><script>user_agent = 'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)';</script><script>OSver = '23';</script><script>WinOS = '0';</script><script src = 'villa/VillaAnimate.js'></script>

   <script> var user_agent, OSver, WinOS; /*var winw, amsg, bmsg, cmsg, dmsg;*/ </script>
   <script> var PUBLISHVERSION; </script> <!-- used ONLY for monitors -->
   <script>
      // constructor function, bImg[] is array of these structures: (file) name, width, height & aspect ratio of image
      function ImgF(url, wid, hgt, typ = 'img') 
      {
         this.url = url;
         this.wid = wid;
         this.hgt = hgt;
         this.rto = hgt ? wid/hgt : 1;
         this.typ = typ;
         this.icn = null;
      }
      var bImg = []; // base images
      var Img = [];  // gallery images
      //var vid = [];
      var blnkImg;
   </script>

   <script>const NIm = '21'; const Ia0 = 12; const NumAtr = 8; const Ir0 = 20</script><script>bImg['0'] = new ImgF('villa/images/Cover.thmb.jpg', '728', '445');</script><script>bImg['1'] = new ImgF('villa/images/Cover.jpg', '1988', '1218');</script><script>bImg['2'] = new ImgF('villa/images/USFlag.jpg', '700', '428');</script><script>bImg['3'] = new ImgF('villa/images/NLFlag.jpg', '700', '428');</script><script>bImg['4'] = new ImgF('villa/images/Pool.jpg', '944', '228');</script><script>bImg['5'] = new ImgF('villa/images/VillaBeach.jpg', '1920', '1279');</script><script>bImg['6'] = new ImgF('villa/images/FSicon.png', '256', '256');</script><script>bImg['7'] = new ImgF('villa/images/XFicon.png', '256', '256');</script><script>bImg['8'] = new ImgF('villa/images/Licon.png', '216', '256');</script><script>bImg['9'] = new ImgF('villa/images/Ricon.png', '216', '256');</script><script>bImg['10'] = new ImgF('villa/images/Bicon.png', '256', '256');</script><script>bImg['11'] = new ImgF('villa/images/Xicon.png', '256', '256');</script><script>bImg['12'] = new ImgF('villa/images/sundeck.jpg', '1280', '824');</script><script>bImg['13'] = new ImgF('villa/images/beachbar.jpg', '1280', '872');</script><script>bImg['14'] = new ImgF('villa/images/snorkel.jpg', '768', '573');</script><script>bImg['15'] = new ImgF('villa/images/seaplay.jpg', '993', '668');</script><script>bImg['16'] = new ImgF('villa/images/poolfood.jpg', '1280', '852');</script><script>bImg['17'] = new ImgF('villa/images/ipool.jpg', '1550', '1041');</script><script>bImg['18'] = new ImgF('villa/images/shuttle.jpg', '1200', '798');</script><script>bImg['19'] = new ImgF('villa/images/tour.jpg', '1024', '626');</script><script>bImg['20'] = new ImgF('villa/images/VillaMap.jpg', '1109', '1051');</script><script>bImg[5].icn = 'villa/images/VillaBeach.thmb.jpg'</script><script>blnkImg = 'villa/images/blank.jpg';</script>
   <script>Img[0] = bImg[5];</script><script>Img['1'] = new ImgF('villa/gallery/GardenPool1.jpg', '1920', '1279');</script><script>Img['1'].icn = 'villa/gallery/thumbs/GardenPool1.thmb.jpg'</script><script>Img['2'] = new ImgF('villa/gallery/InfinityPool1.jpg', '1920', '1279');</script><script>Img['2'].icn = 'villa/gallery/thumbs/InfinityPool1.thmb.jpg'</script><script>Img['3'] = new ImgF('villa/gallery/PalmGarden1.jpg', '1920', '1279');</script><script>Img['3'].icn = 'villa/gallery/thumbs/PalmGarden1.thmb.jpg'</script><script>Img['4'] = new ImgF('villa/gallery/SunDeck1.jpg', '1920', '1280');</script><script>Img['4'].icn = 'villa/gallery/thumbs/SunDeck1.thmb.jpg'</script><script>Img['5'] = new ImgF('villa/gallery/SunDeck2.jpg', '1920', '1279');</script><script>Img['5'].icn = 'villa/gallery/thumbs/SunDeck2.thmb.jpg'</script><script>Img['6'] = new ImgF('villa/gallery/UpperDeck1.jpg', '1920', '1280');</script><script>Img['6'].icn = 'villa/gallery/thumbs/UpperDeck1.thmb.jpg'</script><script>Img['7'] = new ImgF('villa/gallery/UpperDeck2.jpg', '1920', '1279');</script><script>Img['7'].icn = 'villa/gallery/thumbs/UpperDeck2.thmb.jpg'</script><script>Img['8'] = new ImgF('villa/gallery/VillaDen1.jpg', '1920', '1279');</script><script>Img['8'].icn = 'villa/gallery/thumbs/VillaDen1.thmb.jpg'</script><script>Img['9'] = new ImgF('villa/gallery/VillaNW1.jpg', '1920', '1439');</script><script>Img['9'].icn = 'villa/gallery/thumbs/VillaNW1.thmb.jpg'</script><script>Img['10'] = new ImgF('villa/gallery/VillaNW2.jpg', '1920', '1440');</script><script>Img['10'].icn = 'villa/gallery/thumbs/VillaNW2.thmb.jpg'</script><script>Img['11'] = new ImgF('villa/gallery/VillaNW3.jpg', '1920', '1280');</script><script>Img['11'].icn = 'villa/gallery/thumbs/VillaNW3.thmb.jpg'</script><script>Img['12'] = new ImgF('villa/gallery/VillaOver1.jpg', '1920', '1439');</script><script>Img['12'].icn = 'villa/gallery/thumbs/VillaOver1.thmb.jpg'</script><script>Img['13'] = new ImgF('villa/gallery/VillaPatio1.jpg', '1920', '1280');</script><script>Img['13'].icn = 'villa/gallery/thumbs/VillaPatio1.thmb.jpg'</script><script>Img['14'] = new ImgF('villa/gallery/VillaPool1.jpg', '1920', '1280');</script><script>Img['14'].icn = 'villa/gallery/thumbs/VillaPool1.thmb.jpg'</script><script>Img['15'] = new ImgF('villa/gallery/VillaPool2.jpg', '1920', '1279');</script><script>Img['15'].icn = 'villa/gallery/thumbs/VillaPool2.thmb.jpg'</script><script>Img['16'] = new ImgF('villa/gallery/VillaSea1.jpg', '1920', '1440');</script><script>Img['16'].icn = 'villa/gallery/thumbs/VillaSea1.thmb.jpg'</script><script>Img['17'] = new ImgF('villa/gallery/VillaSea3.jpg', '1920', '1440');</script><script>Img['17'].icn = 'villa/gallery/thumbs/VillaSea3.thmb.jpg'</script><script>Img['18'] = new ImgF('villa/gallery/WitchyWoman.mp4', '1080', '1920', 'vid');</script><script>Img['18'].icn = 'villa/gallery/thumbs/WitchyWoman.thmb.jpg'</script><script>Img['19'] = new ImgF('villa/gallery/TimeLapse.mov', '1080', '607.5', 'vid');</script><script>Img['19'].icn = 'villa/gallery/thumbs/TimeLapse.thmb.jpg'</script>


<!DOCTYPE html>
<html dir="ltr" lang="en">
   <head>
      <meta charset="UTF-8"/>
	  <meta content="True" name="HandheldFriendly"/>

      <!-- in meta, content = "user-scalable=0" diables auto-zoom of input elements on iphone 
                              "inital-scale=1.0" causes x-scrollbar (and wide view) in landscape -->

<!--  	  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes" />
	  <meta name="viewport" content="width=device-width"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/> -->
    <meta name="viewport" content="width=device-width, user-scalable=0"/>

	  <title>VILLA4THEDAY</title>

	  <style type="text/css">
         /* hiding overflow-x here prevents hiding overflow-y in the body, so I am hiding overflow-x there*/
         * { margin: 0; padding: 0; overscroll-behavior:none; }

	     .monitor /*temporary diagnostics*/
	     {
	     z-index: 16;
	     position: fixed;    
         font-family: "Arial", Arial;
         font-size: 18px;
         font-weight: 200;
         color: #FFFFFF;  
         }

         .banner
         {
         position: fixed;
         top: 0px;
         left: 0px;
         animation: 4s fadeIn;
         user-select: none;
         border-top-color:#001C45;
         border-bottom-color:#001C45;
         border-top-style:solid;
         border-bottom-style:solid;
         text-align:    center;
         border-left:none;
         border-right:none;
         }


         /*This dropdown menu manually built (W3schools); see also "select" element*/      
         .menu { position: relative; display: inline-block; }
         .menu-card
         {       
           /*z-index: 12;*/
           z-index: 14;

           cursor: pointer;             
           display: none;
           position: fixed;
           background-color: #AADDFF;
           min-width: 100px;
           box-shadow: 0px 32px 48px 0px rgba(0,0,0,0.6);
          font-family: "Trebuchet MS", "Helvetica", Arial;
         }
         .menu-card a /* for html tag <a> elements within "menu-card" classed element, mnuc ( <div> ) */
         {                      
           color: #002244;
           padding: 12px 12px;
           text-decoration: none;
           display: block;
         }
         .menu-card a:hover {background-color: #99BBDD;}
         .menu:hover .menu-card { display: block; }
         .menu:hover
         {  
            /*z-index:12;*/
            z-index:14;

            cursor:pointer;
            position:fixed;
            background-color: rgba(0, 0, 0, 0.5);
         } 
         /* a properties can be assigned to childs mnuce & mnucd directly, but css methods are convenient, e.g., hover */  

      
         @keyframes fadeIn  {  0% { opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } }
         @keyframes fadeInL
         {  
              0% { transform: translateX(var('--LeftFade')); opacity: 0; }
            100% { transform: translateX(      0          ); opacity: 1; }
         }
         /*@keyframes moveUp2 {  0% { transform: translateY(0%); } 100% { transform: translateY(-50px); } }
           @keyframes sizeUp {  0% { width : 100%; height : 100%; } 100% { width : 120%; height : 120%; } }*/      
      
         body
         {
            background-color: rgb(80, 160, 200);
         }
/*body { font-size: 16px; }*/
/*input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea { font-size: 16px; }             *** this will disable iphone auto-zoom,
input[type="text"] { font-size: 16px; }   *** but this one didn't work...
input { font-size: 16px; }
text { font-size: 16px; }*/
/*input, select { font-size: 100%; }*/

         :root
         {
            --LeftFade: 40px;
            --vclr0: #77FFDD;
            --vclr1: #77FFEE;
            --vclr2: #66DDFF;
            --vclr3: #66FFEE;
            --vclr4: #88DDFF;
         }




 
	  </style>

       <!--  <base href = "https://www.eyefarer.net/show/" /> 
       This causes tainted canvas security error on toDataURL after drawImage
       even when the file (URL) is on the server where the website is hosted.-->

   </head>


   <body id="BodyID" style="overflow-x: hidden;">
   <main id="MainBody"></main>
   </body>

SCRIPT BEGINS

   <script>

      var timer0 = new Date();
      var counter = 0;

      var OutPost = 1; // < 0 for diagnostics on PUBLISHVERSION
      var poster;

      if (PUBLISHVERSION != 0 && OutPost > 0) OutPost = 0;

      if (OutPost)
      {
         let pst, xps,
             wid = window.innerWidth,
             plf = wid * 0.1,
             pwd = wid * 0.8, 
             pht = window.innerHeight * 0.05,
             fht = pht * 0.5, lht = pht * 0.8;
         poster = document.createElement('div');
         document.body.appendChild(poster);
         poster.style.zIndex = 20;
         poster.style.backgroundColor = '#00000030';
         poster.style.position = 'fixed';
         poster.style.left   = plf+'px';
         poster.style.top    = 0;
         poster.style.width  = pwd+'px';
         poster.style.height = pht+'px';
         poster.style.fontFamily = 'Arial';
         poster.style.fontSize = fht+'px';
         poster.style.textAlign = 'center';
         poster.style.lineHeight = lht+'px';
         for (let n = 0; n < 4; n++) // last post field ends at 90%
         {  xps = n * 80/3;
            pst = document.createElement('div');
            poster.appendChild(pst);
            pst.style.position = 'absolute';
            pst.style.left = xps+'%';
            pst.style.top = '10%';
            pst.style.width = '20%';
            pst.style.height = '80%';
            pst.style.backgroundColor = '#224466B0';
            pst.style.color = '#DDDDDD';
            pst.innerText = n;
            pst.onmousedown = function () { postout(n); };
         }
         try          { }
         catch(error) { }
         finally      { }
      }

      var ScrollY = null;
      var RestoreY = 0;
      var nPage, pmidY;

      const calOffset = (new Date(2025, 9, 1) - new Date())/86400000; // month 0-based
    //const calOffset = 160; // days from current to begin reservations
      const calPeriod = 365; // period of days for reservations
      var calMonthMin, calYearMin, // 1st month on current calendar
          calMonthMax, calYearMax;
      var rsvSlots = [];
      var rsvMinDate = { year: 0, month: 0, day: 0 }; // 1st available rsv
      var rsvMaxDate = { year: 0, month: 0, day: 0 }; // last available rsv
      var calDefDate = { year: 0, month: 0, day: 0 }; // default rsv date
      var calSelDate = { year: 0, month: 0, day: 0 }; // ---member of rsvInfo
      var rsvInfo    = { date: calSelDate, numG: 1, numS: 0, numT: 0, opnD: null } // temp member of StateVars, lost
      var StateVars  = { time: null, ip: null, scrY: [0, 0], lang: 0, gndx: 0, rsvI: rsvInfo }; // on JSON.parse

      // May 2025, six pages (chart used only iOS rotate-reloads)
      // NOTE: it is crucial that the structure of this object match inputSiteChart, which is HARD CODED***
      var SiteChart = { 
                        time:  [ null, null ],
                        ymin:  [    0, null ],
                        ymax:  [    0, null ],
                        pages: [ 
                                  [ { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 },
                                    { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 } ],
                                  [ { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 },
                                    { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 } ]
                               ]
                      };
      var userinfo = { ip: null, post: null, err: null };
      var uInfo = [{ ip: null, post: null, err: null },{ ip: null, post: null, err: null }];
      //var uInfo = Array.from( { length: 2 }, () => ({...userinfo}) ); // array of identical but distinct (...) objects

      const WaitRestore = 1;
      var icount = null;

      const vbnrb = '#00608E';
      const vbnrf = '#CCE0F0';
      const vskyb = '#88DDFF';
      const vsndl = '#FFFBEE';
      const vsand = '#EFEADD';
      const vsndd = '#DEDBCC';
      const vbrwn = '#4F4011';
      const vdark = '#0F0804';
      const vseag = '#55BBAA';
      const vskyd = '#77DDFF';
      const vsead = '#44AA99';
      const vblud = '#004466';
      const rgba0 = 'rgba(0,0,0,0)';

      var fontMain = [ 'Trebuchet MS',    'Helvetica',     'Arial'   ];
      var fontText = [ 'Arial',           'Tahoma',        'Verdana' ];
      var fontCurs = [ 'Brush Script MT', 'Comic Sans MS', 'Arial'   ];
      var fontA = fontMain[0];
      var fontB = fontText[0];
      var fontC = fontCurs[0];
      var fstyA = null; // my code for don't use
      var fstyB = null;
      var fstyC = null;

      var TextLang = 0;
      const LoadGallery = 1; // retire (always 1)

      var GalMode = 0;
      var BookPage = 0;

      const XPOS = 'data-xpos'; // used to anchor element xpos left or right
      const LPOS = 'xpos-left';
      const RPOS = 'xpos-right';

      const $bDay = 150, $bTrn = 40, $bTou = 40; // base prices (USD) for Day, shuttle service, and island tour
      var $Day, $Trn, $Tou, $Tot; // prices that vary with conditions
      var MaxGsts = 12;

      const TX =             // to add to this array, add string pairs and assign Txt[].id to an element
      [
      ["Villa 4 The Day",                                          // 0
       "Villa Voor De Dag"],                                       
      ["Spend the day at our luxurious ocean-front Villa...",      // 1
       "Breng de dag door in onze luxe Villa..."],
      ["book now",                                                 // 2
       "boek nu"],
      ["YOUR OWN BEACH CLUB...",                                   // 3
       "JE EIGEN STRANDCLUB..."],
      ["Enjoy our secluded beach, infinity pool, and exotic Palm Garden.",
       "Geniet van ons afgelegen strand, overloopzwembad, en exotische palmentuin."],
      [$bDay+" USD per guest for the day 9am - 5pm, includes unlimited access to the villa grounds, the pool and the beach," +
       " plus lunch, snacks, beverages, and other amenities. Limited occupancy.",
       $bDay+" USD per gast voor de dag 9 - 17 uur, inclusief onbeperkte toegang tot het terrein van de villa, het zwembad," + 
       " en het strand, plus lunch, snacks, drankjes en andere voorzieningen. Beperkte bezetting."],
      [$bTrn+" USD Shuttle service, round trip airport & cruise ship docks (per party).",
       $bTrn+" USD Ophalen en afzetten op de luchthaven en cruiseschipdokken (per partij)."],
      [$bTou+" USD Southern island tour (per guest).",             // 7
       $bTou+" USD zuidelijke eilandtour (per gast)."],
      ["Experience seaside living at its finest.",                 // 8
       "Ervaar het leven aan zee op zijn best."],
      ["Gallery",                                                  // 9
       "Galerij"],
      ["Attractions",                                              // 10
       "Activiteiten"], // activities
      ["Sunbathing",                                               // 11 = TA0
       "Zonnebaden" ],
      ["Relaxing",                                                 // 12
       "Ontspanning" ],
      ["Snorkeling",                                               // 13 
       "Snorkelen" ],
      ["Sea Play",                                                 // 14
       "Zee Spelen" ],
      ["Dining",                                                   // 15
       "Dineren" ],
      ["Swimming",                                                 // 16
       "Zwemmen" ],
      ["Shuttle Service",                                          // 17
       "Pendeldienst"  ],
      ["Island Tour",                                              // 18 
       "Eilandtour"  ],
      ["Reservations",                                             // 17 = TR0
       "Reserveringen" ],
      ["Great Location",                                           // 18  (1)
       "Geweldige Locatie" ],
      ["Be Our Guest",                                             // 19  (2)
       "Wees Onze Gast" ],
      ["Choose a Date",                                            // 20  (3)
       "Kies een Datum" ],
      ["Number of Guests",                                         // 21  (4)
       "Aantal Gasten" ],
      ["Guest Options",                                            // 22  (5)
       "Gast Opties" ],
      ["Guest Information",                                        // 23  (6)
       "Gast Informatie" ],
      ["Payment",                                                  // 24  (7)
       "Betaling" ],
      ["VISA",                                                     // 25  (8)
       "VISA" ],
      ["Price",                                                    // 26  (9)
       "Prijs" ],
      ["USD 0",                                                    // 27  (10)
       "USD 0" ],
      ["back to browse",                                           // 28  (11)
       "terug om te bladeren" ],
      ["Home",                                                     // 29 = TF0
       "Thuis" ],
      ["Gallery",                                                  // 33
       "Galerij" ],
      ["Attractions",                                              // 34
       "Activiteiten" ],
      ["Reservations",                                             // 35
       "Reserveringen" ],
      ["Nex-Ta-Sea\nEEG Boulevard 32\nKralendijk, Bonaire\n+1 256 759 7118",
       "Nex-Ta-Sea\nEEG Boulevard 32\nKralendijk, Bonaire\n+1 256 759 7118" ],
      ["Contact Us",
       "Neem Contact Met Ons Op" ]
      ];

      const TA0 = 11;
      const TR0 = 19;
      const TF0 = 31;

      var rsvDate = [ "", "" ], 
          rsvOinp = [ "None selected", "Geen geselecteerdd" ], rsvOpts = [ rsvOinp[0], rsvOinp[1] ],
          rsvNinp = [ "Your name...",  "Jouw naam"          ], rsvName = [ rsvNinp[0], rsvNinp[1] ];

      // Dutch DD M... YYYY, e.g., 12 mrt. 2019
      // month names are not capitalized in dutch, but probably should capitalize these because they are used in a Title
      const Month = [ ["January","januari"], ["February","februari"], ["March",    "maart"    ],
                      ["April",  "april"  ], ["May",     "mei"     ], ["June",     "juni"     ], 
                      ["July",   "juli"   ], ["August",  "augustus"], ["September","september"],
                      ["October","oktober"], ["November","november"], ["December", "december" ] ];

      const MonAbr = [ ["Jan", "jan." ], ["Feb", "febr."], ["Mar", "mrt."], ["Apr", "apr."], ["May", "mei" ], ["Jun", "juni"], 
                       ["Jul", "juli" ], ["Aug", "aug." ], ["Sep", "sep."], ["Oct", "okt."], ["Nov", "nov."], ["Dec", "dec."] ];
      const DayOne2025 = 20089; // 1-Jan-2025 measured from 1-Jan-1970, used by Date()

      //var calDefDate = { year : 0, month : 0, day : 0 };
      //var calSelDate = { year : 0, month : 0, day : 0 };

      var Txt = [];   
      function Textor(n) // constructor
      {
         this.id = "id" + quads(n);
         this.tx = TX[n];
         this.on = 1;
      }
      for (let n = 0; n < TX.length; n++) Txt[n] = new Textor(n);

      // a scheme for retrieving image dimensions from the browser (html). Getting them from the server is trivial (php).
      //var imgPoll, imgDT = 10, imgPmax = 50, imgCnt = 0; // check every 10 ms for 50 x 10 = 500 ms to see if can get dims


      const ATR = 'atr'; //const AtrAutoClose = 1; // Locked in 15 May 2025
      const RSV = 'rsv'; //var AtrAutoText = 0;    // Retired 15 May 2025


      var iOSresize = 0; // counter pinch zooming, nut used

      var cvrimg, fbrpos;
      var galStpL = [ 0, 0 ];
      var galStpR = [ 0, 0 ];
      var galStpY = [ 0, 0 ];
      var galStpSz = [{ cx : 0, cy : 0 }, { cx : 0, cy :  0 }]
      var galxL, galxC, galxR;

      var trow = [];
      var num;
      var Vid;   // global ImgF for video (thumbnail) loading
      var Indx = 0; // global index for current gallery image/video
      var pfname = [];
      var loadImg; // onload function used to assign destEle.src to variable objects
      var destEle; // pointer to target object whose src is assigned
      var bkImg;   // special case when img is not src but style.backgroundImg
      var loadVid; // for loading first frame of video
      var targVid; //
      var loadTnl; // for video thumbnails
      var targTnl; // video thumbnails
      var videoTask = 0; // flag for video (& video thumbnail) loading
      var imgndx = 0;

      var MBL, ADR, iOS, MAC;
      var curWidth, curHeight, screenWidth, screenHeight, windowWidth, windowHeight,
          curPixel, windowPixel, curAngle, screenAngle, prvWidth, prvHeight, scrollWidth, pagWidth, pagHwid;
      var WideScreen = true;
      var WSC;
      var AndroidWsc = 1; // widescreen in scroll mode on Android (always iOS)
      var tchPageX, tchPageY;
      var wstr, wchg = 0;
      var resetcount = 0;
      var barH, fbrH, pageCX, pageCY = 0, fsz0, fsz1, fsz2, fsz3, barY0 = 0, bkbYF, bkbdy;
      var bor0, bor1, bor2;
      var nimg, nwidth, nheight;
      var pdsb;
      var atrshd, rsvshd;

      var calrect = { x : 0, y : 0, width : 1, height : 1 },
          optrect = { x : 0, y : 0, width : 1, height : 1 },
          gstrect = { x : 0, y : 0, width : 1, height : 1 };

      var optDtlHgt;

     
      var galx = [], galy = [], galCX = [], galCY = [], galRto = [];
      var vrect = { x:0, y:0, w:1, h:1 };

      function jsrect(x, y, w, h) { this.x = x; this.y = y; this.w = w; this.h = h; }
      var atrrc = []; // [ new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect ];
      var atrRC = []; // [ new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect, new jsrect ];

      for (let n = 0; n < NumAtr; n++) { atrrc[n] = new jsrect; atrRC[n] = new jsrect; }

      const fsspan = 0.7; // full-screen btn for gallery (fraction of bar)
      var fsY, fsCY, tdx;
      var vidCX, vidCY;
      var vdn = [];


      // DOM elements (nodes)
      var mbv;
      var cvr;
      var mnu,
          mnub, mnuc,
                mnuce, mnucd;
      var bnr;
      var fbr;
      var bkb;
      var inv,  // parent
          invt, // child
          invp0, invp1, invp2, invp3, invp4, invp5; // siblings (grandchilds)
      var gal, 
          galB, galX, galL, galR, gali, galv, galb, 
                                              galn0, galtx, galfr, galfs, galtn = [];
      var atr,
          atrc, atrb, atri  = [], atrm,       // NumAtr
                      atric = [], atrit = []; // NumAtr;
      var rsv,
          maph, mapb, mapf, rsvh, rsvf,
          calb,
          calbh, calbd, calbD, calbC, calbn, calbN, calbo, calbO, calbQ,
                                                                  calbQi = [], calbQI = [],
                 calbi, calbI, calbU,
                               calbUh, calbUi = [], calbUI = [],
                 calbp, calbP, calbF,
                               calbFt, calbF$;
      var ftr,
          ftrH, ftrG, ftrA, ftrR, ftrI, ftrC; // home, gallery, attractions, reservations, information, contact
      var skr; // skirt used at foot on iOS to mask area revealed by address bar
      var xmg;
      var gptr;

      var fbrwid;
      var btnDim;
      var AtrShd;

      var ipdata = [], iperror = [];

      var cvrpos, cvrhgt, // SiteChart values (calculated in setupPage)
          galpos, galhgt,
          invpos, invhgt,
          atrpos, atrhgt,
          rsvpos, rsvhgt,
          ftrpos, ftrhgt;

      var calx1, calx2, caly = [], calcx, calcy, rsvWidth, rsvhCY, rsvbor; //, rsvHeight
      var atrIanimation, atrCanimation, atrTanimation;
      var curmousex = 0, curmousey = 0;
      var atrwid, atrZtop = NumAtr-1, atrShow = null, atrPend = null; // last child is on top

      var bookScrollY = 0;

      var vcanvas;
      var vcontext;
      var fFrame;
      var loadTimer;

      var calMonth = 0, calYear = 2025;
      var sCell  = 0;    // pointer (obj ref) to cell with selected date...
      var sMonth = false // true when current month contains selected date
      var Lbtn, Rbtn, tMon, dlgX, tcal, tbdy; // These do not follow generational naming convention************
      var tcel = [];
      var tbkC, selC = '#FFFF00', tbkX = vsand;
      var tbkM = '#B4FFE6', selM = '#FF0000', tbkB = '#FFFFFF', selB = '#000000';
      var dlgXdim;
      var atrTxt = [
                      [ 
                         ["Sun or shade chaise lounges.",                             "dutch"],
                         ["Plenty of comfortable seating, sun deck, patio, veranda, palm garden, courtyard, and pool.", "dutch" ]
                      ],
                      [
                         ["Refreshing beverages:", "dutch"], ["Ice water and sparkling water,", "dutch"],
                         ["Juice and sodas,",      "dutch"], ["Beer, wine, and rum punch.",     "dutch"]
                      ],
                      [
                         ["Bring your mask and fins and explore the offshore waters, famous for sea "+
                          "turtles and the many coral reefs and gorgeous tropical fish.", "dutch"]
                      ],
                      [ 
                         ["Easy beach access for wading, swimming, and snorkeling. Or bring your favorite floatie.",
                         "dutch"]
                      ],
                      [
                         [ "Coffee & pastries, afternoon snacks.", "dutch"], ["Lunch 11am - 2pm.", "dutch"],
                         ["Menu includes made-to-order paninis, salads, and burgers.", "dutch"]
                      ],
                      [ 
                         ["Relax in our large swimming pool with its inifinity edge into the blue Caribbean. "+
                          "Convenient showers and changing rooms.", "dutch"]
                      ],
                      [ 
                         ["Hourly shuttles for the airport, cruise ship docks, and area hotels. "+
                          "Plus storage for your luggage, including lockers for small items.", "dutch"]
                      ],
                      [ 
                         ["Tour the southern loop around the island. See the salt pyramids, kite surfers, "+
                          "and thousands of flamingos.",
                         "dutch"]
                      ]
                   ]; // NumAtr
      var atrln = { x: 0, y: 0, h: 0 };
      var atrcy = []; // caption positions

      var CalTitleTxt = ['', ''];
      const InfoDlgElems = []; // obj refs for rsv child dialogs (caledar = 0, options = 1, information = 2)
      var RsvDlgs;
      var InfoDlgElem = null; // dialog element
      var InfoDlgOrig = null; // originating element for dialog
      var GstFormTxt = [
                   ['Villa 4 The Day Guest Information', 'Villa Voor De Dag Gast Informatie'],
                   ['Name', 'Naam'],
                   ['Email', 'E-mail'],
                   ['Phone', 'Telefoon'], 
                   ['Contact Preference', 'Contactvoorkeur'],
                   ['Special instructions or requests', 'Speciale instructies of verzoeken']
                 ];
      var OptFormTxt = [
                   ['Guests',          'Gasten'       ],
                   ['Shuttle Service', 'Pendeldienst' ],
                   ['Island Tour',     'Eilandtour'   ],
                   ['Details', 'Details'],
                   [`Hourly shuttle service ${$bTrn} USD for up to 4 guests*, at the airport, cruise ship docks or hotels.`, 
                    `Pendeldienst per uur voor ${$bTrn} USD voor maximaal 4 gasten op de luchthaven, cruiseschipkades of hotels.`],
                   [`Road tour of the southern island, flamingos and beaches, ${$bTou} USD per guest, trip takes about an hour.`, 
                    `Roadtour over het zuidelijke eiland, flamingo\'s en stranden, ${$bTou} USD per gast, de rit duurt ongeveer een uur.`],
                   ['*For larger parties, contact us.', 
                    '*Voor grotere groepen kunt u contact met ons opnemen.']
                 ]; //`text ${var} text` = 'text' + var + 'text', hence `${var}` = var

      //const zoomEvent = new Event('zoom'); //https://gist.github.com/souporserious/b44ea5d04c38c2e7ff32cd1912a17cd0

      //var pgBtnL, pgBtnR;
      var pgRc = { x: 0, y:0, w:1, h:1 };
      var pinchTouch = 0;


      siteLoadFn();
      windowMouse();
      getUserIP();
      initSite();
      screenChanges();
      buildDOM();
      setupElemProps();
      scrollMonitor();                             
                             // direct assignment can result in the image painting down the page, but
      cvr.src = bImg[0].url; // addEventListener results in seemingly unneccessay delays in some browsers...


      setupLoaders();

/*const hiddenElement = document.createElement('div');
//hiddenElement.style.height = '0';
//hiddenElement.style.overflow = 'hidden';
document.body.appendChild(hiddenElement);
setElemPlace(hiddenElement, 2, 0, 100, 200, 100);*/
  /*  

function fixScrollUpdateSafariIOs() {
    const isIosSafari = navigator.userAgent.match(/(iPod|iPhone|iPad)/) && navigator.userAgent.match(/AppleWebKit/);
    // Check if it's an iOS device and Safari
    const isMobileSafari = isIosSafari && window.innerWidth < 768;
    
      if (MBL) {  // if (isMobileSafari)
        (function () {
            // Create a hidden log div
            const logDiv = document.createElement('div');
            logDiv.style.height = '0px'; // Set the height to 0 pixels
            logDiv.style.overflow = 'hidden'; // Hide the content
            document.body.appendChild(logDiv);

            // Function to update the log with the scroll position
            function updateLog() {
                logDiv.innerHTML = window.scrollY.toFixed(0);
            }

            // Add listeners for scroll and touch events
            window.addEventListener('scroll', updateLog, { passive: true, capture: true });
            window.addEventListener('touchstart', updateLog, { passive: true, capture: true });
            window.addEventListener('touchmove', updateLog, { passive: true, capture: true });
            window.addEventListener('touchend', updateLog, { passive: true, capture: true });
        })();
    }
}*/
      setupPage();

      imgndx = 1;
      ImageLoader();
      if (videoTask) { videoTask = 0; VideoLoader(); } // happens only once (every reload)

      // 12 Apr 2025, this function apparently can cause load-aborts when placed in an external file...
      // element src for bImg[0,2,3,***5,6,7] loaded elsewhere (cover.thmb, menu, galleryIndx, galleryFn)
                             // The src (ImgF) for each img element is assigned sequentially in this procedure.
      function ImageLoader() // Assigning loadImg.src begins loading. On load, the EventListener sets destEle.src
      {  let n;              // to the loaded src, and then calls this function for the next element. It is called
         switch(imgndx)      // again as long as loadImg.src is assigned here, and the cycle ends on explicit "return".
         {
            case  1: destEle = cvr;   loadImg.src = bImg[1].url; break; // a few cases have followup actions in the succeding case...
            case  2:                  cvr.style.display = 'block';      // followup to 1: this needs to display as early as possible
                     destEle = mnub;  loadImg.src = bImg[2].url; break; // flags used in menu
            case  3: destEle = xmg;   loadImg.src = bImg[3].url; break; // xmg is placeholder (mnub uses bImg[2] and [3])
            case  4: destEle = bkImg; loadImg.src = bImg[4].url; break; // bkgnd image for book now btn (bkb)
            case  5:                  bkb.style.backgroundImage = 'url(' + bkImg.src + ')'; // followup for case 4
                     destEle = gali;  loadImg.src =  Img[0].url; break; // Img[0] points to bImg[5]
            case  6: destEle = galfs; loadImg.src = bImg[6].url; break;
            case  7: destEle = xmg;   loadImg.src = bImg[7].url; break; // galfs also
            case  8: destEle = galL;  loadImg.src = bImg[8].url; break;
            case  9: destEle = galR;  loadImg.src = bImg[9].url; break;
            case 10: destEle = galB;  loadImg.src = bImg[10].url; break;
            case 11: destEle = galX;  loadImg.src = bImg[11].url; break; // Ia0 - 1
            case Ia0+NumAtr: destEle = mapb.children[0]; loadImg.src = bImg[Ir0].url; break;
            default: 
            n = imgndx - Ia0;
            if (n < NumAtr) { destEle = atri[n].children[0]; loadImg.src = bImg[imgndx].url; break; }
            n = imgndx - NIm;
            while (n < Img.length) { if (Img[n].icn != null ) { break; } n++; imgndx++;    } // skip any videos w/o icons
            //while (n < Img.length) { if (Img[n].typ != 'vid') { break; } n++; imgndx++;    } // skip any videos
            if    (n < Img.length) { destEle = galtn[n]; loadImg.src = Img[n].icn; break;  } // gallery thumbnails
            if (!LoadGallery) return;
            n++; imgndx++; n -= Img.length;                                               // Img[0].url already loaded above...
            while (n < Img.length) { if (Img[n].typ != 'vid') { break; } n++; imgndx++; } // skip videos, load as needed
            if    (n < Img.length) { destEle = xmg; loadImg.src = Img[n].url; break;    } // xmg = cached in browser for later use in gali *?*
            else  { /*if (StateVars.time != null) galleryIndx(Indx);*/ return; }
         }
         imgndx++; // this timeout seems to ensure the images get loaded, perhaps a load event is not firing...
         loadTimer = setTimeout(cycleLoader, 1000, 1); // set timeout for load (canceled on load event)
      }

/*
         //if (MBL && iOS) setTimeout(setupPage, 5000);
var scrollID, scrollpos = 0, scrolldelta = window.innerHeight / 4;
if (iOS) scrollID = setInterval(function () { 
                    scrollpos += scrolldelta;
                    scrollTo( { top: scrollpos, left: 0, behavior: 'smooth'} );
                    if (scrollpos > window.outerHeight) scrolldelta = -scrolldelta;
                    if (scrollpos < -scrolldelta) clearInterval(scrollID);
                    }, 500); 
*/

</script>




</html>