ike/phonegap-counter.html

## phonegap-counter.html
<!DOCTYPE HTML>
<html>
<head>
<title>Counter</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

<script>

// This is your app's init method. Here's an example of how to use it
function init() {
    document.addEventListener("deviceready", onDR, false);
}
function onDR(){
    document.addEventListener("backbutton", backKeyDown, true);
}

function backKeyDown() {
    // do something here if you wish
    count.subtract();
}

// Count var that holds the current count
var c = 0;

var locked = false;

// Count Class to add and subtract from the count
var count = {

	//the add function adds a person to the numPeople variable, and then displays it on the page
	add : function(){
		if (!locked) c++;
		var n = formatNumber(c,0,",","","","","","");
		document.getElementById('number').innerHTML = n;
	},

	//the subtract function subtracts a person from the numPeople variable and then displays the result on the page
	subtract : function(){
		if (!locked) c--;
		if (c < 0) c = 0;
		var n = formatNumber(c,0,",","","","","","");
		document.getElementById('number').innerHTML = n;
	},

	set : function(s){
		if (!locked) c = s;
		var n = formatNumber(c,0,",","","","","","");
		document.getElementById('number').innerHTML = n;
	}
};

//formats a given number to reflect a thousands place comma
function formatNumber(num,dec,thou,pnt,curr1,curr2,n1,n2) {var x = Math.round(num * Math.pow(10,dec));if (x >= 0) n1=n2='';var y = (''+Math.abs(x)).split('');var z = y.length - dec; if (z<0) z--; for(var i = z; i < 0; i++) y.unshift('0'); if (z<0) z = 1; y.splice(z, 0, pnt); if(y[0] == pnt) y.unshift('0'); while (z > 3) {z-=3; y.splice(z,0,thou);}var r = curr1+n1+y.join('')+n2+curr2;return r;}

function touchHandler(e) {
  if (e.type == "touchstart") {

  } else if (e.type == "touchmove") {
  	//
  } else if (e.type == "touchend" || e.type == "touchcancel") {
  	count.add();
  }
}


document.getElementById('counter').addEventListener("touchstart", touchHandler, false);
document.getElementById('counter').addEventListener("touchend", touchHandler, false);

</script>
<style>
#counter {
	text-align: center;
}

#footer {
	font-size: .75em;
	position: absolute;
	bottom: 0px;
}

h1 {
	font-family: "Georgia", Georgia, serif;
	font-size: 10em;
}

</style>
</head>
<body>
<div id="counter">
	<h1 id="number">0</h1>
</div>

<div id="footer">
	<p id="lock">lock</p>
</div>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Counter</title>
	<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>

	<script>

	// This is your app's init method. Here's an example of how to use it
	function init() {
	document.addEventListener("deviceready", onDR, false);
	}
	function onDR(){
	document.addEventListener("backbutton", backKeyDown, true);
	}

	function backKeyDown() {
	// do something here if you wish
	count.subtract();
	}

	// Count var that holds the current count
	var c = 0;

	var locked = false;

	// Count Class to add and subtract from the count
	var count = {

	//the add function adds a person to the numPeople variable, and then displays it on the page
	add : function(){
	if (!locked) c++;
	var n = formatNumber(c,0,",","","","","","");
	document.getElementById('number').innerHTML = n;
	},

	//the subtract function subtracts a person from the numPeople variable and then displays the result on the page
	subtract : function(){
	if (!locked) c--;
	if (c < 0) c = 0;
	var n = formatNumber(c,0,",","","","","","");
	document.getElementById('number').innerHTML = n;
	},

	set : function(s){
	if (!locked) c = s;
	var n = formatNumber(c,0,",","","","","","");
	document.getElementById('number').innerHTML = n;
	}
	};

	//formats a given number to reflect a thousands place comma
	function formatNumber(num,dec,thou,pnt,curr1,curr2,n1,n2) {var x = Math.round(num * Math.pow(10,dec));if (x >= 0) n1=n2='';var y = (''+Math.abs(x)).split('');var z = y.length - dec; if (z<0) z--; for(var i = z; i < 0; i++) y.unshift('0'); if (z<0) z = 1; y.splice(z, 0, pnt); if(y[0] == pnt) y.unshift('0'); while (z > 3) {z-=3; y.splice(z,0,thou);}var r = curr1+n1+y.join('')+n2+curr2;return r;}

	function touchHandler(e) {
	if (e.type == "touchstart") {

	} else if (e.type == "touchmove") {
	//
	} else if (e.type == "touchend" \|\| e.type == "touchcancel") {
	count.add();
	}
	}


	document.getElementById('counter').addEventListener("touchstart", touchHandler, false);
	document.getElementById('counter').addEventListener("touchend", touchHandler, false);

	</script>
	<style>
	#counter {
	text-align: center;
	}

	#footer {
	font-size: .75em;
	position: absolute;
	bottom: 0px;
	}

	h1 {
	font-family: "Georgia", Georgia, serif;
	font-size: 10em;
	}

	</style>
	</head>
	<body>
	<div id="counter">
	<h1 id="number">0</h1>
	</div>

	<div id="footer">
	<p id="lock">lock</p>
	</div>

	</body>
	</html>