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

    //-------------------------------------------------------------------------
    // Notifications
    //-------------------------------------------------------------------------

    var beep = function(){
        navigator.notification.beep(3);
    };

    var vibrate = function(){
      navigator.notification.vibrate(1000);
    };

    var alertDialog = function(message, title, button) {
        console.log("alertDialog()");
        navigator.notification.alert(message,
            function(){
                console.log("Alert dismissed.");
            },
            title, button);
        console.log("After alert");
    };

    var confirmDialog = function(message, title, buttons) {
        navigator.notification.confirm(message,
            function(r) {
                console.log("You selected " + r);
                alert("You selected " + (buttons.split(","))[r-1]);
            },
            title,
            buttons);
    };
    
    /**
     * 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);
    }

</script>

  </head>
  <body onload="init();" id="stage" class="theme">
  
    <h1>Notifications and Dialogs</h1>
    <div id="info">
    </div>
    
    <h2>Action</h2>
    <div class="btn large" onclick="beep();">Beep</div>
    <div class="btn large" onclick="vibrate();">Vibrate</div>
    <div class="btn large" onclick="alertDialog('You pressed alert.', 'Alert Dialog', 'Continue');">Alert Dialog</div>
    <div class="btn large" onclick="confirmDialog('You pressed confirm.', 'Confirm Dialog', 'Yes,No,Maybe');">Confirm Dialog</div>
    <div class="btn large" onclick="alert('You pressed alert.');">Built-in Alert Dialog</div>
    <div class="btn large" onclick="confirm('You selected confirm');">Built-in Confirm Dialog</div>
    <div class="btn large" onclick="prompt('This is a prompt.', 'Default value');">Built-in Prompt Dialog</div>
    <h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
  </body>
</html>