<?php
/**
 * 书法作品详情页模板
 */

get_header(); ?>

    <div class="pinyin-index-container">
        <!-- 英文字母索引 -->
        <div class="pinyin-section">

<div id="primary1" class="content-area">
    <main id="main" class="site-main">
        <?php
        while (have_posts()) : the_post();
            $character = get_post_meta(get_the_ID(), '_calligraphy_character', true);
            $style = get_post_meta(get_the_ID(), '_calligraphy_style', true);
            $artist = get_post_meta(get_the_ID(), '_calligraphy_artist', true);
            $dynasty = get_post_meta(get_the_ID(), '_calligraphy_dynasty', true);
            $year = get_post_meta(get_the_ID(), '_calligraphy_year', true);
            $provenance = get_post_meta(get_the_ID(), '_calligraphy_provenance', true);
            $collection = get_post_meta(get_the_ID(), '_calligraphy_collection', true);
            $character_images = get_post_meta(get_the_ID(), '_calligraphy_character_images', true);
            $full_work_images = get_post_meta(get_the_ID(), '_calligraphy_full_work', true);
        ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <header class="entry-header">
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                </header>

                <div class="calligraphy-details">
                    <div class="calligraphy-image-container">
                        <?php if (has_post_thumbnail()) : ?>
                            <div class="calligraphy-image">
                                <?php the_post_thumbnail('large'); ?>
                            </div>
                        <?php else : ?>
                            <div class="no-image">
                                <p>暂无图像</p>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="calligraphy-meta">
                        <table class="calligraphy-meta-table">
                            <tr>
                                <th>汉字</th>
                                <td>
                                    <?php 
                                    if ($character) {
                                        echo esc_html($character);
                                        echo ' (<a href="' . get_site_url() . '/?s=' . urlencode($character) . '&post_type=chinese_character">查看字典</a>)';
                                    } else {
                                        echo '未指定';
                                    }
                                    ?>
                                </td>
                            </tr>
                            <tr>
                                <th>书体</th>
                                <td><?php echo esc_html($style ?: '未指定'); ?></td>
                            </tr>
                            <tr>
                                <th>书法家</th>
                                <td><?php echo esc_html($artist ?: '未知'); ?></td>
                            </tr>
                            <tr>
                                <th>朝代</th>
                                <td><?php echo esc_html($dynasty ?: '未知'); ?></td>
                            </tr>
                            <tr>
                                <th>年代</th>
                                <td><?php echo esc_html($year ?: '未知'); ?></td>
                            </tr>
                            <?php if ($provenance) : ?>
                            <tr>
                                <th>作品出处</th>
                                <td><?php echo esc_html($provenance); ?></td>
                            </tr>
                            <?php endif; ?>
                            <?php if ($collection) : ?>
                            <tr>
                                <th>现在馆藏</th>
                                <td>
                                    <?php 
                                    // 检查是否是博物馆名称
                                    $museum = get_page_by_title($collection, OBJECT, 'chinese_museum');
                                    if ($museum) {
                                        // 如果是博物馆，创建链接
                                        echo '<a href="' . get_permalink($museum->ID) . '">' . esc_html($collection) . '</a>';
                                    } else {
                                        // 否则按普通文本显示
                                        echo esc_html($collection);
                                    }
                                    ?>
                                </td>
                            </tr>
                            <?php endif; ?>
                        </table>
                        
                        <div class="calligraphy-navigation">
                            <?php
                            // 获取同一汉字的其他书法作品
                            if ($character) {
                                $args = array(
                                    'post_type' => 'chinese_calligraphy',
                                    'post_status' => 'publish',
                                    'posts_per_page' => -1,
                                    'post__not_in' => array(get_the_ID()),
                                    'meta_query' => array(
                                        array(
                                            'key' => '_calligraphy_character',
                                            'value' => $character,
                                            'compare' => '='
                                        )
                                    )
                                );
                                
                                $related_query = new WP_Query($args);
                                
                                if ($related_query->have_posts()) {
                                    echo '<h3>同一汉字的其他书法作品</h3>';
                                    echo '<div class="related-calligraphy">';
                                    while ($related_query->have_posts()) {
                                        $related_query->the_post();
                                        $related_style = get_post_meta(get_the_ID(), '_calligraphy_style', true);
                                        $related_artist = get_post_meta(get_the_ID(), '_calligraphy_artist', true);
                                        
                                        echo '<div class="related-item">';
                                        echo '<a href="' . get_permalink() . '">';
                                        if (has_post_thumbnail()) {
                                            the_post_thumbnail('thumbnail');
                                        } else {
                                            echo '<div class="no-thumb">无图像</div>';
                                        }
                                        echo '<div class="related-info">';
                                        echo '<strong>' . esc_html($character) . '</strong>';
                                        echo '<p>' . esc_html($related_style ?: '未知书体') . '</p>';
                                        echo '<p>' . esc_html($related_artist ?: '未知书法家') . '</p>';
                                        echo '</div>';
                                        echo '</a>';
                                        echo '</div>';
                                    }
                                    echo '</div>';
                                    wp_reset_postdata();
                                }
                            }
                            ?>
                        </div>
                    </div>
                </div>
                
                <?php if ($character_images && is_array($character_images)) : ?>
                <div class="character-calligraphy-gallery">
                    <h3>单字字形</h3>
                    <div class="gallery-container">
                        <div class="gallery-thumbnails">
                            <?php foreach ($character_images as $index => $image_id) : ?>
                                <div class="thumbnail-item" data-index="<?php echo $index; ?>">
                                    <img src="<?php echo esc_url(wp_get_attachment_image_src($image_id, 'thumbnail')[0]); ?>" alt="单字字形">
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="gallery-main">
                            <div class="gallery-main-inner">
                                <?php foreach ($character_images as $index => $image_id) : ?>
                                    <div class="gallery-slide <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>">
                                        <img src="<?php echo esc_url(wp_get_attachment_url($image_id)); ?>" alt="单字字形">
                                        
                                        <div class="gallery-22">
                                        <?php 
                                        // 获取图片说明文字
                                        $image_captions = get_post_meta(get_the_ID(), '_calligraphy_character_image_captions', true);
                                        $caption = isset($image_captions[$image_id]) ? $image_captions[$image_id] : '';
                                        if (!empty($caption)) : ?>
                                            <div class="gallery-caption"><?php echo esc_html($caption); ?></div>
                                        <?php endif; ?>
                                        </div>
                                        
                                        <?php 
                                        // 获取图片说明文字
                                        //$image_captions = get_post_meta(get_the_ID(), '_calligraphy_character_image_captions', true);
                                        //$caption = isset($image_captions[$image_id]) ? $image_captions[$image_id] : '';
                                        //if (!empty($caption)) : ?>
                                            <div class="gallery-caption"><?php //echo esc_html($caption); ?></div>
                                        <?php //endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            
                             
                            
                            <button class="gallery-prev" aria-label="上一张">‹</button>
                            <button class="gallery-next" aria-label="下一张">›</button>
                            
                            <div class="gallery-controls">
                                <button class="gallery-download" aria-label="下载">⬇</button>
                                <button class="gallery-fullscreen" aria-label="全屏">⛶</button>
                            </div>
                            
                            <div class="gallery-indicators">
                                <?php foreach ($character_images as $index => $image_id) : ?>
                                    <span class="indicator <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>"></span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endif; ?>
                
                <?php if ($full_work_images && is_array($full_work_images)) : ?>
                <div class="full-calligraphy-gallery">
                    <h3>完整书法作品</h3>
                    <div class="gallery-container">
                        <div class="gallery-thumbnails">
                            <?php foreach ($full_work_images as $index => $image_id) : ?>
                                <div class="thumbnail-item" data-index="<?php echo $index; ?>">
                                    <img src="<?php echo esc_url(wp_get_attachment_image_src($image_id, 'thumbnail')[0]); ?>" alt="完整作品">
                                </div>
                            <?php endforeach; ?>
                        </div>
                        
                        <div class="gallery-main">
                            <div class="gallery-main-inner">
                                <?php foreach ($full_work_images as $index => $image_id) : ?>
                                    <div class="gallery-slide <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>">
                                        <img src="<?php echo esc_url(wp_get_attachment_url($image_id)); ?>" alt="完整作品">
                                        
                                        
                                        <div class="gallery-22">
                                         <?php 
                                        // 获取图片说明文字
                                        $image_captions = get_post_meta(get_the_ID(), '_calligraphy_full_work_captions', true);
                                        $caption = isset($image_captions[$image_id]) ? $image_captions[$image_id] : '';
                                        if (!empty($caption)) : ?>
                                            <div class="gallery-caption"><?php echo esc_html($caption); ?></div>
                                        <?php endif; ?>
                                        </div>
                                        
                                        <?php 
                                        // 获取图片说明文字
                                        //$image_captions = get_post_meta(get_the_ID(), '_calligraphy_full_work_captions', true);
                                        //$caption = isset($image_captions[$image_id]) ? $image_captions[$image_id] : '';
                                        //if (!empty($caption)) : ?>
                                            <div class="gallery-caption"><?php //echo esc_html($caption); ?></div>
                                        <?php //endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                            
                            <button class="gallery-prev" aria-label="上一张">‹</button>
                            <button class="gallery-next" aria-label="下一张">›</button>
                            
                            <div class="gallery-controls">
                                <button class="gallery-download" aria-label="下载">⬇</button>
                                <button class="gallery-fullscreen" aria-label="全屏">⛶</button>
                            </div>
                            
                            <div class="gallery-indicators">
                                <?php foreach ($full_work_images as $index => $image_id) : ?>
                                    <span class="indicator <?php echo $index === 0 ? 'active' : ''; ?>" data-index="<?php echo $index; ?>"></span>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endif; ?>

                <div class="entry-content">
                    <?php the_content(); ?>
                </div>
            </article>
        <?php endwhile; ?>
	</main><!-- .site-main -->
	</div><!-- .content-area -->
	<?php //get_sidebar(); ?>
               </div>
                </div>




<!-- 全屏查看器 -->
<div class="gallery-lightbox" style="display: none;">
    <div class="lightbox-content">
        <button class="lightbox-close" aria-label="关闭">×</button>
        <button class="lightbox-prev" aria-label="上一张">‹</button>
        <button class="lightbox-next" aria-label="下一张">›</button>
        <div class="lightbox-controls">
            <button class="lightbox-zoom" aria-label="放大">+</button>
            <button class="lightbox-reset" aria-label="重置">↺</button>
        </div>
        <button class="lightbox-download" aria-label="下载">⬇</button>
        <img class="lightbox-image" src="" alt="">
        <div class="lightbox-info">
            <span class="lightbox-title"></span>
        </div>
    </div>
</div>

<style>

.pinyin-index-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.pinyin-section {
    margin-bottom: 40px;
}

.pinyin-section h2 {
    border-bottom: 2px solid #0073aa;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.calligraphy-details {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin: 20px 0;
}

.calligraphy-image-container {
    flex: 1;
    min-width: 300px;
}

.calligraphy-image {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    background: #f9f9f9;
}

.calligraphy-image img {
    max-width: 100%;
    height: auto;
}

.no-image {
    padding: 50px 20px;
    text-align: center;
    background: #f5f5f5;
    color: #999;
}

.calligraphy-meta {
    flex: 1;
    min-width: 300px;
}

.calligraphy-meta-table {
    width: 100%;
    border-collapse: collapse;
}

.calligraphy-meta-table th,
.calligraphy-meta-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.calligraphy-meta-table th {
    background: #f5f5f5;
    width: 100px;
}

.calligraphy-navigation {
    margin-top: 30px;
}

.related-calligraphy {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.related-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}

.related-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.related-item .no-thumb {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    color: #999;
    font-size: 12px;
}

.related-info {
    padding: 10px 5px;
}

.related-info strong {
    display: block;
    margin-bottom: 5px;
}

.related-info p {
    margin: 3px 0;
    font-size: 12px;
    color: #666;
}

.character-calligraphy-gallery,
.full-calligraphy-gallery {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}

.character-calligraphy-gallery h3,
.full-calligraphy-gallery h3 {
    margin-top: 0;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.gallery-thumbnails {
    flex: 1;
    min-width: 100px;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
}

.thumbnail-item {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.3s;
}

.thumbnail-item.active,
.thumbnail-item:hover {
    border-color: #0073aa;
}

.thumbnail-item img {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-main {
    flex: 3;
    min-width: 300px;
    position: relative;
}

.gallery-main-inner {
    position: relative;
    height: 500px;
    overflow: hidden;
    border-radius: 4px;
    /*background: #000;*/
    background: #f0f0f0;
}


.gallery-22 {
    position: relative;
    height: 500px;
    left:8px;
    right:8px;
    top:3px;
    bottom: 10px;
    width:100px;
    overflow: hidden;
    border-radius: 4px;
    /*background: #000;*/
    background: #f0f0f0;
}



.gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-slide.active {
    opacity: 1;
}

.gallery-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gallery-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.gallery-controls button {
    /*background: rgba(0, 0, 0, 0.5);*/
    background: rgba(0, 0, 0, 0.0);
    /*color: white;*/
    color: black;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-controls button:hover {
    /*background: rgba(0, 0, 0, 0.8);*/
    background: rgba(0, 0, 0, 0.0);
}

.gallery-prev,
.gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /*background: rgba(0, 0, 0, 0.5);*/
    background: rgba(0, 0, 0, 0.0);
    /*color: white;*/
    color: black;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.gallery-prev {
    left: 10px;
}

.gallery-next {
    right: 10px;
}

.gallery-prev:hover,
.gallery-next:hover {
    /*background: rgba(0, 0, 0, 0.8);*/
    background: rgba(0, 0, 0, 0.0);
}

.gallery-indicators {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.indicator.active {
    background: white;
}

.gallery-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.9);*/
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    /*right: 0;*/
    left: 0;
    background: none;
    border: none;
    color: white;
    /*ont-size: 30px;*/
    font-size: 24px;
    cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /*background: rgba(0, 0, 0, 0.5);*/
    background: rgba(0, 0, 0, 0.0);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lightbox-prev {
    left: 10px;
}

.lightbox-next {
    right: 10px;
}

.lightbox-download {
    position: absolute;
    top: -40px;
    /*right: 40px;*/
    right: 0px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.lightbox-image {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    cursor: zoom-in;
    transition: transform 0.3s ease;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-image.zoomed {
    cursor: grab;
}

.lightbox-image.zoomed.dragging {
    cursor: grabbing;
}

.lightbox-controls {
    position: absolute;
    top: -40px;
    right: 80px;
}

.lightbox-zoom {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    margin-right: 10px;
}

.lightbox-reset {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.lightbox-info {
    position: absolute;
    bottom: -40px;
    left: 0;
    right: 0;
    text-align: center;
    color: white;
    display: none; /* 隐藏标题信息 */
}

@media (max-width: 768px) {
    .calligraphy-details {
        flex-direction: column;
    }
    
    .gallery-container {
        flex-direction: column;
    }
    
    .gallery-thumbnails {
        max-width: 100%;
        flex-direction: row;
        overflow-x: auto;
        max-height: unset;
        overflow-y: hidden;
    }
    
    .thumbnail-item {
        min-width: 80px;
    }
    
    .gallery-main-inner {
        height: 300px;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .lightbox-close {
        top: -35px;
        font-size: 24px;
    }
    
    .lightbox-download {
        top: -35px;
        right: 35px;
        font-size: 20px;
    }
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理单字字形图片查看器
    initGallery('.character-calligraphy-gallery');
    
    // 处理完整作品图片查看器
    initGallery('.full-calligraphy-gallery');
    
    // 初始化图片查看器功能
    function initGallery(gallerySelector) {
        const gallery = document.querySelector(gallerySelector);
        if (!gallery) return;
        
        const slides = gallery.querySelectorAll('.gallery-slide');
        const thumbnails = gallery.querySelectorAll('.thumbnail-item');
        const indicators = gallery.querySelectorAll('.indicator');
        const prevButton = gallery.querySelector('.gallery-prev');
        const nextButton = gallery.querySelector('.gallery-next');
        const downloadButton = gallery.querySelector('.gallery-download');
        const fullscreenButton = gallery.querySelector('.gallery-fullscreen');
        const lightbox = document.querySelector('.gallery-lightbox');
        const lightboxImage = lightbox.querySelector('.lightbox-image');
        const lightboxTitle = lightbox.querySelector('.lightbox-title');
        const lightboxPrev = lightbox.querySelector('.lightbox-prev');
        const lightboxNext = lightbox.querySelector('.lightbox-next');
        const lightboxDownload = lightbox.querySelector('.lightbox-download');
        const lightboxClose = lightbox.querySelector('.lightbox-close');
        
        let currentIndex = 0;
        
        // 图片缩放相关变量
        let scale = 1;
        let isDragging = false;
        let startX, startY;
        let imgStartX, imgStartY;
        let translateX = 0;
        let translateY = 0;
        let currentTranslateX = 0;
        let currentTranslateY = 0;
        
        // 更新幻灯片显示
        function updateSlide(index) {
            // 更新幻灯片
            slides.forEach((slide, i) => {
                slide.classList.toggle('active', i === index);
            });
            
            // 更新缩略图
            thumbnails.forEach((thumb, i) => {
                thumb.classList.toggle('active', i === index);
            });
            
            // 更新指示器
            indicators.forEach((indicator, i) => {
                indicator.classList.toggle('active', i === index);
            });
            
            currentIndex = index;
        }
        
        // 放大图片
        function zoomIn() {
            if (scale < 3) { // 限制最大放大3倍
                scale += 0.2;
                updateImageScale();
                
                // 更新光标样式
                lightboxImage.classList.toggle('zoomed', scale > 1);
            }
        }
        
        // 缩小图片
        function zoomOut() {
            if (scale > 0.2) { // 限制最小缩小到0.2倍
                scale -= 0.2;
                
                // 如果缩放到1或以下，重置位置
                if (scale <= 1) {
                    translateX = 0;
                    translateY = 0;
                }
                
                updateImageScale();
                
                // 更新光标样式
                lightboxImage.classList.toggle('zoomed', scale > 1);
            }
        }
        
        // 重置图片缩放
        function resetZoom() {
            scale = 1;
            translateX = 0;
            translateY = 0;
            currentTranslateX = 0;
            currentTranslateY = 0;
            updateImageScale();
            
            // 重置光标样式
            lightboxImage.classList.remove('zoomed', 'dragging');
        }
        
        // 更新图片缩放
        function updateImageScale() {
            const transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
            lightboxImage.style.transform = transform;
        }
        
        // 开始拖动
        function startDrag(e) {
            if (scale <= 1) return; // 只有在放大时才能拖动
            
            isDragging = true;
            startX = e.clientX;
            startY = e.clientY;
            imgStartX = translateX;
            imgStartY = translateY;
            
            lightboxImage.classList.add('dragging');
            e.preventDefault();
        }
        
        // 拖动中
        function drag(e) {
            if (!isDragging || scale <= 1) return;
            
            const dx = e.clientX - startX;
            const dy = e.clientY - startY;
            
            translateX = imgStartX + dx;
            translateY = imgStartY + dy;
            
            updateImageScale();
            e.preventDefault();
        }
        
        // 结束拖动
        function endDrag(e) {
            if (isDragging) {
                isDragging = false;
                lightboxImage.classList.remove('dragging');
                e.preventDefault();
            }
        }
        
        // 切换到下一张
        function nextSlide() {
            const nextIndex = (currentIndex + 1) % slides.length;
            updateSlide(nextIndex);
        }
        
        // 切换到上一张
        function prevSlide() {
            const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
            updateSlide(prevIndex);
        }
        
        // 缩略图点击事件
        thumbnails.forEach((thumb, index) => {
            thumb.addEventListener('click', () => {
                updateSlide(index);
            });
        });
        
        // 指示器点击事件
        indicators.forEach((indicator, index) => {
            indicator.addEventListener('click', () => {
                updateSlide(index);
            });
        });
        
        // 上一张/下一张按钮事件
        if (prevButton) prevButton.addEventListener('click', prevSlide);
        if (nextButton) nextButton.addEventListener('click', nextSlide);
        
        // 下载按钮事件
        if (downloadButton) {
            downloadButton.addEventListener('click', () => {
                const currentSlide = slides[currentIndex];
                const img = currentSlide.querySelector('img');
                const link = document.createElement('a');
                link.href = img.src;
                link.download = '';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
        
        // 全屏按钮事件
        if (fullscreenButton) {
            fullscreenButton.addEventListener('click', () => {
                const currentSlide = slides[currentIndex];
                const img = currentSlide.querySelector('img');
                const title = gallery.querySelector('h3').textContent;
                
                // 重置缩放状态
                resetZoom();
                
                lightboxImage.src = img.src;
                // 移除标题设置，不显示"单字字形"或"完整书法作品"标题
                // lightboxTitle.textContent = title;
                lightbox.style.display = 'flex';
            });
        }
        
        // 全屏模式功能
        if (lightboxClose) {
            lightboxClose.addEventListener('click', () => {
                lightbox.style.display = 'none';
                resetZoom(); // 关闭时重置缩放
            });
        }
        
        // 添加放大按钮事件
        const lightboxZoom = lightbox.querySelector('.lightbox-zoom');
        if (lightboxZoom) {
            lightboxZoom.addEventListener('click', (e) => {
                e.stopPropagation();
                zoomIn();
            });
        }
        
        // 添加重置按钮事件
        const lightboxReset = lightbox.querySelector('.lightbox-reset');
        if (lightboxReset) {
            lightboxReset.addEventListener('click', (e) => {
                e.stopPropagation();
                resetZoom();
            });
        }
        
        // 添加图片拖动事件
        lightboxImage.addEventListener('mousedown', startDrag);
        lightboxImage.addEventListener('mousemove', drag);
        lightboxImage.addEventListener('mouseup', endDrag);
        lightboxImage.addEventListener('mouseleave', endDrag);
        
        // 添加鼠标滚轮缩放
        lightboxImage.addEventListener('wheel', (e) => {
            e.preventDefault();
            if (e.deltaY < 0) {
                zoomIn();
            } else {
                zoomOut();
            }
        });
        
        if (lightboxPrev) {
            lightboxPrev.addEventListener('click', () => {
                const prevIndex = (currentIndex - 1 + slides.length) % slides.length;
                const prevSlide = slides[prevIndex];
                const img = prevSlide.querySelector('img');
                const title = gallery.querySelector('h3').textContent;
                
                lightboxImage.src = img.src;
                // 移除标题设置，不显示"单字字形"或"完整书法作品"标题
                // lightboxTitle.textContent = title;
                currentIndex = prevIndex;
            });
        }
        
        if (lightboxNext) {
            lightboxNext.addEventListener('click', () => {
                const nextIndex = (currentIndex + 1) % slides.length;
                const nextSlide = slides[nextIndex];
                const img = nextSlide.querySelector('img');
                const title = gallery.querySelector('h3').textContent;
                
                lightboxImage.src = img.src;
                // 移除标题设置，不显示"单字字形"或"完整书法作品"标题
                // lightboxTitle.textContent = title;
                currentIndex = nextIndex;
            });
        }
        
        if (lightboxDownload) {
            lightboxDownload.addEventListener('click', () => {
                const link = document.createElement('a');
                link.href = lightboxImage.src;
                link.download = '';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            });
        }
        
        // 点击遮罩关闭
        lightbox.addEventListener('click', (e) => {
            if (e.target === lightbox) {
                lightbox.style.display = 'none';
            }
        });
        
        // 键盘事件
        document.addEventListener('keydown', (e) => {
            // 只在当前gallery范围内处理键盘事件
            if (!gallery.contains(document.activeElement) && lightbox.style.display === 'none') return;
            
            switch (e.key) {
                case 'ArrowLeft':
                    if (lightbox.style.display === 'flex') {
                        lightboxPrev.click();
                    } else {
                        prevSlide();
                    }
                    break;
                case 'ArrowRight':
                    if (lightbox.style.display === 'flex') {
                        lightboxNext.click();
                    } else {
                        nextSlide();
                    }
                    break;
                case 'Escape':
                    if (lightbox.style.display === 'flex') {
                        lightbox.style.display = 'none';
                        resetZoom(); // 关闭时重置缩放
                    }
                    break;
                case '+':
                case '=':
                    if (lightbox.style.display === 'flex') {
                        zoomIn();
                    }
                    break;
                case '-':
                    if (lightbox.style.display === 'flex') {
                        zoomOut();
                    }
                    break;
                case '0':
                    if (lightbox.style.display === 'flex') {
                        resetZoom();
                    }
                    break;
            }
        });
    }
});
</script>

<?php
get_footer();