<html>
    <head>
        <meta charset="UTF-8">

        <!-- Load the player -->
        <script type="text/javascript" src="player.js"></script>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="topics.css">
    </head>
    <body>
        <div class="title">
            <span class="episode_name">Coloured Nicks</span>
            <div class="refs_container">
                <span>Quotes &#9660;</span>
                <div class="mouse_catcher"></div>
                <div class="refs">
                    <span data-id="&#945;" class="ref">
                        <span class="ref_content">
                            <div class="source">#1 • Quote date</div>
                            <div class="ref_title">Quote text</div>
                        </span>
                        <div class="ref_indices">
                            <span data-timestamp="176" class="timecode"><span class="ref_index">[&#945;]</span><span class="time">2:56</span></span>
                        </div>
                    </span>
                    <span data-id="&#946;" class="ref">
                        <span class="ref_content">
                            <div class="source">#2 • Quote date</div>
                            <div class="ref_title">Quote text</div>
                        </span>
                        <div class="ref_indices">
                            <span data-timestamp="312" class="timecode"><span class="ref_index">[&#946;]</span><span class="time">5:12</span></span>
                        </div>
                    </span>
                </div>
            </div>
            <div class="refs_container">
                <span>References &#9660;</span>
                <div class="mouse_catcher"></div>
                <div class="refs">
                    <a data-id="serge_rgb" href="http://example.com/" target="_blank" class="ref">
                        <span class="ref_content">
                            <div class="source">Source</div>
                            <div class="ref_title">Title</div>
                        </span>
                        <div class="ref_indices">
                            <span data-timestamp="60" class="timecode"><span class="ref_index">[1]</span><span class="time">1:00</span></span>
                        </div>
                    </a>
                    <a data-id="milton_forum" href="http://example.com/" target="_blank" class="ref">
                        <span class="ref_content">
                            <div class="source">Source</div>
                            <div class="ref_title">Title</div>
                        </span>
                        <div class="ref_indices">
                            <span data-timestamp="60" class="timecode"><span class="ref_index">[2]</span><span class="time">1:00</span></span><span data-timestamp="624" class="timecode"><span class="ref_index">[3]</span><span class="time">10:24</span></span>
                        </div>
                    </a>
                </div>
            </div>
            <span class="annotator_container">Annotator: <span class="annotator">Miblo</span></span>
        </div>
        <div class="player_container">
            <div class="video_container" data-videoId="ug5WkCROkOk"></div>
            <div class="markers_container">
                <div data-timestamp="60" class="marker authored cat_rendering research" data-ref="serge_rgb,milton_forum">
                    <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
                    <div class="progress faded">
                        <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
                    </div>
                    <div class="progress main">
                        <div class="content"><span class="timecode">1:00</span><span class="author" style="color: #69D036;">insofaras</span> Some text referring to <a href="https://handmade.network/m/zilarrezko" target="blank" style="color: #8624DC; text-decoration: none">Zilarrezko</a> about this thing<sup>1</sup> regarding triangle intersections he saw in the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forums<sup>2</sup><span class="categories"><div class="category rendering"></div></span></div>
                    </div>
                </div>
                <div data-timestamp="176" class="marker" data-ref="&#945;">
                    <div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
                    <div class="progress faded">
                        <div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
                    </div>
                    <div class="progress main">
                        <div class="content"><span class="timecode">2:56</span>&#8220;Quote text&#8221;<sup>&#945;</sup></div>
                    </div>
                </div>
                <div data-timestamp="312" class="marker blackboard cat_mathematics" data-ref="&#946;">
                    <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
                    <div class="progress faded">
                        <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
                    </div>
                    <div class="progress main">
                        <div class="content"><span class="timecode">5:12</span>Matrix multiplication<sup>&#946;</sup><span class="categories"><div class="category mathematics"></div></span></div>
                    </div>
                </div>
                <div data-timestamp="624" class="marker" data-ref="milton_forum">
                    <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
                    <div class="progress faded">
                        <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
                    </div>
                    <div class="progress main">
                        <div class="content"><span class="timecode">10:24</span>More stuff referring to the <a href="https://milton.handmade.network/" target="blank" style="color: #8369CF; text-decoration: none">milton</a> forum post<sup>3</sup></div>
                    </div>
                </div>
                <div data-timestamp="642" class="marker">
                    <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
                    <div class="progress faded">
                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
                    </div>
                    <div class="progress main">
                        <div class="content"><span class="timecode">10:42</span>Some text. Simples!</div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var player = new Player(document.querySelector(".player_container"), onRefChanged);
            window.addEventListener("resize", function() { player.updateSize(); });
                document.addEventListener("keypress", function(ev) {
                    switch (ev.key) {
                        case 'n':
                        case 'd':
                        case 's': {
                                player.jumpToNextMarker();
                        } break;

                        case 'p':
                        case 'a':
                        case 'w': {
                                player.jumpToPrevMarker();
                        } break;
    }
});

var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
for (var i = 0; i < refTimecodes.length; ++i) {
    refTimecodes[i].addEventListener("click", function(ev) {
        if (player) {
            var time = ev.currentTarget.getAttribute("data-timestamp");
            player.setTime(parseInt(time, 10));
            player.play();
            ev.preventDefault();
            ev.stopPropagation();
            return false;
        }
    });
}

var refSources = document.querySelectorAll(".refs .ref");
for (var i = 0; i < refSources.length; ++i) {
    refSources[i].addEventListener("click", function(ev) {
        if (player) {
            player.pause();
        }
    });
}

function onRefChanged(ref) {
    var sourceMenus = document.querySelectorAll(".refs_container");
    for (var MenuIndex = 0; MenuIndex < sourceMenus.length; ++MenuIndex)
        {
        var SetMenu = 0;
        if (ref !== undefined && ref !== null) {
            var refElements = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
            var refs = ref.split(",");

            for (var i = 0; i < refElements.length; ++i) {
                if (refs.includes(refElements[i].getAttribute("data-id"))) {
                    refElements[i].classList.add("current");
                    SetMenu = 1;
                } else {
                    refElements[i].classList.remove("current");
                }
            }
            if(SetMenu) {
                sourceMenus[MenuIndex].classList.add("current");
            } else {
                sourceMenus[MenuIndex].classList.remove("current");
            }

        } else {
            sourceMenus[MenuIndex].classList.remove("current");
            var refs = sourceMenus[MenuIndex].querySelectorAll(".refs .ref");
            for (var i = 0; i < refs.length; ++i) {
                refs[i].classList.remove("current");
            }
        }
    }
}
        </script>
    </body>
</html>