BunHouth/gist:4ba88f57732b4bccef76

## gistfile1.html
<!doctype html>
<html>
<head>
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.0.23.min.js"></script>
	<script>
	var SightingObject;
	var db;

	function errorCB(e) {
		//We should do something here - the database isn't technically required per se, but it should
		//work.
		console.log("DB Error");
		console.dir(e);
	}

	function online() {
		//return false;
		return navigator.onLine;
	}

	$(document).ready(function() {

		//initialize db
		db = window.openDatabase("sightingdb", "1.0", "Sighting Database", 200000);
		db.transaction(createDB, errorCB, initApp);

		function createDB(trans) {
			trans.executeSql("create table if not exists sighting(id INTEGER PRIMARY KEY,numufos,yourname,description)");
		}

	});

	/*
	I'm run after the db is setup.
	*/
	function initApp() {

		if(online()) {
			Parse.initialize("8Y0x2rCA0jKYdiC7wLKQuF9nQqKGFKdpqUHMfue3", "8m7ng0w9UirTV6k4ExsJ0WsmPGeZMsJd5hcu54Oq");
			SightingObject = Parse.Object.extend("SightingObject");

			//do we have existing objects in the db we can upload?
			db.transaction(function(trans) {
				trans.executeSql("select * from sighting", [], function(trans,result) {
					//do we have rows?
					if(result.rows.length > 0) {
						console.log("Ok, we need to push stuff up");
						for(var i=0, len=result.rows.length; i<len; i++) {
							var row = result.rows.item(i);

							(function(row) {
								//Parse will try to save everything, including ID, so make a quick new ob
								var report = {};
									report.numufos = row.numufos;
									report.yourname = row.yourname;
									report.description = row.description;

								saveToParse(report, function() {
									console.log("i need to delete row "+row.id);
									db.transaction(function(trans) {
										trans.executeSql("delete from sighting where id = ?", [row.id]);
									}, errorCB);
								});
							}(row));

						}
					}
				},errorCB);
			}, errorCB, function() {
				console.log("Done uploading the old rows");
			});
		}

		$("#sightForm").on("submit", function(e) {
			e.preventDefault();
			/*
			gather the values - normally we'd do a bit of validation, but since UFO chasers
			are known for their rigorous and rational pursuit of science, this will not be necessary
			*/
			var report = {};
				report.numufos = $("#numufos").val();
				report.yourname = $("#yourname").val();
				report.description = $("#description").val();

			console.log("To report: ",report);
			//ok, disable the form while submitting and show a loading gfx
			$(this).attr("disabled","disabled");
			$("#loadingGraphic").show();

			if(online()) {
				console.log("I'm online, send to parse");
				saveToParse(report,resetForm);
			} else {
				console.log("I'm offline, save to WebSQL");
				db.transaction(function(trans) {
					trans.executeSql("insert into sighting(numufos,yourname,description) values(?,?,?)", [report.numufos, report.yourname, report.description]);
				}, errorCB, resetForm);
			}
		});

	};

	function saveToParse(ob,successCB) {
		var sightingObject = new SightingObject();
		sightingObject.save(ob, {
			success: function(object) {
				console.log("Saved to parse.");
				console.dir(object);
				successCB(object);
			},
			error: function(model, error) {
				console.log("Error!");
				console.dir(error);
			}
		});
	}

	//handles removing the disabled form stuff and loading gfx
	function resetForm() {
		$("#numufos").val("");
		$("#yourname").val("");
		$("#description").val("");
		$("#sightForm").removeAttr("disabled","disabled");
		$("#loadingGraphic").hide();
		var status = $("#status");
		if(online()) {
			status.fadeIn().html("Your sighting has been saved!").fadeOut(4000);
		} else {
			status.fadeIn().html("Your sighting has been saved locally and will be uploaded next time you are online!").fadeOut(4000);
		}
	}

	</script>
	<style>
	body {
		margin-left: 25px;
		margin-right: 25px;
		font-family: arial;
	}
	input {
		width: 100%;
		height: 25px;
	}
	textarea {
		width: 100%;
	}

	#loadingGraphic {
		position:absolute;
		left: 50%;
		top: 50%;
		display:none;
	}

	#status {
		padding: 10px;
	}
	</style>
</head>

<body>

<h2>Sighting Reporter</h2>

<form id="sightForm">
Number of UFOs: <input type="number" id="numufos"><br/>
Your Name: <input type="text" id="yourname"><br/>
Description: <textarea id="description"></textarea><br/>
<input type="submit" value="Send Sighting">
</form>

<div id="status"></div>

<img src="ajax-loader.gif" style="" id="loadingGraphic">
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.0.23.min.js"></script>
	<script>
	var SightingObject;
	var db;

	function errorCB(e) {
	//We should do something here - the database isn't technically required per se, but it should
	//work.
	console.log("DB Error");
	console.dir(e);
	}

	function online() {
	//return false;
	return navigator.onLine;
	}

	$(document).ready(function() {

	//initialize db
	db = window.openDatabase("sightingdb", "1.0", "Sighting Database", 200000);
	db.transaction(createDB, errorCB, initApp);

	function createDB(trans) {
	trans.executeSql("create table if not exists sighting(id INTEGER PRIMARY KEY,numufos,yourname,description)");
	}

	});

	/*
	I'm run after the db is setup.
	*/
	function initApp() {

	if(online()) {
	Parse.initialize("8Y0x2rCA0jKYdiC7wLKQuF9nQqKGFKdpqUHMfue3", "8m7ng0w9UirTV6k4ExsJ0WsmPGeZMsJd5hcu54Oq");
	SightingObject = Parse.Object.extend("SightingObject");

	//do we have existing objects in the db we can upload?
	db.transaction(function(trans) {
	trans.executeSql("select * from sighting", [], function(trans,result) {
	//do we have rows?
	if(result.rows.length > 0) {
	console.log("Ok, we need to push stuff up");
	for(var i=0, len=result.rows.length; i<len; i++) {
	var row = result.rows.item(i);

	(function(row) {
	//Parse will try to save everything, including ID, so make a quick new ob
	var report = {};
	report.numufos = row.numufos;
	report.yourname = row.yourname;
	report.description = row.description;

	saveToParse(report, function() {
	console.log("i need to delete row "+row.id);
	db.transaction(function(trans) {
	trans.executeSql("delete from sighting where id = ?", [row.id]);
	}, errorCB);
	});
	}(row));

	}
	}
	},errorCB);
	}, errorCB, function() {
	console.log("Done uploading the old rows");
	});
	}

	$("#sightForm").on("submit", function(e) {
	e.preventDefault();
	/*
	gather the values - normally we'd do a bit of validation, but since UFO chasers
	are known for their rigorous and rational pursuit of science, this will not be necessary
	*/
	var report = {};
	report.numufos = $("#numufos").val();
	report.yourname = $("#yourname").val();
	report.description = $("#description").val();

	console.log("To report: ",report);
	//ok, disable the form while submitting and show a loading gfx
	$(this).attr("disabled","disabled");
	$("#loadingGraphic").show();

	if(online()) {
	console.log("I'm online, send to parse");
	saveToParse(report,resetForm);
	} else {
	console.log("I'm offline, save to WebSQL");
	db.transaction(function(trans) {
	trans.executeSql("insert into sighting(numufos,yourname,description) values(?,?,?)", [report.numufos, report.yourname, report.description]);
	}, errorCB, resetForm);
	}
	});

	};

	function saveToParse(ob,successCB) {
	var sightingObject = new SightingObject();
	sightingObject.save(ob, {
	success: function(object) {
	console.log("Saved to parse.");
	console.dir(object);
	successCB(object);
	},
	error: function(model, error) {
	console.log("Error!");
	console.dir(error);
	}
	});
	}

	//handles removing the disabled form stuff and loading gfx
	function resetForm() {
	$("#numufos").val("");
	$("#yourname").val("");
	$("#description").val("");
	$("#sightForm").removeAttr("disabled","disabled");
	$("#loadingGraphic").hide();
	var status = $("#status");
	if(online()) {
	status.fadeIn().html("Your sighting has been saved!").fadeOut(4000);
	} else {
	status.fadeIn().html("Your sighting has been saved locally and will be uploaded next time you are online!").fadeOut(4000);
	}
	}

	</script>
	<style>
	body {
	margin-left: 25px;
	margin-right: 25px;
	font-family: arial;
	}
	input {
	width: 100%;
	height: 25px;
	}
	textarea {
	width: 100%;
	}

	#loadingGraphic {
	position:absolute;
	left: 50%;
	top: 50%;
	display:none;
	}

	#status {
	padding: 10px;
	}
	</style>
	</head>

	<body>

	<h2>Sighting Reporter</h2>

	<form id="sightForm">
	Number of UFOs: <input type="number" id="numufos"><br/>
	Your Name: <input type="text" id="yourname"><br/>
	Description: <textarea id="description"></textarea><br/>
	<input type="submit" value="Send Sighting">
	</form>

	<div id="status"></div>

	<img src="ajax-loader.gif" style="" id="loadingGraphic">
	</body>
	</html>