<!--
May 19 2025. INDEX.php in ROOT directory of server account consists of a single include statement:
             //////////////////////////////////////////////////////////
             include $_SERVER['DOCUMENT_ROOT']."/villa/villa-root.php";
             //////////////////////////////////////////////////////////

             The project currently consists of the php file and three javascript source files,
             VillaWebsite.js
             VillaLibrary.js
             VillaAnimate.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, but the php file is named Villa.php, and differs in that the variable
             $PUBLISHVERSION below is set to 0 in Villa.php and set to 1 in vill-root.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.

             The url for the publish version is eyefarer.net, and
             the url for the delveop version is eyefarer.net/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.

             To publish the current development version, copy the four files (Villa.php and the three js
             files) from villa/stage to villa/, rename Villa.php to villa-root.php, and edit villa-root.php
             to set $PUBLISHVERSION = 1.

             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 have 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, which helps, but this is
             ineffective on iOS (Safari), for which the address bar is both uncontrollable and undetectable.
             Currently I am suspending the single-page options for cell phone widescreen.

             iOS also adjusts screen resolution in a progressive pattern on rotation between the two 
             orientations. This results in not just two screen sizes to accomodate, but a succession of
             sizes, greatly complicating coding. In practice it also resulted in 'phantom' x areas which 
             activated the x-scroll bar to no purpose but to allow concealment of content (on the left).
             I have tried various workarounds, and currently I am simply reloading the page on every rotation.
             Continuity of (y) scroll position, gallery index, reservation information, and so on, is
             accomplished by storing this information with the browser during reload (sessionStorage).

             (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. (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}) );

For further details, see earlier versions of this file, cataloged in the folder versionlog/

-->


<script src = 'villa/VillaLibrary.2025-08-30.js'></script><script src = 'villa/VillaWebsite.2025-08-30.js'></script><script src = 'villa/VillaMembers.2025-08-30.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;
         this.img = null;
         this.ndx = null;
      }
      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 = { ip: [], ts: [], vs: [] };
      var regIP = [];
   </script>
   

   <script>const NIm = '25'; 
                 const Ig0 = '7'; 
                 const Ia0 = 18; 
                 const Ir0 = 22; 
                 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/hmenu.png', '350', '214');</script><script>bImg['4'] = new IMGO('villa/images/USFlag.jpg', '320', '195');</script><script>bImg['5'] = new IMGO('villa/images/NLFlag.jpg', '320', '195');</script><script>bImg['6'] = new IMGO('villa/images/Pool.jpg', '320', '77');</script><script>bImg['7'] = new IMGO('villa/images/Villa4TheDay.jpg', '1024', '576');</script><script>bImg['8'] = new IMGO('villa/images/Licon.png', '140', '166');</script><script>bImg['9'] = new IMGO('villa/images/Ricon.png', '140', '166');</script><script>bImg['10'] = new IMGO('villa/images/FSicon.png', '166', '166');</script><script>bImg['11'] = new IMGO('villa/images/XFicon.png', '166', '166');</script><script>bImg['12'] = new IMGO('villa/images/PlayBtn.png', '216', '216');</script><script>bImg['13'] = new IMGO('villa/images/MingoChill.jpg', '912', '571');</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/PoolView.jpg', '512', '288');</script><script>bImg['19'] = new IMGO('villa/images/DeckFood.jpg', '512', '288');</script><script>bImg['20'] = new IMGO('villa/images/GullWalk.jpg', '512', '291');</script><script>bImg['21'] = new IMGO('villa/images/BeachWay.jpg', '512', '304');</script><script>bImg['22'] = new IMGO('villa/images/VillaMap.jpg', '888', '841');</script><script>bImg['23'] = new IMGO('villa/images/stars.png', '888', '166');</script><script>bImg['24'] = new IMGO('villa/images/sbar.png', '888', '166');</script><script>bImg['0'].trl = 'villa/images/Cover.thmb.jpg'</script><script>bImg['1'].trl = 'villa/images/Coverios.thmb.jpg'</script><script>bImg['7'].trl = 'villa/images/Villa4TheDay.thmb.jpg'</script><script>Img[0] = bImg['7'];</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.mp4';</script><script>const scheduleDir = 'villa/schedule';</script><script>const MaxReg = '1000';</script><script>const RegFname = 'register.txt';</script><script>var RSVCODE = '000000';</script>;<script>//'000005'</script><script>if (parseInt('000005')) RSVCODE = '000005';</script><script>//''</script><script>//'2025-09-17T23:51:45.124Z'</script><script>//''</script><script>regIP['0'] = { ip: '034.214.212.042', pc: '97818', ts: '2025-09-17T23:51:45.124Z', vs: '14' };</script><script>regIP['1'] = { ip: '054.203.109.179', pc: '97818', ts: '2025-09-16T23:52:33.186Z', vs: '13' };</script><script>regIP['2'] = { ip: '086.089.060.207', pc: '1012', ts: '2025-08-14T07:42:25.666Z', vs: '1' };</script><script>regIP['3'] = { ip: '063.085.164.034', pc: '32821', ts: '2025-09-16T23:06:45.322Z', vs: '1' };</script><script>regIP['4'] = { ip: '080.187.122.128', pc: '50667', ts: '2025-08-13T13:47:12.585Z', vs: '1' };</script><script>regIP['5'] = { ip: '075.034.064.141', pc: '35806', ts: '2025-08-13T13:03:49.230Z', vs: '122' };</script><script>regIP['6'] = { ip: '034.122.147.229', pc: '51502', ts: '2025-08-11T00:42:59.196Z', vs: '1' };</script><script>regIP['7'] = { ip: '205.169.039.128', pc: '75201', ts: '2025-08-11T00:38:20.405Z', vs: '1' };</script><script>regIP['8'] = { ip: '205.169.039.000', pc: '75201', ts: '2025-08-11T00:38:01.199Z', vs: '1' };</script><script>regIP['9'] = { ip: '080.187.115.238', pc: '04103', ts: '2025-08-22T14:48:07.703Z', vs: '1' };</script><script>regIP['10'] = { ip: '138.199.035.205', pc: '90009', ts: '2025-08-10T22:00:14.436Z', vs: '1' };</script><script>regIP['11'] = { ip: '066.249.079.134', pc: '00000-0000', ts: '2025-08-10T23:41:18.121Z', vs: '1' };</script><script>regIP['12'] = { ip: '066.249.079.138', pc: '00000-0000', ts: '2025-08-08T15:33:33.824Z', vs: '1' };</script><script>regIP['13'] = { ip: '017.022.237.037', pc: '20177', ts: '2025-08-07T18:22:19.716Z', vs: '0' };</script><script>regIP['14'] = { ip: '185.117.225.159', pc: '20171', ts: '2025-08-06T17:56:26.514Z', vs: '0' };</script><script>regIP['15'] = { ip: '068.113.105.050', pc: '35976', ts: '2025-08-06T02:55:09.693Z', vs: '0' };</script><script>regIP['16'] = { ip: '107.203.094.007', pc: '35759', ts: '2025-08-06T02:37:19.497Z', vs: '0' };</script><script>regIP['17'] = { ip: '065.055.210.212', pc: '98837', ts: '2025-08-08T22:43:51.167Z', vs: '1' };</script><script>regIP['18'] = { ip: '000.000.000.000', pc: '00000-0000', ts: '2025-08-05T15:50:27.436Z', vs: '4' };</script><script>regIP['19'] = { ip: '044.202.116.100', pc: '20147', ts: '2025-08-05T09:45:05.635Z', vs: '0' };</script><script>regIP['20'] = { ip: '138.122.193.157', pc: '11743', ts: '2025-08-05T06:54:29.529Z', vs: '0' };</script><script>regIP['21'] = { ip: '054.159.080.251', pc: '20147', ts: '2025-08-05T06:53:30.341Z', vs: '0' };</script><script>regIP['22'] = { ip: '166.194.200.057', pc: '75013', ts: '2025-08-05T15:57:19.641Z', vs: '0' };</script><script>regIP['23'] = { ip: '174.231.134.002', pc: '47240', ts: '2025-08-04T20:11:54.550Z', vs: '0' };</script><script>regIP['24'] = { ip: '174.231.133.035', pc: '20147', ts: '2025-08-03T16:38:22.472Z', vs: '0' };</script><script>regIP['25'] = { ip: '066.249.066.197', pc: '28202', ts: '2025-08-02T18:44:41.968Z', vs: '3' };</script><script>regIP['26'] = { ip: '158.046.209.122', pc: '10001', ts: '2025-08-10T18:55:26.476Z', vs: '1' };</script><script>regIP['27'] = { ip: '066.249.079.133', pc: '00000-0000', ts: '2025-07-31T20:38:58.273Z', vs: '4' };</script><script>regIP['28'] = { ip: '066.249.066.002', pc: '28202', ts: '2025-08-03T00:00:00.020Z', vs: '2' };</script><script>regIP['29'] = { ip: '110.249.201.033', pc: '050000', ts: '2025-07-31T07:58:06.566Z', vs: '0' };</script><script>regIP['30'] = { ip: '202.008.041.031', pc: '20147', ts: '2025-07-31T11:41:56.876Z', vs: '0' };</script><script>regIP['31'] = { ip: '017.241.075.194', pc: '98101', ts: '2025-07-30T22:55:08.871Z', vs: '0' };</script><script>regIP['32'] = { ip: '108.147.176.017', pc: '67201', ts: '2025-07-20T12:20:01.110Z', vs: '0' };</script><script>regIP['33'] = { ip: '108.147.094.074', pc: '68101', ts: '2025-07-20T00:48:04.709Z', vs: '1' };</script><script>regIP['34'] = { ip: '066.249.079.136', pc: '00000-0000', ts: '2025-08-08T12:03:14.449Z', vs: '1' };</script><script>regIP['35'] = { ip: '075.034.067.094', pc: '35806', ts: '2025-09-17T23:50:56.301Z', vs: '169' };</script><script>regIP['36'] = { ip: '066.249.066.162', pc: '28202', ts: '2025-07-18T01:39:32.560Z', vs: '0' };</script><script>regIP['37'] = { ip: '066.249.066.036', pc: '28202', ts: '2025-07-18T00:00:00.020Z', vs: '1' };</script><script>regIP['38'] = { ip: '034.116.244.132', pc: '00-002', ts: '2025-08-11T00:46:58.086Z', vs: '1' };</script><script>regIP['39'] = { ip: '094.023.080.044', pc: '00000-0000', ts: '2025-07-05T11:45:40.163Z', vs: '0' };</script><script>regIP['40'] = { ip: '107.116.255.055', pc: '98401', ts: '2025-07-05T04:13:08.078Z', vs: '1' };</script><script>regIP['41'] = { ip: '052.167.144.171', pc: '23917', ts: '2025-07-03T01:45:34.638Z', vs: '0' };</script><script>regIP['42'] = { ip: '066.249.079.131', pc: '00000-0000', ts: '2025-07-05T00:00:00.020Z', vs: '0' };</script><script>regIP['43'] = { ip: '066.249.079.135', pc: '00000-0000', ts: '2025-07-02T00:00:00.020Z', vs: '0' };</script><script>regIP['44'] = { ip: '098.097.038.012', pc: '98101', ts: '2025-07-04T12:39:48.154Z', vs: '1' };</script><script>regIP['45'] = { ip: '050.234.058.242', pc: '30302', ts: '2025-08-05T21:20:19.583Z', vs: '2' };</script><script>regIP['46'] = { ip: '202.008.043.173', pc: '20147', ts: '2025-07-01T03:52:38.948Z', vs: '0' };</script><script>regIP['47'] = { ip: '108.147.094.054', pc: '68101', ts: '2025-07-20T15:07:03.730Z', vs: '2' };</script><script>regIP['48'] = { ip: '066.249.072.110', pc: '51502', ts: '2025-06-29T00:00:00.020Z', vs: '0' };</script><script>regIP['49'] = { ip: '066.249.072.070', pc: '51502', ts: '2025-06-28T00:00:00.020Z', vs: '0' };</script><script>regIP['50'] = { ip: '110.249.201.060', pc: '050000', ts: '2025-06-28T10:25:06.566Z', vs: '0' };</script><script>regIP['51'] = { ip: '198.145.121.209', pc: '00000-0000', ts: '2025-08-02T17:23:32.132Z', vs: '9' };</script><script>regIP['52'] = { ip: '066.249.072.099', pc: '00000-0000', ts: '2025-06-27T17:44:53.277Z', vs: '0' };</script><script>regIP['53'] = { ip: '185.117.225.144', pc: '20147', ts: '2025-07-06T02:34:47.128Z', vs: '0' };</script><script>regIP['54'] = { ip: '146.075.158.176', pc: '37065', ts: '2025-06-27T02:41:42.377Z', vs: '0' };</script><script>regIP['55'] = { ip: '107.122.081.002', pc: '98101', ts: '2025-06-27T00:03:13.451Z', vs: '0' };</script><script>regIP['56'] = { ip: '107.115.147.044', pc: '70112', ts: '2025-06-26T23:43:50.438Z', vs: '0' };</script><script>regIP['57'] = { ip: '098.097.045.042', pc: '98101', ts: '2025-06-26T22:17:38.308Z', vs: '0' };</script><script>regIP['58'] = { ip: '140.248.030.176', pc: '37065', ts: '2025-06-26T22:08:37.315Z', vs: '0' };</script><script>regIP['59'] = { ip: '069.160.160.061', pc: '85737', ts: '2025-06-26T21:29:51.350Z', vs: '0' };</script><script>regIP['60'] = { ip: '108.199.008.029', pc: '35630', ts: '2025-06-26T22:35:16.784Z', vs: '0' };</script><script>regIP['61'] = { ip: '209.214.243.002', pc: '35804', ts: '2025-06-26T20:58:02.850Z', vs: '0' };</script><script>regIP['62'] = { ip: '066.249.068.134', pc: '97058', ts: '2025-06-26T00:00:00.020Z', vs: '0' };</script><script>regIP['63'] = { ip: '098.097.036.097', pc: '98101', ts: '2025-06-24T13:51:58.005Z', vs: '4' };</script><script>regIP['64'] = { ip: '098.097.036.083', pc: '98101', ts: '2025-07-01T23:11:56.323Z', vs: '0' };</script><script>regIP['65'] = { ip: '172.059.105.171', pc: '36601', ts: '2025-06-24T03:28:49.276Z', vs: '0' };</script><script>regIP['66'] = { ip: '104.028.116.131', pc: '98101', ts: '2025-06-22T17:51:37.779Z', vs: '0' };</script><script>regIP['67'] = { ip: '066.249.075.229', pc: '51502', ts: '2025-06-21T00:00:00.020Z', vs: '0' };</script><script>regIP['68'] = { ip: '107.205.086.005', pc: '35816', ts: '2025-06-27T20:07:28.970Z', vs: '1' };</script><script>regIP['69'] = { ip: '166.198.252.045', pc: '98101', ts: '2025-06-21T14:32:38.745Z', vs: '0' };</script><script>regIP['70'] = { ip: '172.059.105.207', pc: '36601', ts: '2025-06-26T18:02:34.066Z', vs: '0' };</script><script>regIP['71'] = { ip: '054.174.140.070', pc: '20147', ts: '2025-06-18T02:32:29.712Z', vs: '0' };</script><script>regIP['72'] = { ip: '066.249.072.162', pc: '51502', ts: '2025-07-02T14:25:14.068Z', vs: '0' };</script><script>regIP['73'] = { ip: '206.041.166.145', pc: '10001', ts: '2025-06-16T16:46:46.258Z', vs: '0' };</script><script>regIP['74'] = { ip: '109.042.243.150', pc: '50667', ts: '2025-08-13T14:37:57.246Z', vs: '1' };</script><script>regIP['75'] = { ip: '066.249.066.167', pc: '28202', ts: '2025-06-15T00:00:00.020Z', vs: '0' };</script><script>regIP['76'] = { ip: '017.022.253.149', pc: '20177', ts: '2025-06-22T14:24:06.685Z', vs: '0' };</script><script>regIP['77'] = { 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:none; } */
         * { 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 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);
         }

         /*
         textarea { font-size: 16px; }             *** this will disable iphone auto-zoom,
         input[type="text"] { font-size: 16px; }   *** but this one didn't work...
         */

         :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>

PLEASE RELOAD PAGE

   <script>

//*****IMPORTANT consider Date.now() for new Date(), avoids overhead of creating new object************
      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;

      //var RSVCODE = '000000';
      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 rsvT = [ { tot: 40, avl: 20 }, { tot: 42, avl: 22 } ];
//var prsv = rsvT[1];
//alert(prsv.tot + ', ' + prsv.avl);
//prsv.avl--;
//alert(rsvT[1].avl);

      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: '' };

      // StateVars removed from use 3 Aug 2025, but plan to reinstate for repeat users (even if iOSreload remains false permanently)
      var gstat      = { ndx: 0, vplay: false, vtime: 0 };
      var StateVars  = { time: null, ip: null, scrY: [0, 0], lang: 0, gst: gstat, rsvI: rsvInfo };


      // May 2025, six pages (chart used only for iOS rotate-reloads)
      // June 2025, seven pages
      // 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


      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 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;

      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 $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 = 12;

      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"],
//      ["Sunbathing",                                             //
//       "Zonnebaden" ],
//      ["Relaxing",                                               //
//       "Ontspanning" ],
//      ["Snorkeling",                                             // 
//       "Snorkelen" ],
//      ["Sea Play",                                               //
//       "Zee Spelen" ],
//      ["Dining",                                                 //
//       "Dineren" ],
//      ["Swimming",                                               //
//       "Zwemmen" ],
//      ["Shuttle Service",                                        //
//       "Pendeldienst"  ],
//      ["Island Tour",                                            // 
//       "Eilandtour"  ],

      ["Pool & Sunbathing",                                        // TA0 = TG0 + 4
       "Zwembad & Zonnebaden" ],
      ["Food & Beverages",                                         // (1)
       "Eten en Drinken" ],
      ["Travel Day Special",                                       // (2)
       "Promotie Reisdag"  ],
      ["Snorkeling & Kayaking",                                    // (3) 
       "Snorkelen en Kajakken"  ],

      ["The Villa Experience", ""],                                // TD0 - 1
      ["At a Glance", ""],               // 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,"+
       " whatever your individual choice, and we offer an assortment of non-alcoholic beverages,"+
       " including gourmet coffee, as well as beer and wine."+
       "<br/><br/>Guests must be at least 18 years of age."+
       "<br/><br/>Free shuttle service."+
       "<br/><br/>Handicap accessible.",
       $bDay+" "+$CUR+" per gast voor de dag 9 - 18 uur, inclusief onbeperkte toegang tot het terrein"+
       " van de villa, het zwembad, en het strand, plus lunch, snacks, drankjes en andere voorzieningen."],
      ["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.",
       ""],
      ["Airport Travelers", ""],
      ["<br/>Reclaim your day! Why waste a vacation day stuck in the airport?"+
       " 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.",
       ""],
      ["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.", 
       ""],
//      ["Shuttle Service", ""],
//      ["Free shuttle service from/to airport, cruise ship docks, and area hotels."+
//       " Choose times when you make your reservation. If your shuttle plans change,"+
//       " we will make every effort to accommodate you.",
//       ""],
//      ["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."],
      ["Reservations & Refunds",
       ""],
      ["<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/>",
       " "],



      ["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" ],
      ["Guest Options",                                            // [5]
       "Gast Opties" ],
      ["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]
       "" ],
      ["Reviews",                                                  // TV0
       ""],
      ["Write a review",
       ""],
      ["See all reviews",
       ""],
      ["Home",                                                     // TF0 = TR0 + 13
       "Thuis" ],
      ["Gallery",                                                  // [1]
       "Galerij" ],
      ["Attractions",                                              // [2]
       "Activiteiten" ],
      ["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);

      // 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 AtrAutoClose = 1; // Locked in 15 May 2025
      const AtrAutoText = 1;    // Revived 28 May 2025

      const ATR = 'atr'; // not used
      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 recIndx = null; // iOS restores
      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 loadVid; // for loading first frame of video
      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 = 0, scrollWidth, pagWidth, pagHwid;
      var defWidth = [ null, null ];
      var iOSreload = false;
      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 = [];


      // 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, //dtl
               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, // gali, galv
                                              galn0, galtx, galfr, galfs; //, galtn = [];
      var atr,
          atrc, atrh, atrx, atri  = [], atrm,       // NumAtr
                            atric = [], atrit = []; // NumAtr;
      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$,
          payb,
          paybN, paybD, paybG, paybS, paybT, payb$, paybP;
      var rvw,
          rvwh, rvwr, rvwc, rvww, rvws, rvwa, rvwi,
                rvwri, rvwrn, rvwrt,          rvwii, rvwiT, rvwit, rvwiR, rvwir, rvwiN, rvwin, rvwiC, rvwic, rvwib;
      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 flg,
          flgm, flgb, flgx;
      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 Flag = { mesg: 0, elem: null }

      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;

      var galwin = [0, 0]; // on MBL turn landscape, go to top of gallery if in this (portrait) window

      var RvwOpen = 0;
      var rvwbd, rvwcy, starw, stard, starwid, starhgt;
      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 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, champagne toast, sodas, beer & wine, lunch menu and snacks.",
                          "Koffie & gebak, champagnetoost, frisdranken, Bier & wijn, lunchmenu en snacks."], 
                      ],
                      [
                         ["Free luggage storage, lockers, shuttle service, showers and changing rooms.",
                          "Gratis bagageopslag, kluisjes, pendeldienst, douches en kleedkamers."], 
                      ],
                      [
                         ["Masks and snorkels available, kayaking and easy ocean access.",
                          "Maskers en snorkels beschikbaar, kajakken en gemakkelijke toegang tot de oceaan."], 
                      ]/*,
                      [
                         ["Refreshing beverages:",          "Verfrissende drankjes:"], 
                         ["Ice water and sparkling water,", "IJswater en bruiswater,"],
                         ["Juice and sodas,",               "Sap en frisdranken,"], 
                         ["Beer, wine, and rum punch.",     "Bier, wijn en rum punch."]
                      ],
                      [
                         ["Bring your mask and fins and explore the offshore waters, "+
                          "famous for sea turtles and the many coral reefs and gorgeous tropical fish.", 
                          "Neem je masker en vinnen mee en verken de lokale wateren, "+
                          "beroemd om zijn zeeschildpadden, vele koraalriffen en prachtige tropische vissen."]
                      ],
                      [ ````````
                         ["Easy beach access for wading, swimming, and snorkeling. Or bring your favorite floatie.",
                         "Gemakkelijke toegang tot het strand om te waden, zwemmen en snorkelen. "+
                         "Of neem je favoriete float mee."]
                      ],
                      [
                         ["Coffee & pastries, afternoon snacks.", "Koffie & gebak, middagsnacks."], 
                         ["Lunch 11am - 2pm.", "Lunch: 11.00 - 14.00 uur."],
                         ["Menu includes made-to-order paninis, salads, and burgers.", 
                          "Het menu omvat panini's, salades en hamburgers die naar wens worden bereid."]
                      ],
                      [ 
                         ["Relax in our large swimming pool with its infinity edge into the blue Caribbean. "+
                          "Convenient showers and changing rooms.", 
                          "Ontspan in ons grote zwembad met een overlooprand die uitkijkt"+
                          " op het blauwe Caribische water. Gemakkelijke douches en kleedkamers."]
                      ],
                      [ 
                         ["Hourly shuttles for the airport, cruise ship docks, and area hotels. "+
                          "Plus storage for your luggage, including lockers for small items.", 
                          "Pendeldienst per uur naar de luchthaven, cruiseschipdokken en hotels in de omgeving. "+
                          "Plus opslagruimte voor uw bagage, inclusief kluisjes voor kleine spullen."]
                      ],
                      [ 
                         ["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 zoomEvent = new Event('zoom'); //https://gist.github.com/souporserious/b44ea5d04c38c2e7ff32cd1912a17cd0
      // not actually using this event, although it works, there seems no way to avoid manual client coord checking
      const swipeEvent = new CustomEvent('swipe', { detail: { message: 'swpmsg' },  EventTarget: document.body, });

      //var pgBtnL, pgBtnR;
      var pgRc = { x: 0, y:0, w:1, h:1 };
      var pinchTouch = 0;

      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 (unless iOS && iOSreload)

      imgndx = 1;
      ImageLoader();

      //if (videoTask) { videoTask = 0; VideoLoader(); } // happens only absent separate video thumbnail files

      // 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. The 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 < 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 
 { if (recIndx != null) { galleryIndx(recIndx); recIndx = null; } return; } // iOS only (reloads)
            } 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>




</html>