animation.js

// Animation Stage Setup
const stage = document.getElementById('animation-stage');
const canvas = document.createElement('canvas');
canvas.width = stage.offsetWidth;
canvas.height = stage.offsetHeight;
stage.appendChild(canvas);
const ctx = canvas.getContext('2d');

// Menu items
const menuItems = document.querySelectorAll('.menu-item');
let currentAnimation = 'home';
let animationFrame;

// Matrix characters
const chars = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";
const drops = [];
const fontSize = 14;
const columns = canvas.width / fontSize;

// Initialize drops
for (let i = 0; i < columns; i++) {
    drops[i] = Math.floor(Math.random() * -20);
}

// Create floating elements
const floatingElements = [
    '💾', '📀', '🖥️', '⚡', '🌟'
].map(emoji => {
    const div = document.createElement('div');
    div.textContent = emoji;
    div.style.position = 'absolute';
    div.style.fontSize = '24px';
    div.style.userSelect = 'none';
    stage.appendChild(div);
    return {
        element: div,
        x: Math.random() * (stage.offsetWidth - 24),
        y: Math.random() * (stage.offsetHeight - 24),
        speedX: (Math.random() - 0.5) * 2,
        speedY: (Math.random() - 0.5) * 2
    };
});

// DVD Logo Animation (for Animations page)
const dvdLogo = {
    x: Math.random() * (canvas.width - 100),
    y: Math.random() * (canvas.height - 50),
    width: 100,
    height: 50,
    dx: 2,
    dy: 2,
    color: '#FF0000'
};

// Downloads Animation Setup
const downloadItems = [];
for (let i = 0; i < 10; i++) {
    downloadItems.push({
        x: Math.random() * canvas.width,
        y: -20 - Math.random() * 200,
        speed: 1 + Math.random() * 2,
        char: ['📁', '💿', '📀', '💾'][Math.floor(Math.random() * 4)]
    });
}

// Guestbook Animation Setup
const signatures = [
    "~*~*~ CoolDude2000 ~*~*~",
    ">>>>> WebMaster <<<<<",
    "...l33t h4x0r wuz here...",
    "♪♫•*¨*•.¸¸♥ Julia ♥¸¸.•*¨*•♫♪",
    "<<< Matrix Fan 1999 >>>",
    "°º¤ø,¸¸,ø¤º°`°º¤ø,¸,ø¤°º¤ø,¸¸,ø¤º°",
];

// Matrix rain animation
function drawMatrix() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';
    
    for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }
        drops[i]++;
    }
}

// DVD Logo Animation
function drawDVDLogo() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = dvdLogo.color;
    ctx.font = '30px Arial';
    ctx.fillText('DVD', dvdLogo.x, dvdLogo.y);

    dvdLogo.x += dvdLogo.dx;
    dvdLogo.y += dvdLogo.dy;

    if (dvdLogo.x <= 0 || dvdLogo.x >= canvas.width - dvdLogo.width) {
        dvdLogo.dx *= -1;
        dvdLogo.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
    if (dvdLogo.y <= 0 || dvdLogo.y >= canvas.height - dvdLogo.height) {
        dvdLogo.dy *= -1;
        dvdLogo.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
    }
}

// Downloads Animation
function drawDownloads() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = '24px Arial';
    downloadItems.forEach(item => {
        ctx.fillText(item.char, item.x, item.y);
        item.y += item.speed;
        
        if (item.y > canvas.height) {
            item.y = -20;
            item.x = Math.random() * canvas.width;
        }
    });

    // Progress bar
    ctx.fillStyle = '#00FF00';
    ctx.fillRect(50, canvas.height - 40, (canvas.width - 100) * Math.random(), 20);
    ctx.strokeStyle = '#FFFFFF';
    ctx.strokeRect(50, canvas.height - 40, canvas.width - 100, 20);
}

// Guestbook Animation
function drawGuestbook() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.font = '20px Comic Sans MS';
    signatures.forEach((sig, i) => {
        const time = Date.now() / 1000;
        const y = (canvas.height / 8) * (i + 1);
        const x = canvas.width/2 + Math.sin(time + i) * 50;
        
        ctx.fillStyle = `hsl(${(time * 50 + i * 60) % 360}, 100%, 50%)`;
        ctx.fillText(sig, x, y);
    });
}

// Animate floating elements
function animateFloating() {
    floatingElements.forEach(item => {
        item.x += item.speedX;
        item.y += item.speedY;
        
        if (item.x <= 0 || item.x >= stage.offsetWidth - 24) {
            item.speedX *= -1;
        }
        if (item.y <= 0 || item.y >= stage.offsetHeight - 24) {
            item.speedY *= -1;
        }
        
        item.element.style.transform = `translate(${item.x}px, ${item.y}px)`;
    });
}

// Mouse trail effect
const trail = [];
const maxTrail = 20;

stage.addEventListener('mousemove', (e) => {
    const rect = stage.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    
    trail.push({ x, y, age: 0 });
    if (trail.length > maxTrail) trail.shift();
});

function drawTrail() {
    ctx.save();
    trail.forEach((point, index) => {
        const size = (maxTrail - index) / 2;
        ctx.fillStyle = `rgba(255, 255, 0, ${1 - index / maxTrail})`;
        ctx.beginPath();
        ctx.arc(point.x, point.y, size, 0, Math.PI * 2);
        ctx.fill();
    });
    ctx.restore();
}

// Main animation loop
function animate() {
    if (currentAnimation === 'home') {
        drawMatrix();
        animateFloating();
    } else if (currentAnimation === 'animations') {
        drawDVDLogo();
    } else if (currentAnimation === 'downloads') {
        drawDownloads();
    } else if (currentAnimation === 'guestbook') {
        drawGuestbook();
    }
    
    drawTrail();
    animationFrame = requestAnimationFrame(animate);
}

// Menu click handlers
menuItems.forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        const text = item.textContent.toLowerCase();
        
        // Hide floating elements for non-home pages
        floatingElements.forEach(el => {
            el.element.style.display = text === 'home' ? 'block' : 'none';
        });

        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Update current animation
        currentAnimation = text;
        
        // Reset specific animations if needed
        if (text === 'downloads') {
            downloadItems.forEach(item => {
                item.y = -20 - Math.random() * 200;
            });
        }
    });
});

// Start animation
animate();

// Add some 2000s style cursor effects
document.body.style.cursor = 'url("data:image/cur;base64,AAACAAEAICAAAAAAAACoEAAAFgAAA"), auto';

// Add a "Made with LOVE" text that changes colors
const loveText = document.createElement('div');
loveText.style.position = 'fixed';
loveText.style.bottom = '10px';
loveText.style.left = '10px';
loveText.style.fontFamily = 'Comic Sans MS';
loveText.style.fontSize = '12px';
loveText.innerHTML = '❤️ Made with LOVE in 2000 ❤️';
document.body.appendChild(loveText);

let hue = 0;
setInterval(() => {
    loveText.style.color = `hsl(${hue}, 100%, 50%)`;
    hue = (hue + 5) % 360;
}, 100);