<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,maximum-scale=1.0,initial-scale=1.0" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!-- ISO-8859-1 -->
    <title>Cordova Mobile Spec</title>
    <link rel="stylesheet" href="../master.css" type="text/css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" charset="utf-8" src="../cordova.js"></script>      

      
<script type="text/javascript" charset="utf-8">

    var deviceReady = false;
    
    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {
                deviceReady = true;
                console.log("Device="+device.platform+" "+device.version);
            }, false);
        window.setTimeout(function() {
            if (!deviceReady) {
                alert("Error: Apache Cordova did not initialize.  Demo will not run correctly.");
            }
        },1000);
    }

    /* Battery */
    function updateInfo(info) {
        document.getElementById('level').innerText = info.level;
        document.getElementById('isPlugged').innerText = info.isPlugged;
        if (info.level > 5) {
            document.getElementById('crit').innerText = "false";
        }
        if (info.level > 20) {
            document.getElementById('low').innerText = "false";
        }
    }
    
    function batteryLow(info) {
        document.getElementById('low').innerText = "true";
    }
    
    function batteryCritical(info) {
        document.getElementById('crit').innerText = "true";
    }
    
    function addBattery() {
        window.addEventListener("batterystatus", updateInfo, false);
    }
    
    function removeBattery() {
        window.removeEventListener("batterystatus", updateInfo, false);
    }
    
    function addLow() {
        window.addEventListener("batterylow", batteryLow, false);
    }
    
    function removeLow() {
        window.removeEventListener("batterylow", batteryLow, false);
    }
    
    function addCritical() {
        window.addEventListener("batterycritical", batteryCritical, false);
    }
    
    function removeCritical() {
        window.removeEventListener("batterycritical", batteryCritical, false);
    }

</script>

  </head>
  <body onload="init();" id="stage" class="theme">
  
    <h1>Battery</h1>
    <div id="info">
        <b>Status:</b> <span id="battery_status"></span><br>
        Level: <span id="level"></span><br/>
        Plugged: <span id="isPlugged"></span><br/>
        Low: <span id="low"></span><br/>
        Critical: <span id="crit"></span><br/>
    </div>
    <h2>Action</h2>
    <div class="btn large" onclick="addBattery();">Add "batterystatus" listener</div>
    <div class="btn large" onclick="removeBattery();">Remove "batterystatus" listener</div>
    <div class="btn large" onclick="addLow();">Add "batterylow" listener</div>
    <div class="btn large" onclick="removeLow();">Remove "batterylow" listener</div>
    <div class="btn large" onclick="addCritical();">Add "batterycritical" listener</div>
    <div class="btn large" onclick="removeCritical();">Remove "batterycritical" listener</div>
    <h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
  </body>
</html>