<!--
<?php
     echo '<div id="gallery">';     
    if(!empty($images) && is_array($images) >0)
    {
        echo '<div id="gallery_big_image"><table style="width:100%;height:100%;"><tr><td align="center" valign="middle"></td></tr></table></div>';
        echo '<ul id="mycarousel" class="jcarousel-skin-tango">';
        foreach($images as $k=>$image)
        {
                echo '<li><a href="/files/img/galleries/'.$image['idgalleries'].'/'.$image['path'].'">';
                //echo '<li>';
                    echo '<img class="gallery_thumb" width="92" height="82" src="/files/img/galleries/'.$image['idgalleries'].'/min/'.$image['path'].'" alt="'.$image['title'].'" />';
                //echo '</li>';
                echo '</a></li>';
        }
        echo '</ul>';
        echo '<br class="clear"/>';
            if(count($images) > 8)
                echo '<div class="page_navigation"></div>';
        echo '</div>';
    }
        if ($active_lang==3)
            echo '<a style="float:right;" href="/pl/artykul/galeria-56.html"><img src="/files/img/articles/wroc-do-galerii.jpg" alt="wróć do galerii" width="162" height="36" /></a>';
        elseif($active_lang==4)
            echo '<a style="float:right;" href="/en/article/galery-56.html"><img src="/files/img/articles/wroc-do-galerii-eng.jpg" alt="wróć do galerii" width="162" height="36" /></a>';
    

    echo '<br class="clear"/><br /><br />';
    if(isset($content)){
            echo $content;
     }
?>
-->
<?php
    if(!empty($images) && is_array($images) >0)
    {
?>
    <div id="gallery" class="content">
        <div id="controls" class="controls"></div>
        <div class="slideshow-container">
            <div id="loading" class="loader"></div>
            <div id="slideshow" class="slideshow"></div>
        </div>
        <div id="caption" class="caption-container"></div>
    </div>

    <div id="thumbs" class="navigation">
        <ul class="thumbs noscript">
            <?php  foreach($images as $k=>$image) { ?>
            <li>
                <a class="thumb" name="leaf" href="<?php echo '/files/img/galleries/'.$image['idgalleries'].'/'.$image['path']; ?>" title="<?php echo $image['title']; ?>">
                    <img src="<?php echo '/files/img/galleries/'.$image['idgalleries'].'/min/'.$image['path']; ?>" alt="<?php echo $image['title']; ?>" />
                </a>
                <div class="caption">
                    <div class="download">
                        <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                    </div>
                    <div class="image-title"><?php echo $image['title']; ?></div>
                    <div class="image-desc">Description</div>
                </div>
            </li>
            <?php } ?>
        </ul>
    </div>

    <div style="clear: both;"></div>
<?php
    }
?>
		<script type="text/javascript">

			jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '295px', 'float' : 'left'});

                $('#thumbs').css({'height' : '459px','overflow':'hidden'});
				$('div.content').css('display', 'block');
				$("div#controls").hide();


				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.7;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'slow',
					exemptionSelector: '.selected'
				});

				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     3000,
					numThumbs:                 6,
					preloadAhead:              40,
					enableTopPager:            false,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       '#caption',
					loadingContainerSel:       '#loading',
					renderSSControls:          false,
					renderNavControls:         false,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo;',
					nextLinkText:              '&rsaquo;',
					nextPageLinkText:          '&rsaquo;',
					prevPageLinkText:          '&lsaquo;',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 1000,
                    onTransitionOut           : function(slide, caption, isSync, callback) { $("#slideshow").fadeTo(0, 0); slide.fadeTo(0, 0.0, callback);  caption.fadeTo(0, 0.0, callback); },
                    onTransitionIn            : function(slide, caption, isSync, callback) { $("#slideshow").fadeTo('slow', 1); slide.fadeTo('slow', 1); caption.fadeTo('slow', 1.0); },
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')

						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('slow', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('slow', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('slow', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('slow', 1.0);
					}
				});
			});
		</script>