<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
        <title>IntuiClock Config</title>
        <link rel="stylesheet" href="css/slate.min.css">
        <script type="text/javascript" src="js/slate.min.js"></script>
    </head>

    <body>
        <form id="main-form">
            <div class="item-container">
                <div class="item-container-header">Features</div>
                <div class="item-container-content">
                    <label class="item">
                        Seconds Hand
                        <input id="input-seconds-hand" type="checkbox" class="item-toggle" name="seconds-hand" checked>
                    </label>
                    <label class="item">
                        Battery Indicator
                        <input id="input-battery-indicator" type="checkbox" class="item-toggle" name="battery-indicator" checked>
                    </label>
                    <label class="item">
                        Date Format
                        <select id="input-date-format" name="date-format" class="item-select">
                            <option class="item-select-option" selected value="t">10 Aug 2015</option>
                            <option class="item-select-option" value="d">10/08/2015</option>
                            <option class="item-select-option" value="m">08/10/2015</option>
                        </select>
                    </label>
                </div>
                <div class="item-container-footer">Disable the seconds hand to reduce battery use.</div>
            </div>

            <div class="item-container">
                <div class="button-container">
                    <input id="button-submit" type="button" class="item-button" value="SAVE">
                </div>
            </div>
        </form>
    </body>

<script>
    function getConfigData() {
        var input_seconds_hand = document.getElementById('input-seconds-hand'),
            input_battery_indicator = document.getElementById('input-battery-indicator'),
            input_date_format = document.getElementById('input-date-format');

        var options = {
            'seconds_hand': input_seconds_hand.checked,
            'battery_indicator': input_battery_indicator.checked,
            'date_format': input_date_format.value
        };

        // Save for next launch
        localStorage['seconds_hand'] = options['seconds_hand'];
        localStorage['battery_indicator'] = options['battery_indicator'];
        localStorage['date_format'] = options['date_format'];

        console.log('Got options: ' + JSON.stringify(options));
        return options;
    }

    function getQueryParam(variable, defaultValue) {
        var query = location.search.substring(1),
            vars = query.split('&');

        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split('=');
            if (pair[0] === variable) {
                return decodeURIComponent(pair[1]);
            }
        }

        return defaultValue || false;
    }

    var button_submit = document.getElementById('button-submit');
    button_submit.addEventListener('click', function() {
        console.log('Submit');

        // Set the return URL depending on the runtime environment
        var return_to = getQueryParam('return_to', 'pebblejs://close#');
        document.location = return_to + encodeURIComponent(JSON.stringify(getConfigData()));
    });

    (function() {
        var input_seconds_hand = document.getElementById('input-seconds-hand'),
            input_battery_indicator = document.getElementById('input-battery-indicator'),
            input_date_format = document.getElementById('input-date-format');

        if (localStorage['seconds_hand']) {
            input_seconds_hand.checked = JSON.parse(localStorage['seconds_hand']);
        }

        if (localStorage['battery_indicator']) {
            input_battery_indicator.checked = JSON.parse(localStorage['battery_indicator']);
        }

        if (localStorage['date_format']) {
            input_date_format.value = localStorage['date_format'];
        }
    })();
</script>
</html>