@extends('main')

@section('content')
   <div class="gallery-page">
        <section class="bg-base page-section">
            <div class="container">
                <h2 class="h1 text-center" id="activeName">{{$gallery->name}}</h2>
                <div id="gallery-wrap" class="gallery-wrapper">
                    <div class="primary-gallery gallery" id="gallery-slideshow">
                        @foreach($gallery->images as $image)
                            <div class="slide">
                                <img src="{{$image->url}}" alt="{{$image->name}}">
                                @if (isset($image->caption))
                                    <p class="caption">
                                        @if (isset($image->link))
                                            <a href="{{$image->link}}">{{$image->name}}</a><span> - </span>
                                        @else
                                            <span>{{$image->name}} - </span>
                                        @endif
                                        {{$image->caption}}
                                    </p>
                                @endif
                            </div>
                        @endforeach
                        <a class="cycle-next cycle-nav" href="#"><img src="/images/arrow-next.png" srcset="/images/arrow-next2x.png 2x, /images/arrow-next3x.png 3x" alt="Next"></a>
                        <a class="cycle-prev cycle-nav" href="#"><img src="/images/arrow-prev.png" srcset="/images/arrow-prev2x.png 2x, /images/arrow-prev3x.png 3x" alt="Next"></a>
                    </div>
                    <div class="loading-overlay">
                        <img src="/images/loading.gif" alt="loading"/>
                    </div>
                </div>

            </div>
        </section>
        <section class="bg-accent page-section">
           <div class="container">
               <h3 class="h2 text-center">View Another Gallery</h3>
               <div class="row alternate-galleries">
                    @foreach($galleries as $index=>$gallery)
                       <div class="col-sm-4 col-lg-4">
                           <div class="thumbnail @if($index==0) active @endif" data-gallery-id="#gallery-{{$index}}" data-gallery-name="{{$gallery->name}}">
                               <img src="{{$gallery->thumbnail}}" alt="{{$gallery->name}}"/>
                               <div class="thumbnail-caption">
                                   <p class="text-center">
                                       {{$gallery->name}}
                                   </p>
                               </div>
                           </div>
                       </div>
                       <script id="gallery-{{$index}}" type="text/template" data-name="GalleryName">
                           @foreach($gallery->images as $image)
                               <div class="slide">
                                   <img src="{{$image->url}}" alt="{{$image->name}}">
                                   @if (isset($image->caption))
                                       <p class="caption">
                                           @if (isset($image->link))
                                               <a href="{{$image->link}}">{{$image->name}}</a><span> - </span>
                                           @else
                                               <span>{{$image->name}} - </span>
                                           @endif
                                           {{$image->caption}}
                                       </p>
                                   @endif
                               </div>
                           @endforeach
                       </script>
                    @endforeach
               </div>
           </div>
        </section>
   </div>
@stop
@section('footerargs')
    <script src="{{ asset('/js/jquery.cycle2.swipe.min.js') }}"></script>
    <script src="{{ asset('/js/jquery.cycle2.min.js') }}"></script>

    <script>
        var galleryWrapper, gallery, galleryName, thumbnails, activeThumbnail;

        jQuery(document).ready(function(){
            galleryName = $('#activeName');
            gallery = $('#gallery-slideshow');
            galleryWrapper = $('#gallery-wrap');
            thumbnails = $('.thumbnail');
            activeThumbnail = $('.thumbnail.active');
            initGallery();
            thumbnails.on('click',function(){
                handleThumbnailClick($(this));
            });
        });
        jQuery(window).load(function(){
            galleryWrapper.addClass('loaded');
            setGalleryHeight();
            $(window).resize(function(){
                setGalleryHeight();
            });
        });
        function setGalleryHeight(){
            var height = gallery.outerHeight();
            galleryWrapper.css('min-height',height);
        }
        function handleThumbnailClick($el){
            if (! $el.hasClass('active')){
                activeThumbnail.removeClass('active');
                $el.addClass('active');
                activeThumbnail = $el;
                switchGallery($el,hideloader());
            }
        }

        function switchGallery($el){
            galleryWrapper.removeClass('loaded');
            galleryName.html($el.data('gallery-name'));
            scrollToGallery();
            gallery.cycle('destroy');
            gallery.find('.slide').remove();
            var slides = $($el.data('gallery-id')).html();
            gallery.append(slides);
            var tmp = $('img',gallery).first();
            if (tmp[0].complete){
                hideloader();
            }
            else{
                tmp[0].on('load',function(){
                    hideloader();
                });
            }
            initGallery();

        }
        function hideloader(){
            galleryWrapper.addClass('loaded');
        }
        function scrollToGallery(){
            $('html, body').animate({
                scrollTop: galleryName.offset().top-50
            }, 200);
        }

        function initGallery(){
            gallery.cycle({
                slides: '.slide',
                log: false,
                swipe: true,
            });
        }
    </script>
@stop