Auto update public list when new wines are added

identity.json

@@ -1,3 +1,3 @@
 {
-	"uuid": "cdcd8436ad9611e1921e12313d1adcbe"
+	"uuid": "4e85e53e8c2011e1931112313d1adcbe"
 }

views.js

@@ -123,6 +123,9 @@ wine.views.Rate = Backbone.View.extend({
 			$('#rate_container .ratephoto').unbind(clickEvent, this.rate);
 			$('#rate_container .ratephoto').removeClass('listenactive');
 			$('#rate_container .ratephoto').html(Mustache.render($('#tmpl-stars').text(), { src: src }));
+			$('fieldset img', $('#rate_container')).get(0).onload = function() {
+				$('fieldset div', $('#rate_container')).show();
+			}
 			$('#rate_container .ratephoto img').bind(clickEvent, function(ev) {
 				forge.logging.log('... Set rating');
 				var rating = parseInt($(ev.target).parent().attr('class').split('_')[1])
@@ -155,14 +158,12 @@ wine.views.List = Backbone.View.extend({
 		this.display($('.ratephoto', el).first());
 		state.get('map').add(photo);
 	},
-	removeByIndex: function(idx) {
-		var el = this.el;
-		$('.step', el).eq(idx).remove();
-	},
-	removeByTimestamp: function(timestamp) {
-		var el = this.el;
+	remove: function(timestamp) {
 		$('#_'+timestamp, el).remove();
 	},
+	addImage: function(photo_obj) {
+		$('#_'+photo_obj.timestamp+' .image_wrapper img').attr('src', photo_obj.dataurl).show();
+	},
 	exists: function(timestamp) {
 		var el = this.el;
 		return ($('#_'+timestamp, el).length? true: false);

wine.js

@@ -102,30 +102,53 @@ var wine = {
 			});
 			localStorage.clear();
 		} else {
-			forge.logging.log('Read from  Firebase');
-			var firebase = forge.is.web()? wine.publicFirebase: wine.userFirebase;
-			firebase.once('value', function(snapshot) {
-				forge.logging.log('firebase.once triggered');
-				$('#loading').remove();
-				snapshot.forEach(function(photo) {
-					forge.logging.log('Adding photo');
-					var photo_model = new wine.models.Photo(photo.val());
-					if (photo_model.get('user') === wine.user && photo_model.has('dataurl')) {
-						wine.setDataUrl(photo_model.get('url'), photo_model.get('timestamp'));
-					}
-					wine.photos.add(photo_model);
-					state.get('list').add(photo_model);
-					forge.logging.log('Added photo from Firebase');
+			if (forge.is.web()) {
+				wine.publicFirebase.on('child_added', function(photo) {
+					forge.logging.log('firebase on child_added triggered');
+					$('#loading').remove();
+					wine.addPhotoFromFirebase(photo);
 				});
-			});
+				wine.publicFirebase.on('child_removed', function(photo) {
+					forge.logging.log('firebase on child_removed triggered');
+					forge.logging.log('removing from list with timestamp: '+photo.val().timestamp);
+					state.get('list').remove(photo.val().timestamp);
+				});
+				wine.publicFirebase.on('child_changed', function(photo) {
+					forge.logging.log('firebase on child_changed triggered');
+					forge.logging.log('updating image with timestamp: '+photo.val().timestamp);
+					forge.logging.log('using dataurl: '+photo.val().dataurl);
+					wine.photos.where({timestamp: photo.val().timestamp})[0].set("dataurl", photo.val().dataurl);
+					state.get('list').addImage(photo.val());
+				});
+			} else {
+				forge.logging.log('Read from  Firebase');
+				wine.userFirebase.once('value', function(snapshot) {
+					forge.logging.log('firebase.once triggered');
+					$('#loading').remove();
+					snapshot.forEach(function(photo) {
+						var photo_model = wine.addPhotoFromFirebase(photo);
+						if (photo_model.get('user') === wine.user && !photo_model.has('dataurl')) {
+							wine.setDataUrl(photo_model.get('url'), photo_model.get('timestamp'));
+						}
+					});
+				});
+			}
 		}
 		//Add event handlers
 		wine.photos.on("remove", function(photo) {
-			state.get('list').removeByIndex(state.get('idx'));
+			state.get('list').remove(photo.get('timestamp'));
 			wine.publicFirebase.child(photo.get('timestamp')).remove();
 			wine.userFirebase.child(photo.get('timestamp')).remove();	
 		});
 	},
+	addPhotoFromFirebase: function(photo) {
+		forge.logging.log('Adding photo');
+		var photo_model = new wine.models.Photo(photo.val());
+		wine.photos.add(photo_model);
+		state.get('list').add(photo_model);
+		forge.logging.log('Added photo from Firebase');
+		return photo_model;
+	},
 	setDataUrl: function(src, timestamp) {
 		// create image
 		var image = document.createElement('img');