cerkit/PebbleSettings.html

## PebbleSettings.html
<!DOCTYPE html>
<html>
<head>
    <title>Settings page for Pebble</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/Site.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        var options;
        var returnTo;

        // urlParam code from http://stackoverflow.com/a/2880929
        var urlParams;

        (window.onpopstate = function () {
            var match,
                pl = /\+/g,  // Regex for replacing addition symbol with a space
                search = /([^&=]+)=?([^&]*)/g,
                decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
                query = window.location.search.substring(1);

            urlParams = {};
            while (match = search.exec(query))
                urlParams[decode(match[1])] = decode(match[2]);
        })();

        function sendConfigData() {

            options.username = txtSetting1.value;

            if ("return_to" in urlParams) {
                returnTo = urlParams["return_to"];
                document.location = returnTo + JSON.stringify(options);
            }
            else {
                document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
            }
        }

        function cancel() {
            if ("return_to" in urlParams) {
                returnTo = urlParams["return_to"];
                document.location = returnTo;
            }
            else {
                document.location = "pebblejs://close";
            }
        }
    </script>
    <div class="container">
        <div class="jumbotron">
            <h1>My Pebble App</h1>
            <h3>A great app for providing usefulness to your smartwatch</h3>
        </div>
        <div class="col-md-offset-2 col-md-8">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="txtSetting1">Setting 1</label>
                    <input type="text" class="form-control" required="true" id="txtSetting1" placeholder="Setting 1" />
                </div>
                <div class="form-group btn-group btn-group-lg">
                    <input type="button" class="btn btn-default" value="Save" onclick="sendConfigData()" />
                    <input type="button" class="btn btn-default" value="Cancel" onclick="cancel()" />

                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        if ("options" in urlParams) {
            options = JSON.parse(urlParams["options"]);
            txtSetting1.value = options.username;
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Settings page for Pebble</title>
	<meta charset="utf-8" />
	<link href="../Content/bootstrap.min.css" rel="stylesheet" />
	<link href="../Content/Site.css" rel="stylesheet" />
	<script src="../Scripts/bootstrap.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">
	var options;
	var returnTo;

	// urlParam code from http://stackoverflow.com/a/2880929
	var urlParams;

	(window.onpopstate = function () {
	var match,
	pl = /\+/g, // Regex for replacing addition symbol with a space
	search = /([^&=]+)=?([^&]*)/g,
	decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
	query = window.location.search.substring(1);

	urlParams = {};
	while (match = search.exec(query))
	urlParams[decode(match[1])] = decode(match[2]);
	})();

	function sendConfigData() {

	options.username = txtSetting1.value;

	if ("return_to" in urlParams) {
	returnTo = urlParams["return_to"];
	document.location = returnTo + JSON.stringify(options);
	}
	else {
	document.location = 'pebblejs://close#' + encodeURIComponent(JSON.stringify(options));
	}
	}

	function cancel() {
	if ("return_to" in urlParams) {
	returnTo = urlParams["return_to"];
	document.location = returnTo;
	}
	else {
	document.location = "pebblejs://close";
	}
	}
	</script>
	<div class="container">
	<div class="jumbotron">
	<h1>My Pebble App</h1>
	<h3>A great app for providing usefulness to your smartwatch</h3>
	</div>
	<div class="col-md-offset-2 col-md-8">
	<form class="form-horizontal">
	<div class="form-group">
	<label for="txtSetting1">Setting 1</label>
	<input type="text" class="form-control" required="true" id="txtSetting1" placeholder="Setting 1" />
	</div>
	<div class="form-group btn-group btn-group-lg">
	<input type="button" class="btn btn-default" value="Save" onclick="sendConfigData()" />
	<input type="button" class="btn btn-default" value="Cancel" onclick="cancel()" />

	</div>
	</form>
	</div>
	</div>
	<script type="text/javascript">
	if ("options" in urlParams) {
	options = JSON.parse(urlParams["options"]);
	txtSetting1.value = options.username;
	}
	</script>
	</body>
	</html>