#1 ALMOST WEEKEND
Premium screen-printed graphic apparel featuring All Events & Celebrations artworks. Handcrafted on 100% organic ring-spun cotton with ultra-durable high-density inks.
{
updateLayoverContent();
img.style.opacity = '1';
img.style.transform = 'scale(1)';
}, 150);
} else {
updateLayoverContent();
}
}
function jumpToSlide(idx) {
currentSlideIdx = idx;
selectedGarmentColor = null;
updateLayoverContent();
}
function selectGarmentSize(sz, btn) {
selectedGarmentSizeVal = sz;
document.querySelectorAll('.size-box-btn').forEach(b => b.classList.remove('active'));
if (btn) btn.classList.add('active');
}
function selectStorefrontGarmentColor(colorName, colorHex) {
selectedGarmentColor = { name: colorName, hex: colorHex };
updateLayoverContent(true);
}
function resolveMockupImage(slide, colorName) {
if (!slide || !colorName) return slide ? slide.img : '';
if (slide.colorImages && slide.colorImages[colorName]) return slide.colorImages[colorName];
const norm = colorName.toLowerCase().trim();
let res = slide.img;
if (slide.colorImages) {
if (norm.includes("navy")) res = slide.colorImages["Navy Blue"] || slide.colorImages["Navy"] || slide.colorImages["Black"];
else if (norm.includes("gray") || norm.includes("grey") || norm.includes("heather")) res = slide.colorImages["Heather Gray"] || slide.colorImages["Sport Grey"] || slide.colorImages["Dark Heather"];
else if (norm.includes("red") || norm.includes("burgundy")) res = slide.colorImages["Burgundy Red"] || slide.colorImages["Black"];
else if (norm.includes("green") || norm.includes("forest")) res = slide.colorImages["Forest Green"] || slide.colorImages["Black"];
else if (norm.includes("white")) res = slide.colorImages["White"] || slide.img;
else if (norm.includes("black")) res = slide.colorImages["Black"] || slide.img;
}
return res;
}
function formatHexColor(val, fallback = "#18181b") {
if (!val) return fallback;
let str = String(val).trim();
if (str.startsWith('linear-gradient') || str.startsWith('rgb') || str.startsWith('hsl')) return str;
if (!str.startsWith('#')) str = '#' + str;
if (/^#([0-9A-Fa-f]3|[0-9A-Fa-f]6)$/.test(str)) return str;
return fallback;
}
function updateLayoverContent(preserveColor = false) {
const slide = garmentSlides[currentSlideIdx];
const activeProduct = currentProductSelected || (window.animeProducts && window.animeProducts[0]) || null;
if (!activeProduct) return;
const titleEl = document.getElementById('layoverTitle');
const subEl = document.getElementById('layoverSub');
const modelChip = document.getElementById('layoverModelChip');
const descEl = document.getElementById('layoverDesc');
const priceEl = document.getElementById('layoverPrice');
const baseImg = document.getElementById('layoverImg');
const overlayBox = document.getElementById('layoverArtworkOverlay');
const overlayImg = document.getElementById('layoverArtworkImg');
const inlayBox = document.getElementById('layoverInlayContainer');
const inlayImg = document.getElementById('layoverInlayImg');
if (titleEl) titleEl.innerText = activeProduct.title || 'Screen Print Graphic';
if (subEl) subEl.innerText = slide.sub;
if (modelChip) modelChip.innerText = slide.model;
if (descEl) descEl.innerText = slide.desc;
if (priceEl) priceEl.innerText = slide.price;
// Color handling
if (!preserveColor || !selectedGarmentColor) {
selectedGarmentColor = (activeProduct.garmentColors && activeProduct.garmentColors[slide.model]) ?
Object.assign({}, activeProduct.garmentColors[slide.model]) : { hex: "#18181b", name: "Black" };
}
const modelColor = selectedGarmentColor;
if (baseImg) baseImg.src = resolveMockupImage(slide, modelColor.name);
if (slide.inlayImages) {
const inlaySrc = slide.inlayImages[modelColor.name] || slide.inlayImages["Black"];
if (inlayImg) inlayImg.src = inlaySrc;
if (inlayBox) inlayBox.style.display = 'flex';
} else {
if (inlayBox) inlayBox.style.display = 'none';
}
const colorBadgeEl = document.getElementById('layoverColorBadge');
if (colorBadgeEl) {
colorBadgeEl.innerText = `${(modelColor.name || 'BLACK').toUpperCase()} GARMENT${slide.model === "ZIP HOODIE" ? " (BACK PRINT)" : ""}`;
colorBadgeEl.style.backgroundColor = modelColor.hex === "#ffffff" ? "#f1f3f5" : modelColor.hex;
colorBadgeEl.style.color = (modelColor.hex === "#ffffff" || modelColor.hex === "#94a3b8" || modelColor.hex === "#cbd5e1" || modelColor.hex === "#f8f9fa") ? "#000000" : "#ffffff";
}
// Interactive color swatches
const swatchesEl = document.getElementById('layoverColorSwatches');
const blankModelObj = window.GarmentBlanksRegistry ? GarmentBlanksRegistry.getModel(slide.model) : null;
if (swatchesEl) {
if (blankModelObj && blankModelObj.colors) {
const colorEntries = Object.entries(blankModelObj.colors);
swatchesEl.innerHTML = colorEntries.map(([colName, colData]) => {
const isSelected = (modelColor.name && modelColor.name.toLowerCase() === colName.toLowerCase()) ||
(modelColor.hex && modelColor.hex.toLowerCase() === colData.hex.toLowerCase());
const inStock = colData.inStock !== false;
const borderStyle = colData.hex.toLowerCase() === '#ffffff' ? 'border: 1px solid #cbd5e1;' : '';
return ``;
}).join('');
} else {
swatchesEl.innerHTML = '';
}
}
// Dots
for (let i = 0; i < 6; i++) {
const dot = document.getElementById('dot-' + i);
if (dot) dot.classList.toggle('active', i === currentSlideIdx);
}
// Artwork overlay
if (activeProduct && activeProduct.src) {
let src = activeProduct.src;
if (!src.startsWith('http') && !src.startsWith('/')) {
src = '../../' + src.replace(/^\/+/, '');
}
if (overlayImg) overlayImg.src = src;
if (overlayBox) overlayBox.style.display = 'flex';
const currentFrame = (window.GarmentBlanksRegistry && GarmentBlanksRegistry.getProductFrame)
? GarmentBlanksRegistry.getProductFrame(activeProduct)
: (activeProduct.frame || 'none');
const frameWrapper = document.getElementById('layoverFrameWrapper');
const frameOverlayImg = document.getElementById('layoverFrameOverlayImg');
if (frameWrapper) frameWrapper.setAttribute('data-frame', currentFrame);
if (frameOverlayImg) {
const frameObj = (window.GarmentBlanksRegistry && GarmentBlanksRegistry.getFrame)
? GarmentBlanksRegistry.getFrame(currentFrame)
: null;
const frameSrc = frameObj ? (frameObj.src || frameObj.img) : '';
if (frameSrc) {
frameOverlayImg.src = frameSrc.startsWith('http') ? frameSrc : ('../../' + frameSrc.replace(/^\/+/, ''));
frameOverlayImg.style.display = 'block';
} else {
frameOverlayImg.src = '';
frameOverlayImg.style.display = 'none';
}
}
if (window.GarmentBlanksRegistry) {
const placement = GarmentBlanksRegistry.getProductPlacement(activeProduct, slide.model);
GarmentBlanksRegistry.applyPlacementToElement(overlayBox, placement);
}
}
}
function voteAnimeProduct(idx, event) {
if (event) { event.preventDefault(); event.stopPropagation(); }
openAnimeGarmentLayover(idx);
}
function openBlankSpecModal() {
const m = document.getElementById('blankSpecModal');
if (m) m.classList.add('active');
}
function closeBlankSpecModal() {
const m = document.getElementById('blankSpecModal');
if (m) m.classList.remove('active');
}
function openCartDrawer() {
const d = document.getElementById('cartDrawer');
const b = document.getElementById('cartDrawerBackdrop');
if (d) d.classList.add('active');
if (b) b.classList.add('active');
}
function closeCartDrawer() {
const d = document.getElementById('cartDrawer');
const b = document.getElementById('cartDrawerBackdrop');
if (d) d.classList.remove('active');
if (b) b.classList.remove('active');
}
function addLayoverToCart() {
if (!currentProductSelected) return;
const slide = garmentSlides[currentSlideIdx];
const item = {
id: currentProductSelected.id + '_' + slide.model.replace(/\s+/g, '_') + '_' + selectedGarmentSizeVal,
productId: currentProductSelected.id,
title: currentProductSelected.title,
model: slide.model,
size: selectedGarmentSizeVal,
color: selectedGarmentColor ? selectedGarmentColor.name : 'Black',
price: parseFloat(slide.price.replace('€', '')),
src: currentProductSelected.src
};
consumerCart.push(item);
updateCartDisplay();
closeGarmentLayover();
openCartDrawer();
}
function updateCartDisplay() {
const b = document.getElementById('cartCount');
if (b) b.innerText = consumerCart.length;
const title = document.getElementById('cartDrawerCountTitle');
if (title) title.innerText = `Your Cart (${consumerCart.length})`;
const list = document.getElementById('cartDrawerItems');
const subtotal = document.getElementById('cartDrawerSubtotal');
if (!list) return;
if (consumerCart.length === 0) {
list.innerHTML = 'Your cart is empty.