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/step1.jpg',
    2: 'assets/step2.jpg',
    3: 'assets/step3.jpg',
    4: 'assets/step4.jpg',
    5: 'assets/step5.jpg',
    6: 'assets/step6.jpg',
    7: 'assets/step7.jpg',
    8: 'assets/step8.jpg',
    9: 'assets/step9.jpg',
    10: 'assets/step10.jpg',
    11: 'assets/step11.jpg',
    12: 'assets/step12.jpg',
    13: 'assets/step13.jpg',
    14: 'assets/step14.jpg',
    15: 'assets/step15.jpg',
    16: 'assets/step16.jpg',
    17: 'assets/step17.jpg',
    18: 'assets/step18.jpg',
    19: 'assets/step19.jpg',
    20: 'assets/step20.jpg',
    21: 'assets/step21.jpg',
    22: 'assets/step22.jpg',
    23: 'assets/step23.jpg',
    24: 'assets/step24.jpg',
    25: 'assets/step25.jpg',
    26: 'assets/step26.jpg',
    27: 'assets/step27.jpg',
    28: 'assets/step28.jpg',
    29: 'assets/step29.jpg',
    30: 'assets/step30.jpg',
    31: 'assets/step31.jpg',
    32: 'assets/step32.jpg',
    33: 'assets/step33.jpg',
    34: 'assets/step34.jpg',
    35: 'assets/step35.jpg',
    36: 'assets/step36.jpg',
    37: 'assets/step37.jpg',
    38: 'assets/step38.jpg',
    39: 'assets/step39.jpg',
    40: 'assets/step40.jpg',
    41: 'assets/step41.jpg',
    42: 'assets/step42.jpg',
    43: 'assets/step43.jpg',
    44: 'assets/step44.jpg',
    45: 'assets/step45.jpg',
    46: 'assets/step46.jpg',
    47: 'assets/step47.jpg',
    48: 'assets/step48.jpg',
    49: 'assets/step49.jpg',
    50: 'assets/step50.jpg',
    51: 'assets/step51.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();