<koken:if true="pjax">
        <koken:title />
<koken:else>
<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

        <koken:title />

        <koken:asset file="lightbox.css" common="true" />

        <koken:settings />
</head>

<body id="k-lightbox" class="loading">

        <div id="lbox">

</koken:if>

        <koken:load>

                <koken:head>
                        <meta property="og:site_name" content="{{ site.title }}" />
                        <meta property="og:type" content="website" />
                        <meta property="og:url" content="{{ content.url }}" />
                        <meta property="og:title" content="{{ content.title | content.filename strip_html="true" }}" />
                        <meta property="og:description" content="{{ content.caption strip_html="true" }}" />
                        <meta property="og:image" content="{{ content.presets.medium_large.url }}" />
                        <meta property="og:image:width" content="{{ content.presets.medium_large.width }}" />
                        <meta property="og:image:height" content="{{ content.presets.medium_large.height }}" />
                        <koken:content_image>
                                <koken:not empty="profile.twitter">
                                        <meta name="twitter:card" content="photo" />
                                        <meta name="twitter:site" content="@{{ profile.twitter }}" />
                                        <meta name="twitter:creator" content="@{{ profile.twitter }}" />
                                </koken:not>
                        </koken:content_image>
                </koken:head>

                <a href="#" title="{{ language.close_lightbox }}" id="lbox-bttn-close" class="ibutton"><i class="icon-remove-sign"></i></a>

                <a href="#" title="{{ language.view_fullscreen }}" id="lbox-bttn-fs" class="ibutton"><i class="icon-fullscreen"></i></a>

                <a href="#" title="{{ language.exit_fullscreen }}" id="lbox-bttn-ns" class="ibutton"><i class="icon-resize-small"></i></a>

                <div id="lnav" class="tnav">
                        <koken:previous>
                                <koken:link lightbox="true" bind_to_key="left" title="{{ language.view_previous }}">
                                        <span class="ibutton"><i class="icon-angle-left"></i></span>
                                </koken:link>
                        </koken:previous>
                </div>

                <div id="tl_controls">
                        <koken:next>
                                <a href="#" id="lbox-bttn-play" class="ibutton" title="{{ language.start_slideshow }}">
                                        <i class="icon-play icon-large"></i>
                                </a>
                        </koken:next>

                        <a href="#" id="lbox-bttn-pause" class="ibutton" title="{{ language.stop_slideshow }}">
                                <i class="icon-pause icon-large"></i>
                        </a>

                        <koken:rating>
                        <div id="lbox_rating">
                                {{ rating }}
                        </div>
                        </koken:rating>

                        <div id="lbox_share">
                                <div class="lbox_toggle">
                                        <a href="#" id="lbox-bttn-share" class="ibutton" title="{{ language.share_this }}">
                                                <i class="icon-export-alt icon-large"></i>
                                        </a>
                                        <div id="lbox_share_menu">
                                                <ul class="social-links kshare">
                                                  <li><koken:link share="twitter" class="ibutton share-twitter"><i class="icon-twitter"></i></koken:link></li><li><koken:link share="facebook" class="ibutton share-facebook"><i class="icon-facebook"></i></koken:link></li><li><koken:link share="pinterest" class="ibutton share-pinterest"><i class="icon-pinterest"></i></koken:link></li><li><koken:link share="tumblr" class="ibutton share-tumblr"><i class="icon-tumblr"></i></koken:link></li><li><koken:link share="google-plus" class="ibutton share-google"><i class="icon-gplus"></i></koken:link></li><koken:max_download><li><koken:link class="ibutton share-dl no-share" title="{{ language.download }} {{ max_download.width }} x {{ max_download.height }}"><i class="icon-download-alt"></i></koken:link></li></koken:max_download>
                                                </ul>
                                        </div>
                                </div>
                        </div>
                </div>

                <div id="main">

                        <div class="spinner_pos active"><div class="spinner"></div></div>

                        <div id="content">

                                <koken:parent>
                                <script>
                                        window.albumId = {{ album.id }};
                                </script>
                                </koken:parent>

                                <script>
                                        window.theContent = {{ content.to_json fields="aspect_ratio,id,presets,file_type,original,html,visibility" }};
                                </script>

                                <div class="caption" style="display:none">
                                        <h3>{{ content.title }}</h3>
                                        &nbsp;
                                        {{ content.caption }}
                                <br>
                                <koken:exif>
                                      <koken:not empty="exif.make">
                                        {{ exif.make }}
                                      </koken:not>
                                       <koken:not empty="exif.model">
                                {{ exif.model }},
                                      </koken:not>
                                      <koken:not empty="exif.exposure">
                                 {{ exif.exposure }},
                                      </koken:not>
                                      <koken:not empty="exif.aperture">
                                {{ exif.aperture }},
                                      </koken:not>
                                      <koken:not empty="exif.focal_length">
                                {{ exif.focal_length }},
                                      </koken:not>
                                      <koken:not empty="exif.iso_speed_ratings">
                                {{ exif.iso_speed_ratings }}
                                      </koken:not>
                                    </koken:exif>
                                </div>

                        </div>

                </div>

                <div id="rnav" class="tnav">
                        <koken:next>
                                <koken:link lightbox="true" bind_to_key="right" title="{{ language.view_next }}">
                                        <span class="ibutton"><i class="icon-angle-right"></i></span>
                                </koken:link>
                        </koken:next>
                </div>

                <footer>

                        <koken:link to="front" title="{{ site.title }}">{{ site.title }}</koken:link><koken:parent>&nbsp;&nbsp;/&nbsp;&nbsp;<koken:link>{{ album.title }}</koken:link>&nbsp;&nbsp;/&nbsp;&nbsp;{{ _parent.content.context.position }} {{ language.of }} {{ album.counts.total }}<koken:else>&nbsp;&nbsp;/&nbsp;&nbsp;<koken:context><koken:if data="context.type" equals="favorite"><koken:link to="favorites">{{ language.favorites }}</koken:link><koken:else><koken:if data="context.type" equals="tag"><koken:link>#{{ context.title }}</koken:link><koken:else><koken:link>{{ context.title }}</koken:link></koken:if> </koken:if> &nbsp;&nbsp;/&nbsp;&nbsp;{{ context.position }} {{ language.of }} {{ context.total }} <koken:else><koken:link to="contents">{{ language.content }}</koken:link> </koken:context></koken:parent>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="caption-bttns"><a class="btn-toggle show" href="#" title="{{ language.show_caption }}">{{ language.show_caption }}</a><a class="btn-toggle hide" href="#" title="{{ language.hide_caption }}" style="display:none">{{ language.hide_caption }}</a></span>

                </footer>

        </koken:load>

        </div> <!-- close lbox -->

        <koken:if true="pjax">
                <script>update();</script>
        <koken:else>

        <koken:asset file="jquery.pjax.js" common="true" />
        <koken:asset file="lightbox.js" common="true" />

</body>

</html>

</koken:if>