{% load staticfiles %}

<link href="{% static 'lib/css/jquery.terminal.css' %}" rel="stylesheet"/>
<link rel="stylesheet" href="{% static 'css/tutorial-style.css' %}" />


<div id="overlay" class="tutorial togglesize startsize">
    <div id="main" class="">

        <div id="tutorialTop" class="togglesize hide-when-small">
            <img src="{% static 'img/docker-letters.png' %}" alt="Docker">
            <h1>Learn Docker</h1>

            <a id="fullSizeClose" href="#" class="closeButton"><img src="{% static "img/fullscreen_exit_32x32.png"  %}" title="close fullscreen"> </a>


            <div id="progress-indicator">
                <span id="progress-marker-0" class="progress-marker">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                        style="width:30px; height:30px;">>
                    <circle cx="50%" cy="50%" r="50%" fill="#008BB8" ></circle>
                    <text x="50%" dy="50%" text-anchor="middle" dominant-baseline="central" fill="white">i</text>
                    </svg>
                </span>
            </div>
        </div>

        <div id="leftside" class="left togglesize hide-when-small">
            <div id="instructions">
                <div class="circle info-circle">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="question-number"
                         style="width:40px; height:40px; position:relative; float: left; z-index:1;">
                        <circle cx="50%" cy="50%" r="50%" stroke-width="2" fill="#FF8100" ></circle>
                        <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" fill="white">1</text>
                    </svg>
                </div>
                <div class="text">

                </div>
                <div class="assignment">

                </div>
            </div>

            <div id="tips">
                <div class="circle info-circle">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                         style="width:40px; height:40px; position:relative; float: left;  z-index:1;">
                        <circle cx="50%" cy="50%" r="50%" fill="#008BB8" ></circle>
                        <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="white">i</text>
                    </svg>
                </div>

                <div class="tiptext" >
                    <h3>Tips</h3>
{#                    <div id="tipHiddenText" class="box">#}
{#                        click here for tips#}
{#                    </div>#}
                    <div id="tipShownText" class="">
                        This is what the written tip looks like
                    </div>
                </div>
            </div>


            <div id="command">
                <div class="text" >
                    <h3>Show expected command</h3>
                    <div id="commandHiddenText" class="box">
                        click here to see the expected command
                    </div>
                    <div id="commandShownText" class="box hidden">
                        This is what the written tip looks like
                    </div>
                </div>
            </div>



            <div id="ajax" class="">
                nothing here
            </div>
        </div> <!-- end left -->

        <div id="starttext" class="togglesize startsize hide-when-full">
            <h4>Learn the first steps of using Docker, such as:</h4>
            <ul>
                <li>Finding and downloading images</li>
                <li>Running hello world</li>
                <li>Committing your changes</li>
                <li>Pushing an image to the repository</li>
            </ul>

            <div style="text-align: center">
                <a  id="fullSizeOpen" href="#" class="btn btn-primary primary-action-button">Start!</a>
            </div>
        </div>

        <div id="rightside">
            <div id="terminal-extenstion" class="right togglesize smallsize"></div>
            <div id="terminal" class="right togglesize smallsize"></div>

            <div id="results" class="results togglesize" style="display: hidden;">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
                     style="width:40px; height:40px; position:relative; float: left; top:5; left:5; z-index:1;">
                    <circle cx="50%" cy="50%" r="50%" stroke-width="2"  ></circle>
                    <text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="white">✔</text>
                </svg>

                <div id="resulttext" class="text">
                </div>
                <!--<button id="buttonPrevious" class="docker-btn-blue docker-btn-large " >previous</button>-->
                <button id="buttonNext" class="docker-btn-blue docker-btn-large" disabled="disabled" tabindex="0" >next</button>
                <button id="buttonFinish" class="docker-btn-blue docker-btn-large hidden" tabindex="0" >Finish and see what's next!</button>
            </div>

            <div id="feedback" class="feedback togglesize hide-when-small">
                <input id="feedbackInput" type="text" placeholder="feedback?">
                <button id="feedbackSubmit" >Submit</button>
            </div>



        </div>
    </div>
</div>

<script src="{% static 'lib/js/jquery-1.7.1.min.js' %}" ></script>
<script src="{% static 'lib/js/jquery.mousewheel-min.js' %}"></script>
<script src="{% static 'lib/js/jquery.terminal-0.7.4.min.js' %}"></script>
<script src="{% static 'lib/js/sugar-1.3.9.min.js' %}"></script>
<script src="{% static 'js/terminal.js' %}"></script>
<script src="{% static 'js/steps.js' %}"></script>



<!-- temporary solution to start in fullscreen -->
<script type="text/javascript">
$('document').ready(function() {
{#    goFullScreen();#}
})


</script>