$(function () {

    var changed = false;

    // Hints


    function processHints() {
        $('.hint').replaceWith(function () {
            return '<div><a href="#" class="hintlink" onclick="$(this).next().slideToggle(); return false;">Bekijk hint</a>' + $(this).hide()[0].outerHTML + '</div>';
        });
        $('#difficulty').trigger('change');
    }


    $('#difficulty').change(function (e) {
        var option = $(this).find(':selected').val();

        $('.hintlink').toggle(option == 'normal');
        $('.hint').toggle(option == 'easy');

        window.localStorage.setItem('difficulty', option);
    });

    // Set the selected property
    if (window.localStorage['difficulty']) {
        var difficulty = window.localStorage['difficulty'];
    } else {
        var difficulty = 'normal';
    }

    $('#difficulty option').filter(function () {
        return $(this).val() == difficulty;
    }).prop('selected', true);
    $('#difficulty').trigger('change');

    function loadPage(page) {
        $('#quiz').load('/' + page + '.html?cachebuster=' + Math.random(), processHints);
    }

    function getPage(link) {
        if (link.lastIndexOf('?') === -1) {
            return '';
        }
        return link.substring(link.lastIndexOf('?') + 1);
    }

    // Dynamically load pages
    $('#menu a').click(function (e, element) {
        var page = getPage(e.target.href);

        window.history.pushState({ page: page }, 'Security', e.target.href);
        loadPage(page);
        e.preventDefault();
    });

    window.onpopstate = function (event) {
        if (event.state) {
            loadPage(event.state.page);
        } else {
            window.location.href = '/';
        }
    }

    // Load page
    var page = getPage(window.location.href);
    if (page !== '') {
        loadPage(page);
    } else {
        loadPage('sql');
    }

});