script.js

//|================|
//| Script |
//|================|

// Delete Bin
const deleteBin = document.getElementById('delete-bin')

// URL Parameters
const urlParameters = new URLSearchParams(window.location.search);
const controllerConfigString = urlParameters.get('config');
const colorConfigString = urlParameters.get('color');
const kitConfigString = urlParameters.get('kit');
const descriptionConfigString = urlParameters.get('description');

// Page zoom (vh/vw layout ignores browser zoom, so we apply CSS zoom instead)
const PAGE_ZOOM_MIN = 0.5;
const PAGE_ZOOM_MAX = 3;
const PAGE_ZOOM_STEP = 0.1;
const supportsCssZoom = typeof CSS !== 'undefined' && CSS.supports('zoom', '1');
let pageZoom = 1;
let pinchStartDistance = 0;
let pinchStartZoom = 1;

function clampPageZoom(value) {
 return Math.min(PAGE_ZOOM_MAX, Math.max(PAGE_ZOOM_MIN, value));
}

function setPageZoom(zoom) {
 pageZoom = clampPageZoom(zoom);
 const root = document.documentElement;

 if (supportsCssZoom) {
 root.style.zoom = String(pageZoom);
 root.style.transform = '';
 root.style.width = '';
 } else if (pageZoom === 1) {
 root.style.zoom = '';
 root.style.transform = '';
 root.style.width = '';
 } else {
 root.style.zoom = '';
 root.style.transformOrigin = 'top center';
 root.style.transform = `scale(${pageZoom})`;
 root.style.width = `${100 / pageZoom}%`;
 }

 try {
 sessionStorage.setItem('pageZoom', String(pageZoom));
 } catch (_) {}
}

function changePageZoom(delta) {
 setPageZoom(pageZoom + delta);
}

function getTouchDistance(touches) {
 const dx = touches[0].clientX - touches[1].clientX;
 const dy = touches[0].clientY - touches[1].clientY;
 return Math.hypot(dx, dy);
}

document.addEventListener('wheel', (event) => {
 if (!event.ctrlKey && !event.metaKey) {
 return;
 }
 event.preventDefault();
 changePageZoom(event.deltaY < 0 ? PAGE_ZOOM_STEP : -PAGE_ZOOM_STEP);
}, { passive: false });

document.addEventListener('keydown', (event) => {
 if (!event.ctrlKey && !event.metaKey) {
 return;
 }
 if (event.key === '=' || event.key === '+' || event.code === 'NumpadAdd') {
 event.preventDefault();
 changePageZoom(PAGE_ZOOM_STEP);
 } else if (event.key === '-' || event.key === '_' || event.code === 'NumpadSubtract') {
 event.preventDefault();
 changePageZoom(-PAGE_ZOOM_STEP);
 } else if (event.key === '0' || event.code === 'Numpad0') {
 event.preventDefault();
 setPageZoom(1);
 }
});

document.addEventListener('touchstart', (event) => {
 if (event.touches.length === 2) {
 pinchStartDistance = getTouchDistance(event.touches);
 pinchStartZoom = pageZoom;
 }
}, { passive: true });

document.addEventListener('touchmove', (event) => {
 if (event.touches.length !== 2 || pinchStartDistance === 0) {
 return;
 }
 event.preventDefault();
 const scale = getTouchDistance(event.touches) / pinchStartDistance;
 setPageZoom(pinchStartZoom * scale);
}, { passive: false });

document.addEventListener('touchend', (event) => {
 if (event.touches.length < 2) {
 pinchStartDistance = 0;
 }
});

try {
 const storedPageZoom = parseFloat(sessionStorage.getItem('pageZoom'));
 if (!Number.isNaN(storedPageZoom)) {
 pageZoom = clampPageZoom(storedPageZoom);
 }
} catch (_) {}
setPageZoom(pageZoom);

// Mobile-specific Variables
let activeModule_mobile = null;
function isPhone() {
 return /mobile/i.test(navigator.userAgent);
}
var isAppleDevice = /Mac|iPhone|iPod|iPad/.test(navigator.platform);
if (isAppleDevice) {
 document.body.classList.add('apple-device');
}

// Check Left Array for mouseover for zIndex changes on mobile
const leftArray = document.getElementById('left-array');
leftArray.addEventListener('mouseover', function() {
 leftArray.classList.add('mouseover');
});
leftArray.addEventListener('mouseout', function() {
 leftArray.classList.remove('mouseover');
});

// Container settings
let NullContainer = false;
let containerColor = "rgb(0,0,0)";
let kit = kitConfigString === 'true';
const moduleSpriteSheetImage = new Image();
moduleSpriteSheetImage.src = 'modules/sprite.png';

// Fine-tuning controls for sprite placement/scaling.
// Supports decimal nudges for very small adjustments.
const SPRITE_TUNING = {
 module: {
 scaleX: 1,
 scaleY: 1,
 offsetXPx: 0,
 offsetYPx: 0,
 lightOffsetXPx: 0.4,
 lightOffsetYPx: 0,
 perImage: {}
 },
 container: {
 scaleX: 1,
 scaleY: 1,
 offsetXPx: 0,
 offsetYPx: 0,
 perImage: {
 'containers/angled.png': { scaleX: 1, scaleY: 1 },
 'containers/level.png': { scaleX: 1, scaleY: 1 }
 }
 }
};

function getSpriteTuning(kind, imagePath, isLight = false) {
 const base = SPRITE_TUNING[kind] || {};
 const perImage = (base.perImage && base.perImage[imagePath]) || {};
 return {
 scaleX: (perImage.scaleX ?? base.scaleX ?? 1),
 scaleY: (perImage.scaleY ?? base.scaleY ?? 1),
 offsetXPx: (perImage.offsetXPx ?? base.offsetXPx ?? 0) + (isLight ? (base.lightOffsetXPx ?? 0) : 0),
 offsetYPx: (perImage.offsetYPx ?? base.offsetYPx ?? 0) + (isLight ? (base.lightOffsetYPx ?? 0) : 0)
 };
}

function createModuleImageElement(imagePath, className) {
 const spriteMap = window.moduleSpriteMap || {};
 const spriteMeta = window.moduleSpriteSheetMeta || {};
 const spriteCoords = spriteMap[imagePath];
 const tuning = getSpriteTuning('module', imagePath, className === 'image-2');

 if (spriteCoords && spriteMeta.width && spriteMeta.height) {
 const moduleImage = document.createElement('div');
 moduleImage.classList.add(className);
 moduleImage.classList.add('module-image');

 // Render the sprite cell as a CSS background. This is resolution-independent
 // (Chrome's sub-pixel painting of a scaled overflow:hidden <img> mis-scaled the cell),
 // so the same percentages map a cell to the box identically in every browser.
 const sizeX = (spriteMeta.width / spriteCoords.w) * 100 * tuning.scaleX;
 const sizeY = (spriteMeta.height / spriteCoords.h) * 100 * tuning.scaleY;
 const posX = spriteMeta.width === spriteCoords.w
 ? 0
 : (spriteCoords.x / (spriteMeta.width - spriteCoords.w)) * 100;
 const posY = spriteMeta.height === spriteCoords.h
 ? 0
 : (spriteCoords.y / (spriteMeta.height - spriteCoords.h)) * 100;

 moduleImage.style.backgroundImage = "url('modules/sprite.png')";
 moduleImage.style.backgroundRepeat = 'no-repeat';
 moduleImage.style.backgroundSize = `${sizeX}% ${sizeY}%`;
 moduleImage.style.backgroundPosition =
 `calc(${posX}% + ${tuning.offsetXPx}px) calc(${posY}% + ${tuning.offsetYPx}px)`;

 return moduleImage;
 }

 const moduleImage = document.createElement('img');
 moduleImage.src = imagePath;
 moduleImage.draggable = false;
 moduleImage.classList.add(className);
 return moduleImage;
}

function applyModuleSpriteBackground(element, imagePath) {
 const spriteMap = window.moduleSpriteMap || {};
 const spriteMeta = window.moduleSpriteSheetMeta || {};
 const spriteCoords = spriteMap[imagePath];
 if (spriteCoords && spriteMeta.width && spriteMeta.height) {
 const tuning = getSpriteTuning('module', imagePath, false);
 const elementWidth = element.clientWidth || 1;
 const elementHeight = element.clientHeight || 1;
 const scaleX = (elementWidth / spriteCoords.w) * tuning.scaleX;
 const scaleY = (elementHeight / spriteCoords.h) * tuning.scaleY;
 element.style.backgroundImage = "url('modules/sprite.png')";
 element.style.backgroundSize = `${spriteMeta.width * scaleX}px ${spriteMeta.height * scaleY}px`;
 element.style.backgroundPosition = `${-spriteCoords.x * scaleX + tuning.offsetXPx}px ${-spriteCoords.y * scaleY + tuning.offsetYPx}px`;
 element.style.backgroundRepeat = 'no-repeat';
 return true;
 }
 return false;
}

function applyContainerSpriteBackground(element, imagePath) {
 const spriteMap = window.containerSpriteMap || {};
 const spriteMeta = window.containerSpriteSheetMeta || {};
 const spriteCoords = spriteMap[imagePath];
 if (spriteCoords && spriteMeta.width && spriteMeta.height) {
 const tuning = getSpriteTuning('container', imagePath, false);
 // Resolution-independent percentage mapping. The old version scaled by
 // element.clientWidth, but the in-container slot docks are styled before they
 // are attached to the DOM, so clientWidth was 0 and the cell rendered at its
 // natural sprite resolution. Percentages map the cell to the box regardless of
 // measurement (and identically across browsers/DPRs).
 const sX = tuning.scaleX;
 const sY = tuning.scaleY;
 const sizeX = (spriteMeta.width / spriteCoords.w) * 100 * sX;
 const sizeY = (spriteMeta.height / spriteCoords.h) * 100 * sY;
 const denomX = spriteMeta.width * sX - spriteCoords.w;
 const denomY = spriteMeta.height * sY - spriteCoords.h;
 const posX = denomX === 0 ? 0 : (spriteCoords.x * sX) / denomX * 100;
 const posY = denomY === 0 ? 0 : (spriteCoords.y * sY) / denomY * 100;
 element.style.backgroundImage = "url('containers/sprite.png')";
 element.style.backgroundSize = `${sizeX}% ${sizeY}%`;
 element.style.backgroundPosition =
 `calc(${posX}% + ${tuning.offsetXPx}px) calc(${posY}% + ${tuning.offsetYPx}px)`;
 element.style.backgroundRepeat = 'no-repeat';
 return;
 }
 element.style.backgroundImage = `url('${imagePath}')`;
 element.style.backgroundSize = 'cover';
}

function createModuleDragPreview(module) {
 const dragPreview = document.createElement('div');
 dragPreview.style.position = 'fixed';
 dragPreview.style.left = '-1000px';
 dragPreview.style.top = '-1000px';
 dragPreview.style.width = `${module.offsetWidth}px`;
 dragPreview.style.height = `${module.offsetHeight}px`;
 dragPreview.style.margin = '0';
 dragPreview.style.pointerEvents = 'none';
 dragPreview.style.overflow = 'hidden';

 const image1 = module.querySelector('.image-1');
 const imagePath = image1 && image1.classList.contains('hidden')
 ? module.dataset.imageLight || module.dataset.image
 : module.dataset.image;

 if (!applyModuleSpriteBackground(dragPreview, imagePath || '')) {
 const fallbackImage = document.createElement('img');
 fallbackImage.src = imagePath || '';
 fallbackImage.style.width = '100%';
 fallbackImage.style.height = '100%';
 fallbackImage.draggable = false;
 dragPreview.appendChild(fallbackImage);
 }

 return dragPreview;
}

function createModuleDragCanvas(module) {
 const image1 = module.querySelector('.image-1');
 const imagePath = image1 && image1.classList.contains('hidden')
 ? module.dataset.imageLight || module.dataset.image
 : module.dataset.image;
 if (!imagePath) {
 return null;
 }

 const spriteMap = window.moduleSpriteMap || {};
 const spriteCoords = spriteMap[imagePath];
 if (!spriteCoords || !moduleSpriteSheetImage.complete) {
 return null;
 }

 const width = Math.max(1, Math.round(module.offsetWidth));
 const height = Math.max(1, Math.round(module.offsetHeight));
 const pixelRatio = window.devicePixelRatio || 1;
 const canvas = document.createElement('canvas');
 canvas.width = Math.round(width * pixelRatio);
 canvas.height = Math.round(height * pixelRatio);
 canvas.style.width = `${width}px`;
 canvas.style.height = `${height}px`;

 const context = canvas.getContext('2d');
 if (!context) {
 return null;
 }

 context.scale(pixelRatio, pixelRatio);
 context.drawImage(
 moduleSpriteSheetImage,
 spriteCoords.x,
 spriteCoords.y,
 spriteCoords.w,
 spriteCoords.h,
 0,
 0,
 width,
 height
 );

 return canvas;
}

let activeModuleDragImage = null;

function hideOffscreenDragImage(element) {
 element.style.position = 'fixed';
 element.style.left = '-10000px';
 element.style.top = '0';
 element.style.pointerEvents = 'none';
 element.style.margin = '0';
}

function setModuleDragImage(event, module) {
 const offsetX = module.offsetWidth / 2;
 const offsetY = module.offsetHeight / 2;
 const dragCanvas = createModuleDragCanvas(module);
 const dragImage = dragCanvas || createModuleDragPreview(module);

 hideOffscreenDragImage(dragImage);
 document.body.appendChild(dragImage);
 event.dataTransfer.setDragImage(dragImage, offsetX, offsetY);
 activeModuleDragImage = dragImage;
}

function clearModuleDragImage() {
 if (activeModuleDragImage) {
 activeModuleDragImage.remove();
 activeModuleDragImage = null;
 }
}

function clearContainerDragUi() {
 document.querySelectorAll('.dragging2').forEach((element) => {
 element.classList.remove('dragging2');
 });
 document.querySelectorAll('.container-grid.dragging-container').forEach((grid) => {
 grid.classList.remove('dragging-container');
 });
}

function isModuleDragActive() {
 return Boolean(document.querySelector('.module.dragging'));
}



//|----------------------|
//| Load Modules |
//|----------------------|

// Add modules to Left and Right module arrays
const moduleArray_left = document.querySelector('.left-module-array');
const moduleArray_right = document.querySelector('.right-module-array');
let moduleCounter = 0;
moduleData.forEach(module => {
 /*
 Populate the left and right module docks with modules using data from moduleData.js
 moduleData is an array that contains all of the data for each module.
 name: The name of the module.
 id: The letter code for the module for things such as generating the URL code on save.
 price: The price for the module in USD.
 kit_price: The price of the module if purchased as a kit.
 image: The graphical image of the module.
 image_light: The image used when the lights are switched on.
 tooltip: The tooltip text.
 has: Functions that the module provides.
 needs: Missing functions that the module needs.
 needs_data: Boolean for if the module requests data from Simpit.
 */

 // Create the module element
 const moduleDock = document.createElement('div');
 moduleDock.classList.add('module-dock');
 moduleDock.setAttribute('data-type', 'type2');
 
 const moduleElement = document.createElement('div');
 moduleElement.classList.add('module');
 moduleElement.setAttribute('module', 'true');
 moduleElement.setAttribute('draggable', 'true');

 // Set the module ID, price, and name
 moduleElement.setAttribute('id', module.id);
 moduleElement.setAttribute('data-price', module.price);
 moduleElement.setAttribute('data-kit_price', module.kit_price);
 moduleElement.setAttribute('data-name', module.name);
 moduleElement.dataset.image = module.image;
 if (module.image_light) {
 moduleElement.dataset.imageLight = module.image_light;
 }

 // Create the module image element
 const moduleImage = createModuleImageElement(module.image, 'image-1');
 moduleElement.appendChild(moduleImage);

 // Check if the module has the image_light property for turning the lights on and off
 if (module.image_light) {
 const moduleImageLight = createModuleImageElement(module.image_light, 'image-2');
 moduleImageLight.classList.add('hidden');
 moduleElement.appendChild(moduleImageLight);
 moduleElement.classList.add('light');
 }

 // Create the module tooltip element
 const moduleTooltip = document.createElement('span');
 moduleTooltip.style.fontFamily = "Roboto, sans-serif";
 moduleTooltip.classList.add('tooltip');

 // Create the module tooltip content
 const moduleTooltipContent = document.createElement('strong');
 moduleTooltipContent.style.fontSize = '1.8vh';
 moduleTooltipContent.textContent = module.name;

 // Construct price and tooltip message
 const modulePrice = document.createElement('span');
 modulePrice.style.fontSize = '1.7vh';
 modulePrice.innerHTML = `<br>$${module.price}</br>Kit: $${module.kit_price}</br>`;
 const moduleDescription = document.createElement('span');
 moduleDescription.innerHTML = module.tooltip;

 // Add them together to form the tooltip
 moduleTooltip.appendChild(moduleTooltipContent);
 moduleTooltip.appendChild(modulePrice);
 moduleTooltip.appendChild(moduleDescription);

 // Add everything together
 moduleElement.appendChild(moduleTooltip);
 moduleDock.appendChild(moduleElement);

 // Append the module element to the container
 if (moduleCounter < 12) {
 moduleArray_left.appendChild(moduleDock);
 } else {
 moduleArray_right.appendChild(moduleDock);
 }
 moduleCounter += 1;
});



//|-------------------------|
//| Sidebar Buttons |
//|-------------------------|

// Color Picker Buttons
const colorButtons = document.querySelectorAll('.color-button');
colorButtons.forEach((button) => {
 /*
 Add buttons on the side that allow the user to change the color of the current containers.
 Uses .color-button to change the color of .container-box
 */
 button.addEventListener('click', () => {
 // Check if null container setting
 if (button.id === "NullContainer") {
 NullContainer = true;
 } else {
 NullContainer = false;
 }
 updateTotalPrice();
 const color = button.style.backgroundColor;
 const containerBoxes = document.querySelectorAll('.container-box');
 containerBoxes.forEach(containerBox => {
 containerBox.style.borderColor = color;
 })
 containerColor = color;
 });
});



//|------------------------|
//| Header Buttons |
//|------------------------|

const recommendedConfigs = [
 { name: "Jebediah's Command", config: 'z2400h1b1b4g1a3f3f5f6', color: 'rgb(0,0,0)', description: 'JebediahsCommandDescription' },
 { name: 'USS Button Box', config: 'z2300b3a4g1f3f6f5', color: 'rgb(10,136,176)', description: 'ButtonBoxDescription' },
 { name: "Keyboard's Lament", config: 'z2300b5h1b3f2a5e1', color: 'rgb(222,78,5)', description: 'KeyboardsLamentDescription' },
 { name: 'Keyboard Companion', config: 'z1200f2a5', color: 'rgb(52,38,125)', description: 'KeybCompanion1Description' },
 { name: 'Keyboard Companion 2', config: 'z1200f2g1', color: 'rgb(207,199,163)', description: 'KeybCompanion2Description' },
 { name: 'External Command Seat', config: 'z2200a5b3f4f5', color: 'rgb(202,202,202)', description: 'ExtCommandSeat1Description' },
 { name: 'External Command Seat 2', config: 'z2200g1b3f2a4', color: 'rgb(14,98,38)', description: 'ExtCommandSeat2Description' },
 { name: "Valentina's Command", config: 'z2313h1b3b5f1f6g1z2115c1a3', color: 'rgb(255,255,255)', description: 'ValentinasCommandDescription' },
 { name: 'Mission Control', config: 'z3111a1h3e1z2413g1b1h1h2d1f3a2f5z3116c1b2f6', color: 'rgb(173,22,27)', description: 'MissionControlDescription' }
];

function resetControllerBuilder(updateUrl = true) {
 const sideModuleDocks = document.querySelectorAll('.module-dock[data-type="type2"]');
 const dockedModules = document.querySelectorAll('.module-dock[data-type="type1"] .module');
 dockedModules.forEach(module => {
 for (const sideModuleDock of sideModuleDocks) {
 if (sideModuleDock.querySelectorAll('.module').length === 0) {
 sideModuleDock.appendChild(module);
 break;
 }
 }
 });

 const containerBoxes = document.querySelectorAll('.container-box');
 containerBoxes.forEach(containerBox => containerBox.remove());

 const containerGrids = document.querySelectorAll('.container-grid');
 containerGrids.forEach(containerGrid => {
 containerGrid.classList.remove('has-24child', 'has-23child', 'has-22child', 'has-12child', 'has-31child', 'has-13child', 'has-21child', 'has-11child');
 });

 const welcomeMessage = document.getElementById('welcome-message');
 welcomeMessage.style.display = '';

 const recConfigsDescriptionLabel = document.getElementById('recommended-configs-description');
 const recConfigsDescriptionWrapper = document.getElementById('recommended-configs-description-wrapper');
 recConfigsDescriptionLabel.style.visibility = 'hidden';
 recConfigsDescriptionWrapper.style.width = '';
 recConfigsDescriptionWrapper.style.top = '';
 recConfigsDescriptionWrapper.style.left = '';

 NullContainer = false;
 containerColor = "rgb(0,0,0)";
 if (kit) {
 kit = false;
 kitSwitch.classList.remove('active');
 }

 updateTotalPrice();

 if (updateUrl) {
 history.replaceState({}, '', window.location.pathname);
 }
}

function applyRecommendedConfig(recommendedConfig) {
 resetControllerBuilder(false);
 loadController(recommendedConfig.config, recommendedConfig.color, null, recommendedConfig.description);
 const params = new URLSearchParams();
 params.set('config', recommendedConfig.config);
 params.set('color', recommendedConfig.color);
 params.set('description', recommendedConfig.description);
 history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
}

// Recommended Configurations Button
const recommendedConfigsButton = document.getElementById('recommendedConfigs');
recommendedConfigsButton.addEventListener('click', function() {
 /*
 Add a popup that displays a list of buttons that populate the canvas with pre-designed configurations
 */
 Swal.fire({
 title: 'Recommended Configurations',
 html: recommendedConfigs
 .map((config, index) => `<button class="btn btn-primary text-center rec-config-btn" data-rec-index="${index}">${config.name}</button>`)
 .join(''),
 showCancelButton: true,
 cancelButtonText: 'Cancel',
 buttonsStyling: false,
 showConfirmButton: false,
 customClass: {
 cancelButton: 'btn btn-danger',
 },
 didOpen: () => {
 document.querySelectorAll('.rec-config-btn').forEach(button => {
 button.addEventListener('click', () => {
 const index = Number(button.dataset.recIndex);
 const recommendedConfig = recommendedConfigs[index];
 if (recommendedConfig) {
 applyRecommendedConfig(recommendedConfig);
 Swal.close();
 }
 });
 });
 }
 });
});

const resetButton = document.getElementById('reset');
resetButton.addEventListener('click', function() {
 resetControllerBuilder(true);
});

// Main Price Display
const priceDisplay = document.getElementById('price-display')
function updateTotalPrice() {
 /*
 Show the price in big, bold text near the top right of the canvas.
 Uses .container-box and .module within .module-dock[data-type="type1"] to acquire data.
 */
 let totalPrice = 0

 // Calculate price for containers
 const containerBoxes = document.querySelectorAll('.container-box');
 containerBoxes.forEach(containerBox => {
 let priceOfContainer = 0;
 if (NullContainer) {
 priceOfContainer = parseFloat(containerBox.dataset.null_acryl__price);
 } else {
 priceOfContainer = parseFloat(containerBox.dataset.price);
 }
 totalPrice += priceOfContainer;
 });

 // Calculate price for modules
 const containerModuleDocks = document.querySelectorAll('.module-dock[data-type="type1"]');
 containerModuleDocks.forEach(containerModuleDock => {
 const dockedModules = containerModuleDock.querySelectorAll('.module');
 dockedModules.forEach(dockedModule => {
 let priceOfModule = 0;
 if (kit) {
 priceOfModule = parseFloat(dockedModule.dataset.kit_price);
 } else {
 priceOfModule = parseFloat(dockedModule.dataset.price);
 }
 totalPrice += priceOfModule;
 });
 });

 // Display price
 priceDisplay.innerText = `Total: $${parseInt(totalPrice.toFixed(2))}`;
};

// Build the config string for firmware generation
function getConfigStringFromCanvas() {
 const urlConfigCode = [];
 const containerBoxes = document.querySelectorAll('.container-box');
 const containerSizeMap = {
 'one-one': 'z11',
 'one-two': 'z12',
 'two-one': 'z21',
 'three-one': 'z31',
 'one-three': 'z13',
 'two-two': 'z22',
 'two-three': 'z23',
 'two-four': 'z24'
 };
 containerBoxes.forEach(containerBox => {
 for (const className in containerSizeMap) {
 if (containerBox.id.includes(className)) {
 urlConfigCode.push(containerSizeMap[className]);
 break;
 }
 }
 const containerLocation = containerBox.parentNode;
 if (containerLocation.id.includes('canvas')) {
 urlConfigCode.push('00');
 } else {
 urlConfigCode.push(containerLocation.id);
 }
 const modules = containerBox.querySelectorAll('.module');
 modules.forEach(module => {
 urlConfigCode.push(module.id);
 });
 });
 return urlConfigCode.join('');
}

// Save Button
const saveButton = document.getElementById('save')
saveButton.addEventListener('click', function() {
 /*
 Create a popup to save the current config to a url and copy it to the clipboard
 Uses .container-box to get current containers and then locates all .modules inside.
 */
 const configPart = getConfigStringFromCanvas();
 const containerBoxes = document.querySelectorAll('.container-box');
 const color = containerBoxes[0] ? containerBoxes[0].style.borderColor : null;
 const colorParam = color ? `&color=${color.replace(/\s/g, '')}` : '&color=rgb(0,0,0)';
 const kitParam = kit ? '&kit=true' : '';
 const url = "https://untitledspacecraft.com/?config=" + configPart + colorParam + kitParam;

 navigator.clipboard.writeText(url).then(() => {
 Swal.fire({
 title: 'Copied!',
 html: '<div>This configuration URL has been copied to your clipboard!<br><br>' + url + '</div>',
 icon: 'success',
 buttonsStyling: false,
 showConfirmButton: false,
 timer: 3000,
 });
 }).catch(() => {
 alert("Failed to copy the configuration URL to your clipboard. Please copy it manually: \n\n" + url);
 });
});

// Firmware Button
async function triggerCodeGeneration() {
 const configString = getConfigStringFromCanvas();
 if (!configString) {
 Swal.fire({
 title: 'No configuration',
 text: 'Add at least one container with modules to generate code.',
 icon: 'warning',
 buttonsStyling: false,
 customClass: { confirmButton: 'btn btn-primary' },
 });
 return;
 }
 if (typeof window.generateArduinoZipFromConfig !== 'function') {
 Swal.fire({
 title: 'Code generator not loaded',
 text: 'The code generation script could not be loaded. Please refresh the page.',
 icon: 'error',
 buttonsStyling: false,
 customClass: { confirmButton: 'btn btn-primary' },
 });
 return;
 }
 try {
 const zipBlob = await window.generateArduinoZipFromConfig(configString);
 const url = URL.createObjectURL(zipBlob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'arduino_project_' + new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19) + '.zip';
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
 URL.revokeObjectURL(url);
 Swal.fire({
 title: 'Download started',
 text: 'Your firmware has been downloaded.',
 icon: 'success',
 buttonsStyling: false,
 customClass: { confirmButton: 'btn btn-primary' },
 });
 } catch (err) {
 Swal.fire({
 title: 'Generation failed',
 text: err.message || 'Could not generate code.',
 icon: 'error',
 buttonsStyling: false,
 customClass: { confirmButton: 'btn btn-primary' },
 });
 }
}

// Light Switch
const lightSwitch = document.getElementById('lights')
lightSwitch.addEventListener('click', function() {
 /*
 Button that toggles all modules with the light class
 between .image-1 and .image-2.
 */
 this.classList.toggle('light');
 const modules_with_lights = document.querySelectorAll('.module.light');
 modules_with_lights.forEach(module => {
 const image1 = module.querySelector('.image-1');
 const image2 = module.querySelector('.image-2');
 image1.classList.toggle('hidden');
 image2.classList.toggle('hidden');
 });
});

// Kit Button
const kitSwitch = document.getElementById('kit')
kitSwitch.addEventListener('click', function() {
 /*
 Button that toggles kit setting. Enabling kit shows a confirmation warning.
 */
 if (kit) {
 this.classList.remove('active');
 kit = false;
 updateTotalPrice();
 return;
 }
 this.classList.add('active');
 kit = true;
 updateTotalPrice();
 Swal.fire({
 title: 'Warning',
 width: 'min(90vw, 42em)',
 html:
 '<p style="font-family: Roboto, sans-serif; text-align: left; margin: 0; line-height: 1.45; color: #ffe600;">' +
 '<strong>Warning:</strong> selecting the kit option means you will be shipped the parts with instructions on how to build them yourself. ' +
 'This means you intend to do all of the soldering, wire cutting, firmware flashing, and testing.' +
 '</p>' +
 '<p style="font-family: Roboto, sans-serif; text-align: left; margin: 0.75em 0 0; line-height: 1.45; color: #ffffff;">' +
 'This is recommended for people who are already comfortable building electronics from scratch and can fix mistakes on their own.' +
 '</p>',
 icon: 'warning',
 showCancelButton: true,
 confirmButtonText: 'I understand',
 cancelButtonText: 'No, take me back',
 buttonsStyling: false,
 customClass: {
 popup: 'kit-warning-dialog',
 confirmButton: 'btn btn-kit-understand',
 cancelButton: 'btn btn-danger',
 },
 }).then((result) => {
 if (!result.isConfirmed) {
 kitSwitch.classList.remove('active');
 kit = false;
 updateTotalPrice();
 }
 });
});



//|------------------------|
//| Footer Buttons |
//|------------------------|

// Contact Button
const contactButton = document.getElementById('contact')
contactButton.addEventListener('click', function() {
 /*
 Display contact information as a list of buttons that save
 respective contact information to the clipboard.
 */
 Swal.fire({
 title: 'Contact Information',
 html:
 '<div style="font-family: \'Roboto\', sans-serif;">Click a button to copy.</div>' +
 '<button class="btn btn-email text-center" data-clipboard-text="untitledspacecraft.controllers@gmail.com">Email: untitledspacecraft\n.controllers@gmail.com</button>' +
 '<button class="btn btn-discord text-center" data-clipboard-text="codapopksp">Discord: codapopksp</button>' +
 '<button class="btn btn-reddit text-center" data-clipboard-text="https://www.reddit.com/user/CodapopKSP">Reddit: u/CodapopKSP</button>' +
 '<div style="font-family: \'Roboto\', sans-serif;"><br></br>You can also visit the Untitled Space Craft subreddit or Instagram for pics of completed builds.</div>' +
 '<button class="btn btn-primary text-center" onclick="window.open(\'https://www.reddit.com/r/UntitledSpaceCraft/\', \'_blank\')">Click to visit r/UntitledSpaceCraft</button>' +
 '<button class="btn btn-insta text-center" data-clipboard-text="untitled_space_craft">Instagram: untitled_space_craft</button>',
 showCancelButton: true,
 cancelButtonText: 'Cancel',
 buttonsStyling: false,
 showConfirmButton: false,
 customClass: {
 cancelButton: 'btn btn-danger',
 },

 // Copy contact info to the clipboard
 didOpen: () => {
 const clipboard = new ClipboardJS('.btn', {
 text: function(trigger) {
 return trigger.getAttribute('data-clipboard-text');
 }
 });
 clipboard.on('success', function(e) {
 e.clearSelection();
 Swal.fire({
 title: 'Copied to clipboard!',
 text: e.text,
 icon: 'success',
 buttonsStyling: false,
 showConfirmButton: false,
 timer: 1500,
 customClass: {
 container: 'copy-to-clipboard'
 }
 });
 });
 }
 });
});


// Info Button
const infoButton = document.getElementById('info')
infoButton.addEventListener('click', function() {
 /*
 Display information such as guides and other important info.
 */
 Swal.fire({
 title: 'Information',
 html:
 '<div style="font-family: \'Roboto\', sans-serif;">For more information, you may read the following guides.</div>' +
 '<button class="btn btn-primary text-center" id="starter-guide-button">Starter Guide</button>' +
 '<button class="btn btn-primary text-center" id="ordering-guide-button">Ordering and Shipping</button>' +
 '<div style="font-family: \'Roboto\', sans-serif;"><br>These controllers are compatible with both KSP1 and KSP2. The buttons and joysticks also work with other games.</div>',
 showCancelButton: true,
 cancelButtonText: 'Cancel',
 buttonsStyling: false,
 showConfirmButton: false,
 customClass: {
 cancelButton: 'btn btn-danger',
 },
 });

 // Add event listener to the Starter Guide button after it's been created
 const starterGuideButton = document.getElementById('starter-guide-button');
 starterGuideButton.addEventListener('click', function() {
 const page1 = document.getElementById('page-wrapper');
 const page2 = document.getElementById('page2-wrapper');
 page1.style.visibility = 'hidden';
 page2.style.visibility = 'visible';
 // Close the Swal.fire popup
 Swal.close();
 });

 // Add event listener to the Starter Guide button after it's been created
 const orderingGuideButton = document.getElementById('ordering-guide-button');
 orderingGuideButton.addEventListener('click', function() {
 const page1 = document.getElementById('page-wrapper');
 const page3 = document.getElementById('page3-wrapper');
 page1.style.visibility = 'hidden';
 page3.style.visibility = 'visible';
 // Close the Swal.fire popup
 Swal.close();
 });
});


// Add Container buttons
document.addEventListener('DOMContentLoaded', () => {
 /*
 Create multiple buttons using a map of container types and classes
 for adding new containers to the canvas.
 Pulls from containerData.js.
 */
 const containerTypes = [
 /*
 addButtonId, containerData, containerClass
 */
 { addButtonId: 'add-2x4', containerType: MarkV, containerClass: '.two-four', previewImage: 'containers/2x4.png' },
 { addButtonId: 'add-2x3', containerType: MarkIV, containerClass: '.two-three', previewImage: 'containers/2x3.png' },
 { addButtonId: 'add-2x2', containerType: MarkIII, containerClass: '.two-two', previewImage: 'containers/2x2.png' },
 { addButtonId: 'add-1x2', containerType: MarkIhoriz, containerClass: '.one-two', previewImage: 'containers/1x2.png' },
 { addButtonId: 'add-3x1', containerType: MarkIIvert, containerClass: '.three-one', previewImage: 'containers/3x1.png' },
 { addButtonId: 'add-1x3', containerType: MarkIIhoriz, containerClass: '.one-three', previewImage: 'containers/1x3.png' },
 { addButtonId: 'add-2x1', containerType: MarkIvert, containerClass: '.two-one', previewImage: 'containers/2x1.png' },
 { addButtonId: 'add-1x1', containerType: Mark0, containerClass: '.one-one', previewImage: 'containers/1x1.png' }
 ];

 containerTypes.forEach(container => {
 const addButton = document.getElementById(container.addButtonId);
 applyContainerSpriteBackground(addButton, container.previewImage);
 addButton.addEventListener('click', () => {
 addContainer(container.containerType, container.containerClass);
 // Remove recommended configs description
 const recConfigsDescriptionLabel = document.getElementById('recommended-configs-description');
 recConfigsDescriptionLabel.style.visibility = 'hidden';
 });
 });
});



//|--------------------|
//| Delete Bin |
//|--------------------|

// Delete Bin drag over
deleteBin.addEventListener('dragover', (event) => {
 event.preventDefault();
});


// Delete Bin touch start for mobile
deleteBin.addEventListener('touchstart', function(event) {
 /*
 Move currently selected module to any open module dock on the left or right.
 Kills active .tooltip and locates a .module-dock[data-type="type2"]
 that is empty of all .modules to append the current module.
 */
 if (activeModule_mobile) {
 let tooltip = activeModule_mobile.querySelector(".tooltip");
 tooltip.style.display = 'none';
 event.preventDefault()
 const moduleDocks = document.querySelectorAll('.module-dock[data-type="type2"]');
 for (const moduleDock of moduleDocks) {
 const emptySlot = moduleDock.querySelectorAll('.module').length < 1;
 if (emptySlot) {
 moduleDock.appendChild(activeModule_mobile);
 activeModule_mobile = null;
 break;
 }
 }
 }
 updateTotalPrice()
})


// Delete Bin drop
deleteBin.addEventListener('drop', (event) => {
 /*
 Move currently dragged module to any open module dock on the left or right
 or remove currently dragged container.
 Deletes objects with class box.
 Resets all .module to empty .module-dock[data-type="type2"]
 */
 const event_id = event.dataTransfer.getData('text/plain');
 const elementToDelete = document.getElementById(event_id);
 activeModule_mobile = null;

 // Dropped item is a container
 if (elementToDelete && (elementToDelete.classList.contains('container-box'))) {
 elementToDelete.remove();
 const moduleDocks = document.querySelectorAll('.module-dock[data-type="type2"]');

 // Move modules in deleted container back to the sides
 const droppedModules = elementToDelete.querySelectorAll('[module="true"]');
 for (const module of droppedModules) {
 for (const moduleDock of moduleDocks) {
 const emptySlot = moduleDock.querySelectorAll('.module').length < 1;
 if (emptySlot) {
 moduleDock.appendChild(module);
 break;
 }
 }
 }
 elementToDelete.remove();

 // Dropped item is a module
 } else if (elementToDelete && elementToDelete.classList.contains('module')) {
 const moduleDocks = document.querySelectorAll('.module-dock[data-type="type2"]');
 let droppedIntoContainer = false;

 // Move module back to the sides
 for (const moduleDock of moduleDocks) {
 const emptySlot = moduleDock.querySelectorAll('.module').length < 1;
 if (emptySlot) {
 moduleDock.appendChild(elementToDelete);
 elementToDelete.classList.remove("mouseover");
 let tooltip = elementToDelete.querySelector(".tooltip");
 tooltip.style.display = 'none';
 droppedIntoContainer = true;
 break;
 }
 }
 }

 // Reset grid sizing
 const containerGrids = document.querySelectorAll('.container-grid');
 containerGrids.forEach(containerGrid => {
 const containerGridChildren = containerGrid.children;
 if (containerGridChildren.length === 0) {
 containerGrid.classList.remove('has-24child');
 containerGrid.classList.remove('has-23child');
 containerGrid.classList.remove('has-22child');
 containerGrid.classList.remove('has-12child');
 containerGrid.classList.remove('has-31child');
 containerGrid.classList.remove('has-13child');
 containerGrid.classList.remove('has-21child');
 containerGrid.classList.remove('has-11child');
 }
 });
 updateTotalPrice()
});



//|-----------------|
//| Modules |
//|-----------------|

function setContainerStackZIndex(module, setOrReset) {
 /*
 Set or reset the zIndex of the container and its relatives so that
 tooltips are on top and modules can be dragged and dropped properly.
 Takes 2 parameters:
 module: the module being dragged or moused over
 setOrReset: String, to determine whether to raise or lower the zIndex
 */
 let moduleDock = module.parentNode;
 let moduleDockType = moduleDock.getAttribute("data-type");

 // Release container slot from forcing the tooltip to be on top
 if (moduleDockType === "type1") {
 let moduleDockArray = moduleDock.parentNode;
 let moduleDockArrayWrapper = moduleDockArray.parentNode;
 let containerBox = moduleDockArrayWrapper.parentNode;
 let containerGridOrCanvas = containerBox.parentNode;
 containerBox.style.zIndex = '';
 if (setOrReset == 'set') {
 containerBox.style.zIndex = 70;
 containerGridOrCanvas.style.zIndex = 70;
 } else {
 if (containerGridOrCanvas.querySelector('.container-grid-array-top')) {
 containerGridOrCanvas.style.zIndex = '10';
 } else {
 containerGridOrCanvas.style.zIndex = '';
 }
 }
 }
};

const modules = document.querySelectorAll('.module')
modules.forEach(module => {

 // Module Drag Start
 module.addEventListener('dragstart', function(event) {
 /*
 Update module class to dragging and hide tooltip.
 Reset the zIndex of the container stack.
 Highlight the Delete Bin.
 Get rid of recommended configs description.
 */
 module.classList.add('dragging');
 event.stopPropagation();
 clearContainerDragUi();
 document.body.classList.add('is-dragging-module');
 event.dataTransfer.setData('text/plain', this.id);
 event.dataTransfer.effectAllowed = 'move';
 setModuleDragImage(event, module);
 let tooltip = module.querySelector(".tooltip");
 tooltip.style.display = 'none';
 setContainerStackZIndex(module, 'reset');
 deleteBin.classList.add('highlight');
 const recConfigsDescriptionLabel = document.getElementById('recommended-configs-description');
 recConfigsDescriptionLabel.style.visibility = 'hidden';
 });
 

 // Module Drag End
 module.addEventListener('dragend', () => {
 /*
 Update module class to remove dragging.
 Reset the zIndex of the container stack.
 Remove highlight from the Delete Bin.
 */
 module.classList.remove('dragging');
 clearModuleDragImage();
 clearContainerDragUi();
 document.body.classList.remove('is-dragging-module');
 updateTotalPrice();
 setContainerStackZIndex(module, 'reset');
 deleteBin.classList.remove('highlight');
 });


 // Show tooltip
 module.addEventListener('mouseover', () => {
 /*
 Show tooltip for objects with class mouseover.
 Get the vert/horiz position of the tooltip in the window and
 draw the tooltip depending on the nearest screen edge.
 Set the zIndex of the container stack.
 Set active module for mobile.
 */
 const tooltip = module.querySelector(".tooltip");
 module.classList.add("mouseover");
 tooltip.style.display = 'block';

 // Determine location based on coordinates of the module
 const rect = module.getBoundingClientRect();
 const position = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2);
 if (position < window.innerWidth / 3) {
 tooltip.classList.remove('right');
 tooltip.classList.add('left');
 } else {
 tooltip.classList.remove('left');
 tooltip.classList.add('right');
 }

 const moduleCenterY = rect.top + (rect.height / 2);
 tooltip.classList.remove('top', 'bottom', 'far-bottom');
 if (moduleCenterY < window.innerHeight / 2) {
 tooltip.style.top = '10vh';
 } else {
 const tooltipHeightVh = (tooltip.offsetHeight / window.innerHeight) * 100;
 tooltip.style.top = `-${Math.max(12, tooltipHeightVh - 5)}vh`;
 }

 setContainerStackZIndex(module, 'set');
 activeModule_mobile = module;
 });

 

 // Hide tooltip
 module.addEventListener('mouseout', () => {
 /*
 Hide the tooltip using .tooltip from module.
 Reset the zIndex of the container stack.
 Remove class mouseover.
 */
 let tooltip = module.querySelector(".tooltip");
 tooltip.style.display = 'none';
 tooltip.style.top = '';
 module.classList.remove("mouseover");
 setContainerStackZIndex(module, 'reset');
 });
});



//|-------------------------|
//| Container Grids |
//|-------------------------|

const containerGrids = document.querySelectorAll('.container-grid-array');
containerGrids.forEach(containerGrid => {
 containerGrid.addEventListener('dragover', (event) => {
 if (!document.querySelector('.dragging2')) {
 return;
 }
 event.preventDefault();
 });


 // Determine the type of container and update the class for resizing of the grid
 containerGrid.addEventListener('drop', (event) => {
 /*
 Add .dragging2 container to .container-grid.
 Add class dropped-box to container grid to hide it.
 Resize container grid depending on which container is in it.
 Check all containers for resizing and double check class removal.
 */
 event.preventDefault();
 if (isModuleDragActive()) {
 return;
 }
 const containerBox = document.querySelector('.dragging2');
 const containerGrid = event.target.closest('.container-grid');
 if (containerGrid && containerBox) {
 containerGrid.appendChild(containerBox);
 containerBox.classList.add('dropped-box');

 const classMap = {
 /*
 container class: grid size class
 */
 'two-four': 'has-24child',
 'two-three': 'has-23child',
 'two-two': 'has-22child',
 'one-two': 'has-12child',
 'three-one': 'has-31child',
 'one-three': 'has-13child',
 'two-one': 'has-21child',
 'one-one': 'has-11child'
 };
 
 for (const className in classMap) {
 if (containerBox.classList.contains(className)) {
 containerGrid.classList.add(classMap[className]);
 break;
 }
 }
 }


 // Reset grid sizing
 const containerGrids = document.querySelectorAll('.container-grid');
 containerGrids.forEach(containerGrid => {
 const containerGridChildren = containerGrid.children;
 if (containerGridChildren.length === 0) {
 containerGrid.classList.remove('has-24child');
 containerGrid.classList.remove('has-23child');
 containerGrid.classList.remove('has-22child');
 containerGrid.classList.remove('has-12child');
 containerGrid.classList.remove('has-31child');
 containerGrid.classList.remove('has-13child');
 containerGrid.classList.remove('has-21child');
 containerGrid.classList.remove('has-11child');
 }
 });
 });
});



//|--------------------|
//| Containers |
//|--------------------|

// Add a container of a specific size
function addContainer(containerData, type) {
 /*
 Check to make sure there are no unplaced containers by comparing .dropped-box to .container-box.
 Create a new box container element using data from containerData.
 Add all event listeners for the container.
 Show a popup if there is an unplaced container.
 containerData is an array that contains all of the data for each container.
 name: The name of the container.
 class: The class for CSS reasons.
 price: The price in USD.
 null_acryl__price: The price if acrylic is not included.
 num_modules: Total number of module docks.
 num_angled: Number of angled module docks.
 num_level: [Optional] Number of level module docks.
 num_level_2: [Optional] Number of level module docks in the third row.
 horizontal_ruler: The dimensions to be displayed on the horizontal ruler.
 vertical_ruler: The dimensions to be displayed on the vertical ruler.
 */
 const existingBoxes = document.querySelectorAll('.dropped-box');
 const requiredBoxes = document.querySelectorAll('.container-box');
 if (existingBoxes.length === requiredBoxes.length) {

 // Create container
 const containerElement = document.createElement('div');
 containerElement.classList.add('container-box');

 // Choose a random ID
 const counter = Math.floor(Math.random() * 10000).toString() + type;
 containerElement.setAttribute('id', counter);

 // Add container Data
 containerElement.classList.add(containerData.class);
 containerElement.setAttribute('data-name', containerData.name);
 containerElement.setAttribute('data-price', containerData.price);
 containerElement.setAttribute('data-null_acryl__price', containerData.null_acryl__price);
 containerElement.setAttribute('data-size', containerData.num_modules);
 containerElement.setAttribute('draggable', "true");

 // Add rulers
 function addRuler(ruler_class, ruler_value) {
 const ruler = document.createElement('div');
 ruler.classList.add("ruler");
 ruler.classList.add(ruler_class);
 const rulerLabel = document.createElement('div');
 rulerLabel.classList.add(ruler_class + "-label");
 rulerLabel.classList.add("ruler-label");
 rulerLabel.textContent = ruler_value;
 ruler.appendChild(rulerLabel);
 containerElement.appendChild(ruler);
 };
 addRuler("horizontal-ruler", containerData.horizontal_ruler);
 addRuler("vertical-ruler", containerData.vertical_ruler);


 // Add module docks based on parameters from containerData
 function addModuleDockRow(num_modules, img_type) {
 /*
 Add a row of module docks to the current container.
 Takes 2 parameters:
 num_modules: Total number of module slots to create.
 img_type: The image to use, either 'angled' or 'level'.
 */
 const moduleDockRow = document.createElement('div');
 for (let i = 0; i < num_modules; i++) {
 moduleDockRow.classList.add('module-dock-row');

 const moduleDock = document.createElement('div');
 moduleDock.classList.add('module-dock');
 moduleDock.setAttribute('data-type', "type1");
 applyContainerSpriteBackground(moduleDock, `containers/${img_type}.png`);
 moduleDockRow.appendChild(moduleDock);
 }
 containerElement.appendChild(moduleDockRow);
 };

 // Add module docks
 addModuleDockRow(containerData.num_angled, "angled");
 if (containerData.num_level) {
 addModuleDockRow(containerData.num_level, "level");
 }
 if (containerData.num_level_2) {
 addModuleDockRow(containerData.num_level_2, "level");
 }

 // Add container to canvas
 const canvas = document.getElementById('canvas');
 canvas.appendChild(containerElement);
 containerElement.style.borderColor = containerColor;
 updateTotalPrice()

 
 // Handle picking up the container
 const containerBoxes = document.querySelectorAll(type);
 containerBoxes.forEach(containerBox => {

 
 containerBox.addEventListener('dragstart', (event) => {
 /*
 Ensure the ID of the dragstart element matches the same counter from creating the container.
 Store ID for some reason that seems important.
 Add class dragging2 to the element.
 Add class dragging-container to containerGrids for visibility.
 Highlight the Delete Container.
 Get rid of recommended configs description.
 */
 if (event.target.closest('.module')) {
 return;
 }
 const draggedContainer = event.currentTarget;
 if (draggedContainer.id === counter) {
 event.dataTransfer.setData('dragged', draggedContainer.id);
 draggedContainer.classList.add('dragging2');
 const id = draggedContainer.id;
 event.dataTransfer.setData('text/plain', id);
 const containerGrids = document.querySelectorAll('.container-grid')
 containerGrids.forEach(containerGrid => {
 containerGrid.classList.add('dragging-container');
 })
 deleteBin.classList.add('highlight');
 const recConfigsDescriptionLabel = document.getElementById('recommended-configs-description');
 recConfigsDescriptionLabel.style.visibility = 'hidden';
 }
 });


 // Drop the container
 containerBox.addEventListener('dragend', (event) => {
 /*
 Ensure the ID of the dragstart element matches the same counter from creating the container.
 Remove class dragging2 from the element.
 Add class dragging-container to containerGrids for visibility.
 Highlight the Delete Container.
 */
 if (event.currentTarget.id === counter) {
 event.currentTarget.classList.remove('dragging2');
 const containerGrids = document.querySelectorAll('.container-grid')
 containerGrids.forEach(containerGrid => {
 containerGrid.classList.remove('dragging-container');
 })
 deleteBin.classList.remove('highlight');
 }
 });
 });


 // Handle module docks on containers
 const moduleDocks = document.querySelectorAll('.module-dock')
 moduleDocks.forEach(moduleDock => {

 // Drag and drop controls
 moduleDock.addEventListener('dragover', e => {
 e.preventDefault()
 })


 moduleDock.addEventListener('drop', () => {
 /*
 Check if holding a module and add it to the module dock.
 Update the price display.
 */
 const draggingModule = document.querySelector('.dragging')
 if (draggingModule) {
 let childModules = moduleDock.querySelectorAll('*');
 if (childModules.length === 0) {
 moduleDock.appendChild(draggingModule);
 draggingModule.classList.remove('dragging');
 }
 }
 updateTotalPrice();
 })


 // Touch controls for mobile
 moduleDock.addEventListener('touchstart', function(event) {
 /*
 Check if there is a selected module and add it to the module dock.
 Hide the tooltip.
 Update the price.
 */
 if (activeModule_mobile) {
 let childElements = moduleDock.querySelectorAll('*');
 if (childElements.length === 0) {
 moduleDock.appendChild(activeModule_mobile);
 let tooltip = activeModule_mobile.querySelector(".tooltip");
 tooltip.style.display = 'none';
 activeModule_mobile = null;
 event.preventDefault()
 updateTotalPrice()
 }
 }
 })
 })

 // Remove welcome message
 let messageElement = document.getElementById("welcome-message");
 messageElement.style.display = "none";

 // Error message if canvas is not cleared when trying to add a new container
 } else {
 Swal.fire({
 title: 'Error',
 text: 'Please drag and drop the current container either to a canvas grid or to the trash before adding a new container.',
 icon: 'error',
 showCancelButton: true,
 cancelButtonText: 'Ok',
 buttonsStyling: false,
 showConfirmButton: false,
 customClass: {
 cancelButton: 'btn btn-danger',
 },
 });
 }
}



//|------------------------|
//| URL Parameters |
//|------------------------|

// Load a controller from a valid URL
function loadController(inputData, color, kit, description) {
 /*
 Load a controller from URL config.
 Takes two parameters:
 inputData: The URL code for the controller configuration.
 color: The color of the container.
 Add a container to the canvas based on numerical address.
 z[size][address] - Size and Address are both two digits.
 Update price.
 */
 let importConfig = inputData;
 let startIndex = 0;
 let configArray = [];

 // Extract all containers from the string
 while (true) {
 const nextZIndex = importConfig.indexOf('z', startIndex + 1);
 if (nextZIndex === -1) {
 configArray.push(importConfig.substring(startIndex));
 break;
 }
 configArray.push(importConfig.substring(startIndex, nextZIndex));
 startIndex = nextZIndex;
 }


 // Parse the data from the container strings and determine the container type
 for (const config of configArray) {
 const first5Chars = config.substring(0, 5);
 const containerAddress = first5Chars.substring(1);
 const moduleArray = [];
 for (let i = 5; i < config.length; i += 2) {
 moduleArray.push(config.substring(i, i + 2));
 }
 let containerType = '';

 // Add containers based on type and address
 const containerMap = {
 /*
 container code: {container type, container data}
 */
 '11': { type: '.one-one', template: Mark0 },
 '12': { type: '.one-two', template: MarkIhoriz },
 '21': { type: '.two-one', template: MarkIvert },
 '31': { type: '.three-one', template: MarkIIvert },
 '13': { type: '.one-three', template: MarkIIhoriz },
 '22': { type: '.two-two', template: MarkIII },
 '23': { type: '.two-three', template: MarkIV },
 '24': { type: '.two-four', template: MarkV }
 };
 
 for (const prefix in containerMap) {
 if (containerAddress.startsWith(prefix)) {
 const { type, template } = containerMap[prefix];
 addContainer(template, type);
 containerType = type;
 break;
 }
 }


 // Determine the container address
 const targetContainerId = containerAddress.slice(2);
 const containers = document.querySelectorAll(containerType);
 containers.forEach(container => {
 /*
 Add container to container grid address.
 Add all modules to the container from left to right, top to bottom.
 */
 let parentContainer = container.parentNode;
 if (parentContainer.id.includes('canvas')) {
 if (targetContainerId!=='00') {
 container.classList.add('dropped-box');
 const targetContainer = document.getElementById(targetContainerId);
 targetContainer.insertAdjacentElement('beforeend', container);
 }

 // Get all modules and add them to the containers
 const modules = moduleArray.map(pair => document.getElementById(pair));
 const moduleDocks = container.querySelectorAll(`.module-dock[data-type="type1"]`);
 for (let i = 0; i < moduleArray.length; i++) {
 const module = modules[i];
 const moduleDock = moduleDocks[i];
 if (module) {
 moduleDock.appendChild(module);
 }
 }
 }

 // Set container color
 if (color) {
 container.style.borderColor = color;
 if (color === "rgb(212,212,212)") {
 NullContainer = true;
 }
 }
 })

 // Update the canvas elements as if someone dragged and dropped the containers and modules
 const containerGrids = document.querySelectorAll('.container-grid');
 containerGrids.forEach(containerGrid => {
 /*
 Check container grids for present containers.
 Update container grid class to reflect child container for resizing.
 */
 const containerGridChildren = Array.from(containerGrid.children);
 if (containerGridChildren) {
 containerGridChildren.forEach(child => {
 
 const classMap = {
 'two-four': 'has-24child',
 'two-three': 'has-23child',
 'two-two': 'has-22child',
 'one-two': 'has-12child',
 'three-one': 'has-31child',
 'one-three': 'has-13child',
 'two-one': 'has-21child',
 'one-one': 'has-11child'
 };
 
 for (const className in classMap) {
 if (child.classList.contains(className)) {
 containerGrid.classList.add(classMap[className]);
 }
 }
 })
 }
 })
 }

 // Set kit
 if (kit) {
 const kitSwitch = document.getElementById('kit')
 kitSwitch.classList.toggle('active');
 }

 updateTotalPrice();

 // Handle descriptions for the Recommended Configs
 const recConfigsDescriptionLabel = document.getElementById('recommended-configs-description');
 const recConfigsDescriptionWrapper = document.getElementById('recommended-configs-description-wrapper');
 if (description==='JebediahsCommandDescription') {
 recConfigsDescriptionLabel.innerHTML = JebediahsCommandDescription;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '75vh';
 recConfigsDescriptionWrapper.style.top = '10%';
 }
 if (description==='ButtonBoxDescription') {
 recConfigsDescriptionLabel.innerHTML = ButtonBoxDescription;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '12%';
 }
 if (description==='KeyboardsLamentDescription') {
 recConfigsDescriptionLabel.innerHTML = KeyboardsLamentDescription;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '10%';
 }
 if (description==='KeybCompanion1Description') {
 recConfigsDescriptionLabel.innerHTML = KeybCompanion1Description;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '14%';
 }
 if (description==='KeybCompanion2Description') {
 recConfigsDescriptionLabel.innerHTML = KeybCompanion2Description;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '14%';
 }
 if (description==='ExtCommandSeat1Description') {
 recConfigsDescriptionLabel.innerHTML = ExtCommandSeat1Description;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '10%';
 }
 if (description==='ExtCommandSeat2Description') {
 recConfigsDescriptionLabel.innerHTML = ExtCommandSeat2Description;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '65vh';
 recConfigsDescriptionWrapper.style.top = '12%';
 }
 if (description==='ValentinasCommandDescription') {
 recConfigsDescriptionLabel.innerHTML = ValentinasCommandDescription;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '70vh';
 recConfigsDescriptionWrapper.style.top = '52%';
 recConfigsDescriptionWrapper.style.left = '19.2%';

 }
 if (description==='MissionControlDescription') {
 recConfigsDescriptionLabel.innerHTML = MissionControlDescription;
 recConfigsDescriptionLabel.style.visibility = 'visible';
 recConfigsDescriptionWrapper.style.width = '50vh';
 recConfigsDescriptionWrapper.style.top = '52%';
 recConfigsDescriptionWrapper.style.left = '28.2%';
 }
}


// Load URL parameters
window.onload = function() {
 if (controllerConfigString) {
 if (controllerConfigString.startsWith('z')) {
 loadController(controllerConfigString, colorConfigString, kitConfigString, descriptionConfigString);
 }
 }
}



//|---------------------|
//| Page 2 and 3 |
//|---------------------|

const page2BackButtonButton = document.getElementById('back-button');
page2BackButtonButton.addEventListener('click', function() {
 const page1 = document.getElementById('page-wrapper');
 const page2 = document.getElementById('page2-wrapper');
 page1.style.visibility = 'visible';
 page2.style.visibility = 'hidden';
 
});

const page3BackButtonButton = document.getElementById('back-button-3');
page3BackButtonButton.addEventListener('click', function() {
 const page1 = document.getElementById('page-wrapper');
 const page3 = document.getElementById('page3-wrapper');
 page1.style.visibility = 'visible';
 page3.style.visibility = 'hidden';
 
});