<!DOCTYPE html>
<html>
    <head>
        <title>Selecting from a list of tracks</title>
        <script src="../media-controls.js"></script>
        <script src="../media-file.js"></script>
        <script src="../video-test.js"></script>
        <script src="../trackmenu-test.js"></script>
        <script>
            var timer = null;
            var expectedLanguage;
            var testStage = 0;
            var captionsButtonCoordinates;
            var trackMenuItems;

            function showCaptionMenu()
            {
                captionsButtonCoordinates = mediaControlsButtonCoordinates(video, "toggle-closed-captions-button");
                consoleWrite("- show captions menu.");
                eventSender.mouseMoveTo(captionsButtonCoordinates[0], captionsButtonCoordinates[1]);
                eventSender.mouseDown();
                eventSender.mouseUp();
                timer = setTimeout(nextStep, 100);
            }

            function trackLoaded()
            {
                consoleWrite("EVENT(load)");
                if (expectedLanguage == "") {
                    failTest("'" + event.target.srclang + "' track loaded unexpectedly.");
                    return;
                }
                testExpected("event.target.srclang", expectedLanguage);
                testExpected("event.target.readyState", HTMLTrackElement.LOADED);

                timer = setTimeout(nextStep, 200);
            }

            function createTrackElement(language, isDefault)
            {
                var track = document.createElement('track');
                track.setAttribute('kind', "captions");
                track.src = 'data:text/vtt,' + encodeURIComponent("WEBVTT\n\n00:00:00.000 --> 00:00:01.000\nCaption 1\n");
                track.setAttribute('srclang', language);
                track.setAttribute('onload', 'trackLoaded()');
                if (isDefault) {
                    consoleWrite("-- '" + language + "' track marked as default.");
                    track.setAttribute('default', 'default');
                }
                video.appendChild(track);
            }

            function createTrackElements(languages, defaultIndex)
            {
                var tracks = document.querySelectorAll('track');
                for (var ndx = 0; ndx < tracks.length; ++ndx)
                    video.removeChild(tracks[ndx]);

                consoleWrite("- creating tracks for: [" + languages + "].");
                for (var ndx = 0; ndx < languages.length; ++ndx)
                    createTrackElement(languages[ndx], ndx == defaultIndex);
            }

            function nextStep()
            {
                ++testStage;
                switch (testStage) {
                case 1:
                    consoleWrite("<br>Test 1: 'no' track selected because of user preferred language");
                    createTrackElements(['en', 'fr', 'no']);
                    expectedLanguage = 'no';
                    break;

                case 2:
                    consoleWrite("<br>Test 2: 'no' track still selected because of language, overriding 'default' attribute");
                    createTrackElements(['fr', 'en', 'no'], 1);
                    expectedLanguage = 'no';
                    break;

                case 3:
                    consoleWrite("<br>Test 3: select 'fr' track from menu");
                    showCaptionMenu();
                    break;

                case 4:
                    trackMenuItems = trackMenuList();
                    testExpected("trackMenuItems[indexOfMenuItemBeginningWith('French')].className", "");
                    testExpected("trackMenuItems[indexOfMenuItemBeginningWith('English')].className", "");
                    testExpected("trackMenuItems[indexOfMenuItemBeginningWith('Norwegian')].className", "selected");

                    selectCaptionMenuItem("French");
                    expectedLanguage = 'fr';
                    break;

                case 5:
                    testExpected("video.textTracks[0].mode", "showing");
                    testExpected("video.textTracks[0].language", "fr");

                    consoleWrite("<br>Test 4: preferred language was changed to 'fr' by selecting track from menu");
                    createTrackElements(['ru', 'en', 'fr']);
                    expectedLanguage = 'fr';
                    break;

                case 6:
                    testExpected("video.textTracks[2].mode", "showing");
                    testExpected("video.textTracks[2].language", "fr");

                    consoleWrite("<br>Test 5: turning captions off from menu disables caption selection");
                    showCaptionMenu();
                    break;

                case 7:
                    selectCaptionMenuItem("Off");
                    expectedLanguage = '';
                    createTrackElements([ 'ru', 'jp', 'en']);
                    timer = setTimeout(nextStep, 100);
                    break;

                case 8:
                    for (var ndx = 0; ndx < video.textTracks.length; ++ndx)
                        testExpected("video.textTracks[" + ndx + "].mode", "disabled");

                    consoleWrite("");
                    endTest();
                    return;
                }
            }

            function start()
            {
                findMediaElement();
                video.src = findMediaFile('video', '../content/test');
                video.addEventListener('canplaythrough', nextStep);
                consoleWrite("<br>Set user languages to: ['no', 'es-ES', 'en', 'fr'].");
                internals.setUserPreferredLanguages(['no', 'es-ES', 'en', 'fr']);
                internals.settings.setShouldDisplayTrackKind('Captions', true);
            }
        </script>
    </head>

    <body onload="start()">
        <p>Test track user preferences.</p>
        <video width="500" height="300" controls>
        </video>
    </body>
</html>