// ========================================
// Gallery 페이지 전용 JavaScript
// ========================================

document.addEventListener('DOMContentLoaded', function() {
    initGallery();
    initLightbox();
    initGalleryAnimations();
    initCustom360Viewers();
});

// i18n 헬퍼 (var 사용 — 여러 JS 파일에서 중복 선언 허용)
var _t = _t || ((key, fallback) => window.i18n?.t(key, fallback) ?? fallback);

// 갤러리 초기화
function initGallery() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    
    galleryItems.forEach((item, index) => {
        const img = item.querySelector('.gallery-img');
        
        // 이미지 클릭 시 라이트박스 열기
        img.addEventListener('click', () => openLightbox(index));
        
        // 이미지 로딩 에러 처리
        img.addEventListener('error', function() {
            this.src = 'images/placeholder.jpg';
            this.alt = _t('common.imageError', '이미지를 불러올 수 없습니다');
        });
        
        // 레이지 로딩 구현
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src || img.src;
                        img.classList.remove('lazy');
                        imageObserver.unobserve(img);
                    }
                });
            });
            
            if (img.dataset.src) {
                imageObserver.observe(img);
            }
        }
    });
}

// 라이트박스 기능
let currentImageIndex = 0;
const galleryImages = document.querySelectorAll('.gallery-img');

function initLightbox() {
    // 라이트박스 HTML 생성
    const lightboxHTML = `
        <div id="lightbox" class="lightbox" role="dialog" aria-label="${_t('gallery.js.lightboxLabel', '이미지 뷰어')}">
            <div class="lightbox-content">
                <img id="lightbox-img" class="lightbox-img" src="" alt="">
                <div id="lightbox-caption" class="lightbox-caption"></div>
                <button class="lightbox-close" onclick="closeLightbox()" aria-label="${_t('gallery.js.close', '닫기')}"></button>
                <button class="lightbox-nav lightbox-prev" onclick="previousImage()" aria-label="${_t('gallery.js.prevImage', '이전 이미지')}">‹</button>
                <button class="lightbox-nav lightbox-next" onclick="nextImage()" aria-label="${_t('gallery.js.nextImage', '다음 이미지')}">›</button>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', lightboxHTML);
    
    // ESC 키로 라이트박스 닫기
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') closeLightbox();
        if (e.key === 'ArrowLeft') previousImage();
        if (e.key === 'ArrowRight') nextImage();
    });
    
    // 배경 클릭으로 라이트박스 닫기
    document.getElementById('lightbox').addEventListener('click', function(e) {
        if (e.target === this) closeLightbox();
    });
}

let lightboxLastFocused = null;

function openLightbox(index) {
    currentImageIndex = index;
    lightboxLastFocused = document.activeElement;
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    const lightboxCaption = document.getElementById('lightbox-caption');

    const currentImg = galleryImages[index];
    if (!currentImg) return;
    const caption = currentImg.closest('.gallery-item')?.querySelector('.gallery-caption');

    lightboxImg.src = currentImg.src;
    lightboxImg.alt = currentImg.alt;
    lightboxCaption.textContent = caption ? caption.textContent : currentImg.alt;

    lightbox.classList.add('active');
    // iOS 스크롤 방지
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${window.scrollY}px`;
    // 포커스를 닫기 버튼으로
    const closeBtn = lightbox.querySelector('.lightbox-close');
    if (closeBtn) closeBtn.focus();
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.remove('active');
    const scrollY = document.body.style.top;
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.width = '';
    document.body.style.top = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);
    if (lightboxLastFocused) lightboxLastFocused.focus();
}

function nextImage() {
    currentImageIndex = (currentImageIndex + 1) % galleryImages.length;
    openLightbox(currentImageIndex);
}

function previousImage() {
    currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length;
    openLightbox(currentImageIndex);
}

// 갤러리 애니메이션
function initGalleryAnimations() {
    const galleryItems = document.querySelectorAll('.gallery-item');
    
    // Intersection Observer를 사용한 애니메이션
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry, index) => {
            if (entry.isIntersecting) {
                setTimeout(() => {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }, index * 100);
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    galleryItems.forEach(item => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(30px)';
        item.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
        observer.observe(item);
    });
}

// 갤러리 필터 기능 (향후 확장용)
function initGalleryFilters() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const galleryItems = document.querySelectorAll('.gallery-item');
    
    filterButtons.forEach(btn => {
        btn.addEventListener('click', function() {
            // 활성 버튼 업데이트
            filterButtons.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            
            const filter = this.dataset.filter;
            
            galleryItems.forEach(item => {
                if (filter === 'all' || item.dataset.category === filter) {
                    item.style.display = 'block';
                    setTimeout(() => {
                        item.style.opacity = '1';
                        item.style.transform = 'scale(1)';
                    }, 10);
                } else {
                    item.style.opacity = '0';
                    item.style.transform = 'scale(0.8)';
                    setTimeout(() => {
                        item.style.display = 'none';
                    }, 300);
                }
            });
        });
    });
}

// 이미지 프리로딩
function preloadImages() {
    galleryImages.forEach(img => {
        const imagePreload = new Image();
        imagePreload.src = img.src;
    });
}

// 갤러리 검색 기능 (향후 확장용)
function initGallerySearch() {
    const searchInput = document.getElementById('gallery-search');
    const galleryItems = document.querySelectorAll('.gallery-item');
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            
            galleryItems.forEach(item => {
                const caption = item.querySelector('.gallery-caption');
                const alt = item.querySelector('.gallery-img').alt;
                const text = (caption ? caption.textContent : '') + ' ' + alt;
                
                if (text.toLowerCase().includes(searchTerm)) {
                    item.style.display = 'block';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    }
}

// 이미지 로딩 상태 표시
function showGalleryLoading() {
    const loading = document.querySelector('.gallery-loading');
    if (loading) {
        loading.style.display = 'block';
    }
}

function hideGalleryLoading() {
    const loading = document.querySelector('.gallery-loading');
    if (loading) {
        loading.style.display = 'none';
    }
}

// 갤러리 그리드 리사이즈 최적화
let resizeTimeout;
window.addEventListener('resize', function() {
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function() {
        // 갤러리 그리드 재조정 로직
        const galleryGrid = document.querySelector('.gallery-grid');
        if (galleryGrid) {
            galleryGrid.style.opacity = '0.8';
            setTimeout(() => {
                galleryGrid.style.opacity = '1';
            }, 100);
        }
    }, 250);
});

// 터치 이벤트 지원 (모바일) - 라이트박스에만 스코프 제한
let touchStartX = 0;
let touchEndX = 0;

function handleLightboxTouchStart(e) {
    touchStartX = e.changedTouches[0].screenX;
}

function handleLightboxTouchEnd(e) {
    touchEndX = e.changedTouches[0].screenX;
    const swipeThreshold = 50;
    const diff = touchStartX - touchEndX;

    if (Math.abs(diff) > swipeThreshold) {
        if (diff > 0) {
            nextImage();
        } else {
            previousImage();
        }
    }
}

// openLightbox/closeLightbox에서 터치 리스너 관리를 위해 원본 함수 래핑
const _originalOpenLightbox = openLightbox;
openLightbox = function(index) {
    _originalOpenLightbox(index);
    const lightbox = document.getElementById('lightbox');
    if (lightbox) {
        lightbox.addEventListener('touchstart', handleLightboxTouchStart);
        lightbox.addEventListener('touchend', handleLightboxTouchEnd);
    }
};

const _originalCloseLightbox = closeLightbox;
closeLightbox = function() {
    const lightbox = document.getElementById('lightbox');
    if (lightbox) {
        lightbox.removeEventListener('touchstart', handleLightboxTouchStart);
        lightbox.removeEventListener('touchend', handleLightboxTouchEnd);
    }
    _originalCloseLightbox();
};

// ========================================
// 간단한 360도 파노라마 뷰어 - 좌우 스크롤 방식
// ========================================

class Easy360Viewer {
    constructor(container, imageSrc, title) {
        this.container = container;
        this.imageSrc = imageSrc;
        this.title = title;
        
        // 뷰어 상태
        this.currentX = 0; // 현재 X 위치
        this.maxX = 0; // 최대 스크롤 가능 X
        this.zoom = 1;
        
        // 마우스/터치 상태
        this.isDragging = false;
        this.startX = 0;
        this.lastX = 0;
        this.velocity = 0;
        
        // 자동 회전
        this.isAutoRotating = false;
        this.autoRotateSpeed = 1;
        this.animationId = null;
        
        // 터치 줌
        this.touchCount = 0;
        this.lastPinchDistance = 0;
        
        this.init();
    }
    
    init() {
        this.createViewer();
        this.bindEvents();
        this.startAnimation();
    }
    
    createViewer() {
        // 컨테이너 스타일 - 서버 호환성 개선
        this.container.style.cssText = `
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            touch-action: none;
        `;
        
        // 360도 이미지 래퍼 - 성능 최적화
        this.imageWrapper = document.createElement('div');
        this.imageWrapper.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            will-change: transform;
            display: flex;
            align-items: center;
            transform-origin: left center;
            backface-visibility: hidden;
        `;
        
        // 로딩 표시
        this.showLoading();
        
        // 메인 360도 이미지 - 고해상도 설정
        this.image = document.createElement('img');
        this.image.src = this.imageSrc;
        this.image.style.cssText = `
            height: 100%;
            width: auto;
            object-fit: cover;
            user-select: none;
            pointer-events: none;
            display: block;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
            filter: contrast(1.05) saturate(1.1);
        `;
        this.image.draggable = false;
        
        // 이미지 로드 완료 후 - 안정성 개선
        this.image.onload = () => {
            // 이미지가 완전히 로드될 때까지 대기
            setTimeout(() => {
                this.hideLoading();
                this.setupImageSize();
                this.createDuplicateImages();
                this.updateTransform();
            }, 100);
        };
        
        this.image.onerror = () => {
            this.hideLoading();
            this.showError();
        };
        
        this.imageWrapper.appendChild(this.image);
        this.container.appendChild(this.imageWrapper);
    }
    
    setupImageSize() {
        // 컨테이너 크기 가져오기
        const containerHeight = this.container.clientHeight;
        const containerWidth = this.container.clientWidth;
        const imageAspectRatio = this.image.naturalWidth / this.image.naturalHeight;

        // 모바일에서 줌 시 경계 문제 해결을 위한 더 정확한 크기 계산
        let imageHeight = containerHeight * this.zoom;
        let imageWidth = imageHeight * imageAspectRatio;

        // 360도 이미지는 매우 가로가 길므로 최소 크기 보장
        const minWidth = Math.max(containerWidth * 3, imageWidth);
        imageWidth = minWidth;
        imageHeight = imageWidth / imageAspectRatio;

        // 줌 레벨에 따른 크기 조정 (모바일 확대 시 경계 문제 해결)
        if (this.zoom > 1) {
            imageHeight = Math.max(containerHeight, imageHeight);
            imageWidth = imageHeight * imageAspectRatio;
        }

        // 이미지 크기 설정 - 픽셀 완벽 정렬로 경계 문제 방지
        this.image.style.width = Math.round(imageWidth) + 'px';
        this.image.style.height = Math.round(imageHeight) + 'px';
        this.imageWrapper.style.width = Math.round(imageWidth) + 'px';
        this.imageWrapper.style.height = Math.round(containerHeight) + 'px';

        // 단일 이미지 너비 저장
        this.singleImageWidth = imageWidth;
    }
    
    createDuplicateImages() {
        // 무한 스크롤을 위해 이미지 복사본 생성
        const imageClone1 = this.image.cloneNode();
        const imageClone2 = this.image.cloneNode();
        
        // 동일한 스타일 적용 - 안정성 개선
        imageClone1.style.cssText = this.image.style.cssText;
        imageClone2.style.cssText = this.image.style.cssText;
        imageClone1.src = this.image.src;
        imageClone2.src = this.image.src;
        imageClone1.draggable = false;
        imageClone2.draggable = false;
        
        this.imageWrapper.appendChild(imageClone1);
        this.imageWrapper.appendChild(imageClone2);
        
        // 래퍼 전체 너비를 3배로 설정
        this.imageWrapper.style.width = (this.singleImageWidth * 3) + 'px';
        
        // 시작 위치를 중앙 이미지로 (두 번째 이미지)
        this.currentX = this.singleImageWidth;
        this.updateTransform();
    }
    
    showLoading() {
        const loader = document.createElement('div');
        loader.className = 'panorama-loader';
        loader.innerHTML = `
            <div class="spinner"></div>
            <p>${_t('gallery.js.panoramaLoading', '360° 이미지 로딩중...')}</p>
        `;
        loader.style.cssText = `
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            z-index: 10;
            pointer-events: none;
        `;
        
        this.container.appendChild(loader);
        this.loadingElement = loader;
    }
    
    hideLoading() {
        if (this.loadingElement) {
            this.loadingElement.remove();
            this.loadingElement = null;
        }
    }
    
    showError() {
        const errorElement = document.createElement('div');
        errorElement.innerHTML = `
            <div style="text-align: center; color: #ff6b6b; padding: 20px;">
                <div style="font-size: 48px; margin-bottom: 10px;">😞</div>
                <div style="font-size: 18px; margin-bottom: 10px;">${_t('common.imageError', '이미지를 불러올 수 없습니다')}</div>
                <div style="font-size: 14px; opacity: 0.8;">${_t('gallery.js.checkImageFile', '이미지 파일을 확인해주세요')}</div>
            </div>
        `;
        errorElement.style.cssText = `
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        `;
        
        this.container.appendChild(errorElement);
    }
    
    bindEvents() {
        // 바인딩된 핸들러 참조 저장 (cleanup 용)
        this._boundHandleStart = this.handleStart.bind(this);
        this._boundHandleMove = this.handleMove.bind(this);
        this._boundHandleEnd = this.handleEnd.bind(this);
        this._boundHandleWheel = this.handleWheel.bind(this);
        this._boundHandleResize = this.handleResize.bind(this);

        // 마우스 이벤트
        this.container.addEventListener('mousedown', this._boundHandleStart);
        this.container.addEventListener('mousemove', this._boundHandleMove);
        this.container.addEventListener('mouseup', this._boundHandleEnd);
        this.container.addEventListener('mouseleave', this._boundHandleEnd);

        // 터치 이벤트
        this.container.addEventListener('touchstart', this._boundHandleStart, { passive: false });
        this.container.addEventListener('touchmove', this._boundHandleMove, { passive: false });
        this.container.addEventListener('touchend', this._boundHandleEnd);

        // 휠 이벤트 (좌우 스크롤)
        this.container.addEventListener('wheel', this._boundHandleWheel, { passive: false });

        // 컨텍스트 메뉴 방지
        this.container.addEventListener('contextmenu', e => e.preventDefault());

        // 리사이즈
        window.addEventListener('resize', this._boundHandleResize);
    }
    
    handleStart(e) {
        e.preventDefault();
        this.isDragging = true;
        this.velocity = 0;
        this.container.style.cursor = 'grabbing';
        this.stopAutoRotate();
        
        if (e.touches) {
            this.touchCount = e.touches.length;
            
            if (this.touchCount === 1) {
                this.startX = e.touches[0].clientX;
            } else if (this.touchCount === 2) {
                // 핀치 줌 초기화
                const dx = e.touches[0].clientX - e.touches[1].clientX;
                const dy = e.touches[0].clientY - e.touches[1].clientY;
                this.lastPinchDistance = Math.sqrt(dx * dx + dy * dy);
                return; // 핀치일 때는 드래그 비활성화
            }
        } else {
            this.startX = e.clientX;
        }
        
        this.lastX = this.startX;
    }
    
    handleMove(e) {
        if (!this.isDragging) return;
        e.preventDefault();
        
        let currentX;
        
        if (e.touches) {
            if (this.touchCount === 1 && e.touches.length === 1) {
                currentX = e.touches[0].clientX;
                this.updatePosition(currentX);
                
            } else if (this.touchCount === 2 && e.touches.length === 2) {
                // 핀치 줌 처리
                const dx = e.touches[0].clientX - e.touches[1].clientX;
                const dy = e.touches[0].clientY - e.touches[1].clientY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (this.lastPinchDistance > 0) {
                    const scale = distance / this.lastPinchDistance;
                    this.zoom = Math.max(0.8, Math.min(2.5, this.zoom * scale));
                    this.updateTransform();
                }
                
                this.lastPinchDistance = distance;
                return;
            }
        } else {
            currentX = e.clientX;
            this.updatePosition(currentX);
        }
    }
    
    updatePosition(currentX) {
        const deltaX = currentX - this.lastX;

        // 좌우 이동 (드래그 방향과 반대)
        this.currentX -= deltaX;

        // 속도 계산 (관성용) - 더 부드러운 관성 적용
        this.velocity = -deltaX * 0.15;

        // 극한 속도 제한 (튀는 현상 방지)
        const maxVelocity = this.singleImageWidth * 0.05;
        this.velocity = Math.max(-maxVelocity, Math.min(maxVelocity, this.velocity));

        this.updateTransform();
        this.lastX = currentX;
    }
    
    handleEnd() {
        this.isDragging = false;
        this.touchCount = 0;
        this.lastPinchDistance = 0;
        this.container.style.cursor = 'grab';
    }
    
    handleWheel(e) {
        e.preventDefault();
        
        // 휠로 좌우 스크롤
        const scrollSpeed = 50;
        this.currentX += e.deltaY > 0 ? scrollSpeed : -scrollSpeed;
        
        this.updateTransform();
    }
    
    handleResize() {
        if (this.image && this.image.complete) {
            // 리사이즈 시 비율 유지하되, 튀는 현상 방지
            const oldRatio = (this.currentX - this.singleImageWidth) / this.singleImageWidth;
            const oldImageWidth = this.singleImageWidth;

            this.setupImageSize();
            this.createDuplicateImages(); // 이미지 다시 생성

            // 정규화된 위치로 복원 (중앙 이미지 기준)
            this.currentX = this.singleImageWidth + (this.singleImageWidth * oldRatio);

            // 경계값 확인 및 보정
            if (this.currentX < 0) this.currentX += this.singleImageWidth;
            if (this.currentX > this.singleImageWidth * 2) this.currentX -= this.singleImageWidth;

            this.updateTransform();
        }
    }
    
    updateTransform() {
        if (!this.imageWrapper || !this.singleImageWidth) return;

        // 무한 스크롤 처리 - 튀는 버그 방지를 위한 부드러운 전환
        const threshold = this.singleImageWidth * 0.1; // 10% 여유 공간

        // 왼쪽 경계 처리 - 부드러운 전환
        if (this.currentX < -threshold) {
            this.currentX = this.singleImageWidth + (this.currentX + threshold);
        }
        // 오른쪽 경계 처리 - 부드러운 전환
        else if (this.currentX > this.singleImageWidth * 2 + threshold) {
            this.currentX = this.singleImageWidth + (this.currentX - this.singleImageWidth * 2 - threshold);
        }

        // 정확한 무한 루프 경계 처리 (튀는 현상 방지)
        const normalizedX = ((this.currentX % this.singleImageWidth) + this.singleImageWidth) % this.singleImageWidth;
        const actualX = normalizedX + this.singleImageWidth;

        // 현재 위치와 목표 위치의 차이가 큰 경우만 보정 (부드러운 회전 유지)
        if (Math.abs(this.currentX - actualX) > this.singleImageWidth * 0.5) {
            this.currentX = actualX;
        }

        // 고정밀 변환 계산 (소수점 2자리까지 유지하여 부드러움 보장)
        const translateX = Math.round(-this.currentX * 100) / 100;
        const scale = Math.round(this.zoom * 1000) / 1000;

        const transform = `translateX(${translateX}px) scale(${scale})`;
        this.imageWrapper.style.transform = transform;

        // 브라우저 호환성
        this.imageWrapper.style.webkitTransform = transform;
        this.imageWrapper.style.msTransform = transform;
    }
    
    startAnimation() {
        const animate = () => {
            // 관성 적용
            if (!this.isDragging && Math.abs(this.velocity) > 0.5) {
                this.currentX += this.velocity;
                this.velocity *= 0.95; // 마찰력
                this.updateTransform();
            }
            
            // 자동 회전
            if (this.isAutoRotating && !this.isDragging) {
                this.currentX += this.autoRotateSpeed;
                this.updateTransform();
            }
            
            this.animationId = requestAnimationFrame(animate);
        };
        
        animate();
    }
    
    reset() {
        this.currentX = this.singleImageWidth; // 중앙 이미지로
        this.zoom = 1;
        this.velocity = 0;
        this.stopAutoRotate();
        this.updateTransform();
    }
    
    startAutoRotate() {
        this.isAutoRotating = true;
    }
    
    stopAutoRotate() {
        this.isAutoRotating = false;
    }
    
    zoomIn() {
        this.zoom = Math.min(2.5, this.zoom * 1.2);
        this.updateTransform();
    }
    
    zoomOut() {
        this.zoom = Math.max(0.8, this.zoom * 0.8);
        this.updateTransform();
    }
    
    destroy() {
        this.stopAutoRotate();

        if (this.animationId) {
            cancelAnimationFrame(this.animationId);
        }

        // 저장된 참조로 리스너 정확히 제거
        window.removeEventListener('resize', this._boundHandleResize);

        if (this.container) {
            this.container.removeEventListener('mousedown', this._boundHandleStart);
            this.container.removeEventListener('mousemove', this._boundHandleMove);
            this.container.removeEventListener('mouseup', this._boundHandleEnd);
            this.container.removeEventListener('mouseleave', this._boundHandleEnd);
            this.container.removeEventListener('touchstart', this._boundHandleStart);
            this.container.removeEventListener('touchmove', this._boundHandleMove);
            this.container.removeEventListener('touchend', this._boundHandleEnd);
            this.container.removeEventListener('wheel', this._boundHandleWheel);
            this.container.innerHTML = '';
        }
    }
}

let current360Viewer = null;

function initCustom360Viewers() {
    createPanoramaModal();
    initPanoramaPreviews();
}

function initPanoramaPreviews() {
    const clickableElements = document.querySelectorAll('.panorama-clickable');
    
    clickableElements.forEach(element => {
        const imageSrc = element.dataset.image;
        const title = element.dataset.title;
        
        element.addEventListener('click', () => {
            openPanoramaModal(imageSrc, title);
        });
        
        // 호버 효과
        element.addEventListener('mouseenter', () => {
            element.style.transform = 'scale(1.02)';
        });
        
        element.addEventListener('mouseleave', () => {
            element.style.transform = 'scale(1)';
        });
        
        // 도움말 자동 사라짐
        setTimeout(() => {
            const helpText = element.querySelector('.panorama-help');
            if (helpText) {
                helpText.style.opacity = '0';
                setTimeout(() => helpText.remove(), 500);
            }
        }, 4000);
    });
}

function createPanoramaModal() {
    const modalHTML = `
        <div id="panorama-modal" class="panorama-modal">
            <div class="panorama-modal-content">
                <div id="panorama-viewer-container" class="panorama-viewer-container">
                    <!-- 360도 뷰어가 여기에 들어갑니다 -->
                </div>
                
                <div class="panorama-modal-controls">
                    <div id="panorama-modal-title" class="panorama-modal-title"></div>
                    <div class="panorama-control-buttons">
                        <button class="panorama-btn" id="panorama-reset-btn">
                            <i class="fas fa-home"></i>
                            <span>${_t('gallery.js.reset', '초기화')}</span>
                        </button>
                        <button class="panorama-btn" id="panorama-auto-btn">
                            <i class="fas fa-sync-alt"></i>
                            <span>${_t('gallery.js.autoRotate', '자동회전')}</span>
                        </button>
                        <button class="panorama-btn" id="panorama-zoom-in-btn">
                            <i class="fas fa-search-plus"></i>
                            <span>${_t('gallery.js.zoomIn', '확대')}</span>
                        </button>
                        <button class="panorama-btn" id="panorama-zoom-out-btn">
                            <i class="fas fa-search-minus"></i>
                            <span>${_t('gallery.js.zoomOut', '축소')}</span>
                        </button>
                        <button class="panorama-btn" id="panorama-help-btn">
                            <i class="fas fa-question-circle"></i>
                            <span>${_t('gallery.js.help', '도움말')}</span>
                        </button>
                    </div>
                </div>
                
                <button class="panorama-modal-close" id="panorama-close-btn">
                    <div class="close-icon"></div>
                </button>
                
                <div class="panorama-help-panel" id="panorama-help-panel">
                    <h3>${_t('gallery.js.helpTitle', '360° 조작 가이드')}</h3>
                    <div class="help-content">
                        <div class="help-item">
                            <i class="fas fa-mouse"></i>
                            <span>${_t('gallery.js.helpDrag', '마우스 드래그로 화면을 회전시킬 수 있습니다')}</span>
                        </div>
                        <div class="help-item">
                            <i class="fas fa-hand-pointer"></i>
                            <span>${_t('gallery.js.helpTouch', '터치 스크린에서는 손가락으로 드래그하세요')}</span>
                        </div>
                        <div class="help-item">
                            <i class="fas fa-search"></i>
                            <span>${_t('gallery.js.helpZoom', '마우스 휠이나 핀치로 확대/축소할 수 있습니다')}</span>
                        </div>
                        <div class="help-item">
                            <i class="fas fa-sync-alt"></i>
                            <span>${_t('gallery.js.helpAutoRotate', '자동회전 버튼으로 자동으로 둘러볼 수 있습니다')}</span>
                        </div>
                        <div class="help-item">
                            <i class="fas fa-keyboard"></i>
                            <span>${_t('gallery.js.helpEsc', 'ESC 키를 눌러 닫을 수 있습니다')}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    document.body.insertAdjacentHTML('beforeend', modalHTML);
    setupPanoramaModalEvents();
}

function setupPanoramaModalEvents() {
    const modal = document.getElementById('panorama-modal');
    const closeBtn = document.getElementById('panorama-close-btn');
    const resetBtn = document.getElementById('panorama-reset-btn');
    const autoBtn = document.getElementById('panorama-auto-btn');
    const zoomInBtn = document.getElementById('panorama-zoom-in-btn');
    const zoomOutBtn = document.getElementById('panorama-zoom-out-btn');
    const helpBtn = document.getElementById('panorama-help-btn');
    const helpPanel = document.getElementById('panorama-help-panel');
    
    let isAutoRotating = false;
    let isHelpVisible = false;
    
    // 모달 닫기
    closeBtn.addEventListener('click', closePanoramaModal);
    modal.addEventListener('click', (e) => {
        if (e.target === modal) closePanoramaModal();
    });
    
    // ESC 키로 닫기
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && modal.classList.contains('active')) {
            closePanoramaModal();
        }
    });
    
    // 초기화 버튼
    resetBtn.addEventListener('click', () => {
        if (current360Viewer) {
            current360Viewer.reset();
        }
    });
    
    // 자동회전 버튼
    autoBtn.addEventListener('click', () => {
        if (current360Viewer) {
            if (isAutoRotating) {
                current360Viewer.stopAutoRotate();
                autoBtn.innerHTML = `<i class="fas fa-sync-alt"></i><span>${_t('gallery.js.autoRotate', '자동회전')}</span>`;
                autoBtn.classList.remove('active');
                isAutoRotating = false;
            } else {
                current360Viewer.startAutoRotate();
                autoBtn.innerHTML = `<i class="fas fa-pause"></i><span>${_t('gallery.js.stop', '정지')}</span>`;
                autoBtn.classList.add('active');
                isAutoRotating = true;
            }
        }
    });
    
    // 확대 버튼
    zoomInBtn.addEventListener('click', () => {
        if (current360Viewer) {
            current360Viewer.zoomIn();
        }
    });
    
    // 축소 버튼
    zoomOutBtn.addEventListener('click', () => {
        if (current360Viewer) {
            current360Viewer.zoomOut();
        }
    });
    
    // 도움말 버튼
    helpBtn.addEventListener('click', () => {
        isHelpVisible = !isHelpVisible;
        helpPanel.style.display = isHelpVisible ? 'block' : 'none';
        helpBtn.classList.toggle('active', isHelpVisible);
    });
    
    // 도움말 패널 클릭시 닫기
    helpPanel.addEventListener('click', (e) => {
        if (e.target === helpPanel) {
            isHelpVisible = false;
            helpPanel.style.display = 'none';
            helpBtn.classList.remove('active');
        }
    });
}

function openPanoramaModal(imageSrc, title) {
    const modal = document.getElementById('panorama-modal');
    const modalTitle = document.getElementById('panorama-modal-title');
    const viewerContainer = document.getElementById('panorama-viewer-container');
    
    modalTitle.textContent = title;
    modal.classList.add('active');
    // iOS 스크롤 방지
    document.body.style.overflow = 'hidden';
    document.body.style.position = 'fixed';
    document.body.style.width = '100%';
    document.body.style.top = `-${window.scrollY}px`;

    // 간단한 360도 좌우 스크롤 뷰어 생성
    current360Viewer = new Easy360Viewer(viewerContainer, imageSrc, title);
}

function closePanoramaModal() {
    const modal = document.getElementById('panorama-modal');
    const autoBtn = document.getElementById('panorama-auto-btn');
    const helpBtn = document.getElementById('panorama-help-btn');
    const helpPanel = document.getElementById('panorama-help-panel');

    // WebGL 뷰어 정리
    if (current360Viewer) {
        current360Viewer.destroy();
        current360Viewer = null;
    }

    // UI 초기화
    autoBtn.innerHTML = `<i class="fas fa-sync-alt"></i><span>${_t('gallery.js.autoRotate', '자동회전')}</span>`;
    autoBtn.classList.remove('active');
    helpBtn.classList.remove('active');
    helpPanel.style.display = 'none';

    modal.classList.remove('active');
    const scrollY = document.body.style.top;
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.width = '';
    document.body.style.top = '';
    window.scrollTo(0, parseInt(scrollY || '0') * -1);

    // 컨테이너 정리
    document.getElementById('panorama-viewer-container').innerHTML = '';
}