<html>
    <head>
        <title>Flash Cards</title>

        <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0;
            }

            div.card {
                background-color: GhostWhite;
                position: absolute;
                left: 10%;
                top: 10%;
                height: 80%;
                width: 80%;
                padding: 0;
                box-shadow: 0px 0px 50px #888888;
                overflow: auto;
            }

            div.card h2 {
                font-family: Montserrat;
                font-size: 5em;
                text-align: center;
                margin-top: 10%;
            }

            div.card h3, div.card h4 {
                font-family: Montserrat;
                text-align: center;
            }

            div.card h3 {
                font-size: 3em;
            }

            div.card h4 {
                font-size: 2em;
            }

            div.card p {
                font-family: Open Sans Condensed;
                font-size: 3em;
                text-align: center;
            }

            div.card span {
                display: block;
                font-family: Open Sans Condensed;
                font-size: 1.5em;
            }

            div.card div.form ul {
                list-style-type: none;
                margin: 5% 10% 0 10%;
                padding: 0;
                margin-left: auto;
                margin-right: auto;
                width: 80%;
                -moz-column-count: 3; /* Firefox */
                column-count: 3;
            }

            div.card div.form button {
                font-size: 1.5em;
                display: block;
                margin-top: 2%;
                margin-left: auto;
                margin-right: auto;
            }

            div.card div.quiz {
                display: none;
            }
        </style>

        <script type="text/javascript">
            var cards = {
                esperantoGrammar: {
                    name: "Esperanto Grammar",
                    cards: {
                        "eta" : "tiny",
                        "ejo" : "room / place",
                    }
                },
                esperantoWords: {
                    name: "Esperanto Words",
                    cards: {
                        "ekzemplo" : "example",
                        "frazo" : "phrase",
                        "amaso" : "heap / crowd",
                    }
                },
                elements: {
                    name: "Elements",
                    cards: {
                        "Hydrogen" : "H, 1",
                        "Helium" : "He, 2",
                        "Lithium" : "Li, 3",
                    }
                },
                english: {
                    name: "English Vocab",
                    cards: {
                        "expectoration" : "n.  bodily fluid ejected from the mouth",
                        "mordant" : "adj. having sharp/critical qualities",
                        "sordid" : "adj. arousing mental distaste/contempt",
                    }
                },
                trivia: {
                    name: "Trivia & Misc.",
                    cards: {
                        "Sapir-Whorf Hypothesis" : "Linguistic relativity--speakers of different languages conceptualize the world differently.",
                        "Kelen" : "Artificial non-human language.  Lacks a noun-verb distinction.",
                        "Skerre" : "Fictional language of pre-Iron Age hunter/gatherers.",
                    }
                }
            }

            var form = "",
                categories = [],
                len = 0

            for (id in cards) { // Build form HTML.
                form += '<li><span><input type="checkbox" id="' + id + '" checked="checked" />&nbsp;' + cards[id].name +'</span></li>'
            }

            newQuestion = function () { // Loads a random question in.
                var n = Math.floor(Math.random () * len),
                    i = 0

                done = function (category, question, answer) {
                    document.getElementById('category').innerHTML = category
                    document.getElementById('front').innerHTML = question
                    document.getElementById('back').innerHTML = ''

                    document.getElementById('card').onclick = showAnswer(answer)
                }

                for (id in cards) {
                    if (categories.indexOf(id) == -1) continue

                    for (q in cards[id].cards) {
                        if (i == n) {
                            return done(cards[id].name, q, cards[id].cards[q])
                        } else {
                            ++i
                        }
                    }
                }
            }

            showAnswer = function(answer) { // Shows answer and gets new question.
                return function () {
                    document.getElementById('back').innerHTML = answer
                    document.getElementById('card').onclick = newQuestion
                }
            }

            start = function () { // What to do when the button is clicked.
                document.getElementById('form').style.display = 'none'
                document.getElementById('quiz').style.display = 'block'

                for (id in cards) {
                    if (document.getElementById(id).checked) {
                        categories.push(id)

                        for (q in cards[id].cards) { // Count cards.
                            ++len
                        }
                    }
                }

                document.getElementById('card').onclick = newQuestion
            }

            window.onload = function () {
                document.getElementById('list').innerHTML = form
                document.getElementById('learn').onclick = start
            }
        </script>
    </head>
    <body>
        <div id="card" class="card">
            <div id="form" class="form">
                <h3>What do you want to study?</h3>

                <ul id="list"></ul><br />

                <button id="learn">Learn!</button>
            </div>

            <div id="quiz" class="quiz">
                <h4 id="category"></h4>
                <h2 id="front"></h2>
                <p id="back"></p>
            </div>
        </div>
    </body>
</html>