<!-- First time user experience wizard -->
<div layout="dialog" layout-id="ftue" class="dialog ftue" id="ftue-dialog">
    <div class="content-head">
        <h1>audio gear setup</h1>
    </div>

    <!-- inner wrapper -->
    <div class="ftue-inner" layout-wizard="ftue">

        <!-- NEW FTUE first screen, which has latency approximation -->
        <!-- Audio device selection and level-setting -->
        <div layout-wizard-step="0" dialog-title="audio gear settings" dialog-purpose="GearSettings" style="display:block;">
            <p os="win32" class="intro">
                Choose a device to capture and play your session audio. If
                you’re not using a mic with this device, then also choose a
                voice chat input to talk with others during sessions. Then play
                and speak, and adjust the gain faders so that you hear both your
                instrument and voice in your headphones at comfortable volumes.
            </p>
            <p os="mac" class="intro" style="display:none;">
                Choose a device to capture and play your session audio. If
                you’re not using a mic with this device, then also choose a
                voice chat input to talk with others during sessions. Then play
                and speak, and adjust the gain faders so that you hear both your
                instrument and voice in your headphones at comfortable volumes.
            </p>

            <div class="ftue-new">
                <div class="column settings-2-device">
                    Session Audio Device:<br />
                    <select class="select-audio-device"></select>
                    <!-- VU/Fader for audio device -->
                    <div class="controls">
                        <div id="ftue-2-audio-input-vu-left" class="ftue-vu-left"></div>
                        <div id="ftue-2-audio-input-fader" class="ftue-fader"></div>
                        <div class="gain-label">GAIN</div>
                        <div id="ftue-2-audio-input-vu-right" class="ftue-vu-right"></div>
                    </div>
                </div>
                <div class="column settings-2-center">
                    <div class="buttons">
                        <a class="button-grey" id="btn-ftue-2-asio-resync">
                            <%= image_tag "content/icon_resync.png", {:width => 12, :height => 14} %>
                            RESYNC
                        </a>
                        <a class="button-grey" id="btn-ftue-2-asio-control-panel" os="win32">ASIO SETTINGS</a>
                    </div>
                    <div class="subcolumn first">
                        Frame<br />
                        <select disabled="disabled" id="ftue-2-asio-framesize" class="easydropdown">
                            <option value="" class="label"></option>
                            <option value="2.5">2.5</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="subcolumn second">
                        Buffer/In<br />
                        <select disabled="disabled" id="ftue-2-asio-input-latency" class="easydropdown">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="subcolumn third">
                        Buffer/Out<br />
                        <select disabled="disabled" id="ftue-2-asio-output-latency" class="easydropdown">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                </div>

                <!-- Colum 3: Voice -->
                <div class="column settings-2-voice">
                    Voice Chat Input:<br />
                    <select class="select-voice-chat"></select>
                    <div class="controls">
                        <div id="ftue-2-voice-input-vu-left" class="ftue-vu-left"></div>
                        <div id="ftue-2-voice-input-fader" class="ftue-fader"></div>
                        <div class="gain-label">GAIN</div>
                        <div id="ftue-2-voice-input-vu-right" class="ftue-vu-right"></div>
                    </div>
                </div>

                <!-- Latency -->
                <div class="latency">
                    Latency:<br />
                    <div class="report neutral">
                        <div class="ms-label"></div>
                        <p></p>
                    </div>
                    <div class="instructions">
                        <p class="start" style="display:block;">Choose an audio device to continue...</p>
                        <p class="unknown" style="display:none;">Unable to determine latency. Please click <a href="#" layout-wizard-link="1">here</a> to try another test which may be able to determine your audio performance.</p>
                        <p class="neutral loading" style="display:none;">Estimating latency...</p>
                        <p class="good" style="display:none;">Your audio speed is good. When done with settings, click Save Settings to continue.</p>
                        <p class="acceptable" style="display:none;">Your audio speed is acceptable, but borderline. You can view the <a href="https://jamkazam.desk.com/customer/portal/articles/1292412-choosing-an-audio-device" rel="external">Choosing an Audio Device</a> article for information on faster audio devices.</p>
                        <p class="bad" style="display:none;">We're sorry, but your audio speed is too slow to use JamKazam. You can view the <a href="https://jamkazam.desk.com/customer/portal/articles/1292412-choosing-an-audio-device" rel="external">Choosing an Audio Device</a> article for information on faster audio devices. You can also click <a href="#" layout-wizard-link="1">here</a> to try another test which may be able to measure your audio performance more accurately.</p>
                    </div>
                </div>
            </div>

            <div class="right mr30 buttonbar">
                <a class="button-grey" layout-action="close">CANCEL</a>
                <a class="button-grey">HELP</a>&nbsp;
                <a class="button-orange disabled" id="btn-ftue-2-save">SAVE SETTINGS</a>
            </div>

        </div>


        <!-- First screen of the FTUE wizard -->
        <div layout-wizard-step="1" dialog-title="welcome!" dialog-purpose="Intro" style="display:none;">
            <p class="intro">
            Please identify which of the three types of audio gear below you
            are going to use with the JamKazam service, and click one to
            watch a video on how to navigate this initial setup and testing
            process. After watching the video, click the 'NEXT' button to
            get started. If you don't have your audio gear handy now, click
            Cancel.
            </p>

            <ul class="device_type">
                <li class="ftue-video-link first" 
                external-link-win="https://www.youtube.com/watch?v=b1JrwGeUcOo"
                external-link-mac="https://www.youtube.com/watch?v=TRzb7OTlO-Q">
                    AUDIO DEVICE WITH PORTS FOR INSTRUMENT OR MIC INPUT JACKS<br/>
                    <p><%= image_tag "content/audio_capture_ftue.png", {:width => 243, :height => 70} %></p>
                </li>
                <li class="ftue-video-link"
                external-link-win="https://www.youtube.com/watch?v=IDrLa8TOXwQ"
                external-link-mac="https://www.youtube.com/watch?v=vIs7ArrjMpE">
                    USB MICROPHONE<br/>
                    <p><%= image_tag "content/microphone_ftue.png", {:width => 70, :height => 113} %></p>
                </li>
                <li class="ftue-video-link"
                external-link-win="https://www.youtube.com/watch?v=PCri4Xed4CA"
                external-link-mac="https://www.youtube.com/watch?v=Gatmd_ja47U">
                    COMPUTER'S BUILT-IN MIC &amp; SPEAKERS/HEADPHONES<br/>
                    <p><%= image_tag "content/computer_ftue.png", {:width => 118, :height => 105} %></p>
                </li>
            </ul>

            <div class="right mr30 buttonbar">
                <a class="button-grey" layout-action="close">CANCEL</a>&nbsp;
                <a class="button-orange" layout-wizard-link="2">NEXT</a>
            </div>

        </div>

        <!-- Audio device selection and level-setting -->
        <div layout-wizard-step="2" dialog-title="audio gear settings" dialog-purpose="GearSettings" style="display:none;">
            <p os="win32">
            Choose an ASIO driver, and choose the devices to use for audio and
            chat. Then play and speak, and use the gain sliders so that you hear
            both your instrument and voice well through your headphones.
            Finally, use the ASIO Settings button to tune your latency settings
            as low as possible, and set the frame and buffer values as low as
            possible while listening to be sure your audio still sounds good.
            Click the resync button if audio stops. When done click Next.
            </p>
            <p os="mac" style="display:none;">
            Choose the devices to use for audio and chat below. Then play and
            speak, and use the gain sliders so that you hear both your
            instrument and voice well through your headphones. Finally, set the
            frame and buffer values as low as possible while listening to be
            sure your audio still sounds good. Click the resync button if audio
            stops. When done click Next.
            </p>

            <div class="asio-settings">
                <div class="column settings-driver">
                    Audio Driver:<br />
                    <select></select>
                </div>
                <div class="column settings-asio">
                    <div class="subcolumn first">
                        Frame:<br />
                        <select disabled="disabled" id="asio-framesize" class="easydropdown">
                            <option value=""></option>
                            <option value="2.5">2.5</option>
                            <option value="5">5</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="subcolumn second">
                        Buffer/In:<br />
                        <select disabled="disabled" id="asio-input-latency" class="easydropdown">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                    <div class="subcolumn third">
                        Buffer/Out:<br />
                        <select disabled="disabled" id="asio-output-latency" class="easydropdown">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </div>
                </div>
                <div class="column settings-asio-button">
                    <div class="bottom">
                        <a class="button-grey" id="btn-asio-control-panel">ASIO SETTINGS</a>
                        <button id="btn-asio-resync">Resync</button>
                    </div>
                </div>
            </div>

              <div class="section settings-controls">
                <div class="section audio-input">
                    <div class="right">
                        <%= image_tag "shared/icon_help.png", {:width => 12, :height => 12, :class => 'help-doc'} %>
                    </div>                
                    Audio Input:
                    <select data-device="audio-input" disabled="disabled" class="easydropdown">
                        <option>(Select Driver first)</option>
                    </select>
                    <div class="ftue-controls">
                        <div id="ftue-audio-input-vu-left" class="ftue-vu-left"></div>
                        <div id="ftue-audio-input-fader" class="ftue-fader"></div>
                        <div class="gain-label">GAIN</div>
                        <div id="ftue-audio-input-vu-right" class="ftue-vu-right"></div>
                    </div>
                </div>
                <div class="section voice-chat-input">
                    <div class="right">
                        <%= image_tag "shared/icon_help.png", {:width => 12, :height => 12, :class => 'help-doc'} %>
                    </div>                
                    Voice Chat Input:
                    <select data-device="voice-chat-input" disabled="disabled" class="easydropdown">
                        <option>(Select Driver first)</option>
                    </select>
                    <div class="ftue-controls">
                        <div id="ftue-voice-input-vu-left" class="ftue-vu-left"></div>
                        <div id="ftue-voice-input-fader" class="ftue-fader"></div>
                        <div class="gain-label">GAIN</div>
                        <div id="ftue-voice-input-vu-right" class="ftue-vu-right"></div>
                    </div>
                </div>
                <div class="section audio-output">
                    <div class="right">
                        <%= image_tag "shared/icon_help.png", {:width => 12, :height => 12, :class => 'help-doc'} %>
                    </div>                
                    Audio Output:
                    <select data-device="audio-output" disabled="disabled" class="easydropdown">
                        <option>(Select Driver first)</option>
                    </select>
                    <div class="ftue-controls">
                        <div id="ftue-audio-output-vu-left" class="ftue-vu-left"></div>
                        <div id="ftue-audio-output-fader"class="ftue-fader"></div>
                        <div class="gain-label">GAIN</div>
                        <div id="ftue-audio-output-vu-right" class="ftue-vu-right"></div>
                    </div>
                </div>
            </div>

            <div class="right mr30 buttonbar">
                <a class="button-grey" layout-wizard-link="1">BACK</a>
                <a class="button-grey">HELP</a>&nbsp;
                <a class="button-orange disabled" id="btn-ftue-test">NEXT</a>
            </div>

        </div>


        <!-- Latency test explanation -->
        <div layout-wizard-step="3" dialog-title="latency test setup" dialog-purpose="Prepare" style="display:none;">
            <p>Please set up your audio gear for the automated latency test as described in the tutorial video. Quick reminders on how to do this follow. When ready, click the "START TEST" button to begin the automated test process.</p>

            <h5>Audio Device with Input/Output Ports for Instruments & Mics</h5>
            <p>Plug one end of an audio cable into an input port and the other end into a headphone or output port.</p>

            <h5>USB Microphone</h5>
            <p>Use an audio cable to connect the headphone jack on the mic to a speaker and set the speaker next to the mic, or plug headphones into the headphone jack and place the headphone output against the mic.</p>

            <h5>Computer's Built-In Mic & Speakers</h5>
            <p>Turn up the computers built-in speaker volume to about two-thirds of max volume.</p>

            <div class="right mr30 buttonbar">
                <a class="button-grey" layout-wizard-link="2">BACK</a>
                <a class="button-grey">HELP</a>&nbsp;
                <a class="button-orange" layout-wizard-link="4">START TEST</a>
            </div>

        </div>

        <!-- Spinner - Test actually running-->
        <div layout-wizard-step="4" dialog-title="latency test" dialog-purpose="Testing" style="display:none;">
            <p>
            <%= image_tag "shared/loading-animation-4.gif", 
                {} %>
            Testing round trip latency for the audio device you selected. This should take just a few seconds.
            </p>
        </div>

        <!-- Test Failed Step -->
        <div layout-wizard-step="5" dialog-title="latency test results" dialog-purpose="Failed" style="display:none;">
            <p>
            <%= image_tag "content/icon_alert_big.png", 
                {:width => 96, :height => 96, :class => "left"} %>
                We're sorry, but there appears to be a problem with your audio
                gear setup, and we cannot run a latency test successfully.
                Please use the Help button below for troubleshooting tips to
                correct your audio gear setup, and then use the Run Test Again
                button to re-run the test when you think your setup is ready.
                </p>

            <div class="right mr30 buttonbar">
                <a class="button-grey">HELP</a>&nbsp;
                <a class="button-grey" layout-wizard-link="2">RUN TEST AGAIN</a>
                <a class="button-orange" layout-action="close">FINISH</a>
            </div>

        </div>

        <!-- Test Succeeded Step -->
        <div layout-wizard-step="6" dialog-title="latency test results" dialog-purpose="Passed" style="display:none;">
            <div class="left mr30" style="position:relative";>
                <%= image_tag "content/latency_gauge_back.png", 
                    {:width => 247, :height => 242, :class => "left"} %>
                    <div id="ftue-latency-needle">
                        <%= image_tag "content/latency_gauge_needle.png", 
                            {:width => 6, :height => 220 } %>
                    </div>
                    <div id="ftue-latency-numerical">10</div>
                    <div id="ftue-latency-label">milliseconds</div>
            </div>
            <p>
                <br/><br/><br/><br/>
                <div id="ftue-latency-congrats">
                Congratulations! Your local end-to-end audio gear latency is <span id="ftue-latency-ms"></span>
                milliseconds, which is good. You may now create and join sessions
                to play with other musicians using JamKazam. 
                </div>
                <div id="ftue-latency-fail" style="display:none;">
                    We're sorry, but the latency of your audio gear is too high to have
                    a good experience with other musicians on JamKazam. Please use the
                    help button below for tips on how to get better latency, and we hope
                    you'll come back and try again another time. We do want you to be a
                    part of the JamKazam community, but we must protect the quality of the
                    experience for everyone, and we appreciate your understanding and
                    patience very much.
                </div>

            </p>

            <div class="right mr30 buttonbar">
                <a class="button-grey btnHelp">HELP</a>&nbsp;
                <a class="button-grey btnRepeat" layout-wizard-link="2">RUN TEST AGAIN</a>
                <a class="button-orange" layout-action="close">FINISH</a>
            </div>

        </div>


    </div>

</div>
