pg

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
	 To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="phonegap.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>

function onBodyLoad(){
	document.addEventListener("deviceready",onDeviceReady,false);
	document.addEventListener("online", onOnline, false);
}


function onDeviceReady(){
    navigator.notification.alert("PhoneGap is working");
    var height = $('#page4').height() - $('#page4 div[data-role="header"]').height();
    var width  = $('#page4').width();
    $('#map_canvas').css({'height': height + 'px','width':  width  + 'px'});
}

var watchID = null;
function startWatch() {
        var options = { frequency: 200 };

        var onSuccess = function(acceleration) {
            // Scale the accelerometer values from [0, 1] to [0, 100]
            // in order to display in the HTML range element
            $('#acceleration-x').val(acceleration.x * 100).slider('refresh');
            $('#acceleration-y').val(acceleration.y * 100).slider('refresh');
            $('#acceleration-z').val(acceleration.z * 100).slider('refresh');
        };

        var onFail = function() {
            console.log('Failed to get acceleration');
        };

        watchID = navigator.accelerometer.watchAcceleration(onSuccess, onFail, options);
    }

    // Stop watching the acceleration
function stopWatch() {
	if (watchID) {
    	navigator.accelerometer.clearWatch(watchID);
        watchID = null;
    }
}

function getPictureFromCamera(){
	navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI });

	function onSuccess(imageURI) {
		$('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size':  '100%'});
	}

    function onFail(message) {
    	console.log('Failed to get an image');
    }
}

function getPictureFromGallery(){
	navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY });

	function onSuccess(imageURI) {
		$('#camera-image').css({'background-image': 'url('+imageURI+')', 'background-size':  '50%'});
    }

    function onFail(message) {
    	console.log('Failed to get an image');
    }
}


function onLocSuccess(position) {
	console.log(position);
    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    var map = new google.maps.Map(document.getElementById("map_canvas"), {
                                      zoom: 12,
                                      center: latlng,
                                      mapTypeId: google.maps.MapTypeId.ROADMAP
                                      });

    var marker = new google.maps.Marker({
                                            position: latlng,
                                            map: map,
                                            title: "You"
                                            });
}

function onLocFail() {
	console.log('Failed to get geolocation');
}

navigator.geolocation.getCurrentPosition(onLocSuccess, onLocFail);

</script>
</head>

<body onload="onBodyLoad();">

<div data-role="page" id="page">
	<div data-role="header">
		<h1>Home</h1>
	</div>
	<div data-role="content">
		<ul data-role="listview">
			<li><a href="#page2">Accelerometer</a></li>
            <li><a href="#page3">Camera</a></li>
			<li><a href="#page4">Geolocation</a>  </li>
		</ul>
	</div>
</div>

<div data-role="page" id="page2">
	<div data-role="header">
		<h1>Accelerometer</h1>
	</div>
	<div data-role="content">
    	<fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="button" data-theme="c" ontouchstart="startWatch();">Start</button></div>
            <div class="ui-block-b"><button type="button" data-theme="c" ontouchstart="stopWatch();">Stop</button></div>
        </fieldset>

        <div data-role="fieldcontain">
        	<label for="acceleration-x">Acceleration X:</label>
            <input type="range" name="acceleration-x" id="acceleration-x" value="0" min="0" max="100" />
        </div>
        <div data-role="fieldcontain">
        	<label for="acceleration-y">Acceleration Y:</label>
            <input type="range" name="acceleration-y" id="acceleration-y" value="0" min="0" max="100" />
        </div>
        <div data-role="fieldcontain">
        	<label for="acceleration-z">Acceleration Z:</label>
            <input type="range" name="acceleration-z" id="acceleration-z" value="0" min="0" max="100" />
        </div>
	</div>
</div>

<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Camera</h1>


	</div>
	<div data-role="content">
    	<fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="button" data-theme="c" data-icon="plus" ontouchstart="getPictureFromCamera();">Camera</button></div>
            <div class="ui-block-b"><button type="button" data-theme="c" data-icon="search" ontouchstart="getPictureFromGallery();">Gallery</button></div>
        </fieldset>
        <div id="camera-image" class="ui-body ui-body-b" style="background-size:100%;min-height:250px"></div>
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Geolocation</h1>
	</div>
	<div data-role="content" style="padding:0px;">
		<div id="map_canvas" height="300px" width="300px"></div>
	</div>
</div>

</body>
</html>