@{
    ViewBag.Title = "Profile";
}
<div class="row">
    <div class="col-md-12">
        <div style="margin:0px 50px;">
            <p style="color: #185f80; font-size: 30px; font-weight: 700; ">@User.Identity.Name</p>
            <div class="user-image">
                <img style="border-radius:100px;display:inline-block;" src="./../Content/Images/user_big.png" />
            </div>
            <div class="subtitle-text">Activity goals</div>
            <div class="time main">
                <span class="profile-text">Remind me to be active after </span><span class="profile-text" id="timeout-value" style="color: #ff1d25; font-style:italic;"></span><span class="profile-text"> of sitting still.</span>
                <input id="time-control" type="range" min="15" max="240" class="nice-range" /><button id="btn-set-timeout" class="btn-success">Set!</button>
            </div>
            <div class="tolerance main">
                <span class="profile-text">Be </span><span id="tolerance-text-value" class="profile-text" style="color: #ff1d25; font-style:italic;"></span><span class="profile-text"> about when I receive alerts about my posture.</span>
                <input type="range" min="0" max="1500" id="tolerance-control" class="nice-range" /><button class="btn-success" id="btn-set-tolerance">SET!</button>
            </div>
            <div class="baseline main">
                <div class="subtitle-text">
                    Calibrate your BackUp device
                </div>
                <button id="btn-set-baseline" class="btn-success">Start!</button>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>
        var SET_BASELINE_URI = "";
        var SET_TOLERANCE_URI = "";
        var SET_TIMEOUT_URI = "";
        var tolerance = 0;
        var timeout = 0;

        function httpGet(url, queryString) {
            var xmlHttp = null;

            xmlHttp = new XMLHttpRequest();
            xmlHttp.open("GET", url + queryString, false);
            xmlHttp.send(null);
            return xmlHttp.responseText;
        }

        $("#btn-set-baseline").click(function () {
            console.log("set-baseline button has been clicked.");
            var queryString = "action=baseline";
            console.log("sending request to: " + SET_BASELINE_URI + queryString);
            //httpGet(SET_BASELINE_URI, queryString);
        });
        $("#tolerance-control").on("change mousemove", function () {
            console.log("tolerance has changed.");
            console.log(tolerance);
            var toleranceText = "";
            if (tolerance < 500) {
                toleranceText = "extremely precise (not slouching allowed)";
                console.log(toleranceText);
            } else if (tolerance >= 500 && tolerance < 800) {
                toleranceText = "preciss";
                console.log(toleranceText);
            } else if (tolerance >= 800 && tolerance < 1000) {
                toleranceText = "rigurous";
                console.log(toleranceText);
            } else if (tolerance >= 1000 && tolerance < 1300) {
                toleranceText = "fair";
                console.log(toleranceText);
            } else if (tolerance > 1300) {
                toleranceText = "easy going (don't worry too much)";
                console.log(toleranceText);
            }
            tolerance = $(this).val();
            $("#tolerance-text-value").val(toleranceText);
        });

        $("#time-control").on("change mousemove", function () {
            console.log("timeout has changed.");
            console.log(timeout);
            timeout = $(this).val();
            $("#timeout-value").html(timeout + " minutes");
        });
        $("#btn-set-tolerance").click(function () {
            var queryString = "tolerance=" + tolerance;
            console.log("sending request to: " + SET_TOLERANCE_URI + queryString);
            //httpGet(SET_TOLERANCE_URI, queryString);
        });
        $("#btn-set-timeout").click(function () {
            var minutes = $("#time-value").val();
            var queryString = "timeout=" + minutes;
            console.log("sending request to: " + SET_TIMEOUT_URI + queryString);
            //httpGet(SET_TIMEOUT_URI, queryString);
        });

    </script>
}