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

    //-------------------------------------------------------------------------
    // Camera 
    //-------------------------------------------------------------------------

    /**
     * Capture picture
     */
    function getPicture() {
        
        //navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, 
        //    destinationType: Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.CAMERA });
        
        navigator.camera.getPicture(
            function(data) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                //img.src = "data:image/jpeg;base64," + data;
                img.src = data;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType:
            Camera.DestinationType.FILE_URI, sourceType : Camera.PictureSourceType.CAMERA});
    };

    /**
     * Select image from library
     */
    function getImage() {
        navigator.camera.getPicture(
            function(data) {
                var img = document.getElementById('camera_image');
                img.style.visibility = "visible";
                img.style.display = "block";
                //img.src = "data:image/jpeg;base64," + data;
                img.src = data;
                document.getElementById('camera_status').innerHTML = "Success";
            },
            function(e) {
                console.log("Error getting picture: " + e);
                document.getElementById('camera_status').innerHTML = "Error getting picture.";
            },
            { quality: 50, destinationType:
            Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY});
    };

    
    /**
     * 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>Camera</h1>
    <div id="info">
        <b>Status:</b> <span id="camera_status"></span><br>
        <img style="width:120px;height:120px;visibility:hidden;display:none;" id="camera_image" src="" />
    </div>
    <h2>Action</h2>
    <div class="btn large" onclick="getPicture();">Take Picture</div>
    <div class="btn large" onclick="getImage();">Select Image from Library</div>
    <h2> </h2><div class="backBtn" onclick="backHome();">Back</div>
  </body>
</html>