<!doctype html>
<html lang="en-US">
    <head>

        <link rel='stylesheet' href='https://embedded.unith.ai/dist/bundle.css' media='all' />

        <style>
html, body
{
    width:100%;
    
    height:100%;
    padding:0;
    margin:0;
    overflow:hidden;
}

#talking-head .touch-to-start
{
    position:absolute;
}

#talking-head .call-to-action
{
    position:absolute;
}

#talking-head
{
    display:none;
}

.msg-text.usr.svelte-components-MessageBubble.svelte-components-MessageBubble
{
    background-color:#666;
}

        </style>

        <style>
            STYLE
        </style>

        <style id="css">
            CSS
        </style>

    </head>
    
    

    <body>

        <div id="digitalhumans-container" >

            <div id="talking-head" TALKING_HEAD_ARGS >
            
                <div id="digitalhumans-close-button">
                    <img id="digitalhumans-open-button-image" src="ICON_CLOSE_URL"/>
                </div>
            
            </div>

            <div id="digitalhumans-open">
                <div id="digitalhumans-open-button">
                    <img id="digitalhumans-open-button-image" src="ICON_OPEN_URL"/>
                    <p id="digitalhumans-open-button-text">TEXT_BUTTON</p>
                </div>
                <p id='digitalhumans-open-caption'>CAPTION</p>
            </div>

        </div>

        <script>

        var selectorIdle = ".svelte-components-VideoLayout-Videos-IdleVideo";    //.svelte-components-VideoMixer1-VideoPlayerIdle
        var selectorTalk = ".svelte-components-VideoLayout-Videos-TalkingVideo"; //.svelte-components-VideoMixer1-VideoPlayer 
        var selector = selectorIdle + ", " + selectorTalk;

        firstOpen = true;
        document.getElementById("digitalhumans-open").addEventListener("click", onClickOpenOrClose);
        document.getElementById("digitalhumans-close-button").addEventListener("click", onClickOpenOrClose);
        function onClickOpenOrClose()
        { 
            var maxWidth  = window.parent.document.documentElement.clientWidth  * 0.9;
          
            document.getElementById("talking-head").style.maxWidth  = maxWidth  + "px";
        
            var bot = document.getElementById("talking-head");
            
            var show = bot.style.display == "none" || bot.style.display == "";

            if( show )
            {
                bot.style.display = "unset";
                
                if( firstOpen )
                    firstOpen = false;

                else
                {
                    Array.from( document.querySelectorAll(selector) ).forEach( function(e)
                    {
                        e.play();
                    });
                }
            }

            else
            {
                bot.style.display = "none"; 

                Array.from( document.querySelectorAll(selector) ).forEach(function(e)
                {
                    e.pause();
                }); 
            }

            updateSize();
        } 


        var eStyle = document.getElementById('css');

        window.parent.postMessage({style:eStyle.textContent}, '*');
        
        window.onload = function() { updateSize(); }

        function updateSize()
        {
            var e = document.getElementById("digitalhumans-container");
            window.parent.postMessage({width:e.scrollWidth, height:e.clientHeight}, '*');
        }

        </script>
        

        <script src="https://embedded.unith.ai/microsoft-speech-recognition.js"></script>
        <script src="https://embedded.unith.ai/dist/bundle.js"></script>
        
    </body>
</html>