function initFooterAnimal() {
    const footerBar = document.querySelector('#footer-bar');
    if (!footerBar)
        return console.error('找不到指定元素');

    const footerAnimal = document.createElement('div');
    footerAnimal.id = 'footer-animal';
    footerAnimal.innerHTML = `
        <img class="animal entered loaded"
            src="https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/473503.webp"
            alt="动物" />
    `;

    footerBar.insertAdjacentElement('beforebegin', footerAnimal);

    const style = document.createElement('style');
    style.textContent = `
        #footer-animal {
            position: relative;
        }
        #footer-animal::before {
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 36px;
            background: url(https://i1.wp.com/ruom.wuaze.com/i/2024/10/19/351933.webp) repeat center / auto 100%;
            box-shadow: 0 4px 7px rgba(0,0,0,.15);
        }
        .animal {
            position: relative;
            max-width: min(974px, 100vw);
            margin: 0 auto;
            display: block;
        }
        #footer-bar {
            margin-top: 0 !important;
        }
        @media screen and (max-width: 1023px) {
            #footer-animal::before {
                height: 4vw;
            }
        }
        [data-theme=dark] #footer-animal {
            filter: brightness(.8);
        }
    `;
    document.head.appendChild(style);
}

document.addEventListener('DOMContentLoaded', initFooterAnimal);
document.addEventListener('pjax:success', initFooterAnimal);

(function() {
    const HEADER_IMG = [
    "/img/header-01.png",
    "/img/header-02.png",
    "/img/header-03.png",
    "/img/header-04.png",
    "/img/header-05.png",
    "/img/header-06.png",
    "/img/header-07.png",
    "/img/header-08.png",
    "/img/header-09.png",
    "/img/header-10.png"
  ];

  const FOOTER_IMG = [
    "/img/footer-01.png",
    "/img/footer-02.png",
    "/img/footer-03.png",
    "/img/footer-04.png",
    "/img/footer-05.png",
    "/img/footer-06.png",
    "/img/footer-07.png",
    "/img/footer-08.png",
    "/img/footer-09.png",
    "/img/footer-10.png"
  ];

  let headerObserver = null;

  function createDraggableImage(containerId, imgId, imgUrl, storageKey, initMode) {
    const container = document.getElementById(containerId);
    if (!container) return;

    if (document.getElementById(imgId)) return;

    const originalPosition = getComputedStyle(container).position;
    if (originalPosition === 'static') {
      container.style.position = 'relative';
    }

    const img = document.createElement('img');
    img.id = imgId;
    img.className = 'draggable-img entered loaded';
    img.draggable = false;
    img.src = imgUrl;
    container.appendChild(img);

    let isDragging = false;
    let wasDragged = false;
    let startX = 0;
    let startLeft = 0;
    let currentLeft = 0;

    const edgeThreshold = 20;
    const moveStep = 200;
    const shouldStore = initMode === 'stored';

    const getMaxLeft = () => {
      const containerWidth = container.clientWidth;
      const imgWidth = img.clientWidth;
      return Math.max(0, containerWidth - imgWidth);
    };

    const setPosition = (left, store = shouldStore) => {
      const maxLeft = getMaxLeft();
      const clampedLeft = Math.min(maxLeft, Math.max(0, left));
      img.style.left = `${clampedLeft}px`;
      currentLeft = clampedLeft;
      if (store) localStorage.setItem(storageKey, clampedLeft);
    };

    const initPosition = () => {
      const maxLeft = getMaxLeft();
      let initLeft;
      if (initMode === 'random') {
        initLeft = Math.random() * maxLeft;
      } else if (initMode === 'left') {
        initLeft = 0; 
      } else if (initMode === 'right') {
        initLeft = maxLeft;
      } else {
        const storedLeft = parseInt(localStorage.getItem(storageKey));
        if (!isNaN(storedLeft) && storedLeft >= 0 && storedLeft <= maxLeft) {
          initLeft = storedLeft;
        } else {
          initLeft = maxLeft;
        }
      }
      setPosition(initLeft, shouldStore);
    };

    if (img.complete) {
      initPosition();
    } else {
      img.addEventListener('load', initPosition);
    }

    window.addEventListener('resize', () => {
      if (currentLeft !== undefined) {
        const maxLeft = getMaxLeft();
        if (currentLeft > maxLeft) {
          setPosition(maxLeft, shouldStore);
        } else {
          img.style.left = `${currentLeft}px`;
        }
      }
    });

    img.addEventListener('click', (e) => {
      if (!wasDragged) {
        const maxLeft = getMaxLeft();
        let newLeft = currentLeft;
        if (currentLeft <= edgeThreshold) {
          newLeft = Math.min(currentLeft + moveStep, maxLeft);
        } else if (currentLeft >= maxLeft - edgeThreshold) {
          newLeft = Math.max(currentLeft - moveStep, 0);
        } else {
          newLeft = currentLeft + (Math.random() < 0.5 ? -moveStep : moveStep);
          newLeft = Math.max(0, Math.min(newLeft, maxLeft));
        }
        if (newLeft !== currentLeft) setPosition(newLeft, shouldStore);
      }
      wasDragged = false;
    });

    img.addEventListener('mousedown', (e) => {
      e.preventDefault();
      isDragging = true;
      wasDragged = false;
      startX = e.clientX;
      startLeft = currentLeft;
      img.style.transition = 'none';

      const onMouseMove = (e) => {
        if (!isDragging) return;
        wasDragged = true;
        const offsetX = e.clientX - startX;
        const maxLeft = getMaxLeft();
        let newLeft = startLeft + offsetX;
        newLeft = Math.min(maxLeft, Math.max(0, newLeft));
        requestAnimationFrame(() => {
          img.style.left = `${newLeft}px`;
          currentLeft = newLeft;
        });
      };

      const onMouseUp = () => {
        if (!isDragging) return;
        isDragging = false;
        img.style.transition = '';
        if (shouldStore) localStorage.setItem(storageKey, currentLeft);
        document.removeEventListener('mousemove', onMouseMove);
        document.removeEventListener('mouseup', onMouseUp);
      };

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
    });
  }

  function initFooterBar() {
    if (document.getElementById('footerList')) return;
    const footerBar = document.getElementById('footer-bar');
    if (!footerBar) return;
    const footerList = document.createElement('div');
    footerList.id = 'footerList';
    footerList.classList.add('footerList', 'container');
    footerBar.insertAdjacentElement('beforebegin', footerList);
  }

  function initHeaderImage() {
    const HeaderImageUrl = HEADER_IMG[Math.floor(Math.random() * HEADER_IMG.length)];

    createDraggableImage(
      'bbTimeList',
      'new-header-img',
      HeaderImageUrl,
      'headerImgPos',
      'random'
    );

    const headerImg = document.getElementById('new-header-img');
    const headerElem = document.querySelector('header.full_page');
    if (!headerImg || !headerElem) return;
    const updateImageClass = () => {
      if (headerElem.classList.contains('nav-fixed')) {
        headerImg.classList.remove('hidden');
      } else {
        headerImg.classList.add('hidden');
      }
    };

    updateImageClass();

    if (headerObserver) headerObserver.disconnect();
    headerObserver = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') updateImageClass();
      });
    });

    headerObserver.observe(headerElem, { attributes: true });
  }

  function initFooterImage() {
    const footerContainer = document.getElementById('footerList');
    if (!footerContainer) return;

    const existingImages = footerContainer.querySelectorAll('.draggable-img');
    existingImages.forEach(img => img.remove());

    const imgCount = Math.floor(Math.random() * 3) + 1;
    const shuffled = [...FOOTER_IMG];
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    const footerImgUrls = shuffled.slice(0, imgCount);

    for (let i = 0; i < footerImgUrls.length; i++) {
      createDraggableImage(
        'footerList',
        `new-footer-img-${i+1}`,
        footerImgUrls[i],
        `footerImgPos_${i+1}`,
        'random'
      );
    }
  }

  function initAll() {
    initFooterBar();
    initHeaderImage();
    initFooterImage();
  }

  document.addEventListener('DOMContentLoaded', initAll);
  document.addEventListener('pjax:success', initAll);
})();