<!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;

    var eventOutput = function(s) {
        var el = document.getElementById("results");
        el.innerHTML = el.innerHTML + s + "<br>";
    };

    function printNetwork() {
        eventOutput("Current network connection type is: " + navigator.network.connection.type);
    }

    /**
     * Function called when page has finished loading.
     */
    function init() {
        document.addEventListener("deviceready", function() {
            deviceReady = true;
            console.log("Device="+device.platform+" "+device.version);
            eventOutput("Network Connection is: " + navigator.network.connection.type);
            document.addEventListener('online', function() { eventOutput('Online event, connection is: ' + navigator.network.connection.type); }, false);
            document.addEventListener('offline', function() { eventOutput('Offline event, connection is: ' + navigator.network.connection.type); }, false);

        }, false);
        window.setTimeout(function() {
            if (!deviceReady) {
                alert("Error: Cordova did not initialize.  Demo will not run correctly.");
            }
        },1000);
    }

</script>

  </head>
  <body onload="init();" id="stage" class="theme">
  
    <h1>Network Events and State</h1>
    <div id="info">
        <b>Results:</b><br>
        <span id="results"></span>
    </div>

    <h2>Action</h2>
    <div class="btn large" onclick="printNetwork();">Show Network Connection</div>
    <h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
  </body>
</html>