<!--
Nov 20 2025. INDEX.php in ROOT directory of server account consists of a single include statement:
             /////////////////////////////////////////////////////////////////////
             include $_SERVER['DOCUMENT_ROOT']."/villa/villa-root.YYYY-MM-DD.php";
             /////////////////////////////////////////////////////////////////////

             Currently the browser-side source codes are (~270 KB)
             Villa.php
             VillaWebsite.js
             VillaLibrary.js
             VillaMember.js

             INDEX.php is the PUBLISH version of the project, and a second version is maintained for
             development. The develop version is in a separate folder villa/stage/ and has the same js
             file names, minus the datestamp, but the php file is named Villa.php, and differs in that
             (1) the variable $PUBLISHVERSION below is 0 in Villa.php and 1 in vill-root.php, and
             (2) the variable $VTAG is empty '' in Villa.php and contains the datestamp in villa-root.
             To publish the current stage version, copy the 4 source codes to the villa directory,
             rename them a.b -> a.YYYY-MM-DD.b, edit Villa.php as in (1) and (2), and change the
             datestamp in INDEX.php.

             Both versions rely on the image folders,   villa/images/, which contains base images for the
             site and is critical to its operation, and villa/gallery/, which contains gallery images
             and thumbnails.

             base images about 2.2 MB (Nov 2025)
             gallery images about 5 MB, plus ~55 MB video loaded on demand

             The url for the publish version is villa4theday.com, and
             the url for the delveop version is villa4theday.com/villa-stage.php

             The villa-stage.php file is:
             //////////////////////////////////////////////////////////
             include $_SERVER['DOCUMENT_ROOT']."/villa/stage/Villa.php";
             //////////////////////////////////////////////////////////

             Because the two versions execute in different locations (ROOT and ROOT/villa/stage), and
             because the source codes are also in different locations (ROOT/villa and ROOT/villa/stage),
             yet share the same image folders (in villa/), the two versions used different paths. This
             is set up in the php codes below. Generally, directory changes are made on the server for
             php access, and explicit paths are prepended for the js codes.

             There are also activity monitors used for development which are usually suppressed in 
             the publish version. The display of the monitors is controlled by the variable OutPost.
             Zero is no display, 1 is display in development only, and -1 is display in both versions.

             Note that this project is being developed in the eyefarer.net account, but that the intent is
             eventually to migrate it to its own account. The double-version structure with its episodic
             publications, if maintained, will then need to be adapted to the new paths.

             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 of 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.

             The modification of the project to accommodate cell phones began in April 2025. In the original
             design, developed on laptops, the gallery and the reservation page had an option to suspend
             scrolling and effectively present a single page. This has proven problematic in widescreen
             (landscape) mode of the phones, when they are rotated sideways (screen orientation = 90 deg).
             With Android OS, I am forcing full-screen mode for widescreen, but this is ineffective on iOS
             (Safari), for which the address bar is both uncontrollable and undetectable. Although both
             single page options are avaialble in either screen mode, currently, only the gallery is
             preserved on rotation. The reservation page--and any open dialogs--will close on rotation,
             in part because I am deliberately limiting the time it can be open in any case (without user
             activity) in order to help keep browser calendars in sync with the server.

             iOS can also adjust screen resolution in a progressive pattern on rotation between the two 
             orientations. This is stabilized now so that it only changes once, I think through careful
             control of content width. I had been reloading the page on iOS screen rotation, but that
             has been discontinued.

             (I should mention that I early chose to control the size and placement of site elements myself,
             using absolute positioning and screen resolution monitoring, rather than using relative
             positioning and default arrangements.)

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. However, the animation would fail sometimes, apparently
             because the js file was not seen. This also may be a caching issue and in any case seems to
             have been fixed by moving the animation back to the original js file. Thus, the website will
             not run on older systems now.

             (Also note that the bind function method amd DOMRect are problematic for the same reason, but I
             did not need those features or, as yet, the async function, so all of those were removed.)

May 15 2025. This array initialization also balks the old Chrome: Array.from( { length: 2 }, () => ({...userinfo}) );

For further details, see earlier versions of this file, cataloged in the folder versionlog/

-->


<script src = 'villa/VillaLibrary.2025-11-22.js'></script><script src = 'villa/VillaWebsite.2025-11-22.js'></script><script src = 'villa/VillaMembers.2025-11-22.js'></script><script> console.log('PUBLISHVERSION'); 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> var user_agent, OSver, WinOS; </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 IMGO(irl, wid, hgt, vrl = null) 
      {
         this.irl = irl;  // image resource locator (file)
         this.vrl = vrl;  // video resource locator (file)
         this.trl = null; // irl for thumbnail image
         this.eli = null; // image element to be sourced from irl
         this.elv = null; // video element to be sourced from vrl, and with poster src = irl
         this.elt = null; // image element to be sourced from trl
         this.wid = wid;
         this.hgt = hgt;
         this.rto = hgt ? wid/hgt : 1;
      }
      var bImg = []; // base images
      var Img = [];  // gallery images
      var blnkImg;
      var bMap = [];
      //JS constructor IMGO must be delclared above this php because it writes
      //in-line scripts that use the constructor to the html.
      //JS variables used in the php: bImg[], blnkImg, Img[].
      //Variables defined with global scope, like these, can in practice be accessed 
      //in the script even above where they are defined, because the var declarations
      //are processed before any code is executed (hoisting). However, variables
      //defined in one script are visible to another only if the script where they
      //are defined is executed first, in practice meaning higher on the page. 
      var regIP = [];
   </script>
   

   <script>const NIm = '29'; 
                 const Ig0 = '8'; 
                 const Ia0 = 19; 
                 const Ir0 = 27; 
                 const NumAtr = Ir0 - Ia0;</script><script>bImg['0'] = new IMGO('villa/images/Cover.jpg', '1024', '627');</script><script>bImg['1'] = new IMGO('villa/images/Coverios.jpg', '860', '813');</script><script>bImg['2'] = new IMGO('villa/images/VillaText.png', '512', '179');</script><script>bImg['3'] = new IMGO('villa/images/MingoChill.jpg', '912', '571');</script><script>bImg['4'] = new IMGO('villa/images/hmenu.png', '350', '214');</script><script>bImg['5'] = new IMGO('villa/images/USFlag.jpg', '320', '195');</script><script>bImg['6'] = new IMGO('villa/images/NLFlag.jpg', '320', '195');</script><script>bImg['7'] = new IMGO('villa/images/pool.jpg', '320', '77');</script><script>bImg['8'] = new IMGO('villa/images/Villa4TheDay.jpg', '1280', '720');</script><script>bImg['9'] = new IMGO('villa/images/Licon.png', '140', '166');</script><script>bImg['10'] = new IMGO('villa/images/Ricon.png', '140', '166');</script><script>bImg['11'] = new IMGO('villa/images/FSicon.png', '166', '166');</script><script>bImg['12'] = new IMGO('villa/images/XFicon.png', '166', '166');</script><script>bImg['13'] = new IMGO('villa/images/PlayBtn.png', '216', '216');</script><script>bImg['14'] = new IMGO('villa/images/Bicon.png', '166', '166');</script><script>bImg['15'] = new IMGO('villa/images/Xicon.png', '166', '166');</script><script>bImg['16'] = new IMGO('villa/images/Lsign.png', '140', '166');</script><script>bImg['17'] = new IMGO('villa/images/Rsign.png', '140', '166');</script><script>bImg['18'] = new IMGO('villa/images/Mingo.png', '197', '236');</script><script>bImg['19'] = new IMGO('villa/images/PoolView.jpg', '512', '288');</script><script>bImg['20'] = new IMGO('villa/images/DeckFood.jpg', '512', '288');</script><script>bImg['21'] = new IMGO('villa/images/GullWalk.jpg', '512', '291');</script><script>bImg['22'] = new IMGO('villa/images/BeachWay.jpg', '512', '304');</script><script>bImg['23'] = new IMGO('villa/images/kayaks.jpg', '512', '347');</script><script>bImg['24'] = new IMGO('villa/images/snorkel.jpg', '512', '382');</script><script>bImg['25'] = new IMGO('villa/images/shuttle.jpg', '512', '340');</script><script>bImg['26'] = new IMGO('villa/images/tour.jpg', '512', '313');</script><script>bImg['27'] = new IMGO('villa/images/VillaMap.jpg', '888', '841');</script><script>bImg['28'] = new IMGO('villa/images/stars5.png', '1876', '374');</script><script>bImg['0'].trl = 'villa/images/Cover.thmb.jpg'</script><script>bImg['1'].trl = 'villa/images/Coverios.thmb.jpg'</script><script>bImg['8'].trl = 'villa/images/Villa4TheDay.thmb.jpg'</script><script>Img[0] = bImg['8'];</script><script>blnkImg = 'villa/images/blank.jpg';</script><script>Img['1'] = new IMGO('villa/gallery/GardenPool1.jpg', '1024', '682');</script><script>Img['1'].trl = 'villa/gallery/thumbs/GardenPool1.thmb.jpg'</script><script>Img['2'] = new IMGO('villa/gallery/InfinityPool1.jpg', '1024', '682');</script><script>Img['2'].trl = 'villa/gallery/thumbs/InfinityPool1.thmb.jpg'</script><script>Img['3'] = new IMGO('villa/gallery/PalmGarden1.jpg', '1024', '682');</script><script>Img['3'].trl = 'villa/gallery/thumbs/PalmGarden1.thmb.jpg'</script><script>Img['4'] = new IMGO('villa/gallery/SunDeck1.jpg', '1024', '682');</script><script>Img['4'].trl = 'villa/gallery/thumbs/SunDeck1.thmb.jpg'</script><script>Img['5'] = new IMGO('villa/gallery/SunDeck2.jpg', '1024', '682');</script><script>Img['5'].trl = 'villa/gallery/thumbs/SunDeck2.thmb.jpg'</script><script>Img['6'] = new IMGO('villa/gallery/TimeLapse.jpg', '1024', '575');</script><script>Img['6'].trl = 'villa/gallery/thumbs/TimeLapse.thmb.jpg'</script><script>Img['7'] = new IMGO('villa/gallery/UpperDeck1.jpg', '1024', '682');</script><script>Img['7'].trl = 'villa/gallery/thumbs/UpperDeck1.thmb.jpg'</script><script>Img['8'] = new IMGO('villa/gallery/UpperDeck2.jpg', '1024', '682');</script><script>Img['8'].trl = 'villa/gallery/thumbs/UpperDeck2.thmb.jpg'</script><script>Img['9'] = new IMGO('villa/gallery/VillaDen1.jpg', '1024', '682');</script><script>Img['9'].trl = 'villa/gallery/thumbs/VillaDen1.thmb.jpg'</script><script>Img['10'] = new IMGO('villa/gallery/VillaNW1.jpg', '1024', '767');</script><script>Img['10'].trl = 'villa/gallery/thumbs/VillaNW1.thmb.jpg'</script><script>Img['11'] = new IMGO('villa/gallery/VillaNW2.jpg', '1024', '768');</script><script>Img['11'].trl = 'villa/gallery/thumbs/VillaNW2.thmb.jpg'</script><script>Img['12'] = new IMGO('villa/gallery/VillaNW3.jpg', '1024', '682');</script><script>Img['12'].trl = 'villa/gallery/thumbs/VillaNW3.thmb.jpg'</script><script>Img['13'] = new IMGO('villa/gallery/VillaOver1.jpg', '1024', '767');</script><script>Img['13'].trl = 'villa/gallery/thumbs/VillaOver1.thmb.jpg'</script><script>Img['14'] = new IMGO('villa/gallery/VillaPatio1.jpg', '1024', '682');</script><script>Img['14'].trl = 'villa/gallery/thumbs/VillaPatio1.thmb.jpg'</script><script>Img['15'] = new IMGO('villa/gallery/VillaPool1.jpg', '1024', '682');</script><script>Img['15'].trl = 'villa/gallery/thumbs/VillaPool1.thmb.jpg'</script><script>Img['16'] = new IMGO('villa/gallery/VillaPool2.jpg', '1024', '682');</script><script>Img['16'].trl = 'villa/gallery/thumbs/VillaPool2.thmb.jpg'</script><script>Img['17'] = new IMGO('villa/gallery/VillaSea1.jpg', '1024', '768');</script><script>Img['17'].trl = 'villa/gallery/thumbs/VillaSea1.thmb.jpg'</script><script>Img['18'] = new IMGO('villa/gallery/VillaSea3.jpg', '1024', '768');</script><script>Img['18'].trl = 'villa/gallery/thumbs/VillaSea3.thmb.jpg'</script><script>Img['6'].vrl = 'villa/gallery/TimeLapse.mp4';</script><script>Img['0'].vrl = 'villa/gallery/Villa4TheDay.mov';</script><script>const scheduleDir = 'villa/schedule';</script><script>const MaxReg = '1000';</script><script>const RegFname = 'register.txt';</script><script>regIP['0'] = { ip: '075.034.067.094', pc: '35804', ts: '2025-11-30T18:54:03.003Z', vs: '402' };</script><script>regIP['1'] = { ip: '066.249.072.068', pc: '68101', ts: '2025-11-30T18:05:37.624Z', vs: '1' };</script><script>regIP['2'] = { ip: '034.123.170.104', pc: '00000-0000', ts: '2025-11-29T20:59:38.076Z', vs: '1' };</script><script>regIP['3'] = { ip: '208.127.167.192', pc: '018989', ts: '2025-11-29T19:32:36.450Z', vs: '1' };</script><script>regIP['4'] = { ip: '098.020.104.216', pc: '28202', ts: '2025-11-29T17:11:58.331Z', vs: '1' };</script><script>regIP['5'] = { ip: '054.203.109.179', pc: '97818', ts: '2025-11-29T22:17:58.775Z', vs: '21' };</script><script>regIP['6'] = { ip: '066.249.073.011', pc: '00000-0000', ts: '2025-11-30T00:00:00.027Z', vs: '2' };</script><script>regIP['7'] = { ip: '098.148.042.060', pc: '85369', ts: '2025-11-20T20:16:51.515Z', vs: '1' };</script><script>regIP['8'] = { ip: '208.127.075.027', pc: '20147', ts: '2025-11-20T17:30:54.944Z', vs: '1' };</script><script>regIP['9'] = { ip: '172.056.227.050', pc: '35201', ts: '2025-11-19T18:20:45.214Z', vs: '1' };</script><script>regIP['10'] = { ip: '073.077.158.232', pc: '77002', ts: '2025-11-19T13:52:51.150Z', vs: '1' };</script><script>regIP['11'] = { ip: '172.056.226.186', pc: '35201', ts: '2025-11-19T01:04:55.284Z', vs: '1' };</script><script>regIP['12'] = { ip: '172.056.229.008', pc: '35201', ts: '2025-11-18T23:28:53.037Z', vs: '1' };</script><script>regIP['13'] = { ip: '146.112.163.055', pc: '20190', ts: '2025-11-18T01:53:41.876Z', vs: '1' };</script><script>regIP['14'] = { ip: '064.089.121.025', pc: '35804', ts: '2025-11-17T20:50:30.539Z', vs: '1' };</script><script>regIP['15'] = { ip: '107.115.203.048', pc: '62701', ts: '2025-11-16T03:40:29.990Z', vs: '1' };</script><script>regIP['16'] = { ip: '143.103.043.043', pc: '37659', ts: '2025-11-15T12:48:54.291Z', vs: '1' };</script><script>regIP['17'] = { ip: '205.169.039.025', pc: '76248', ts: '2025-11-15T00:13:40.232Z', vs: '1' };</script><script>regIP['18'] = { ip: '110.249.202.091', pc: '050000', ts: '2025-11-14T01:47:38.326Z', vs: '1' };</script><script>regIP['19'] = { ip: '066.249.073.001', pc: '00000-0000', ts: '2025-11-11T15:24:44.699Z', vs: '3' };</script><script>regIP['20'] = { ip: '075.034.064.141', pc: '35804', ts: '2025-11-11T15:43:42.373Z', vs: '126' };</script><script>regIP['21'] = { ip: '198.145.121.235', pc: '95025', ts: '2025-11-22T00:28:01.725Z', vs: '2' };</script><script>regIP['22'] = { ip: '066.249.074.131', pc: '74102', ts: '2025-11-10T00:00:00.020Z', vs: '3' };</script><script>regIP['23'] = { ip: '146.075.234.048', pc: '35201', ts: '2025-11-08T01:14:59.962Z', vs: '1' };</script><script>regIP['24'] = { ip: '198.145.121.151', pc: '95025', ts: '2025-11-13T22:14:48.801Z', vs: '2' };</script><script>regIP['25'] = { ip: '193.104.075.035', pc: '018989', ts: '2025-11-05T17:40:37.531Z', vs: '1' };</script><script>regIP['26'] = { ip: '066.249.074.035', pc: '74102', ts: '2025-11-04T00:30:16.697Z', vs: '1' };</script><script>regIP['27'] = { ip: '204.157.093.114', pc: '00000-0000', ts: '2025-10-05T16:47:24.575Z', vs: '2' };</script><script>regIP['28'] = { ip: '049.013.081.143', pc: '08520', ts: '2025-10-05T17:55:21.462Z', vs: '1' };</script><script>regIP['29'] = { ip: '098.088.198.207', pc: '20147', ts: '2025-11-29T21:30:26.101Z', vs: '1' };</script><script>regIP['30'] = { ip: '017.022.237.047', pc: '20177', ts: '2025-09-16T00:37:40.556Z', vs: '1' };</script><script>regIP['31'] = { ip: '146.075.234.049', pc: '00000-0000', ts: '2025-11-11T15:41:04.790Z', vs: '1' };</script><script>regIP['32'] = { ip: '064.217.149.121', pc: '30046', ts: '2025-09-15T21:43:45.207Z', vs: '1' };</script><script>regIP['33'] = { ip: '066.249.066.166', pc: '28202', ts: '2025-09-15T00:00:00.020Z', vs: '1' };</script><script>regIP['34'] = { ip: '172.225.025.098', pc: '35804', ts: '2025-09-14T19:51:21.159Z', vs: '1' };</script><script>regIP['35'] = { ip: '066.249.066.199', pc: '28202', ts: '2025-09-15T01:13:50.957Z', vs: '1' };</script><script>regIP['36'] = { ip: '066.249.074.006', pc: '74102', ts: '2025-09-16T04:04:46.589Z', vs: '2' };</script><script>regIP['37'] = { ip: '086.089.060.207', pc: '1012', ts: '2025-08-14T07:42:25.666Z', vs: '1' };</script><script>regIP['38'] = { ip: '066.249.079.132', pc: '00000-0000', ts: '2025-09-20T19:44:17.997Z', vs: '1' };</script><script>regIP['39'] = { ip: '080.187.122.128', pc: '50667', ts: '2025-08-13T13:47:12.585Z', vs: '1' };</script><script>regIP['40'] = { ip: '174.194.099.079', pc: '53201', ts: '2025-09-13T16:50:31.503Z', vs: '1' };</script><script>regIP['41'] = { ip: '034.122.147.229', pc: '51502', ts: '2025-08-11T00:42:59.196Z', vs: '1' };</script><script>regIP['42'] = { ip: '205.169.039.128', pc: '75201', ts: '2025-08-11T00:38:20.405Z', vs: '1' };</script><script>regIP['43'] = { ip: '205.169.039.000', pc: '75201', ts: '2025-08-11T00:38:01.199Z', vs: '1' };</script><script>regIP['44'] = { ip: '080.187.115.238', pc: '04103', ts: '2025-08-22T14:48:07.703Z', vs: '1' };</script><script>regIP['45'] = { ip: '138.199.035.205', pc: '90009', ts: '2025-08-10T22:00:14.436Z', vs: '1' };</script><script>regIP['46'] = { ip: '066.249.079.134', pc: '00000-0000', ts: '2025-08-10T23:41:18.121Z', vs: '1' };</script><script>regIP['47'] = { ip: '066.249.079.138', pc: '00000-0000', ts: '2025-08-08T15:33:33.824Z', vs: '1' };</script><script>regIP['48'] = { ip: '017.022.237.037', pc: '20177', ts: '2025-08-07T18:22:19.716Z', vs: '0' };</script><script>regIP['49'] = { ip: '185.117.225.159', pc: '20171', ts: '2025-08-06T17:56:26.514Z', vs: '0' };</script><script>regIP['50'] = { ip: '068.113.105.050', pc: '35976', ts: '2025-08-06T02:55:09.693Z', vs: '0' };</script><script>regIP['51'] = { ip: '107.203.094.007', pc: '35759', ts: '2025-08-06T02:37:19.497Z', vs: '0' };</script><script>regIP['52'] = { ip: '065.055.210.212', pc: '98837', ts: '2025-08-08T22:43:51.167Z', vs: '1' };</script><script>regIP['53'] = { ip: '000.000.000.000', pc: '00000-0000', ts: '2025-08-05T15:50:27.436Z', vs: '4' };</script><script>regIP['54'] = { ip: '044.202.116.100', pc: '20147', ts: '2025-08-05T09:45:05.635Z', vs: '0' };</script><script>regIP['55'] = { ip: '138.122.193.157', pc: '11743', ts: '2025-08-05T06:54:29.529Z', vs: '0' };</script><script>regIP['56'] = { ip: '054.159.080.251', pc: '20147', ts: '2025-08-05T06:53:30.341Z', vs: '0' };</script><script>regIP['57'] = { ip: '166.194.200.057', pc: '75013', ts: '2025-08-05T15:57:19.641Z', vs: '0' };</script><script>regIP['58'] = { ip: '174.231.134.002', pc: '47240', ts: '2025-08-04T20:11:54.550Z', vs: '0' };</script><script>regIP['59'] = { ip: '174.231.133.035', pc: '20147', ts: '2025-08-03T16:38:22.472Z', vs: '0' };</script><script>regIP['60'] = { ip: '066.249.066.197', pc: '28202', ts: '2025-08-02T18:44:41.968Z', vs: '3' };</script><script>regIP['61'] = { ip: '158.046.209.122', pc: '10001', ts: '2025-08-10T18:55:26.476Z', vs: '1' };</script><script>regIP['62'] = { ip: '034.214.212.042', pc: '97818', ts: '2025-11-18T15:09:29.352Z', vs: '21' };</script><script>regIP['63'] = { ip: '066.249.066.002', pc: '28202', ts: '2025-08-03T00:00:00.020Z', vs: '2' };</script><script>regIP['64'] = { ip: '110.249.201.033', pc: '050000', ts: '2025-07-31T07:58:06.566Z', vs: '0' };</script><script>regIP['65'] = { ip: '202.008.041.031', pc: '20147', ts: '2025-07-31T11:41:56.876Z', vs: '0' };</script><script>regIP['66'] = { ip: '017.241.075.194', pc: '98101', ts: '2025-07-30T22:55:08.871Z', vs: '0' };</script><script>regIP['67'] = { ip: '108.147.176.017', pc: '67201', ts: '2025-07-20T12:20:01.110Z', vs: '0' };</script><script>regIP['68'] = { ip: '108.147.094.074', pc: '68101', ts: '2025-07-20T00:48:04.709Z', vs: '1' };</script><script>regIP['69'] = { ip: '066.249.079.136', pc: '00000-0000', ts: '2025-08-08T12:03:14.449Z', vs: '1' };</script><script>regIP['70'] = { ip: '066.249.079.133', pc: '00000-0000', ts: '2025-09-12T12:41:49.943Z', vs: '6' };</script><script>regIP['71'] = { ip: '066.249.066.162', pc: '28202', ts: '2025-07-18T01:39:32.560Z', vs: '0' };</script><script>regIP['72'] = { ip: '066.249.066.036', pc: '28202', ts: '2025-07-18T00:00:00.020Z', vs: '1' };</script><script>regIP['73'] = { ip: '034.116.244.132', pc: '00-002', ts: '2025-08-11T00:46:58.086Z', vs: '1' };</script><script>regIP['74'] = { ip: '094.023.080.044', pc: '00000-0000', ts: '2025-07-05T11:45:40.163Z', vs: '0' };</script><script>regIP['75'] = { ip: '107.116.255.055', pc: '98401', ts: '2025-07-05T04:13:08.078Z', vs: '1' };</script><script>regIP['76'] = { ip: '052.167.144.171', pc: '23917', ts: '2025-07-03T01:45:34.638Z', vs: '0' };</script><script>regIP['77'] = { ip: '066.249.079.131', pc: '00000-0000', ts: '2025-07-05T00:00:00.020Z', vs: '0' };</script><script>regIP['78'] = { ip: '066.249.079.135', pc: '00000-0000', ts: '2025-07-02T00:00:00.020Z', vs: '0' };</script><script>regIP['79'] = { ip: '098.097.038.012', pc: '98101', ts: '2025-07-04T12:39:48.154Z', vs: '1' };</script><script>regIP['80'] = { ip: '050.234.058.242', pc: '30302', ts: '2025-08-05T21:20:19.583Z', vs: '2' };</script><script>regIP['81'] = { ip: '202.008.043.173', pc: '20147', ts: '2025-07-01T03:52:38.948Z', vs: '0' };</script><script>regIP['82'] = { ip: '108.147.094.054', pc: '68101', ts: '2025-07-20T15:07:03.730Z', vs: '2' };</script><script>regIP['83'] = { ip: '066.249.072.110', pc: '51502', ts: '2025-06-29T00:00:00.020Z', vs: '0' };</script><script>regIP['84'] = { ip: '066.249.072.070', pc: '51502', ts: '2025-06-28T00:00:00.020Z', vs: '0' };</script><script>regIP['85'] = { ip: '110.249.201.060', pc: '050000', ts: '2025-06-28T10:25:06.566Z', vs: '0' };</script><script>regIP['86'] = { ip: '198.145.121.209', pc: '00000-0000', ts: '2025-08-02T17:23:32.132Z', vs: '9' };</script><script>regIP['87'] = { ip: '066.249.072.099', pc: '00000-0000', ts: '2025-06-27T17:44:53.277Z', vs: '0' };</script><script>regIP['88'] = { ip: '185.117.225.144', pc: '20147', ts: '2025-07-06T02:34:47.128Z', vs: '0' };</script><script>regIP['89'] = { ip: '146.075.158.176', pc: '37065', ts: '2025-06-27T02:41:42.377Z', vs: '0' };</script><script>regIP['90'] = { ip: '107.122.081.002', pc: '98101', ts: '2025-06-27T00:03:13.451Z', vs: '0' };</script><script>regIP['91'] = { ip: '107.115.147.044', pc: '70112', ts: '2025-06-26T23:43:50.438Z', vs: '0' };</script><script>regIP['92'] = { ip: '098.097.045.042', pc: '98101', ts: '2025-06-26T22:17:38.308Z', vs: '0' };</script><script>regIP['93'] = { ip: '140.248.030.176', pc: '37065', ts: '2025-06-26T22:08:37.315Z', vs: '0' };</script><script>regIP['94'] = { ip: '069.160.160.061', pc: '85737', ts: '2025-06-26T21:29:51.350Z', vs: '0' };</script><script>regIP['95'] = { ip: '108.199.008.029', pc: '35630', ts: '2025-06-26T22:35:16.784Z', vs: '0' };</script><script>regIP['96'] = { ip: '209.214.243.002', pc: '35804', ts: '2025-06-26T20:58:02.850Z', vs: '0' };</script><script>regIP['97'] = { ip: '066.249.068.134', pc: '97058', ts: '2025-06-26T00:00:00.020Z', vs: '0' };</script><script>regIP['98'] = { ip: '098.097.036.097', pc: '98101', ts: '2025-06-24T13:51:58.005Z', vs: '4' };</script><script>regIP['99'] = { ip: '098.097.036.083', pc: '98101', ts: '2025-07-01T23:11:56.323Z', vs: '0' };</script><script>regIP['100'] = { ip: '172.059.105.171', pc: '36601', ts: '2025-06-24T03:28:49.276Z', vs: '0' };</script><script>regIP['101'] = { ip: '104.028.116.131', pc: '98101', ts: '2025-06-22T17:51:37.779Z', vs: '0' };</script><script>regIP['102'] = { ip: '066.249.075.229', pc: '51502', ts: '2025-06-21T00:00:00.020Z', vs: '0' };</script><script>regIP['103'] = { ip: '107.205.086.005', pc: '35816', ts: '2025-06-27T20:07:28.970Z', vs: '1' };</script><script>regIP['104'] = { ip: '166.198.252.045', pc: '98101', ts: '2025-06-21T14:32:38.745Z', vs: '0' };</script><script>regIP['105'] = { ip: '172.059.105.207', pc: '36601', ts: '2025-06-26T18:02:34.066Z', vs: '0' };</script><script>regIP['106'] = { ip: '054.174.140.070', pc: '20147', ts: '2025-06-18T02:32:29.712Z', vs: '0' };</script><script>regIP['107'] = { ip: '066.249.072.162', pc: '51502', ts: '2025-07-02T14:25:14.068Z', vs: '0' };</script><script>regIP['108'] = { ip: '206.041.166.145', pc: '10001', ts: '2025-06-16T16:46:46.258Z', vs: '0' };</script><script>regIP['109'] = { ip: '109.042.243.150', pc: '50667', ts: '2025-08-13T14:37:57.246Z', vs: '1' };</script><script>regIP['110'] = { ip: '066.249.066.167', pc: '28202', ts: '2025-06-15T00:00:00.020Z', vs: '0' };</script><script>regIP['111'] = { ip: '017.022.253.149', pc: '20177', ts: '2025-06-22T14:24:06.685Z', vs: '0' };</script><script>regIP['112'] = { ip: '066.249.066.074', pc: '28202', ts: '2025-08-05T00:00:00.020Z', vs: '0' };</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-x: none; overscroll-behavior-y: auto; }

	     .monitor /*temporary diagnostics*/
	     {
	     z-index: 16;
	     position: fixed;    
         font-family: "Arial", Arial;
         font-size: 18px;
         font-weight: 200;
         color: #FFFFFF;  
         }
      
       /*@keyframes fadeIn  {  0% { opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } }*/
         @keyframes fadeIn  {  0% { opacity: 0; } 100% { opacity: 1; } }
         @keyframes fadeOut {  0% { opacity: 1; } 100% { opacity: 0; } }

         /*.element
         {
            animation-name: fadeOut;
            animation-fill-mode: forwards;
         } supposed to make element retain final state, but doesn't seem to work...*/


         body
         {
            color: rgb(160, 190, 220);
            background-color: rgb(80, 160, 200);
            font-size: 28px;
         }

         /*
         textarea { font-size: 16px; }             *** this will disable iphone auto-zoom,
         input[type="text"] { font-size: 16px; }   *** but this one didn't work...
         */

         textarea
         {
            font-family: inherit;
            font-size: inherit;
         }

         :root
         {
            --vclr1: #77FFEE;
            --vclr2: #66DDFF;
            --vclr3: #66FFEE;
         }

         .textvcent
         {
            display: flex;
            align-items: center;     /* Vertical   */
           /* justify-content: center;  Horizontal DOES NOT SEEM TO WORK */
         }
 
	  </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;"></body>

<br />       PLEASE RELOAD PAGE

   <script>
      //  use Date.now() for GetTickCount() applications
      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      { }
      }

      const HostEmail = 'laurakmccormick@hotmail.com';
      //const HostEmail = 'cdobson@fastmail.net';
      const HostDomain = 'eyefarer.net';

      var ScrollY = null;
      var prvScrollY = 0;
      var curScrollY = 0;
      var RestoreY = 0;
      var nPage, pmidY;
      var InitSetup = 0;

const DisableTours = true; // temporarily remove tours from website

      // place-holder fallback in lieu of server calendar
      //const calDate0;
      const calOffset = (new Date(2026, 0, 12) - new Date())/86400000; // month 0-based
      const calPeriod = 60; //365; // period of days for reservations
      var calMonthMin, calYearMin, // calYearMin SETS rsvCalendar.date[0]
          calMonthMax, calYearMax;

      var rsvCalendar = { timestamp: null, date: [] };
      var rsvSel;

      var rsvCln = { name: null, email: null, phone: null, cntct: 0, text: null };
      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 (temp member of StateVars-lost on JSON.parse)
      var rsvInfo    = { date: calSelDate, code: '', numG: 1, numS: 0, locS: [0, 0], timS: [0, 0],  
                                                              numT: 0, timT: [0, 0], opnD: null, id: rsvCln };
      var rvwInfo    = { rate: null, title: '', text: '', name: '', email: '' };

      var calSelDateCell;

      // StateVars removed from use 3 Aug 2025, and removed from code 17 Nov 2025
      // Something like it should perhaps be used in cookies to remember past guests.
      // var gstat      = { ndx: 0, vplay: false, vtime: 0 };
      // var StateVars  = { time: null, ip: null, scrY: [0, 0], lang: 0, gst: gstat, rsvI: rsvInfo };

      // July 2025, eight pages
      // NOTE: crucial that the structure of this object match inputSiteChart(), which is HARD CODED***

      var SiteChart = { 
                        time:  [ null, null ],
                        ymin:  [    0,    0 ],
                        ymax:  [ null, 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 },
                                    { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 }, { y: 0, h: 1 } ]
                               ],
                        gwin:  [ { mn: 0, mx: 0 }, { mn: 0, mx: 0} ] // gallery win 19 Jul 2025
                      };
      var userIP = { ip: null, pc: null, ts: null, vs: 0 };
      var uInfo = [{ ip: null, pc: null, er: null, st: 0 },{ ip: null, pc: null, er: null, st: 0 }];
    //var uInfo = Array.from( { length: 2 }, () => ({...userIP}) ); // array of identical but distinct (...) objects
      const IPNULL = '000.000.000.000';
      const PCNULL = '00000-0000';
      const DTMIN = 10 * 60 * 1000; // ms wait between loads to count as new visit to website

      const ActiveMonInt = 15000; // check every interval
      const ActiveMonLim = 90000; // cumulative idle trigger
      var ActiveMonTimer = 0;     // cumlative inactive time
      var ActiveMonFlag  = 0;     // set by user actions
      var ActiveMonStat = false;  // global switch for activity monitor
      var bookOutWait = 20000;    // wait for response to dialog (close book page)
      var bookOutPend = 0;        // timer ID
      const BookMonInt = 30000;
      var ReserveCall = 0;
      var showFlagID = 0;      // used for setTimeout ids to close showFlag
      const showFlagMS = 8000; // ms for timeout

      const flg1TXT = 'OK';
      const flg2TXT = 'Change';

      var StateET;
      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 vblue = '#0088FF';
      const vblud = '#004466';
      const vblck = '#000000';
      const vgryl = '#EEEEEE';
      const vgray = '#999999';
      const vgryd = '#555555';
      const vwhit = '#FFFFFF';
      const vgold = '#FFB400';
      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 fontSerf = [ 'Times New Roman', 'Cambria',       'Courier' ];
      var fontA = fontMain[0];
      var fontB = fontText[0];
      var fontC = fontCurs[0];
      var fontD = fontSerf[0];
      var fstyA = null; // not used if null
      var fstyB = null;
      var fstyC = null;
      var fstyD = null;

      var TextLang = 0;
      const LoadGallery = 1; // retire (always 1)

      var GalMode = 0;
      var BookPage = 0;
      var BookFlag = 0; // only used if rsvCalendar not load on startup...

      const XPOS = 'data-xpos'; // used to anchor element xpos left or right
      const LPOS = 'xpos-left';
      const RPOS = 'xpos-right';
      const INDX = 'data-indx';
      const STRS = 'rate-indx';
      const rvwTxt = [["See reviews", "Bekijk recensies"], ["Hide reviews", "Verberg recensies"]]

      const $CUR = 'USD';
      const $bDay = 140, $bTrn = 0, $bTou = 45; // base prices ($CUR) for Day, shuttle service, and island tour
      var $Day, $Trn, $Tou, $Tot; // prices that vary with conditions
      var MaxGstsDay = 40;
      var MaxGstsRsv = MaxGstsDay;

      const TX =             // to add to this array, add string pair and assign Txt[].id to an element
      [
      ["Villa 4 The Day",                                          // 0
       "Villa Voor De Dag"],                                       
      ["spend the day at our ocean-front villa...",                // 1
       "breng de dag door in onze luxe villa..."],
      ["book now",                                                 // 2
       "boek nu"],
      ["Open daily 9 - 6",                                         // 3 = TS0 (sign page)
       "Geopend dagelijks van 9 tot 18 uur" ],
      [$bDay+" "+$CUR+" per guest",                                // [1]
       $bDay+" "+$CUR+" per gast"],
      ["must be 18+",                                              // [2]
       "alleen 18+"],
      ["Limited occupancy",                                        // [3]
       "Beperkte bezetting"],
      ["Book your spot",                                           // [4]
       "Reserveer je plekje"],

      ["Home",                                                     // TH0 = TS0 + 5
       "Thuis" ],
      ["Attractions",                                              // [1]
       "Activiteiten" ],
      ["Infomation",                                               // [2]
       "Informatie" ],  
      ["Gallery",                                                  // [3]
       "Galerij" ],
      ["Reservations",                                             // [4]
       "Reserveringen" ],
      ["Reviews",                                                  // [5]
       "Recensies" ],

      ["Gallery",                                                  // TG0 = TH0 + mnhN (gallery)
       "Galerij"],
      ["Attractions",                                              // TA0 - 3
       "Activiteiten"], // activities
      ["tap pictures for details",                                 // TA0 - 2
       "Activiteiten"],
      ["point to pictures for details",                            // TA0 - 1
       "Activiteiten"],

      ["Pool & Sunbathing",                                        // TA0 = TG0 + 4
       "Zwembad & Zonnebaden" ],
      ["Food & Beverages",                                         // (1)
       "Eten en Drinken" ],
      ["Travel Day Special",                                       // (2)
       "Promotie Reisdag"  ],
      ["Easy Beach Access",                                        // (3) 
       "Toegang tot de Zee"  ],
      ["Kayaking",                                                 // (4) 
       "Kajakken"  ],
      ["Snorkeling",                                               // (5) 
       "Snorkelen"  ],
      ["Shuttle Service",                                          // (6)
       "Pendeldienst"  ],
      ["Island Tour",                                              // (7)  NumAtr - 1
       "Eilandtour"  ],

      ["The Villa Experience", "De Villa-ervaring"],                                // TD0 - 1
      ["At a Glance", "In één Oogopslag"],               // TD0 = 1 + TA0 + NumAtr (details page)
      ["<br/>Open from 9 am - 6 pm."+
       "<br/><br/>Cost per person for one day-pass is " + $bDay+" "+$CUR+"."+
       "<br/><br/>This is an all-inclusive resort with a casual atmosphere and a \"make yourself at home\" vibe."+
       // " Our chef\'s delicious snacks and lunch menus have something for everyone,"+
       " Our delicious snacks and lunch menus have something for everyone,"+
       " whatever your individual choice, and we offer an assortment of non-alcoholic beverages,"+
       // " including gourmet coffee, as well as beer and wine."+
       " including gourmet coffee, as well as juice and tea."+
       "<br/><br/>Guests must be at least 18 years of age."+
       "<br/><br/>Free shuttle service."+
       "<br/><br/>Handicap accessible.",
       "<br/>Geopend van 9.00 - 18.00 uur."+
       "<br/><br/>De kosten per persoon voor één dagpas zijn " + $bDay+" "+$CUR+"."+
       "<br/><br/>Dit is een all-inclusive resort met een ongedwongen sfeer, en een \"doe alsof je thuis bent\"-gezellig."+
       " Onze heerlijke snacks en lunchmenu's hebben voor ieder wat wils,"+
       " wat uw individuele keuze ook is, wij bieden een assortiment aan alcoholvrije dranken,"+
       // " including gourmet coffee, as well as beer and wine."+
       " inclusief gourmetkoffie, maar ook sap en thee."+
       "<br/><br/>Gasten moeten minimaal 18 jaar oud zijn."+
       "<br/><br/>Gratis pendeldienst."+
       "<br/><br/>Toegankelijk voor mindervaliden.",],
       //["Bonaire Tour: "+$bTou+" "+$CUR+" per guest.", ""],
       //["<br/>Maximize your time on Bonaire with our express one-hour tour of the island\'s captivating south."+
       // " Don\'t miss out on this opportunity to see the best of Bonaire."+
       // "<br/><br/>Witness the remarkable pyramids of white salt and vibrant pink ponds of the salt flats,"+
       // " enjoy flamingos in their natural sanctuary, and get a poignant look into Bonaire\'s past at the"+
       // " historic slave huts."+
       // "<br/><br/>Sign up when you book your reservation to ensure a spot (limited space)."+
       // "<br/><br/>Offered daily at 2 pm and 3 pm.",
       // ""], // DisableTours
      ["Airport Travelers", "Luchthavenreizigers"],
      [
       "<br/>Reclaim your day! Why waste a vacation day stuck at the ariport?"+
       " Come to Villa 4 The Day and enjoy more of your favorite activities in the comfort of our villa."+
       "<br/><br/>Hassle-free luggage storage."+
       "<br/><br/>Invigorating showers: freshen up before your flight. Towels and basic toiletries are available."+
       "<br/><br/>Our reliable shuttle is at your service, ensuring you make your flight on time.",
       "<br/>Haal je dag terug! Waarom zou je een vakantiedag verspillen door vast te zitten op het vliegveld?"+
       " Kom naar Villa 4 The Day en beleef nog meer van uw favoriete activiteiten in het comfort van onze villa."+
       "<br/><br/>Zorgeloze bagageopslag."+
       "<br/><br/>Verfrissende douches: fris uzelf op voor uw vlucht. Handdoeken en basistoiletartikelen zijn beschikbaar."+
       "<br/><br/>Onze betrouwbare shuttle staat voor u klaar en zorgt ervoor dat u uw vlucht op tijd haalt."
      ],
      ["Cruise Ship Passengers", ""],
      ["<br/>Escape to Villa 4 The Day and discover your perfect slice of island paradise."+
       " Just minutes from the cruise port, we’re your ultimate oasis for relaxation and fun."+
       " Free shuttle service.", 
       "<br/>Ontsnap naar Villa 4 The Day en ontdek uw perfecte stukje paradijselijk eiland."+
       " Op slechts enkele minuten van de cruisehaven zijn wij uw ultieme oase voor ontspanning en plezier."+
       " Gratis pendeldienst."
      ],
      //["Island Tour", ""],
      //[$bTou+" "+$CUR+" per guest. Tour takes one hour, offered twice a day, 2pm and 3pm."+
      // " The Southern Island Tour highlights an 18 mile stretch of Bonaire’s protected shores."+
      // " See the salt pyramids & colorful salt flats. Visit historic slave huts at Red Slave."+
      // " View wild flamingos in the thousands, and experience the rugged east coast with its spectacular waves.",
      // $bTou+" "+$CUR+" per gast."],
      // DisableTours
      ["Bonaire Tour: COMING SOON", "Bonaire Tour: BINNENKORT"],
      ["<br/>Maximize your time on Bonaire with our express one-hour tour of the island\'s captivating south."+
       " Don\'t miss out on this opportunity to see the best of Bonaire."+
       "<br/><br/>Witness the remarkable pyramids of white salt and vibrant pink ponds of the salt flats,"+
       " enjoy flamingos in their natural sanctuary, and get a poignant look into Bonaire\'s past at the"+
       " historic slave huts."+
       //"<br/><br/>Sign up when you book your reservation to ensure a spot (limited space)."+
       "<br/><br/>To be offered daily at 2 pm and 3 pm.",
       "<br/>Haal het meeste uit uw tijd op Bonaire met onze snelle tour van een uur door het betoverende zuiden van het eiland."+
       " Mis deze kans niet om het beste van Bonaire te zien."+
       "<br/><br/>Wees getuige van de opmerkelijke piramides van wit zout en de levendige roze vijvers van de zoutvlakten,"+
       " Geniet van flamingo's in hun natuurlijke toevluchtsoord en krijg een aangrijpende blik op het verleden van Bonaire bij de"+
       " historische slavenhutten."+
       //"<br/><br/>Sign up when you book your reservation to ensure a spot (limited space)."+
       "<br/><br/>Dagelijks om 14.00 en 15.00 uur verkrijgbaar."
      ],
      ["Reservations & Refunds", "Reserveringen en Restituties"],
      ["<br/>Book your date and schedule shuttle and tour services here online or by phone."+
       " Your card is not charged until the day of your visit. Full refund until 6 pm the day before,"+
       " 50% refund afterward. Walk-ins welcome at the villa and for the tours when space is available.<br/><br/>",
       "<br/>Boek hier online of telefonisch uw datum en plan uw pendeldienst en tourdiensten."+
       " Uw kaart wordt pas belast op de dag van uw bezoek. Volledige restitutie tot 18.00 uur de dag ervoor,"+
       " 50% restitutie achteraf. De villa en de rondleidingen zijn zonder afspraak geopend, zolang er nog plaats is.<br/><br/>"
      ],

      ["Reservations",                                             // TR0 = TD0 + 10
       "Reserveringen" ],
      ["Great Location",                                           // [1]
       "Geweldige Locatie" ],
      ["Be Our Guest",                                             // [2]
       "Wees Onze Gast" ],
      ["Choose a Date",                                            // [3]
       "Kies een Datum" ],
      ["Number of Guests",                                         // [4]
       "Aantal Gasten" ],
      ["Shuttle Service",                                            // [5] DisableTours
       "Pendeldienst" ],
      ["Guest Information",                                        // [6]
       "Gast Informatie" ],
      ["Payment",                                                  // [7]
       "Betaling" ],
      ["VISA",                                                     // [8]
       "VISA" ],
      ["Price",                                                    // [9]
       "Prijs" ],
      [$CUR+" 0",                                                  // [10]
       $CUR+" 0" ],
      ["back to browse",                                           // [11]
       "terug om te bladeren" ],
      ["minutes from<br/>cruise port<br/>and<br/>airport",         // [12]
       "minuten van de<br/>cruisehaven en de<br/>luchthaven" ],
      ["Reviews",                                                  // TV0
       "Recensies"],
      ["Write a review",
       "Schrijf een recensie"],
      rvwTxt[0],
      ["Home",                                                     // TF0 = TR0 + 13
       "Thuis" ],
      ["Attractions",                                              // [1]
       "Activiteiten" ],
      ["Gallery",                                                  // [2]
       "Galerij" ],
      ["Reservations",                                             // [3]
       "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 mnhN = 6; // number of main menu items
      const TS0 =  3;
      const TH0 = TS0 + 5;
      const TG0 = TH0 + mnhN;
      const TA0 = TG0 + 4;
      const TD0 = TA0 + NumAtr + 1;
      const TR0 = TD0 + 10;
      const TV0 = TR0 + 13;
      const TF0 = TV0 + 3;

      var rsvDate = [ "", "" ], 
          rsvOinp = [ "None selected", "Geen geselecteerdd" ], rsvOpts = [ rsvOinp[0], rsvOinp[1] ],
          rsvNinp = [ "Your name...",  "Jouw naam..."       ], rsvName = null; //[ 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 Txt = [];   
      function Textor(n) // constructor
      {
         this.id = "id" + quad(n);
         this.tx = TX[n];
         this.on = 1;
      }
      for (let n = 0; n < TX.length; n++) Txt[n] = new Textor(n);

      const ATR = 'atr';
      const RSV = 'rsv';
      const RVW = 'rvw';

      var iOSresize = 0; // counter pinch zooming, not used

      var cvriht, cvriwd, cvrlft, cvrrgt, 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 IMGO for video (thumbnail) loading
      var Indx = 0; // global index for current gallery image/video
      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 cases when img is not src but style.backgroundImg
      var loadTnl; // for video thumbnails
      var targTnl; // video thumbnails
      var imgndx = 0;
      var dlgFades = '0.25s'; // blank string for no fades

      var MBL, ADR, iOS, MAC;
      var curWidth, curHeight, screenWidth, screenHeight, windowWidth, windowHeight,
          curPixel, windowPixel, curAngle, screenAngle, prvWidth, prvHeight = 0, scrollWidth, pagWidth, pagHwid;
      var defWidth = [ null, null ];
      var WideScreen = true;
      var WSC;
      var AndroidWsc = 1; // run widescreen in scroll mode on Android (always on iOS)
      var taskTmax = 750, taskTime = 0, taskDT = 50;
      var tchClnX, tchClnY, tchClnDX, tchClnDY, swipeMin;
      var wstr, wchg = 0;
      var resetcount = 0;
      var barH, fbrH, pageCX, pageCY = 0, fsz0, fsz1, fsz2, fsz3, fsz4, barY0 = 0, bkbYF, bkbdy;
      var bor0, bor1, bor2, thnbor;
      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 galpS = [], galpC = [ { x:0, y:0 }, { x:0, y:0 } ];
      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 = [], atrRC = [];
      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 = [];
      var reviewData = [];
      var AveStars = 0;
      var starsURL;
      var rvwpR = [];
      var starsw, starsh;
      var ratecount = [ 0, 0, 0, 0, 0 ], rbarwid, rbarmin;

      // in the 5-star image the space between stars is fixed
      const pgrmS = 1/(6 + 5 * 356/16); // pentagram separation/image width
      const pgrmW = 1/(6 * 15/356 + 5); // pentagram      width/image width
      // point right of star n is pixel = width * ( (n + 1)*pgrmS + n*pgrmW );

      // DOM elements (nodes)
      var mbv;
      var cvr,
          cvr0, cvr1, cvr2;
      var mnh,
          mnhb, mnhc,
                mnhcI = [];
      var mnu,
          mnub, mnuc,
                mnuce, mnucd;
      var bnr;
      var fbr;
      var bkb, inf,
               infi, infb, infc = [], infe = [], inft, 
               infP, infh,
               infD = [];
      var sgn,  // parent
          sgni, // child
          sgnt = [],
          sgnb,
          sgnbt, sgnbb;
      var gal, 
          galB, galX, galL, galR, galp, galb,
                                              galn0, galtx, galfr, galfs;
      var atr,
          atrc, atrh, atrx, atri  = [], atrm,       // arrays[NumAtr]
                            atric = [], atrit = []; // c = caption on photo, t = text box below photo;
      var rsv,
          maph, mapb, mapc, mapf, rsvh, rsvf,
          rsvb,
          rsvbh, rsvbd, rsvbD, rsvbC, rsvbn, rsvbN, rsvbo, rsvbO, rsvbS,
                                                                  rsvbSh = [],
          rsvbSs = [ { txt: null, sel: [ null, [null, null], [null, null]] }, 
                     { txt: null, sel: [ null,  null,         null       ] } ],
                                                                  rsvbSi = [], rsvbSI = [],
                 rsvbi, rsvbI, rsvbG,
                               rsvbGh, rsvbGi = [], rsvbGI = [],
                 rsvbp, rsvbP, rsvbF,
                               rsvbFt, rsvbF$,
          calp,
          payb,
          paybN, paybD, paybG, paybS, paybT, payb$, paybP;
      var rvw,
          rvwh, rvwr, rvww, rvws, rvwp, rvwb,
                rvwri, rvwrn, rvwrc,    rvwbc = [ [], [], [], [], [] ],
                rvwd,
                rvwdi, rvwdT, rvwdt, rvwdR, rvwdr, rvwdN, rvwdn, rvwdC, rvwdc, rvwdb;
      var ftr,
          ftrH, ftrA, ftrG, ftrR, ftrI, ftrC; // home, attractions, gallery reservations, information, contact
      var con,                                // Contact Us email form
          conT, conI, conN, conn, conA, cona, conM, conm, conS, // (ftrC launches)
          coni, conb, conc = [], cone = [];

      var skr; // skirt used at foot on iOS to mask area revealed by address bar
      var flg, // flag (message box)
          flgm, flg1, flg2,  // message, button 1 & 2
          flgi, flgb, flgc = [], flge = [], flgf; // bk img, frame gradient components, flamingo badge

      var xmg;
      var gptr;
      var sarr = [];

      var SFrTime = [ [ '8:30 am',   '8:45 am',   '9:00 am',   '9:15 am',   '9:30 am',   '10:00 am' ],
                      [ '08:30 uur', '08:45 uur', '09:00 uur', '09:15 uur', '09:30 uur', '10:00 uur' ] ];
      var SToTime = [ [ '4:00 pm',   '4:30 pm',   '5:00 pm'   ],
                      [ '16:00 uur', '16:30 uur', '17:00 uur' ] ];
      var TFrTime = [ [ '2:00 pm',   '3:00 pm'   ],
                      [ '14:00 uur', '15:00 uur' ] ];
      var TToTime = [ [ 'about 3:00 pm',  'about 4:00 pm'  ],
                      [ 'rond 15:00 uur', 'rond 16:00 uur' ] ];
      var SLocatn = [ [ 'no, thanks',   'Airport',    'Cruise Ship Dock', 'Captain Don\'s',  
                                        'Buddy Dive Resort', 'Divi Flamingo', 'Plaza Resort' ],
                      [ 'nee, bedankt', 'Luchthaven', 'Cruiseschip dok',  'Kapitein Don\'s', 
                                        'Buddy Duik Resort', 'Divi Flamingo', 'Plaza Resort' ] ];

      var fbrwid;
      var btnDim;
      var flgshd;
      var Flag = { mesg: 0, elem: null }
      var flgmHmax = 0;
      var flgmYmin = 0;

      var ipdata = [], iperror = [];

      var cvrpos, cvrhgt, // SiteChart values (calculated in setupPage)
          sgnpos, sgnhgt, // correlated with SiteChart in setSiteChart()
          atrpos, atrhgt,
          infpos, infhgt,
          galpos, galhgt,
          rsvpos, rsvhgt,
          rvwpos, rvwhgt = [],
          ftrpos, ftrhgt, ftrpos0;

      var galwin = [0, 0]; // on MBL turn landscape, go to top of gallery if in this (portrait) window

      var RvwOpen = 0;
      var rvwDlgOpn = 0;
      var rvwbd, rvwcy, starw, stard, starwid, starhgt;
      var conDlgOpn = 0; // Contact Us email form
      var LogoStat = 0;
      var LogoY = 0;
      var LogoAnim = [ null, null ];
      var cvr0R = [ { x:0, y:0, w:1, h:1 },
                    { x:0, y:0, w:1, h:1 } ]

      var calx1, calx2, caly = [], calcx, calcy, rsvWidth, rsvbht, rsvhCY, rsvbor;
      var atrIanimation, atrCanimation, atrTanimation;
      var curmousex = 0, curmousey = 0;
      var atrZtop = NumAtr-1, atrShow = null, atrFocus = null;//, atrPend = null; // last child is on top
      var atrAutoOpen = 1;
      var atrTID = [ null, null ];
      var atrScrY = [];
      var atrDT = [ 500, 4500 ];
      var bookScrollY = 0;
      var OpenVideo = null;
      var vIdleTID = 0;
      const vIdleTmax0 = 8000;
      const vIdleTmax = vIdleTmax0;

var newAtrOff = true;

      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 ioff; // kinda lame...
      var atrTxt = [
                      [ 
                         ["Sun or shade chaise lounges.", "Ligstoelen in de zon of schaduw."],
                         ["Plenty of comfortable seating, sun deck, patio, veranda, palm garden, courtyard, and pool.", 
                          "Veel comfortabele zitplaatsen, zonneterras, patio, veranda, palmentuin, binnenplaats en zwembad." ]
                      ],
                      [
                         ["Coffee & pastries, sparkling water, sodas, fruit juice, lunch menu and snacks.",
                          "Koffie & gebak, bruiswater, frisdranken, vruchtensap, lunchmenu en snacks."], 
                      ],

                      [
                         ["Free luggage storage, lockers, shuttle service, showers and changing rooms.",
                          "Gratis bagageopslag, kluisjes, pendeldienst, douches en kleedkamers."], 
                      ],
                      [
                         ["Easy beach access for wading, swimming, snorkeling and kayaking. Or bring your favorite floatie.",
                         "Gemakkelijke toegang tot het strand om te waden, zwemmen, snorkelen en kajakken. "+
                         "Of neem je favoriete float mee."]                      ],
                      [
                         ["Kayaks available for boating fun from the shallows to the sea.",
                          "Er zijn kajaks beschikbaar waarmee u vanuit het ondiepe gedeelte naar de zee kunt varen."], 
                      ],
                      [
                         ["Masks and snorkels available. Explore the offshore waters, "+
                          "famous for sea turtles and the many coral reefs and gorgeous tropical fish.", 
                          "Maskers en snorkels beschikbaar. Verken de lokale wateren, "+
                          "beroemd om zijn zeeschildpadden, vele koraalriffen en prachtige tropische vissen."]
                      ],
                      [ 
                         ["Shuttle service for the airport, cruise ship docks, and area hotels. "+
                          "Plus storage for your luggage, including lockers for small items.", 
                          "Pendeldienst naar de luchthaven, cruiseschipdokken en hotels in de omgeving. "+
                          "Plus opslagruimte voor uw bagage, inclusief kluisjes voor kleine spullen."]
                      ],
                      [ 
                         ["Coming Soon!", "Binnenkort Beschikbaar!"],
                         ["Tour the southern loop around the island. See the salt pyramids, kite surfers, "+
                          "and thousands of flamingos.",
                          "Maak een tocht over de zuidelijke route rond het eiland. Bekijk de zoutpiramides, "+
                          "kitesurfers en duizenden flamingo's."]
                      ]
                   ]; // NumAtr
      var atrln = { x: 0, y: 0, h: 0 };
      var atrcx = [], 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 GstFormTxt = [
                   ['Villa 4 The Day Guest Information', 'Villa Voor De Dag Gast Informatie'],
                   ['Name', 'Naam'],
                   ['Email', 'E-mail'],
                   ['Phone', 'Telefoon'], 
                   ['Contact Preference', 'Contactvoorkeur'],
                   ['Special requests', 'Speciale verzoeken']
                 ];

      var OptFormTxt = [
                       ['Guests',          'Gasten'           ],
                       ['Pickup',          'Van'              ],
                       ['Time',            'Tidj'             ],
                       ['Dropoff',         'Naar'             ],
                       ['Time',            'Tidj'             ],
                       ['Guests',          'Gasten'           ],
                       ['Time',            'Tidj'             ],
                       ['Return',          'Opbrengst'        ],
                       ['Shuttle Service', 'Pendeldienst'     ],
                       ['Island Tour',     'Eilandtour'       ],
                       ]; //`text ${var} text` = 'text' + var + 'text', hence `${var}` = var

      const swipeEvent = new CustomEvent('swipe', { detail: { message: 'swpmsg' },  EventTarget: document.body, });

      var pgRc = { x: 0, y:0, w:1, h:1 };
      var pinchTouch = 0;

      // Build the website
      siteLoadFn();
      windowMouse();
      initSite();
      getUserIP();
      screenChanges();
      buildDOM();
      setupElemProps();
      scrollMonitor();
      cvr.src = bImg[bIndx(cvr)].trl; // (this is a lo-res version of the cover)
      setupLoaders();
      setupPage(true); // true = loading site. ONLY setupPage is called for resize events, including MBL screen turn
      imgndx = 1;
      ImageLoader();
      setActivityMonitor(true);

      // Set browser to loading image files by assigning them to floating image (loadImg).
      // Once loaded they are assigned to their target elements.
      // (This function apparently may cause load-aborts when placed in an external file.)
      // A few of these images are loaded elsewhere as well (e.g., the menu flags).
      // The assignment of loadImg.src perpetuates the loop. The load event for this img
      // element assigns destEle.src to loadImg.src and then calls this function, which
      // increments imgndx. An explicit return (loadImg.src not assigned) ends the loop.
      function ImageLoader()
      {  let n;
         if (imgndx < bMap.length)
         {
            n = (imgndx > 1) ? imgndx : bIndx(cvr); // special cover image used for iOS portrait mode
            destEle = bMap[n]; 
            loadImg.src = bImg[n].irl;
         }
         else
         {
            do
            {
            n = imgndx - NIm;
            if (!n) bImgLoadDone();
            if (n < Img.length) { destEle = Img[n].elt; loadImg.src = Img[n].trl; break; } // gallery thumbnails
            if (!LoadGallery) return;
            n -= Img.length;
            if (!n) { n++; imgndx++; }  // Img[0].irl already loaded above...
            if (n < Img.length) { destEle = Img[n].eli; loadImg.src = Img[n].irl; break; }
            else { return; }  // DONE
            } while(0);
         }
         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)
      }

   </script>

<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'p3plzcpnl509495'},{'dcenter':'p3'},{'cp_id':'10777095'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>