<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cordova Camera</title>
</head>
<script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            
            var pictureSource;   // picture source
            var destinationType; // sets the format of returned value
            
            // Wait for Cordova to connect with the device
            //
            document.addEventListener("deviceready",onDeviceReady,false);
            
            // Cordova is ready to be used!
            //
            function onDeviceReady() {
                console.log('on device ready.');
                pictureSource=navigator.camera.PictureSourceType;
                destinationType=navigator.camera.DestinationType;
            }
        
        // Called when a photo is successfully retrieved
        //
        function onPhotoDataSuccess(imageData) {
            // Uncomment to view the base64 encoded image data
            // console.log(imageData);
            
            // Get image handle
            //
            var smallImage = document.getElementById('smallImage');
            
            // Unhide image elements
            //
            smallImage.style.display = 'block';
            
            // Show the captured photo
            // The inline CSS rules are used to resize the image
            //
            smallImage.src = "data:image/jpeg;base64," + imageData;
        }
        
        // Called when a photo is successfully retrieved
        //
        function onPhotoURISuccess(imageURI) {
            // Uncomment to view the image file URI
            // console.log(imageURI);
            
            // Get image handle
            //
            var largeImage = document.getElementById('largeImage');
            
            // Unhide image elements
            //
            largeImage.style.display = 'block';
            
            // Show the captured photo
            // The inline CSS rules are used to resize the image
            //
            largeImage.src = imageURI;
        }
        
        // A button will call this function
        //
        function capturePhoto() {
            // Take picture using device camera and retrieve image as base64-encoded string
            console.log('inside capture photo');
            navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                        destinationType: destinationType.DATA_URL });
        }
        
        // Called if something bad happens.
        // 
        function onFail(message) {
            alert('Failed because: ' + message);
        }
        
        function clickedImage(){
            console.log('image clicked');
            document.location.href = 'tel:+1-800-555-1234';
        }
        
            </script>
    </head>
    <body>
        <button onclick="capturePhoto();">Capture Photo</button> <br>
        <br>
        <img style="display:none;width:150px;height:150px;" id="smallImage" src="" onclick="clickedImage();"/>
        <img style="display:none;" id="largeImage" src="" />
    </body>
</html>