app.js

// --- Music Player Logic ---
document.addEventListener('DOMContentLoaded', function () {
  const audioPlayer = document.getElementById('audio-player');
  const playPauseBtn = document.getElementById('play-pause-btn');
  const songSelect = document.getElementById('song-select');
  const volumeBar = document.getElementById('volume-bar');
  let isPlaying = false;

  const playPauseIcon = document.getElementById('play-pause-icon');
  const playIconSrc = 'assets/enable-sound.png';
  const pauseIconSrc = 'assets/silent.png';

  function setPlayIcon() {
    playPauseIcon.src = playIconSrc;
    playPauseIcon.alt = 'Play';
    playPauseIcon.style.display = 'block';
  }
  function setPauseIcon() {
    playPauseIcon.src = pauseIconSrc;
    playPauseIcon.alt = 'Pause';
    playPauseIcon.style.display = 'block';
  }

  playPauseBtn.addEventListener('click', () => {
    if (audioPlayer.paused) {
      audioPlayer.play();
      setPauseIcon();
      isPlaying = true;
    } else {
      audioPlayer.pause();
      setPlayIcon();
      isPlaying = false;
    }
  });

  songSelect.addEventListener('change', (e) => {
    audioPlayer.src = e.target.value;
    if (isPlaying) {
      audioPlayer.play();
      setPauseIcon();
    } else {
      setPlayIcon();
    }
  });

  audioPlayer.addEventListener('ended', () => {
    audioPlayer.currentTime = 0;
    audioPlayer.play();
    setPauseIcon();
  });

  volumeBar.addEventListener('input', (e) => {
    audioPlayer.volume = e.target.value;
  });
  audioPlayer.volume = volumeBar.value;
  setPlayIcon();
});

function toggleMenu() {
  const menu = document.querySelector(".menu-links");
  const icon = document.querySelector(".hamburger-icon");
  menu.classList.toggle("open");
  icon.classList.toggle("open");
}


// --- ABOUT SECTION ANIMATION ---
window.onload = function() {
  // ABOUT tree gebruikt nu de universele updateBlockVisibility van de home tree
  // Zie code onderaan voor universele Three.js blok
}

// Timeline rendering for upcoming events
function renderTimeline() {
  fetch('events.json')
    .then(res => res.json())
    .then(events => {
      const timeline = document.getElementById('timeline-container');
      const pagination = document.getElementById('timeline-pagination');
      if (!timeline) return;
      let page = 0;
      const perPage = 4;
      function renderPage() {
        timeline.innerHTML = '';
        const start = page * perPage;
        const end = start + perPage;
        events.slice(start, end).forEach((ev, i) => {
          // Detect mobile
          const isMobile = window.innerWidth < 900;
          let fbBtnStyle = "background:none;border:none;padding:0;cursor:pointer;position:absolute;right:8px;bottom:8px;display:block;z-index:2;";
          const fbEventUrl = "https://www.facebook.com/events/1784862275764186/";
          timeline.innerHTML += `
            <div class="timeline-event">
              <div class="eventBubble" style="position:relative;${isMobile && ev.facebook ? 'cursor:pointer;' : ''}" data-fb="${ev.facebook ? fbEventUrl : ''}">
                <div class="eventTime">
                  <div class="DayDigit">${ev.date.split('-')[2]}</div>
                  <div class="Day">${ev.day}<div class="MonthYear">${ev.date.split('-')[1]}/${ev.date.split('-')[0]}</div></div>
                </div>
                <div class="eventTitle">${ev.title}</div>
                <div class="eventPlace">${ev.place}</div>
                ${ev.facebook ? `<button class='fb-event-btn' onclick='window.open("${fbEventUrl}", "_blank")' style='${fbBtnStyle}' onmouseenter='showFbInfo(this)' onmouseleave='hideFbInfo(this)'><img src='assets/facebook.png' alt='Facebook Event' style='width:28px;height:28px;vertical-align:middle;' /></button><div class='fb-info-balloon' style='display:none;position:absolute;right:40px;bottom:8px;background:#222;color:#fff;padding:6px 12px;border-radius:8px;font-size:10px;box-shadow:0 2px 8px #000;'>Event info</div>` : ''}
              </div>
              <svg class="timeline-dot-svg" height="20" width="20">
                <circle cx="10" cy="10" r="5" />
              </svg>
            </div>
          `;
        });
        // Add hover logic for eventBubble to show/hide fb-event-btn (desktop)
        setTimeout(() => {
          const isMobile = window.innerWidth < 900;
          document.querySelectorAll('.eventBubble').forEach(bubble => {
            const fb = bubble.getAttribute('data-fb');
            // On mobile: clicking the bubble opens FB event if present
            if (isMobile && fb) {
              bubble.addEventListener('click', function(e) {
                // Only trigger if not clicking the button itself
                if (!e.target.classList.contains('fb-event-btn') && !e.target.closest('.fb-event-btn')) {
                  window.open(fb, '_blank');
                }
              });
            } else {
              // Desktop: clicking the bubble does niets extra, knop blijft altijd zichtbaar
              // Geen mouseenter/mouseleave logica meer voor display
            }
          });
        }, 0);
        // Pagination controls
        if (pagination) {
          pagination.innerHTML = '';
          const prev = document.createElement('button');
          prev.textContent = '←';
          prev.style.fontSize = '2rem';
          prev.style.background = 'none';
          prev.style.border = 'none';
          prev.style.color = '#fff';
          prev.style.cursor = 'pointer';
          prev.disabled = page === 0;
          prev.onclick = () => { page--; renderPage(); };
          const next = document.createElement('button');
          next.textContent = '→';
          next.style.fontSize = '2rem';
          next.style.background = 'none';
          next.style.border = 'none';
          next.style.color = '#fff';
          next.style.cursor = 'pointer';
          next.disabled = end >= events.length;
          next.onclick = () => { page++; renderPage(); };
          pagination.appendChild(prev);
          const pageInfo = document.createElement('span');
          pageInfo.textContent = ` ${page + 1} / ${Math.ceil(events.length / perPage)} `;
          pageInfo.style.fontSize = '1.2rem';
          pageInfo.style.color = '#fff';
          pagination.appendChild(pageInfo);
          pagination.appendChild(next);
        }
      }
      renderPage();
    });
}
window.showFbInfo = function(btn) {
  const info = btn.parentElement.querySelector('.fb-info-balloon');
  if (info) info.style.display = 'block';
};
window.hideFbInfo = function(btn) {
  const info = btn.parentElement.querySelector('.fb-info-balloon');
  if (info) info.style.display = 'none';
};
window.addEventListener('DOMContentLoaded', renderTimeline);

// --- SCRATCH PAD FOR VINYL EFFECT ---
const scratchPad = document.getElementById('scratch-pad');
const scratchAudio = document.getElementById('scratch-audio');
if (scratchPad && scratchAudio) {
  const ctx = scratchPad.getContext('2d');
  let activePointerId = null;
  let lastAngle = null;

  // Sample slider werkt altijd los
  const sampleSlider = document.getElementById('scratch-sample-slider');
  const scratchSamples = [
    { src: 'assets/080232_scratch-sample-90085.mp3', name: 'Ahh' },
    { src: 'assets/scratch03.mp3', name: 'Fresh' },
    { src: 'assets/scratch10.mp3', name: 'Ah Yeah' }
  ];
  if (sampleSlider) {
    sampleSlider.addEventListener('input', function(e) {
      const idx = parseInt(e.target.value, 10);
      if (scratchSamples[idx]) {
        scratchAudio.src = scratchSamples[idx].src;
        scratchAudio.currentTime = 0;
      }
    });
  }

  function drawVinyl(angle = 0) {
    ctx.clearRect(0, 0, scratchPad.width, scratchPad.height);
    const img = new Image();
    img.src = 'assets/vinyl.png';
    img.onload = function() {
      ctx.save();
      ctx.translate(130, 130);
      ctx.rotate(angle);
      ctx.drawImage(img, -130, -130, 260, 260);
      ctx.restore();
    };
  }
  drawVinyl();

  function getAngle(x, y) {
    const rect = scratchPad.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    return Math.atan2(y - cy, x - cx);
  }

  function playScratch() {
    scratchAudio.currentTime = 0;
    scratchAudio.play();
  }

  function stopScratch() {
    scratchAudio.pause();
    scratchAudio.currentTime = 0;
  }

  // Multitouch: gebruik pointer events
  scratchPad.addEventListener('pointerdown', function(e) {
    // Alleen starten als er nog geen andere pointer actief is op het canvas
    if (activePointerId === null) {
      activePointerId = e.pointerId;
      lastAngle = getAngle(e.clientX, e.clientY);
      scratchPad.setPointerCapture(e.pointerId);
      scratchPad.style.cursor = "grabbing";
      e.preventDefault();
    }
  });
  scratchPad.addEventListener('pointermove', function(e) {
    if (e.pointerId !== activePointerId) return;
    const angle = getAngle(e.clientX, e.clientY);
    drawVinyl(angle);
    if (lastAngle !== null && Math.abs(angle - lastAngle) > 0.1) {
      playScratch();
    }
    lastAngle = angle;
    e.preventDefault();
  });
  scratchPad.addEventListener('pointerup', function(e) {
    if (e.pointerId !== activePointerId) return;
    activePointerId = null;
    lastAngle = null;
    drawVinyl();
    scratchPad.style.cursor = "grab";
    stopScratch();
    e.preventDefault();
  });
  scratchPad.addEventListener('pointercancel', function(e) {
    if (e.pointerId !== activePointerId) return;
    activePointerId = null;
    lastAngle = null;
    drawVinyl();
    scratchPad.style.cursor = "grab";
    stopScratch();
    e.preventDefault();
  });
}
// --- Scratchpad toggle button ---
document.addEventListener('DOMContentLoaded', function() {
  var btn = document.getElementById('show-scratchpad-btn');
  var pad = document.getElementById('scratch-pad-container');
  var armContainer = document.getElementById('turntable-arm-container');
  var armImg = document.getElementById('turntable-arm-img');
  if (btn && pad) {
    btn.onclick = function() {
      pad.style.display = 'flex';
      btn.style.display = 'none';
      if (armContainer && armImg) {
        armContainer.style.display = 'block';
        // Start with arm at -20deg
        armImg.style.transform = 'rotate(-40deg)';
        setTimeout(function() {
          armImg.style.transform = 'rotate(-25deg)';
        }, 100); // Animate to -5deg after short delay
      }
    };
  }
});

// --- Adjust renderer pixel ratio ---
function createTree3D(containerId, texturePath) {
  const container = document.getElementById(containerId);
  if (!container) return;
  const width = container.offsetWidth;
  const height = container.offsetHeight;
  const scene = new THREE.Scene();
  const logicalHeight = 2.5;
  const logicalWidth = logicalHeight * (width / height);
  const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
  camera.position.z = 3;
  const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(width, height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2) * 0.5);
  container.appendChild(renderer.domElement);
  const rows = 12;
  const cols = 10;
  const blockW = logicalWidth / cols;
  const blockH = logicalHeight / rows;
  const blocks = [];
  const loader = new THREE.TextureLoader();
  loader.load(texturePath, function(texture) {
    texture.wrapS = THREE.ClampToEdgeWrapping;
    texture.wrapT = THREE.ClampToEdgeWrapping;
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const yFlipped = rows - 1 - y;
        const u0 = x / cols;
        const v0 = 1 - (y + 1) / rows;
        const u1 = (x + 1) / cols;
        const v1 = 1 - y / rows;
        const geometry = new THREE.PlaneGeometry(blockW, blockH, 1, 1);
        const uvs = geometry.attributes.uv;
        uvs.setXY(0, u0, v0);
        uvs.setXY(1, u1, v0);
        uvs.setXY(2, u0, v1);
        uvs.setXY(3, u1, v1);
        uvs.needsUpdate = true;
        const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });
        const mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = -logicalWidth / 2 + blockW / 2 + x * blockW;
        mesh.position.y = logicalHeight / 2 - blockH / 2 - yFlipped * blockH;
        mesh.position.z = 0;
        scene.add(mesh);
        blocks.push({ mesh, x, y: yFlipped, visible: true, glitchOffset: 0 });
      }
    }
    let mouse = { x: 0, y: 0 };
    window.addEventListener('mousemove', (e) => {
      const rect = container.getBoundingClientRect();
      mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
      mouse.y = -(((e.clientY - rect.top) / rect.height) * 2 - 1);
    });
    function updateBlockVisibility() {
      for (let i = 0; i < blocks.length; i++) {
        if (Math.random() < 0.10) {
          blocks[i].visible = false;
        } else {
          blocks[i].visible = true;
        }
      }
    }
    setInterval(updateBlockVisibility, 400);
    function updateGlitch() {
      for (let i = 0; i < blocks.length; i++) {
        if (Math.random() < 0.07) {
          blocks[i].glitchOffset = (Math.random() - 0.5) * 0.25;
        } else {
          blocks[i].glitchOffset = 0;
        }
      }
    }
    setInterval(updateGlitch, 120);
    function animate(now) {
      requestAnimationFrame(animate);
      for (let i = 0; i < blocks.length; i++) {
        const { mesh, x, y, visible, glitchOffset } = blocks[i];
        mesh.visible = visible;
        mesh.position.x = -logicalWidth / 2 + blockW / 2 + x * blockW + glitchOffset;
        mesh.position.y = logicalHeight / 2 - blockH / 2 - y * blockH;
        const dx = (x / (cols - 1)) * logicalWidth - logicalWidth / 2 - mouse.x * (logicalWidth / 2);
        const dy = (y / (rows - 1)) * logicalHeight - logicalHeight / 2 - mouse.y * (logicalHeight / 2);
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist < 0.4 * logicalWidth) {
          const force = (0.4 * logicalWidth - dist) * 0.25;
          mesh.position.z = force * 2;
        } else {
          mesh.position.z = 0;
        }
      }
      renderer.render(scene, camera);
    }
    animate(performance.now());
  });
  window.addEventListener('resize', () => {
    const width = container.offsetWidth;
    const height = container.offsetHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
    const newLogicalHeight = 2.5;
    const newLogicalWidth = newLogicalHeight * (width / height);
    for (let y = 0; y < rows; y++) {
      for (let x = 0; x < cols; x++) {
        const i = y * cols + x;
        const mesh = blocks[i].mesh;
        mesh.geometry.dispose();
        const geometry = new THREE.PlaneGeometry(newLogicalWidth / cols, newLogicalHeight / rows, 1, 1);
        const u0 = x / cols;
        const v0 = 1 - (y + 1) / rows;
        const u1 = (x + 1) / cols;
        const v1 = 1 - y / rows;
        const uvs = geometry.attributes.uv;
        uvs.setXY(0, u0, v0);
        uvs.setXY(1, u1, v0);
        uvs.setXY(2, u0, v1);
        uvs.setXY(3, u1, v1);
        uvs.needsUpdate = true;
        mesh.geometry = geometry;
        mesh.position.x = -newLogicalWidth / 2 + (newLogicalWidth / cols) / 2 + x * (newLogicalWidth / cols);
        mesh.position.y = newLogicalHeight / 2 - (newLogicalHeight / rows) / 2 - (rows - 1 - y) * (newLogicalHeight / rows);
      }
    }
  });
}

// Start 3D tree for both containers
createTree3D('three-container', './assets/profile-pic2.jpg');
createTree3D('about-three-container', 'assets/about-pic2bis2.jpg');

// --- Lightning Flicker Animation ---
function lightningFlicker(img, minDelay = 800, maxDelay = 3500) {
  // Skip animation on mobile/low-end devices
  if (window.innerWidth < 900 || navigator.hardwareConcurrency < 4) {
    return;
  }
  
  function flicker() {
    // Randomly choose if lightning is visible (simulate flash)
    const flashes = Math.floor(Math.random() * 2) + 1;
    let count = 0;
    function doFlash() {
      img.style.opacity = (Math.random() > 0.5 ? 1 : 0.45);
      img.style.filter = 'drop-shadow(0 0 80px #fff) drop-shadow(0 0 160px #fff)';
      setTimeout(() => {
        img.style.opacity = 0.08;
        img.style.filter = '';
        count++;
        if (count < flashes) {
          setTimeout(doFlash, Math.random() * 120 + 60);
        } else {
          setTimeout(flicker, Math.random() * (maxDelay - minDelay) + minDelay);
        }
      }, Math.random() * 80 + 40);
    }
    doFlash();
  }
  flicker();
}
window.addEventListener('DOMContentLoaded', function() {
  const left = document.getElementById('lightning-left');
  const right = document.getElementById('lightning-right');
  if (left) lightningFlicker(left);
  if (right) lightningFlicker(right);
});