"use strict";
// Variables for global usage
const zLevelHide = 16;
const zoomLevelToRotate = 19;
const mapRotateDegrees = 90;
let disableClicks = false;
let lotAndFloorplanData = {};
const baseUrl = 'https://jekyllseasideretreat.com/'; // Replace with your actual domain
const theme = 'seasideretreat';
let map;
let salesCenterLat = 31.040952;
let salesCenterLng = -81.414055;
const initialZoom = 11;
const targetZoom = 18;
const animationDelay = 1000;
const cookieName = "mapZoomPlayed";
let zoomLevel = initialZoom;
function initMap() {
const centerLat = 31.03988;
const centerLng = -81.41382;
const mapCenter = new google.maps.LatLng(centerLat, centerLng);
const siteSVG = document.querySelector('#siteplanSVG');
const siteMapBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.0384, -81.41474),
new google.maps.LatLng(31.04132, -81.41264)
);
const mapOptions = {
zoom: initialZoom,
center: mapCenter,
scrollwheel: false,
mapTypeControl: true,
fullscreenControl: false,
streetViewControl: false,
mapId: 'ae63ecc734886ff6'
};
map = new google.maps.Map(document.getElementById('map_canvas_full'), mapOptions);
class sitePlanSVGOverlay extends google.maps.OverlayView {
constructor(bounds, svg, map) {
super();
this.bounds = bounds;
this.svg = svg;
this.map = map;
this.setMap(map);
}
onAdd() {
const panes = this.getPanes();
panes.overlayMouseTarget.appendChild(this.svg);
this.svg.style.display = 'block';
this.svg.style.position = 'absolute';
this.svg.style.zIndex = 10;
this.attachEvents();
}
attachEvents() {
const lotElements = this.svg.querySelectorAll('[id*="Lot"]');
lotElements.forEach(el => {
el.addEventListener('click', (e) => {
handleLotClick(e, el);
});
});
}
draw() {
const projection = this.getProjection();
const sw = projection.fromLatLngToDivPixel(this.bounds.getSouthWest());
const ne = projection.fromLatLngToDivPixel(this.bounds.getNorthEast());
Object.assign(this.svg.style, {
left: `${sw.x}px`,
top: `${ne.y}px`,
width: `${ne.x - sw.x}px`,
height: `${sw.y - ne.y}px`
});
}
show() {
this.svg.style.display = 'block';
}
hide() {
this.svg.style.display = 'none';
}
}
const sitePlanOverlay = new sitePlanSVGOverlay(siteMapBounds, siteSVG, map);
handleMapEvents(map, sitePlanOverlay);
addTreesOverlay();
if (!getCookie(cookieName)) {
setTimeout(() => {
animateZoom(zoomLevel, targetZoom);
}, animationDelay);
setCookie(cookieName, "true", 5); // Set the cookie for 5 days
} else {
map.setZoom(targetZoom);
}
}
function animateZoom(currentZoom, finalZoom) {
let zoom = currentZoom;
// Create an interval to increase the zoom level gradually
const interval = setInterval(() => {
if (zoom >= finalZoom) {
clearInterval(interval);
} else {
zoom += .1; // Increment the zoom value (Adjust for smoother/slower zoom)
map.setZoom(Math.round(zoom));
}
}, 100); // Adjust interval time for the desired animation speed
}
function stepZoom() {
if (zoomLevel >= targetZoom) {
map.setZoom(targetZoom);
} else {
zoomLevel += 0.05; // Increment the zoom value for smoother zoom
map.setZoom(Math.round(zoomLevel));
requestAnimationFrame(stepZoom);
}
}
function loadGoogleMapsAPI() {
const apiKey = 'AIzaSyAwiTTETlNIim29ien_PiMWP30pnXKNAoc'; // Replace with your actual Google Maps API key
const script = document.createElement('script');
script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=initMap`;
script.async = true;
script.defer = true;
document.head.appendChild(script);
}
if (typeof google === 'undefined' || typeof google.maps === 'undefined') {
loadGoogleMapsAPI();
} else {
initMap();
}
function handleMapEvents(map, overlay) {
google.maps.event.addListener(map, 'zoom_changed', () => {
const zoomLevel = map.getZoom();
console.log('zoomLevel',zoomLevel);
/*if (zoomLevel >= zLevelHide) {
overlay.show();
} else {
overlay.hide();
}*/
});
}
async function getLotsAndFloorplans(phase = 0) {
try {
const url = new URL(`${baseUrl}/themes/${theme}/modules/siteplan/siteplan.cfc?method=getLotsAndFloorplans`);
url.searchParams.append('phase', phase);
const response = await fetch(url.toString(), {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const lot_data = await response.json();
return lot_data;
} catch (error) {
console.error('Failed to fetch lots and floorplans:', error);
return null;
}
}
getLotsAndFloorplans().then(data => {
lotAndFloorplanData = JSON.parse(data);
setLotStatus();
}).catch(error => {
console.error('Error fetching data:', error);
});
function setLotStatus() {
lotAndFloorplanData.lots.forEach(lot => {
$('#Lot' + lot.lotNumber).attr("class", lot.lotSalesStatus);
});
}
function handleLotClick(e, element) {
e.stopPropagation(); 
if (!disableClicks) {
createAndShowLotModal(element.id);
}
}
function createAndShowLotModal(lotNumber) {
const lotInfo = getLotByNumber(lotAndFloorplanData, lotNumber.replace('Lot', ''));
if (lotInfo) {
const lotSize = Number(lotInfo.lotSize).toLocaleString();
$('.modal').remove();
const modalContent = `
<div class="lot-info">
<div class="lot-info-sidebar">
<div class="badge">Home Site</div>
<div class="lot-number">
<h3>${lotInfo.lotNumber}</h3>
</div>
<div class="lot-specs">
${lotSize ? `<h5>${lotSize} Sq Ft</h5>` : ''}
</div>
</div>
<div class="lot-info-main">
<h3>Floor Plans</h3>
<h5>Available for Home Site ${lotInfo.lotNumber}</h5>
<div class="row floor-plans">${generateFloorPlanCards(lotInfo.lotFloorPlans)}</div>
</div>
</div>
`;
const modalHtml = `
<div class="modal fade siteplan" id="lotModal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<button type="button" class="btn-close close" data-bs-dismiss="modal"></button>
<div class="modal-body">
${modalContent}
</div>
</div>
</div>
</div>
`;
$('body').append(modalHtml);
$('#lotModal').modal('show');
}
}
function generateFloorPlanCards(floorPlans) {
let floorPlanRow = ``;
floorPlans.forEach(plan => {
if (plan != null) {
const heatedSqFt = Number(plan.floorHeatedSqFt).toLocaleString();
const totalSqFt = plan.floorTotalSqFt ? Number(plan.floorTotalSqFt).toLocaleString() : 0;
const cardHtml = `
<div class="col-12 col-lg-6 col-xl-4">
<div class="card">
<img src="${plan.floorPlanThumbnail}" alt="${plan.floorPlanName}" class="card-img-top">
<div class="card-body">
<div class="card-title">
<h5>${plan.floorPlanName}</h5>
<h6>${heatedSqFt} Heated SqFt ${totalSqFt != '' ? `<small>|</small> ${totalSqFt} Total SqFt` : ``}</h6>
</div>
<ul class="home-stats">
<li class="home-stats-icon bed">${plan.floorPlanBeds} Beds</li>
<li class="home-stats-icon bath">${plan.floorPlanBaths} Baths</li>
<li class="home-stats-icon half-bath">${plan.floorPlanHalfBaths} Half Bath</li>
<li class="home-stats-icon stories">${plan.floorPlanStories} Stories</li>
</ul>
<button data-floor-plan-id="${plan.floorPlanID}" class="btn btn-primary btn-floor-plan">See Details</button>
</div>
</div>
</div>
`;
floorPlanRow += cardHtml;
}
});
return floorPlanRow;
}
// Add event listener once for floor plan buttons
$(document).on('click', '.btn-floor-plan', function (e) {
const floorPlanId = $(this).data('floor-plan-id');
createAndShowFloorPlanModal(floorPlanId);
});
function createAndShowFloorPlanModal(floorPlanId) {
const getFloorPlanDetails = getFloorPlanById(lotAndFloorplanData, floorPlanId);
if (getFloorPlanDetails) {
$('.floorplan-modal').remove();
const heatedSqFt = Number(getFloorPlanDetails.floorHeatedSqFt).toLocaleString();
const floorPlanDetailsHTML = `
<div class="floorplan-modal">
<div class="modal fade" id="floorPlanModal" tabindex="-1" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<button type="button" class="btn-close close" data-bs-dismiss="modal"></button>
<div class="modal-body">
<div class="floorplan-title">
${getFloorPlanDetails.floorBasePrice > 0 ? `<h5>Starting at $${getFloorPlanDetails.floorBasePrice}</h5>` : `<h5>Pricing Coming Soon</h5>`}
<h1>${getFloorPlanDetails.floorPlanName}</h1>
<ul class="home-stats">
${getFloorPlanDetails.floorPlanBeds ? `<li class="home-stats-icon bed">${getFloorPlanDetails.floorPlanBeds} Beds</li>` : ''}
${getFloorPlanDetails.floorPlanBaths ? `<li class="home-stats-icon bath">${getFloorPlanDetails.floorPlanBaths} Baths</li>` : ''}
${getFloorPlanDetails.floorPlanHalfBaths ? `<li class="home-stats-icon half-bath">${getFloorPlanDetails.floorPlanHalfBaths} Half Baths</li>` : ''}
${getFloorPlanDetails.floorPlanStories ? `<li class="home-stats-icon stories">${getFloorPlanDetails.floorPlanStories} Stories</li>` : ''}
${heatedSqFt ? `<li class="home-stats-icon sqft">${heatedSqFt} Heated SqFt</li>` : ''}
</ul>
</div>
<div class="floorplan-image-description">
<div class="floorplan-elevation">
<img src="${getFloorPlanDetails.floorPlanThumbnail}" alt="" class="img-responsive" />
${getFloorPlanDetails.floorPlanDownload != '' ? `<a href="${getFloorPlanDetails.floorPlanDownload}" class="btn btn-primary btn-download-pdf">Download a PDF of this floor plan</a>` : ``}
</div>
<div class="floorplan-description">
<div>${getFloorPlanDetails.floorPlanDetails}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
$('body').append(floorPlanDetailsHTML);
$('#floorPlanModal').modal('show');
$('#floorPlanModal').on('click', '.close', function () {
$('#floorPlanModal').modal('hide');
});
}
}
function getLotByNumber(data, lotNumber) {
const lots = data.lots;
for (let lot of lots) {
if (lot.lotNumber === lotNumber) {
return lot;
}
}
return null;
}
function getFloorPlanById(data, floorPlanId) {
for (let lot of data.lots) {
for (let floorPlan of lot.lotFloorPlans) {
if (floorPlan.floorPlanID === floorPlanId) {
return floorPlan;
}
}
}
return null;
}
function addTreesOverlay() {
var srcImage = `/themes/${theme}/modules/siteplan/images/tree-group.svg`;
const treeBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(31.037261, -81.418090), // Southwest corner
new google.maps.LatLng(31.043824, -81.413144) // Northeast corner
);
let treesOverlay = new google.maps.GroundOverlay(srcImage,treeBounds);
treesOverlay.setMap(map);
google.maps.event.addListenerOnce(map, 'idle', function(){
treesOverlay.setOptions({ zIndex: 1000 });
}); 
}//// end addTreesOverlay
function displayMapInfo(info) {
const div = document.getElementById('map-info');
console.log(div);
if (div != null){
div.innerHTML += info + '<br>';
}
}
function setCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') {
c = c.substring(1);
}
if (c.indexOf(cname) === 0) {
return c.substring(cname.length, c.length);
}
}
return "";
}