From 39a1e61d2f546c6bc64b7b4515ecd9eca07c1634 Mon Sep 17 00:00:00 2001
From: Amir Nathoo <amirnathoo@Amirs-MacBook-Air.local>
Date: Mon, 30 Apr 2012 16:46:04 -0700
Subject: [PATCH] Added map view

---
 img/map.png | Bin 0 -> 715 bytes
 style.css   |   6 +++
 wine.js     | 134 ++++++++++++++++++++++++++++++++++++++--------------
 3 files changed, 104 insertions(+), 36 deletions(-)
 create mode 100644 img/map.png

diff --git a/img/map.png b/img/map.png
new file mode 100644
index 0000000000000000000000000000000000000000..a494336c63b9ffbf18938e9bc86d3efb5744028a
GIT binary patch
literal 715
zcmeAS@N?(olHy`uVBq!ia0vp^4Is?H3?#oinD`S&NtU=qlmzFem6RtIr7}3C<R_&n
zc;+Uirv{}arc@T5Otk?jG7j(wab;m=7ZDdfaPXkBtLyvs?-wpw^x(mRqLLD2H8o>1
zv&QD;4I4KGhlWm^H0i>H3rQ&{|Ns9_{rYJUP`hABkY6y6ivk!_*Un60U|<sTba4!+
zxb^1d?Y<TT9)^HZp#kpy|7VwPx+%R#Y3<aUOZ)n57qfbYW<L*L5@=vxQD9)?a9}`U
z{+J(SyWFI8iran02hUg3B}W`fXS}r{m*<^jgZ|}up=0d~o2|M|+A(aHY{gfxkvS(M
zopF|Az{&r7XSofw{yFQvkXInYmhCkAg;!oIb_WVLFNCq_HiSGgIyOb?Fl&SFqV?hp
z{ti1>c^Rgscm66Uo>jq6IW5C~Tl#s%4eCF)bC*10=!xt~+TD2~eL=zO3q|jk`5IPU
zsoW-`%bc*{&*6sXj_ZtD*QUMWy|9<@o#%mo>fi!~1)Hu)<~dALn7Y@hNZ&2bB|zs(
zYprt8^4$JoWh~bjf7*uq^nAnmM}KkY<%$1wnR)s5^lj(uG`hd^ow$?#HHHlVB@Yh1
zG@P2wdYt)2w%2!mwiw^cO73sTPndFMEjsLM_4s1Wt_kuI{b}NS$F1)^+I#$SmgJVc
zt|)eq^$+j;=@2}7Gq~ZKW$5n-r{wrKm6DP=B`?4Hdz``eQPc^?rP`bm-u#kzP%Azy
z$JQl%qPP;z>c*fy<qS-#Sa%CP*jT)BH$(lel>6)t0)kgcGuo%VsA6Q=$<oQ-ujlwG
z+}K&yQR_gU_k=%p1v*qc*jSP{Co#^8X!_#6-EHqLrkI%DOxHG=Cx~K;NTwg}8~7R7
Z7%qKYE}$&iWClz*44$rjF6*2UngB7LEy4f*

literal 0
HcmV?d00001

diff --git a/style.css b/style.css
index 8c766f2..ae82778 100644
--- a/style.css
+++ b/style.css
@@ -163,4 +163,10 @@ img.detail_icon {
 img.detail {
 	margin: 3px 0 0 0;
 	width: 100%;
+}
+
+/* map view */
+#map {
+	width: 100%;
+	height: 100%;
 }
\ No newline at end of file
diff --git a/wine.js b/wine.js
index 282cdcf..1fe2ccf 100644
--- a/wine.js
+++ b/wine.js
@@ -4,7 +4,8 @@ forge.debug = true;
 var state = {
 	currentPhoto: null,
 	rateButton: null,
-	listButton: null
+	listButton: null,
+	currentCoords: null
 }
 
 // Organisation object
@@ -15,10 +16,6 @@ var wine = {
 	collections: {}
 };
 
-//Style top bar and tab bar
-forge.topbar.setTint([88,22,43,255]);
-forge.tabbar.setActiveTint([88,22,43,255]);
-
 //Fake support of :active on Android
 var fake_active = function(el) {
 	if (forge.is.android() && $(el).hasClass('listenactive')) {
@@ -30,6 +27,30 @@ var fake_active = function(el) {
 	}
 }
 
+// Setup "sensible" click/touch handling
+var clickEvent = 'ontouchend' in document.documentElement ? 'tap' : 'click';
+
+if (clickEvent == 'tap') {
+	var currentTap = true;
+	$('*').live('touchstart', function (e) {
+		currentTap = true;
+		e.stopPropagation();
+	});
+	$('*').live('touchmove', function (e) {
+		currentTap = false;
+	});
+	$('*').live('touchend', function (e) {
+		if (currentTap) {
+			$(e.currentTarget).trigger('tap');
+		}
+		e.stopPropagation();
+	});
+}
+
+//Style top bar and tab bar
+forge.topbar.setTint([88,22,43,255]);
+forge.tabbar.setActiveTint([88,22,43,255]);
+
 var starterButton = forge.tabbar.addButton({
 	text: "Rate Wine",
 	icon: "img/star.png",
@@ -41,13 +62,7 @@ var starterButton = forge.tabbar.addButton({
 	});
 	
 	// Initialise app
-	forge.logging.log('Initializing...')
-	state.list = new wine.views.List();
-	state.list.render();
-	forge.logging.log('Pre-rendered wine list');
-	wine.router.rateTab();
-	Backbone.history.start();
-	forge.logging.log('... completed initialization');
+	wine.util.initialize();
 });
 
 var mainButton = forge.tabbar.addButton({
@@ -61,25 +76,16 @@ var mainButton = forge.tabbar.addButton({
 	});
 });
 
-// Setup "sensible" click/touch handling
-var clickEvent = 'ontouchend' in document.documentElement ? 'tap' : 'click';
-
-if (clickEvent == 'tap') {
-	var currentTap = true;
-	$('*').live('touchstart', function (e) {
-		currentTap = true;
-		e.stopPropagation();
-	});
-	$('*').live('touchmove', function (e) {
-		currentTap = false;
-	});
-	$('*').live('touchend', function (e) {
-		if (currentTap) {
-			$(e.currentTarget).trigger('tap');
-		}
-		e.stopPropagation();
+var mapButton = forge.tabbar.addButton({
+	text: "Wine Map",
+	icon: "img/map.png",
+	index: 2
+}, function (button) {
+	state.mapButton = button;
+	button.onPressed.addListener(function () {
+		wine.router.mapTab();
 	});
-}
+});
 
 // Router
 wine.types.Router = Backbone.Router.extend({
@@ -104,6 +110,12 @@ wine.types.Router = Backbone.Router.extend({
 		forge.topbar.removeButtons();
 		state.list.show();
 	},
+	mapTab: function() {
+		state.mapButton.setActive();
+		forge.topbar.setTitle("Wine Map");
+		forge.topbar.removeButtons();
+		state.map.show();
+	},
 	picture: function () {
 		forge.topbar.removeButtons();
 		state.currentPhoto = null;
@@ -126,6 +138,18 @@ wine.router = new wine.types.Router();
 
 // Functions
 wine.util = {
+	initialize: function() {
+		forge.logging.log('Initializing...')
+		state.list = new wine.views.List();
+		state.list.render();
+		forge.logging.log('Pre-rendered wine list');
+		state.map = new wine.views.Map();
+		state.map.render();
+		forge.logging.log('Pre-rendered map');
+		wine.router.rateTab();
+		Backbone.history.start();
+		forge.logging.log('... completed initialization');
+	},
 	disclosure_indicator: function(el) {
 		forge.tools.getURL('img/disclosure_indicator.png', function(src) {
 			$('img.icon', el).attr('src', src);
@@ -211,8 +235,8 @@ wine.views.Picture = Backbone.View.extend({
 		return this;
 	},
 	show: function () {
+		$('.container').hide();
 		$('#rate_container').show();
-		$('#list_container').hide();
 		$('#picture').remove();
 		$('#rate').remove();
 		$('#detail').remove();
@@ -224,11 +248,14 @@ wine.views.Picture = Backbone.View.extend({
 		forge.file.getImage({width: 500, height: 500}, function (file) {
 			forge.file.imageURL(file, function (url) {
 				forge.geolocation.getCurrentPosition(function(position) {
+					state.currentCoords = position.coords;
+					forge.logging.log('Set current position:');
+					forge.logging.log(state.currentCoords);
 					var timestamp = new Date().getTime()
 					state.currentPhoto = new wine.models.Photo({
 						url: url,
 						timestamp: timestamp,
-						position: position.coords
+						position: state.currentCoords
 					});
 					wine.router.rate();
 				});
@@ -261,8 +288,8 @@ wine.views.Rate = Backbone.View.extend({
 		return this;
 	},
 	show: function () {
+		$('.container').hide();
 		$('#rate_container').show();
-		$('#list_container').hide();
 		$('#picture').remove();
 		$('#rate').remove();
 		$('#detail').remove();
@@ -340,7 +367,7 @@ wine.views.List = Backbone.View.extend({
 		});
 	},
 	show: function () {
-		$('#rate_container').hide();
+		/*$('.container').hide();
 		$('#list_container').show();
 		$('#list').show();
 		$('#detail').remove();
@@ -355,7 +382,7 @@ wine.views.List = Backbone.View.extend({
 				forge.logging.log('... Getting location');
 				wine.util.getLocation(item.get('position'), item.get('timestamp'));
 			}
-		});
+		});*/
 	}
 });
 
@@ -394,4 +421,39 @@ wine.views.Detail = Backbone.View.extend({
 	}
 });
 
-
+wine.views.Map = Backbone.View.extend({
+	tagName: "div",
+	id: "map",
+	gmap: null,
+	render: function(idx) {
+		var el = this.el;
+		var script = document.createElement("script");
+		script.type = "text/javascript";
+		script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAlFSCee70OJOiD7k-fz8e6ywXVVIkWErU&sensor=true&callback=state.map.initMap";
+		document.body.appendChild(script);
+		$('#map_container').empty().append(el);
+		return this;
+	},
+	initMap: function() {
+		forge.logging.log('... Initializing map');
+		forge.geolocation.getCurrentPosition(function(position) {
+			state.currentCoords = position.coords;
+			forge.logging.log('Set current position:');
+			forge.logging.log(state.currentCoords);
+			var myOptions = {
+				zoom: 8,
+				center: new google.maps.LatLng(state.currentCoords.latitude, state.currentCoords.longitude, true),
+				mapTypeId: google.maps.MapTypeId.ROADMAP
+			}
+			state.map.gmap = new google.maps.Map(document.getElementById("map"), myOptions);
+			forge.logging.log('Created map ...');
+		});
+	},
+	show: function () {
+		$('.container').hide();
+		$('#map_container').show();
+		$('#detail').remove();
+		google.maps.event.trigger(state.map.gmap, 'resize');
+		state.map.gmap.setCenter(new google.maps.LatLng(state.currentCoords.latitude, state.currentCoords.longitude, true));
+	}
+});