<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="<%= cdnURL %>/css/juxt.css">
    <script src="<%= cdnURL %>/js/pjax.min.js"></script>
    <script src="<%= cdnURL %>/js/juxt.js"></script>
</head>
<style>
    body {
        background-image: url('data:image/png;base64,[encoded data, 81576 characters]');
        background-size: 100%;
        background-repeat: repeat !important;
    }
</style>
<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.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
        xmlhttp.send(JSON.stringify({ "experience": experience, "notifications": notifications  }));
    }
</script>
<body>
    <div id="welcome" class="about-wrapper" style="display: block">
    <h1 class="about-header"><%= lang.setup.welcome %></h1>
    <div class="about-body">
        <p>
            <%= lang.setup.welcome_text %>
        </p>
    </div>
    <button class="about-button" style="margin-left: 50px" onclick="exit()"><%= lang.global.exit %></button>
    <button class="about-button" style="margin-left: 625px;"
            onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);
                         document.getElementById('beta').style.display = 'block';
                         document.getElementById('welcome').style.display = 'none';"><%= lang.global.next %></button>
</div>

    <div id="beta" class="about-wrapper">
        <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>
        <button class="about-button" style="margin-left: 50px;margin-top: 100px; z-index: 4;"
                onclick="wiiuSound.playSoundByName('SE_OLV_CANCEL', 1);
                         document.getElementById('welcome').style.display = 'block';
                         document.getElementById('beta').style.display = 'none';"><%= lang.global.back %></button>
        <button class="about-button" style="margin-left: 625px;margin-top: 100px; z-index: 4;"
                onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);
                         document.getElementById('google-analytics').style.display = 'block'
                         document.getElementById('beta').style.display = 'none'"><%= lang.global.next %></button>
        <div style="position: relative; height: 200px; z-index: 0"></div>
    </div>

    <div id="google-analytics" class="about-wrapper">
        <h1 class="about-header"><%= lang.setup.google %></h1>
        <div class="about-body">
            <p>
                <%= lang.setup.google_text %>
            </p>
        </div>
        <button class="about-button" style="margin-left: 50px;"
                onclick="wiiuSound.playSoundByName('SE_OLV_CANCEL', 1);
                         document.getElementById('beta').style.display = 'block';
                         document.getElementById('google-analytics').style.display = 'none';"><%= lang.global.back %></button>
        <button class="about-button" style="margin-left: 625px;"
                onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);
                         document.getElementById('ready').style.display = 'block'
                         document.getElementById('google-analytics').style.display = 'none'"><%= lang.global.next %></button>
    </div>

    <div id="ready" class="about-wrapper">
    <h1 class="about-header"><%= lang.setup.guest %></h1>
    <div class="about-body">
        <p>
            <%= lang.setup.guest_text %>
        </p>
    </div>
    <button class="about-button" style="margin-left: 320px; width: 250px"
            onclick="wiiuSound.playSoundByName('SE_WAVE_MENU', 1);wiiuSound.playSoundByName('BGM_OLV_MAIN', 3);window.location.replace('/communities')">I Understand</button>
</div>

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