<script>

		document.addEventListener('deviceready', onDeviceReady, onError);
		function onDeviceReady(){
		  var options = { frequency: 0.1 };

		  var watchID = navigator.compass.watchHeading(onSuccess, onError, options);
		  }
		  function onSuccess(heading) {
			if ($('#box').checked == true){
			  $('#compass').css('transform-origin', '50% bottom');
			}else{
			  $('#compass').css('transform-origin', '50% 50%');
			}
			$('#compass').css('transform', 'rotate('+-heading.magneticHeading+'deg)');
		  };

		  function onError(compassError) {
			  alert('Compass error: ' + compassError.code);
		  };


		  $(document).ready(function() {
		  });

	  </script>

	  <img src="compass.png" style="width: 75%; height: 50%;" id="compass">