<!DOCTYPE html>
<html>
<%- include('partials/head', { title: '' }); %>
<script>
    var experience = 0;
    var notifications = false;
    function selectExperience(type) {
        document.getElementById('beginner').classList.remove('selected');
        document.getElementById('intermediate').classList.remove('selected');
        document.getElementById('expert').classList.remove('selected');
        switch (type) {
            case 0:
                document.getElementById("beginner").classList.add('selected');
                experience = 0;
                break;
            case 1:
                document.getElementById("intermediate").classList.add('selected');
                experience = 1;
                break;
            case 2:
                document.getElementById("expert").classList.add('selected');
                experience = 2;
                break;
        }
        wiiuSound.playSoundByName("SE_OLV_OK", 1);
    }
    function submit() {
        var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance
        var theUrl = "/titles/show/newUser";
        xmlhttp.open("POST", theUrl);
        xmlhttp.onreadystatechange = function() {
            if (this.readyState === 4 && (this.status === 423 || this.status === 404 || this.status === 504)) {
                wiiuErrorViewer.openByCodeAndMessage(5986000 + this.status, 'Unable to complete setup, the server is likely having issues.\n\nPlease try again later.');
                wiiuBrowser.closeApplication();
            }
        }
        xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({ "experience": experience, "notifications": notifications }));
        wiiuSound.playSoundByName('JGL_OLV_INIT_END', 3);
    }
</script>
<style>

    .background {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
        margin: 40px auto;
        width: 890px;
        padding: 25px 75px;
        display: none;
    }
    .fixed-bottom-button {
        padding: 0 !important;
        width: 185px !important;
    }
    .about-wrapper.background {
        min-height: 500px;
    }
    .about-button {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
        height: 60px;
        padding: 0 25px;
        border-radius: 12px;
        border: none;
        font-size: 20px;
        color: white;
        font-weight: bold;
        margin: 0 auto;
        display: block;
        background: -webkit-gradient(linear, left top, left bottom, from(#866dbe), to(#673DB6)) 0 0;
    }
    .about-header {
        font-weight: bold;
        text-align: center;
        color: #866dbe;
        font-size: 30px;
        margin: 15px 0;
    }
    h3 {
        font-weight: bold;
        text-align: center;
        color: #44cca1;
        font-size: 25px;
        margin: 15px 0;
    }
    ul.horizontal-list {
        color: white;
        background: -webkit-gradient(linear, left top, left bottom, from(#6045af), to(#634ca8)) 0 0 !important;
        display: block;
        border-radius: 50px;
        padding: 15px 15px;
    }

    ul.horizontal-list li {
        width: 287px;
        height: 50px;
        cursor: pointer;
        background-color: #5e44aa;
        box-shadow: inset 0 7px 10px -3px rgba(66, 45, 120, 0.75), inset 0 -3px 5px 0 rgba(128, 101, 213, 0.5);
        display: table-cell;
        text-align: center;
    }

    ul.horizontal-list li:first-child {
        border-radius: 50px 0 0 50px;
    }

    ul.horizontal-list li:last-child {
        border-radius: 0 50px 50px 0;
    }

    ul.horizontal-list li > a {
        text-shadow: none;
        border-radius: 50px;
        text-align: center;
        line-height: 60px;
        display: inline-block;
        width: 287px;
        height: 60px;
        color: #fff;
    }
    ul.horizontal-list li.selected > a {
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.3, #fff), color-stop(0.8, #fff5f5), color-stop(0.96, #fff5f5), to(#fff5f5)) 0 0;
        color: #4d4d4d;
    }
</style>
<body>
    <div id="body">
        <div id="welcome" class="about-wrapper background" style="display: block">
            <h1 class="about-header"><%= lang.setup.welcome %></h1>
            <div class="about-body">
                <p>
                    <%= lang.setup.welcome_text %>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.exit %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="" data-module-hide="add-post-page"
                   data-header="false" data-menu="false" onclick="exit()">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="beta" data-module-hide="welcome"
                   data-header="false" data-menu="false">
        </div>

        <div id="beta" class="about-wrapper background">
            <h1 class="about-header"><%= lang.setup.beta %></h1>
            <div class="about-body" style="position: relative">
                <p>
                    <%= lang.setup.beta_text.first %>
                    <br>
                    <b><u><%= lang.setup.beta_text.second %></u></b>
                    <br>
                    <%= lang.setup.beta_text.third %>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="welcome" data-module-hide="beta"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="about" data-module-hide="beta"
                   data-header="false" data-menu="false">
        </div>

        <div id="about" class="about-wrapper background">
            <h1 class="about-header"><%= lang.setup.info %></h1>
            <div class="about-body">
                <p>
                    <%= lang.setup.info_text %>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="beta" data-module-hide="about"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="manners" data-module-hide="about"
                   data-header="false" data-menu="false">
        </div>

        <div id="manners" class="background">
            <h1 class="about-header"><%= lang.setup.rules %></h1>
            <div class="about-body" style="position: relative">
                <p>
                    <%= lang.setup.rules_text.first %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.second %></h2>
                    </div>
                    <%= lang.setup.rules_text.third %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.fourth %></h2>
                    </div>
                    <%= lang.setup.rules_text.fifth %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.sixth %></h2>
                    </div>
                    <%= lang.setup.rules_text.seventh %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.eighth %></h2>
                    </div>
                    <%= lang.setup.rules_text.ninth %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.tenth %></h2>
                    </div>
                    <%= lang.setup.rules_text.eleventh %>
                    <br><br>
                    <div class="headline">
                        <h2><%= lang.setup.rules_text.twelfth %></h2>
                    </div>
                    <%= lang.setup.rules_text.thirteenth %>
                    <br><br>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="about" data-module-hide="manners"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="google-analytics" data-module-hide="manners"
                   data-header="false" data-menu="false">
        </div>

        <div id="google-analytics" class="about-wrapper background">
            <h1 class="about-header"><%= lang.setup.google %></h1>
            <div class="about-body">
                <p>
                    <%= lang.setup.google_text %>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="manners" data-module-hide="google-analytics"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="game-experience" data-module-hide="google-analytics"
                   data-header="false" data-menu="false">
        </div>

        <div id="game-experience" class="about-wrapper background">
            <h1 class="about-header"><%= lang.setup.experience %></h1>
            <div class="about-body">
                <p>
                    <%= lang.setup.experience_text.info %>
                </p>
            </div>
            <div>
                <br><br>
                <ul class="horizontal-list">
                    <li  id="beginner" onclick="selectExperience(0)" class="selected"><a href="#"><%= lang.setup.experience_text.beginner %></a></li>
                    <li  id="intermediate" onclick="selectExperience(1)"><a href="#"><%= lang.setup.experience_text.intermediate %></a></li>
                    <li  id="expert" onclick="selectExperience(2)"><a href="#"><%= lang.setup.experience_text.expert %></a></li>
                </ul>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="google-analytics" data-module-hide="game-experience"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="SE_WAVE_MENU"
                   data-module-show="ready" data-module-hide="game-experience"
                   data-header="false" data-menu="false">
        </div>

        <div id="ready" class="about-wrapper background">
            <h1 class="about-header"><%= lang.setup.ready %></h1>
            <div class="about-body">
                <p>
                    <%= lang.setup.ready_text %>
                </p>
            </div>
            <input type="button" class="fixed-bottom-button left"
                   value="<%= lang.global.back %>" data-sound="SE_WAVE_CANCEL"
                   data-module-show="game-experience" data-module-hide="ready"
                   data-header="false" data-menu="false">
            <input type="submit" class="post-button fixed-bottom-button"
                   value="<%= lang.global.next %>" data-sound="GL_OLV_INIT_END"
                   data-module-show="have-fun" data-module-hide="ready"
                   data-header="false" data-menu="false" onclick="submit()">
        </div>

        <div id="have-fun" class="about-wrapper background">
            <h1 class="about-header"></h1>
            <div class="about-body">
                <h1 class="about-header"><%= lang.setup.done %></h1>
            </div>
            <br><br><br><br>
            <div class="center">
                <button class="about-button"
                        onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);
                    wiiuSound.playSoundByName('BGM_OLV_MAIN', 3);
                    window.location.replace('/titles')"><%= lang.setup.done_button %></button>
            </div>

        </div>
    </div>
<body onload="wiiuBrowser.endStartUp(); wiiuSound.playSoundByName('BGM_OLV_INIT', 3);">
</body>
</html>
