App = {
	load: function() {
		jo.load();
		
		// grab the HTML for our about box
		var about = joDOM.get("about").innerHTML;
		var news = joDOM.get("news").innerHTML;
		var travel = joDOM.get("travel").innerHTML;
		var ref = joDOM.get("ref").innerHTML;
		var sports = joDOM.get("sports").innerHTML;
		var arts = joDOM.get("arts").innerHTML;
		var job = joDOM.get("job").innerHTML;
	
		document.body.addEventListener('touchmove', function(e) {
		    e.preventDefault();
			joEvent.stop(e);
		}, false);
		
		// this is a more complex UI with a nav bar and a toolbar
		this.scn = new joScreen(
			new joContainer([
				new joFlexcol([
					this.nav = new joNavbar(),
					this.stack = new joStackScroller()
				]),
				this.toolbar = new joToolbar("Kiwibeak App Bringing Together the Best of a Functional Mobile Web")
			]).setStyle({position: "absolute", top: "0", left: "0", bottom: "0", right: "0"})
		);
		
		this.nav.setStack(this.stack);
		
		joCache.set("about", function() {
			var card = new joCard(about).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("news", function() {
			var card = new joCard(news).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("travel", function() {
			var card = new joCard(travel).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("ref", function() {
			var card = new joCard(ref).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("sports", function() {
			var card = new joCard(sports).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("arts", function() {
			var card = new joCard(arts).setTitle("&nbsp;");
			
			return card;
		});
		joCache.set("job", function() {
			var card = new joCard(job).setTitle("&nbsp;");
			
			return card;
		});													
		this.stack.push(joCache.get("menu"));
		
		joGesture.backEvent.subscribe(this.stack.pop, this.stack);
	}
};

