const gallery = document.getElementById('gallery');

// Функция для создания случайного изображения через canvas
function generateRandomImage() {
    const canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;
    const ctx = canvas.getContext('2d');

    // Заливка случайным цветом
    ctx.fillStyle = `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Рисуем несколько случайных фигур
    for (let i = 0; i < 10; i++) {
        ctx.fillStyle = `hsl(${Math.floor(Math.random() * 360)}, 60%, 50%)`;
        const x = Math.random() * canvas.width;
        const y = Math.random() * canvas.height;
        const size = Math.random() * 100 + 20;
        ctx.beginPath();
        if (Math.random() > 0.5) {
            ctx.arc(x, y, size / 2, 0, Math.PI * 2);
        } else {
            ctx.rect(x - size / 2, y - size / 2, size, size);
        }
        ctx.closePath();
        ctx.fill();
    }

    return canvas;
}

// Добавление нового блока изображений
function addImages(count = 6) {
    for (let i = 0; i < count; i++) {
        const canvas = generateRandomImage();
        gallery.appendChild(canvas);
    }
}

// Бесконечный скролл
window.addEventListener('scroll', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
        addImages();
    }
});

window.addEventListener('resize', () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
        addImages();
    }
});

// Первоначальная загрузка
while (window.innerHeight >= document.body.offsetHeight) {
    addImages();
}