<div data-role="page" id="camera">
    <div data-role="header">
        <h1>Camera</h1>
        <a href="#" data-role="button" data-rel="back" data-icon="back">Back</a>
    </div>
    <div data-role="content">
        <h1>Welcome to the Camera Gallery</h1>
        <p>Click 'Get Picture' button below</p>
        <div class="center-wrapper">
            <input type="button" id="getPicture" data-icon="camera" value="Get Picture" 
                   class="center-button" data-inline="true"/>
        </div>
        <br/>
        
        <div style="width: 100%;">
            <img id="imageView" style="width: 100%;"></img>
        </div>
        
        <div data-role="popup" id="pictureTypeSelection">
            <ul data-role="listview" data-inset="true" style="min-width:210px;">
                <li data-role="divider" data-theme="a">Get Picture From</li>
                <li><a id="pictureFromGallery" href="#">Gallery</a></li>
                <li><a id="pictureFromCamera" href="#">Camera</a></li>
            </ul>
        </div>
    </div>
</div>

(function() {
    var cameraManager = CameraManager.getInstance();

    $(document).on("pageinit", "#camera", function(e) {
        e.preventDefault();
        $("#imageView").hide();  

        $("#getPicture").on("tap", function(e) {
            e.preventDefault();

            $("#pictureTypeSelection").popup("open");
        });        

        $("#pictureFromGallery").on("tap", function(e) {
            e.preventDefault();
            $("#pictureTypeSelection").popup("close");

            getPhoto(true);
        });    

        $("#pictureFromCamera").on("tap", function(e) {
            e.preventDefault();
            $("#pictureTypeSelection").popup("close");

            getPhoto(false);
        });
    });

    function getPhoto(fromGallery) {
        var callback = {};

        callback.onSuccess = onSuccess;
        callback.onError = onError;

        cameraManager.getPicture(callback, fromGallery);
    }

    function onSuccess(fileURI) {
        $("#imageView").show();  
        $("#imageView").attr("src", fileURI);
    }

    function onError(message) {
        console.log("Camera capture error");
    }
})();

var CameraManager = (function () {     
  var instance;

  function createObject() {
      var fileManager = FileManager.getInstance();      

      return {
          getPicture: function (callback, fromGallery) {      
              var source = Camera.PictureSourceType.CAMERA;

              if (fromGallery) {
                  source = Camera.PictureSourceType.PHOTOLIBRARY;  
              }

              navigator.camera.getPicture(callback.onSuccess, 
                                          callback.onError, 
                                          { 
                                              quality: 80, 
                                              destinationType: Camera.DestinationType.FILE_URI, 
                                              sourceType: source,
                                              correctOrientation: true 
                                          });
          }
    };
  };

  return {
    getInstance: function () {
      if (!instance) {
          instance = createObject();
      }

      return instance;
    }
  }; 
})();