script.js

// Assembly Guide JavaScript
let currentStep = 1;
const totalSteps = 51;

// Map of available images (only step1 and step2 exist, rest are placeholders)
const availableImages = {
    1: 'assets/p9.jpg',
    2: 'assets/p10.jpg'
};

// DOM Elements
const stepDisplay = document.getElementById('stepDisplay');
const stepImage = document.getElementById('stepImage');
const placeholderText = document.getElementById('placeholderText');
const placeholderNumber = document.getElementById('placeholderNumber');
const placeholderStep = document.getElementById('placeholderStep');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const progressFill = document.getElementById('progressFill');
const indicatorsContainer = document.getElementById('indicators');

// Initialize
function init() {
    createIndicators();
    updateDisplay();
}

// Create step indicators
function createIndicators() {
    const indicatorsToShow = Math.min(totalSteps, 10);
    
    for (let i = 0; i < indicatorsToShow; i++) {
        const button = document.createElement('button');
        button.className = 'indicator';
        button.setAttribute('aria-label', `Go to step ${i + 1}`);
        button.addEventListener('click', () => {
            const targetStep = Math.floor((currentStep - 1) / 10) * 10 + i + 1;
            if (targetStep <= totalSteps) {
                goToStep(targetStep);
            }
        });
        indicatorsContainer.appendChild(button);
    }
}

// Update indicators
function updateIndicators() {
    const indicators = indicatorsContainer.children;
    const startStep = Math.floor((currentStep - 1) / 10) * 10 + 1;
    
    Array.from(indicators).forEach((indicator, i) => {
        const step = startStep + i;
        if (step > totalSteps) {
            indicator.style.display = 'none';
        } else {
            indicator.style.display = 'block';
            indicator.classList.toggle('active', step === currentStep);
        }
    });
}

// Update display
function updateDisplay() {
    // Update step counter
    stepDisplay.textContent = `Step ${currentStep}/${totalSteps}`;
    
    // Update image or placeholder
    if (availableImages[currentStep]) {
        stepImage.src = availableImages[currentStep];
        stepImage.alt = `Assembly step ${currentStep}`;
        stepImage.style.display = 'block';
        placeholderText.style.display = 'none';
    } else {
        stepImage.style.display = 'none';
        placeholderText.style.display = 'block';
        placeholderNumber.textContent = currentStep;
        placeholderStep.textContent = currentStep;
    }
    
    // Update buttons
    prevBtn.disabled = currentStep === 1;
    nextBtn.disabled = currentStep === totalSteps;
    
    // Update progress bar
    const progress = (currentStep / totalSteps) * 100;
    progressFill.style.width = `${progress}%`;
    
    // Update indicators
    updateIndicators();
}

// Go to specific step
function goToStep(step) {
    if (step >= 1 && step <= totalSteps) {
        currentStep = step;
        updateDisplay();
    }
}

// Next step
function nextStep() {
    if (currentStep < totalSteps) {
        currentStep++;
        updateDisplay();
    }
}

// Previous step
function prevStep() {
    if (currentStep > 1) {
        currentStep--;
        updateDisplay();
    }
}

// Event listeners
nextBtn.addEventListener('click', nextStep);
prevBtn.addEventListener('click', prevStep);

// Keyboard navigation
document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowRight') {
        nextStep();
    } else if (e.key === 'ArrowLeft') {
        prevStep();
    }
});

// Initialize on load
init();