<html style="width:100%; height:100%; overflow:hidden">
<head>
<!-- You can include external scripts here like so... -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
// Constants
 
var DBG = true;
var i = 0;
var secondLineText = "Second line";
var wakeTime;
var timeDeltaText = "";
var wakeInterval = 300000;
var timeNow = new Date().getTime();
var tillNextWake = Math.floor(wakeInterval / 1000);
var deltasMaxLength = 10;
var timeDeltas = [];
var woken;
var timeDeltaTitleText = "Between Last Wakes:";
var batteryLevelText = "Battery level: ";
var showDashboard = true;
var cameraCB;
var showImageInterval = 10000;
var pauseFudgeFactor = 500;
var videoLength = 10;
 
 
// AUXILIARY FUNCTIONS
 
function drawModeName(name) {
        upperBase = 40;
        context.fillStyle = "rgb(200,200,200)";
        context.font = '28pt Calibri';
        context.textAlign = 'left';
        context.fillText(name, 10, upperBase);
}
 
function drawSecondLine(name) {
        upperBase = 90;
        context.fillStyle = "rgb(200,200,200)";
        context.font = '28pt Calibri';
        context.textAlign = 'left';
        context.fillText(name, 10, upperBase);
}
 
function drawTextLine(text, _number) {
    var number = _number;
    if ( number === undefined ) {
        console.log("No number given, setting to 0");
        number = 0;
    }
    baseline = 40 + 50 * number;
    context.fillStyle = "rgb(200,200,200)";
    context.font = '28pt Calibri';
    context.textAlign = 'left';
    context.fillText(text, 10, baseline);
}
 
function clearCanvas() {
    context.fillStyle = "rgb(0, 0, 0)";
    context.fillRect(0, 0, 640, 360);
}
 
Date.prototype.today = function () { 
    return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
}
 
Date.prototype.timeNow = function () {
     return ((this.getHours() < 10)?"0":"") + this.getHours() +":"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +":"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
}
 
// MAIN
 
 
function draw() {
    if (showDashboard) {
        clearCanvas();
        drawTextLine(firstLineText, 0 );
        drawTextLine(secondLineText, 1 );
        drawTextLine(tillNextWake, 2 );
        drawTextLine(timeDeltaTitleText, 3 );
        drawTextLine(timeDeltaText, 4 );
        drawTextLine(batteryLevelText, 5 );
    }
    // list of last times
    // drawModeName("" + i);
    // drawSecondLine(secondLineText);
}
 
 
 
currentTimeString = function () {
    return new Date().today() + " @ " + new Date().timeNow();
}
 
timeString = function(date) {
    return date.today() + " @ " + date.timeNow();   
}
 
function server() {
    if (!DBG) WS.serverConnect('0.0.0.0', null);
    WS.log('Welcome to WearScript');
    WS.say('Welcome to WearScript');
    WS.sound('SUCCESS');
    WS.dataLog(true, false, 1);
    
    WS.sensorOn("battery", 1, function (data) {
        console.log("Got battery callback");
        console.log(JSON.stringify(data));
        batteryLevelText = "Battery Level: " + Math.round(data.values[0] * 100) + "%";
        if (Math.round(data.values[0] * 100) <= 20) WS.say("Low battery.");
        batteryLevelText += " @ " + new Date(parseInt(data.timestamp * 1000)).timeNow();
    });
    
    clearCanvas();
    drawModeName("Rock and roll");
    
    var updateCurrentTime = function() {
        var date = new Date();
        timeNow = date.getTime();
        tillNextWake = "Till Next Wake: " + Math.ceil((wakeInterval - (timeNow - wakeTime)) / 1000);
        //firstLineText = currentTimeString(); 
        firstLineText = timeString(date);
        draw();
    }
    
    var updateWakeTime = function () {
        if (wakeTime != undefined) {
            woken = true;
        }
        var date = new Date();
        lastWakeTime = wakeTime;
        wakeTime = date.getTime();
        wakeTimeString = timeString(date);
        wakeTimeDelta = wakeTime - lastWakeTime;
        if (woken) {
            timeDeltas.unshift(Math.floor(wakeTimeDelta / 1000));
            if (timeDeltas.length > deltasMaxLength) timeDeltas.pop();
        }
        timeDeltaText = JSON.stringify(timeDeltas);
        secondLineText = "Last Wake: " + currentTimeString();
        //thirdLineText = "Time since last wake: ";
        //secondLineText = "current time"; 
        draw();
    }
    updateCurrentTime();
    updateWakeTime();
    
 
    // WS.cameraOn(0.5, 480, 640, cameraCB);
    
    setInterval(updateCurrentTime, 1000);
    
    var img = new Image();
    
    img.onload = function() {
        context.drawImage(img, 0, 0);
    }
    
    cameraCB = function(data) {
        WS.log("Got camera callback.");
        showDashboard = false;
        WS.cameraOff();
        //context.drawImage(img, 0, 0);
        img.src = 'data:image/jpg;base64,' + data;
        setTimeout(function() {
            showDashboard = true;
            //WS.liveCardCreate(true, .45);
            WS.activityDestroy();
        }, showImageInterval);
        //WS.say("Creating live card");
        //WS.liveCardDestroy();
    }
    
    var periodic = function() {
        WS.say("Cheese balls"); 
        WS.wake();
        WS.activityCreate();
        WS.displayWebView();
        // secondLineText = "LastWake: " + new Date().today() + " @ " + new Date().timeNow();
        updateWakeTime();
        WSRAW.recordWSVideo(videoLength);
        WS.activityDestroy();
        //setTimeout(function() {WS.cameraOn(0.5, 480, 640, cameraCB);}, pauseFudgeFactor);
    }
    
    setInterval( periodic, wakeInterval );
    // Below this are more examples, uncomment to use them
    WS.liveCardCreate(true, .2);
    WSRAW.recordWSVideo(videoLength);
    /*
    var tree = new WS.Cards();
    tree.add('Body text', 'Footer text', function () {WS.say('selected')}, function () {WS.say('tapped')}, 'Menu0', function () {WS.say('menu0')}, 'Menu1', function () {WS.say('menu1')});
    tree.add('Body text', 'Footer text', (new WS.Cards()).add('Child0', '0').add('Child1', '1'));
    WS.cardTree(tree);
    WS.displayCardTree();
    */
    /*
    WS.speechRecognize('Say Something', function (data) {
        WS.log('speech: ' + data);
        WS.say('you said ' + data);
    });
    */
    //WS.cameraPhoto();
    //WS.cameraVideo();
    //WS.cameraOff();
    //WS.shutdown();
}
function main() {
    if (WS.scriptVersion(1)) return;
    context = document.getElementById('canvas').getContext("2d");
    WS.serverConnect('{{WSUrl}}', server);
}
window.onload = main;
</script>
</body>
</html>