{{capture name=galeryincludes assign=tmp}}
<link href="/style/jquery.gallery.css" rel="stylesheet" type="text/css" media="screen">
<link href="/style/jquery.select.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="/js/jquery.gallery.js"></script>
<script type="text/javascript" src="/js/jquery.scrollcycle.js"></script>
<script type="text/javascript" src="/js/jquery.select.js"></script>
{{/capture}}
{{assign var=JavaScriptJQueryIncludeCode value=$JavaScriptJQueryIncludeCode|concat:' '|concat:$tmp}}
{{capture name=galeryincludejs assign=tmp}}
		
		$("#galleryscroller").jCarouselLite({
			btnNext: "#scrollRight",
			btnPrev: "#scrollLeft",
			visible: {{if $table|@count gt 7}}7{{else}}{{math equation='x-1' x=$table|@count}}{{/if}},
			auto: 3000,
			autoStart: false,
			autoStartText: 'View Slideshow',
			autoStopText: 'Stop Slideshow',
			autoID: '#galleryslideshow',
			speed: 500,
			beforeStart: function(a) {
           				
						$.galleria.next();
						
       		}

		});

		
		$('ul.gallerylist').galleria({
			history   : false, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_gallery_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) ) { // FF/Win fades large images terribly slow
					image.css('display','none').fadeIn(1000);
				}
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
			
		$("#gallerychooser").selectbox({ onselectchange : function() { var obj = document.getElementById('gallerychooser'); window.location = '/photo-gallery/'+obj.options[obj.selectedIndex].value+'.html'; } });
{{/capture}}
{{assign var=JavaScriptJQueryCode value=$JavaScriptJQueryCode|concat:' '|concat:$tmp}}
{{if $table|@count eq 0}}
<center>There are no pictures into this category</center>
{{else}}
{{assign var=Tnail value='Collection_'|concat:$tableCollectionID|concat:'_'|concat:3}}
{{assign var=Image value='Collection_'|concat:$tableCollectionID|concat:'_'|concat:3}}
{{assign var=Alt   value='Collection_'|concat:$tableCollectionID|concat:'_'|concat:4}}
{{assign var=ID   value='Collection_'|concat:$tableCollectionID|concat:'_ID'}}

<div id="photogallery">
<div id="main_gallery_image"></div>

<table cellpadding="0" cellspacing="0" border="0" class="imageListContainer"><tr valign="top">
<td><span id="scrollLeft" class="arrow"><</span></td>
<td>
<div id="galleryscroller">
<ul class="gallerylist" >
{{foreach from=$table item=v key=k name=n}}
<li {{if $smarty.foreach.n.first}}class="active"{{/if}}><img src="{{$v.$Image}}" alt="{{$v.$Alt}}" title="{{$v.$Alt}}"></li>
{{/foreach}}
</ul>
</div>
</td>
<td><span id="scrollRight" class="arrow">></span></td>
</tr></table>
</div>
<div id="galleryslideshow">View Slideshow</div>
{{/if}}
