{%- extends "basic/layout.html" %}

{%- block extrahead %}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% endblock %}

{%- block scripts %}
    {{ super() }}
    <script src="_static/aws-sdk-2.826.0.min.js"></script>
    <script type="text/javascript">
        function _scroll(subjectId) {
            var subjectElement = $(subjectId);
            var actualSubjectHeight = subjectElement.height();
            var startingPosition = subjectElement[0].getBoundingClientRect().top;
            return function() {
                var availableHeight = $(window).height() - startingPosition;
                // Subtract the scroll position to account for sticky movement.
                availableHeight += Math.min($(window).scrollTop(), 40);
                var cappedHeight = Math.min(actualSubjectHeight, availableHeight);
                if (subjectElement.css("height") !== cappedHeight) {
                    subjectElement.css("height", cappedHeight);
                }
            };
        }

        // Scroll and resize the the columns when scrolled.
        $(function() {
            var rightScroll = _scroll("#right-column > .column-body");
            var scrollFn = function() {
                rightScroll.call(this, arguments);
            };
            scrollFn();
            $(window).scroll(scrollFn);
            $(window).resize(scrollFn);
        });

        // Scroll spy to change highlighted navigation element.
        $(function() {
            var section = document.querySelectorAll(".section");
            var sections = {};
            var i = 0;
            Array.prototype.forEach.call(section, function(e) {
                sections[e.id] = e.offsetTop;
            });
            var scrollSpy = function() {
                var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
                for (i in sections) {
                    if (sections[i] <= scrollPosition) {
                        $('#right-column .current').removeClass('current');
                        $("#right-column a[href='#" + i + "']").addClass('current');
                    }
                }
            };
            $(window).scroll(scrollSpy);
            scrollSpy();
        });
        
        $(function uuidv4() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
                }
            );
        });

        $(function sendAnonVistorId() {
            FingerprintJS.load().then(fp => {
                // The FingerprintJS agent is ready.
                // Get a visitor identifier when you'd like to.
                fp.get().then(result => {
                    AWS.config.region = 'us-west-2'; 
                    AWS.config.credentials = new AWS.CognitoIdentityCredentials({IdentityPoolId: 'us-west-2:a2573bbc-f734-4ef9-84ba-30b702b5b958'});
                    var pinpoint = new AWS.Pinpoint({apiVersion: '2016-12-01'});
                    
                    // This is the anonymous visitor identifier:
                    const anonVisitorId = result.visitorId;
                    var param = {
                    ApplicationId: 'fea7ddb98ab9411787a3cf43d835a0d7',
                    EventsRequest: {
                        BatchItem: {}
                        }
                    };

                    /* create the event parameter */
                    var eventParam = {
                        Endpoint: {
                            Address: anonVisitorId,
                            ChannelType: 'CUSTOM',
                            }
                        };

                    /* attach the event values */
                    eventParam['Events'] = [{
                        EventType: 'mie_docs_page_view',
                        Timestamp: (new Date()).toISOString()
                    }];

                    var endpointId = eventParam.Endpoint.Address + 'DOCS'
                    param.EventsRequest.BatchItem[endpointId] = eventParam; 

                    pinpoint.putEvents(param, function(err, data) {
                        if (err) console.log(err, err.stack); 
                        else     console.log(data);
                    });
                        });
                    });
        });
    </script>
    <script async src="https://cdn.jsdelivr.net/npm/@fingerprintjs/fingerprintjs@3/dist/fp.min.js"
        onload="sendAnonVistorId()"></script>
{%- endblock %}

{%- block css -%}
    <link rel="stylesheet" href="{{ pathto('_static/bootstrap-reboot.css', 1) }}" type="text/css" />
    {{ super() }}
    <link rel="stylesheet" href="{{ pathto('_static/custom-tabs.css', 1) }}" type="text/css" />
    {% if pagename == "index" %}
    <link rel="stylesheet" href="{{ pathto('_static/asciinema-player.css', 1) }}" type="text/css" />
    {% endif %}
{% endblock -%}

<div id="site-container">

    {%- block header %}
    <header>
        <div class="header-flex width-wrapper">
            <div class="site-logo">
                <a href="{{ pathto(master_doc) }}">
		  <span class="logo-icon"><img src="{{ pathto('_static/img/MI_logo_icon.png', 1) }}" /></span>
                </a>
            </div>

            <ul id="page-navigation">
                <li class="site-page first"><a href="{{ pathto('quickstart') }}">Quick Start</a></li>
                <li class="site-page"><a href="{{ pathto('tutorials/index') }}">Tutorials</a></li>
                <li class="site-page"><a href="{{ pathto('samples/index') }}">Samples</a></li>
                <li class="site-page"><a href="{{ pathto('main') }}">Documentation</a></li>
                <li class="site-page"><a href="https://github.com/aws-solutions/media-insights-on-aws">Code</a></li>
                <li class="site-search hidden-sm">
                    <form action="{{ pathto('search') }}" method="get">
                        <input type="hidden" name="check_keywords" value="yes" />
                        <input type="hidden" name="area" value="default" />
                        <input class="search-input" autocomplete="off" type="search" name="q" placeholder="Search" />
                    </form>
                </li>
            </ul>
        </div>
    </header>
    {% endblock -%}

    {%- block relbar1 %}{% endblock %}

    {% block content %}
        {% if pagename == "index" %}
        {%- include 'landing.html' with context %}
        {% endif %}
        {% if pagename != "index" or builder == "singlehtml" %}
        <section id="page-container">
            <div class="width-wrapper flex">
                <article id="document-body">
                    {% if parents %}
                    <ul class="rel-parents">
                    {%- for parent in parents %}
                    <li><a href="{{ parent.link|e }}" {% if loop.last %}{{ accesskey("U") }}{% endif %}>{{ parent.title }}</a></li>
                    {%- endfor %}
                    </ul>
                    {% endif %}
                    {% block body %} {% endblock %}
                    {% if prev or next %}
                    <section class="relations">
                        {% if prev %}
                        <a href="{{ prev.link|e }}" title="{{ _('previous chapter')}}" class="previous-page clearfix hidden-xs">← {{ prev.title }}</a>
                        {% endif %}
                        {%- if next and next.title != '&lt;no title&gt;' %}
                        <a href="{{ next.link|e }}" title="{{ _('next chapter')}}" class="next-page clearfix">{{ next.title }} →</a>
                        {%- endif %}
                    </section>
                    {% endif %}
                    {%- block content_footer %}{%- endblock %}
                </article>

                {%- if pagename not in ('search', 'contents', 'index', '404') -%}
                <aside id="right-column" class="side-column hidden-sm">
                    <div class="column-body">
                        <section class="sidebar">
                            {% if prev or next %}
                            <section class="next-previous">
                                {% if prev %}
                                <a href="{{ prev.link|e }}" title="{{ _('previous chapter')}}" class="previous-page clearfix hidden-xs">← Prev</a>
                                {% endif %}
                                {%- if next and next.title != '&lt;no title&gt;' %}
                                <a href="{{ next.link|e }}" title="{{ _('next chapter')}}" class="next-page clearfix">Next →</a>
                                {%- endif %}
                            </section>
                            {% endif %}
                            {{ toc }}
                        </section>
                    </div>
                </aside>
                {%- endif -%}
            </div>
        </section>
        {% endif %}
    {% endblock %}

</div><!-- site-container -->

{%- block relbar2 %}{% endblock %}
{%- block footer %}
<footer id="footer">
    <div class="width-wrapper">
        <div class="copyright">
            <p>©2020, Amazon Web Services, Inc or its affiliates. All rights reserved.</p>
        </div>
    </div>
</footer>
{%- endblock -%}