
<?php
/*
 *
 * @package Luzuk Premium
 */
if(get_theme_mod('gallery_area_disable') != 'on' ){ 
	?>
	<?php 
	if( get_theme_mod('sec_gallerysectionTpadding',true) ) {
		$sec_gallerysectionTpadding = 'padding-top:'.esc_attr(get_theme_mod('sec_gallerysectionTpadding')).';';
	}
	if( get_theme_mod('sec_gallerysectionBpadding',true) ) {
		$sec_gallerysectionBpadding = 'padding-bottom:'.esc_attr(get_theme_mod('sec_gallerysectionBpadding')).';';
	}
	?>	
	<div class="gallery-area wow zoomIn" id="gallery" style="<?php echo esc_attr($sec_gallerysectionTpadding); ?>" "<?php echo esc_attr($sec_gallerysectionBpadding); ?>">
		<?php
			$gallery_title = get_theme_mod('luzuk_gallery_title', 'Gallery & Portfolio');
		?>
<div class="custom-shape-divider-top-1611913562">
    <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
        <path d="M985.66,92.83C906.67,72,823.78,31,743.84,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
    </svg>
    
</div>
		<div class="gallbox">
		<div class="container">
			<div class="row justify-content-center">
				<?php if($gallery_title) { ?>
				<div class="col-md-8 col-md-offset4">
					<div class="section-title">
						<h2><?php echo ($gallery_title);  ?></h2>
					</div>
				</div>
				<?php }?>
			</div>
		 	<div class="row"> 

			<?php 
			$showStatic = true;
			$cols = get_theme_mod('gallery_npp_count', 5);
			$cols++;
			switch($cols){
				case 1:
		        $colCls = 'col-md-12 col-sm-12 col-xs-12'; 
		        break;
		        case 2:
		        $colCls = 'col-md-6 col-sm-6 col-xs-12';
		        break;
		        case 3:
		        case 5:
		        case 6:
		        case 9:
		        $colCls = 'col-md-4 col-sm-6 col-xs-12';
		        break;
		        case 4:
		        case 7:
		        case 8:
		        case 10:
		        case 11:
		        case 12:
		        $colCls = 'col-md-3 col-sm-6 col-xs-12';
		        break;
		        default:
		        $colCls = 'col-md-4 col-sm-6 col-xs-12';
		        break;
			}
			for( $i = 1; $i <= $cols; $i++ ){
				$gallery_page_id = get_theme_mod('gallery_page'.$i); 
				$gallery_page_icon = get_theme_mod('gallery_page_icon'.$i);
				if($gallery_page_id){
					$showStatic = false;
					echo galleryShortCode($gallery_page_id, $isCustomizer=true, $i);
				}
			}

			$args = array(
				'post_type' => 'our-gallery',
				'post_status' => 'publish'
			);
			$new = new WP_Query($args);  
			$i=1;

			if($showStatic == true){
				while ( $new->have_posts() ){
					$new->the_post(); 
					$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'medium_large' );
					if(has_post_thumbnail()) { $image_url = $thumb['0']; }
					$url = $thumb['0'];?>

						<div class="boxes <?php echo $colCls;?>">
							<div class="galleryboxes">
								<a href="#my_href_8">
									<div class="box">
										<div class="box-video">
											<img alt="<?php the_title(); ?>" src="<?php echo esc_url($image_url); ?>" />
											<div class="overlay"></div>
											<i class="fa fa-play-circle" aria-hidden="true"></i>
										</div>
										<div class="gcontain">	
											<h5>MOVIE PROJECT</h5>
										</div>
									</div>
								</a>
								<div class="popup-content">
									<div id="my_href_8">
										<iframe width="853" height="500" src="https://www.youtube.com/embed/00SCj3cWk0Y" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
									</div>
								</div>
							</div>
						</div>
					
						<?php 
	 					}
	 				} ?>
			</div>
			<div class="glrybtn">
					<?php
						$glry_link = get_theme_mod('glry_link', '');
						$glry_button = get_theme_mod('glry_button1', 'Explore All');
					?>
					<?php if( get_theme_mod('glry_button1_display','show' ) == 'show') :
						?>
						<div class="glrybtmbtn">
							<a class="main-btn btn-3" href="<?php echo $glry_link ?>"> <?php echo $glry_button ?> <i class="fa fa-angle-double-right"></i></a>
						</div>
					<?php endif ?>
				</div>
		</div>
		<div class="clearfix"></div>
	</div>
	<div class="clearfix"></div>
	</div>
	<script>
		var links = $('.boxes a');
		links.colorbox({
			inline: true,
			rel: 'gallery'
		});

		/* Colorbox resize function */
		var resizeTimer;
		function resizeColorBox()
		{
			if (resizeTimer) clearTimeout(resizeTimer);
			resizeTimer = setTimeout(function() {
				if ($('#cboxOverlay').is(':visible')) {
					$.colorbox.load(true);
				}
			}, 300)
		}

	// Resize Colorbox when resizing window or changing mobile device orientation
	$(window).resize(resizeColorBox);
	window.addEventListener("orientationchange", resizeColorBox, false);

	$('.boxes a').colorbox({maxWidth:'95%', maxHeight:'95%'});
	</script>
<?php }

