{% extends "basic/layout.html" %}
{%- block linktags -%}{%- endblock -%}
{% set embedded = True %}

{%- block extrahead %}
<script type="text/javascript" src="{{ pathto('_static/jquery.js', 1) }}"></script>
<script type="text/javascript" src="{{ pathto('_static/s6.js', 1) }}"></script>
<script type="text/javascript">
// <![CDATA[

var bodyStyle = {
    width: '100%',
    height: '100%',
    padding: '0',
    margin: '0',
    overflow: 'hidden',
    backgroundColor: 'white',
};

s6.css('html', bodyStyle);
s6.css('body', bodyStyle);
s6.css('.s6 .page.default > h2', {margin:'0'});

var pr;
s6.attach(s6, 'ready', function ready() {
    var html = document.documentElement;
    var height = html.offsetHeight;
    var width = html.offsetWidth;
    var top = 0;
    var left = 0;

    if (height / width < 0.75) {
        var originalWidth = width;
        width = height / 0.75;
        left = (originalWidth - width) / 2 + 'px';
    }
    else {
        var originalHeight = height;
        height = width * 0.75;
        top = (originalHeight - height) / 2 + 'px';
    }

    var result;
    if (result = document.cookie.match(/page=(\d+)/)) {
        var startIndex = +result[1];
    }

    var container = $('.section')[0];
    pr = new s6.Presentation({
            thema: 'sphinx',
            element: container,
            width: width,
            height: height,
            startIndex: startIndex,
            fontSize: 0.08
        });
    pr.style.left = left;
    pr.style.top = top;
    pr.start();

    var indexNoOutline = false;

    pr.funcPages.index.attachPage('click', function(i, element, wrapper) {
        indexNoOutline = true;
        setTimeout(function() {
            indexNoOutline =false
        }, 1000);
        wrapper.style.background = '';
        pr.go(i);
    });

    pr.funcPages.index.attachPage('mouseover', function(i, element, wrapper) {
        if (indexNoOutline) return;
        wrapper.className += ' selected';
    });
    
    pr.funcPages.index.attachPage('mouseout', function(i, element, wrapper) {
        wrapper.className = 'wrapper';
    });

    try {
        var isIframe = !(window.parent == window);
    } catch(e) {
        isIframe = true;
    }

    s6.attach(document, 'click', 'step', 0, pr);
    s6.attach(document, 'keypress Right', 'step', 0, pr);
    s6.attach(document, 'keypress Left',  'prev', 0, pr);
    s6.attach(document, 'keypress Up',    function() { pr.go('index') });
    s6.attach(document, 'keypress Down',  'back', 0, pr);
});

// save current page
setInterval(function() {
    document.cookie = 'page=' + pr.index;
}, 1000);
// ]]>
</script>

{% endblock %}

{%- block header %}
<div class="header">
<div style="float:right;"><a href="#">≫</a></div>
</div>
{% endblock %}

{%- block footer %}
<div class="footer">
    <span>{{ title|striptags|e }}{% if copyright %} :: {{ copyright }}{% endif %}</span><br />
    <span class="hidden">操作方法: 上下左右キーで操作です</span>
</div>
{% endblock %}