<?php
/**
 * Gallery Single
 *
 * @package Product
 */

if ( has_post_thumbnail( $post->ID ) ) {
	$featured = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'detail-header' );
	$image = $featured[0];
}

get_header(); ?>
	<section id="gallery-detail">
		<div class="gallery-detail-image">
			<?php if ( has_post_thumbnail( $post->ID ) ): ?>
				<img src="<?php echo $image; ?>" alt="<?php the_title(); ?>">
			<?php endif ?>
			<?php
			$points = get_post_meta( get_the_id(), 'detail_map', true );
			$pointCount = 1;
			?>
			<?php if ( count( $points ) && $points != "" ): ?>
				<a href="#" id="mobile-detail-link" class="show-on-phone"><span>View Custom Upgrades</span></a>
			<?php endif ?>
			<div id="detail-box-container" class="vertical-container">
				<div class="vertical-center">
					<a href="#" id="detail-container-close" class="close-button"></a>
					<?php foreach ($points as $point): ?>
						<div class="detail box-<?php echo $pointCount; ?>" style="top:<?php echo $point['ypos']; ?>%; left:<?php echo $point['xpos']; ?>%;">
							<a href="#box-<?php echo $pointCount; ?>"><span></span></a>
						</div>
						<div id="box-<?php echo $pointCount; ?>" class="detail-box">
							<div class="detail-box-content">
								<div class="vertical-container">
									<div class="vertical-center">
										<h5><?php echo $point['title']; ?></h5>
										<p>
											<?php echo nl2br( $point['details'] ); ?>
										</p>
										<a href="#" class="close-button"></a>
									</div>
								</div>
							</div>
						</div>
					<?php $pointCount++; endforeach; ?>
				</div>
			</div>
		</div> <!-- End of Gallery Detail Image -->
<?php get_footer(); ?>