const przyciskZ1 = document.getElementById('btnZastosuj1');
const przyciskKol = document.getElementById('btnKolorowy');
const przyciskCB = document.getElementById('btnCzarnoBialy');
const przyciskZ3 = document.getElementById('btnZastosuj3');
const suwak3 = document.getElementById('suwak3');
const przyciskZ4 = document.getElementById('btnZastosuj4');
const suwak4 = document.getElementById('suwak4');

const obraz1 = document.getElementById('img1');
const obraz2 = document.getElementById('img2');
const obraz3 = document.getElementById('img3');
const obraz4 = document.getElementById('img4');

function ustawFiltr(el, filtr) {
  if (!el) return;
  el.style.filter = filtr;
}

if (przyciskZ1) {
  przyciskZ1.addEventListener('click', function () {
    const wybr = document.querySelector('input[name="efekt1"]:checked');
    if (!wybr) {
      ustawFiltr(obraz1, 'none');
      return;
    }
    if (wybr.value === 'blur') ustawFiltr(obraz1, 'blur(6px)');
    else if (wybr.value === 'sepia') ustawFiltr(obraz1, 'sepia(100%)');
    else if (wybr.value === 'invert') ustawFiltr(obraz1, 'invert(100%)');
  });
}

if (przyciskKol) {
  przyciskKol.addEventListener('click', function () {
    ustawFiltr(obraz2, 'none');
  });
}
if (przyciskCB) {
  przyciskCB.addEventListener('click', function () {
    ustawFiltr(obraz2, 'grayscale(100%)');
  });
}

if (przyciskZ3 && suwak3) {
  przyciskZ3.addEventListener('click', function () {
    let v = Number(suwak3.value);
    if (isNaN(v)) v = 100;
    v = Math.max(0, Math.min(100, v));
    ustawFiltr(obraz3, 'opacity(' + v + '%)');
  });
}

if (przyciskZ4 && suwak4) {
  przyciskZ4.addEventListener('click', function () {
    let v = Number(suwak4.value);
    if (isNaN(v)) v = 100;
    v = Math.max(0, Math.min(250, v));
    ustawFiltr(obraz4, 'brightness(' + v + '%)');
  });
}