@extends('themes.base.layout')
@section('title', $album->name)

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-fw fa-home"></i></a></li>
    @include(Theme::viewName('partials.album_breadcrumb'))
@endsection

@section('content')
<div class="container album-container album-slideshow-container">
    <div class="row">
        <div class="col-xs-12">
            <div class="pull-right">
                @include(\App\Facade\Theme::viewName('partials.album_view_selector'))
            </div>

            <h1 class="page-title">{{ $album->name }}</h1>
            <p>{{ $album->description }}</p>
            <hr/>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 text-center">
            <div class="pull-right">
                <div class="btn btn-group">
                    <button class="btn btn-default" data-bind="click: pauseSlideshow, disable: isPaused, visible: isRunning"><i class="fa fa-fw fa-pause"></i></button>
                    <button class="btn btn-default" data-bind="click: continueSlideshow, enable: isPaused, visible: isRunning"><i class="fa fa-fw fa-play"></i></button>
                </div>
            </div>

            <div id="image-preview" data-bind="with: current()">
                <a data-bind="attr: { href: info_url, title: description }">
                    <img class="img-rounded thumbnail img-responsive" data-bind="attr: { src: original_url, alt: name, title: description }"/>
                </a>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 15px;">
        <div class="col-xs-12">
            <div class="thumbnails">
                @foreach ($photos as $photo)
                    <a href="{{ $photo->url() }}" data-bind="click: function() { viewModel.changeCurrentImage({{ $photo->id }}); }">
                        <img class="ss-thumbnail" src="{{ $photo->thumbnailUrl('slideshow-tiny') }}" alt="{{ $photo->name }}" title="{{ $photo->description }}" data-photo-id="{{ $photo->id }}" data-original-url="{{ $photo->thumbnailUrl('fullsize') }}" data-info-url="{{ $photo->url() }}" />
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    // TODO make this timeout configurable
    var viewModel = new SlideShowViewModel(5000);

    $(document).ready(function() {
        $('img.ss-thumbnail').each(function(index, element)
        {
            viewModel.images.push({
                'id': $(element).data('photo-id'),
                'name': $(element).attr('alt'),
                'description': $(element).attr('title'),
                'original_url': $(element).data('original-url'),
                'info_url': $(element).data('info-url')
            });
        });

        ko.applyBindings(viewModel);
        viewModel.startSlideshow();
    });
</script>
@endpush