<?php include('header.php'); ?>
<?php
	if(isset($_GET['cid'])){
		$cid = $_GET['cid'];
		include('manager/includes/connection.php');
		$getCollectionData = mysql_query("select * from collection where cid='$cid'");
		$getCount = mysql_num_rows($getCollectionData);
		if($getCount>0){
			$cData = mysql_fetch_array($getCollectionData);
		}
	}else{
		header("location:index.php");
	}
?>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/slippry.css">
<style>
	/* Thumbnails */

.thumb-box {
    padding: 1.4em 0 1em;
    margin-left: -1%;
    width: 102%
}

.thumb-box .thumbs {
    overflow: hidden;
    *zoom: 1
}

.thumb-box .thumbs li {
    float: left;
    width: 15%;
    text-align: center;
    padding: 0px 1%;
    border-right: 1px solid #e2e2e2;
    list-style: none;
	height: 150px;
}
.thumb-box .thumbs li:last-child{
	border:none;
}
.thumb-box .thumbs li img {
    width: 100%;
    opacity: .8;
    -moz-transition: opacity 0.32s;
    -o-transition: opacity 0.32s;
    -webkit-transition: opacity 0.32s;
    transition: opacity 0.32s;
    border-bottom: 4px solid transparent;
	object-fit: contain;
    height: 145px;
}

.thumb-box .thumbs li img.active {
    border-color: #2a0902;
    opacity: 1
}

.thumb-box .thumbs li:hover img {
    opacity: 1;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s
}
</style>
</head>
    <body class="fixed-header">
			<?php include('nav.php'); ?>
            <section class="mySection creamColor pageHeader" style="padding:0;margin:0;">
				<div class="container-fluid">
					<div class="row">
						<div class="col-sm-12" style="padding:0;">
							<img src="collections/<?php echo $cid; ?>/cover/<?php echo $cData['cover']; ?>" class="img-responsive" style="width: 100%;">
						</div>					
					</div>
				</div>
			</section>
            <section class="mySection" style="background:#fcecd8;">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="col-sm-12"><h1><?php echo $cData['name']; ?></h1></div>
							<p><?php echo $cData['description']; ?></p>
						</div>		
						<div class="col-sm-12" style="background:#fff;">
							<?php
								$galleryList='';
								$galleryListThumb='';
								include('manager/includes/connection.php');
								$getGallery = mysql_query("select * from gallery where cid='$cid'");
								$getCount = mysql_num_rows($getGallery);
								if($getCount>0){
									$i=1;
									while($galleryRows = mysql_fetch_array($getGallery)){
										$id = $galleryRows['id'];
										$path = $galleryRows['path'];
										
										$galleryList.=' <li>
    <a href="#slide'.$i.'"><img src="collections/'.$cid.'/gallery/'.$path.'" class="img-responsive galleryImg" style="object-fit: contain;height: 500px;float:none;margin:0 auto;"></a>
  </li>';
													  
										$galleryListThumb.='<li>
        <a href="#'.$i.'" data-slide="'.$i.'"><img src="collections/'.$cid.'/gallery/'.$path.'"></a>
      </li>';
	  
	  $i++;
									}
								}else{
									$galleryList.='';
								}
							?>
						
							<ul id="thumbnails1" style="padding-top:10px;">
								<?php echo $galleryList; ?>
							</ul>
							<div id="thumbs1">
								<div class="thumb-box">
									<ul class="thumbs">
										<?php echo $galleryListThumb; ?>
									</ul>
								</div>
							</div>
						</div>

						
					</div>
				</div>
			</section>
			
      		<?php include('footer.php'); ?>
			<?php include('footerjs.php'); ?>
			<script src="js/slippry.min.js"></script>
			<script>
			
			$(document).ready(function() {
				var thumbs = jQuery('#thumbnails').slippry({
				  // general elements & wrapper
				  slippryWrapper: '<div class="slippry_box thumbnails" />',
				  // options
				  transition: 'horizontal',
				  pager: false,
				  auto: false,
				  onSlideBefore: function (el, index_old, index_new) {
					jQuery('.thumbs a img').removeClass('active');
					jQuery('img', jQuery('.thumbs a')[index_new]).addClass('active');
				  }
				});

				jQuery('.thumbs a').click(function () {
				  thumbs.goToSlide($(this).data('slide'));
				  return false;
				});
			});
			
		</script>
    </body>
</html>