$(document).ready(function(){
  function showNormalImage(normalImageId) {
      // Hide all normal images
      var normalImages = document.querySelectorAll('.image-gallery img[id^="normalImage"]');
      normalImages.forEach(function(image) {
          image.style.display = 'none'; // Hide normal images
      });

      // Show the selected normal image
      document.getElementById(normalImageId).style.display = 'block'; // Show the selected normal image

      // Optionally, you can show the corresponding attack image by default
      // Uncomment the following line if you want the first attack image to be displayed when a normal image is shown
      // document.getElementById('attackImage1').style.display = 'block'; // Show the default attack image
  }

  function showAttackImage(attackImageId) {
      // Hide all attack images
      var attackImages = document.querySelectorAll('.image-gallery img[id^="attackImage"]');
      attackImages.forEach(function(image) {
          image.style.display = 'none'; // Hide attack images
      });

      // Show the selected attack image
      document.getElementById(attackImageId).style.display = 'block'; // Show the selected attack image

      // Optionally, you can show the corresponding normal image by default
      // Uncomment the following line if you want the first normal image to be displayed when an attack image is shown
      // document.getElementById('normalImage1').style.display = 'block'; // Show the default normal image
  }

  // Initial display settings
  document.getElementById('normalImage1').style.display = 'block'; // Show first normal image
  document.getElementById('attackImage1').style.display = 'block'; // Show first attack image
    
});