<?php
/*
Template Name: Main gallery
*/
?>

<?php get_header(); ?> 

<?php $options = get_option('pb_options'); ?>

<div id="middle-contents" class="clearfix home">
	
		<div id="container">
	
			<div id="main_gallery" style="margin-bottom:<?php echo $options['caption_space'] ?>px;" >
				
				<div class="slideshow-container"  >
					<!--<div id="controls" class="controls"></div>-->
					<div id="loading" class="loader"></div>
					<div id="slideshow" class="slideshow"></div>
					<div id="caption" class="caption-container"></div>
				</div>			
					
				<!-- Start Advanced Gallery Html Containers -->				
				<div class="navigation-container">
				
					<ul id="portflio" class="dropdown">
						<?php
						$category = get_the_category(); 
						wp_list_categories('child_of='.$options['category_post_id'].'&title_li=' . $category[0]->cat_name . '&exclude=' . $cat);
						?>
					</ul>
					
					<div style="clear: both;"></div>
					
					<div id="thumbs" class="navigation">
						
							<ul class="thumbs noscript">
							
								<?php
					

								query_posts('posts_per_page=-1&cat=' . $cat);

								
								if ( have_posts() ) {
									while ( have_posts() ){
										the_post();
										global $more;
										$more = 0;
										$img=get_post_meta($post->ID, 'gallery', true);							
										?>
										
										<li>						
											<a class="thumb" href="<?php bloginfo('template_url'); ?>/image.php?width=620&amp;height=560&amp;image=<?php echo $img?>" >
											<img src="<?php bloginfo('template_url'); ?>/image.php?width=<?php echo $options['thumbnail_width']?>&amp;height=<?php echo $options['thumbnail_height']?>&amp;cropratio=<?php echo $options['thumbnail_crop_ratio']?>&amp;image=<?php echo $img?>" alt="<?php echo the_title();?>" title="<?php echo the_title();?>" />
											</a>
											
											<?php if( $options['show_captions']){ ?>											
												<div class="caption">											
													<div class="image-caption"><?php the_title(); ?></div>
													<div class="image-desc"><?php the_content();?></div>										
												</div> 					
											<?php } ?>			
										</li>
												
										<?php
									} //end while
								} //if have posts		
								?>								
								
								</ul>
						
						
						
						<div style="clear: both;"></div>
						<a class="pageLink prev" style="display: none;" href="#" title="Previous Page"></a>
						<a class="pageLink next" style="display: none;" href="#" title="Next Page"></a>
					</div>
					
				</div>
				<div id="controls" class="controls"></div>

			</div>
			
			<!-- End Gallery Html Containers -->
		
		</div>
	
	
	<script type="text/javascript">
		
		jQuery(document).ready(function($) {
			
			// We only want these styles applied when javascript is enabled
			$('#main_gallery').css('display', 'block');
	
			// Initially set opacity on thumbs and add
			// additional styling for hover effect on thumbs
			var onMouseOutOpacity = 0.67;
			$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
				mouseOutOpacity:   onMouseOutOpacity,
				mouseOverOpacity:  1.0,
				fadeSpeed:         'fast',
				exemptionSelector: '.selected'
			});
			
			// Initialize Advanced Galleriffic Gallery
			var gallery = $('#thumbs').galleriffic({
				delay:                     3500,
				numThumbs:                 <?php echo $options['num_thumb'] ?>,
				preloadAhead:              <?php echo $options['num_thumb'] ?>,
				enableTopPager:            false,
				enableBottomPager:         false,
				imageContainerSel:         '#slideshow',
				controlsContainerSel:      '#controls',
				captionContainerSel:       '#caption',  
				loadingContainerSel:       '#loading',
				renderSSControls:          true,
				renderNavControls:         true,
				playLinkText:              '<span>Play Slideshow</span>',
				pauseLinkText:             '<span>Pause Slideshow</span>',
				prevLinkText:              '&lsaquo; Previous Photo',
				nextLinkText:              'Next Photo &rsaquo;',
				nextPageLinkText:          'Next &rsaquo;',
				prevPageLinkText:          '&lsaquo; Prev',
				enableHistory:             false,  
				autoStart:                 false,
				syncTransitions:           true,
				defaultTransitionDuration: 300,
				onSlideChange:             function(prevIndex, nextIndex) {
					// 'this' refers to the gallery, which is an extension of $('#thumbs')
					this.find('ul.thumbs').children()
						.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
						.eq(nextIndex).fadeTo('fast', 1.0);
	
					// Update the photo index display
					this.$captionContainer.find('div.photo-index')
						.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
				},
				onTransitionOut:           function(slide, caption, isSync, callback) {
						slide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, callback);
						caption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
				},
				onPageTransitionOut:       function(callback) {
					//this.fadeTo('fast', 0.0, callback);
					this.hide();
					setTimeout(callback, 100); // wait a bit 
				},
				onPageTransitionIn:        function() {
						var prevPageLink = this.find('a.prev').css('display', 'none');
						var nextPageLink = this.find('a.next').css('display', 'none');
						
						// Show appropriate next / prev page links
						if (this.displayedPage > 0)
							prevPageLink.css('display', 'block');
		
						var lastPage = this.getNumPages() - 1;
						if (this.displayedPage < lastPage)
							nextPageLink.css('display', 'block');
		
						this.fadeTo('fast', 1.0);
				},
				onTransitionIn:            function(slide, caption, isSync) {
						var duration = this.getDefaultTransitionDuration(isSync);
						slide.fadeTo(duration, 1.0);
	
						// Position the caption at the bottom of the image and set its opacity
						var slideImage = slide.find('img');
						caption.width(slideImage.width())
							.css({
								//'bottom' : Math.floor((slide.height() - slideImage.outerHeight()) / 2 - 40),
								'top' : slideImage.outerHeight(),
								'left' : Math.floor((slide.width() - slideImage.width()) / 2) + slideImage.outerWidth() - slideImage.width()
							})
							.fadeTo(1000, 1.0);
						
				}
				
				
			});
			
			<?php if($options['use_hover']){ ?>			
			 
				gallery.find('a.thumb').hover(function(e) {
					gallery.clickHandler(e, this);
				});
			
			<?php } ?>
				
	
			/**************** Event handlers for custom next / prev page links **********************/
	
			gallery.find('a.prev').click(function(e) {
				gallery.previousPage();
				e.preventDefault();
			});
	
			gallery.find('a.next').click(function(e) {
				gallery.nextPage(); 
				e.preventDefault();
			});
	
			/****************************************************************************************/
		});
	</script>
									
		
	
	
</div>
<!-- #middle-contents end -->
<?php get_footer(); ?>