From 34fc99271154ed1fd50b248778c82df80acce765 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Fri, 8 Nov 2013 11:56:17 +0100
Subject: [PATCH 01/20] removed some debug ouput

---
 app-base/application.js                       | 3 ---
 app-base/views/cell-types/cell-iframe-view.js | 5 ++---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/app-base/application.js b/app-base/application.js
index ed29111..f8700f6 100644
--- a/app-base/application.js
+++ b/app-base/application.js
@@ -46,9 +46,6 @@ var loadUserSets = function loadUserSets ( user_id, next ) {
 		error: function loadUserSetsError (jqXHR, textStatus, errorThrown) {
 			//next.apply(null,arguments);
 			showError('Error loading sets' + (textStatus ? ': ' + textStatus + ' (' + jqXHR.status + ')' : '') );
-		},
-		complete: function() {
-			console.log(arguments);
 		}
 	});
 }
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index cf218fa..990a63b 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -103,7 +103,7 @@ module.exports = CellDefaultView.extend({
 
 	activate : function () {
 		if ( !this.active ) {
-			console.log("activate iframe: " + this.cid);
+			// console.log("activate iframe: " + this.cid);
 
 			this.active = true; // needs to be before render(). why? don't know...
 
@@ -129,8 +129,7 @@ module.exports = CellDefaultView.extend({
 	deactivate : function () {
 		if ( this.active ) {
 			if (!this.model.isSticky()) {
-				console.log("deactivate iframe: " + this.cid);
-				console.log(this);
+				// console.log("deactivate iframe: " + this.cid);
 				//this.$el.empty();
 				// remove content and show info again
 				$('.content', this.$el).remove();

From ac73a37346d955dd3ff9099eecb8850731cdb169 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Fri, 8 Nov 2013 11:57:52 +0100
Subject: [PATCH 02/20] added 10 second timeout for loading set data

---
 app-base/application.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app-base/application.js b/app-base/application.js
index f8700f6..d2f0247 100644
--- a/app-base/application.js
+++ b/app-base/application.js
@@ -46,7 +46,8 @@ var loadUserSets = function loadUserSets ( user_id, next ) {
 		error: function loadUserSetsError (jqXHR, textStatus, errorThrown) {
 			//next.apply(null,arguments);
 			showError('Error loading sets' + (textStatus ? ': ' + textStatus + ' (' + jqXHR.status + ')' : '') );
-		}
+		},
+		timeout: 10000
 	});
 }
 

From b58639274697b9008ebd5a421b062f249590e0b5 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Mon, 11 Nov 2013 17:00:29 +0100
Subject: [PATCH 03/20] handle empty iframe-src

---
 app-base/views/cell-types/cell-iframe-view.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index 990a63b..c0d4611 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -1,3 +1,4 @@
+/* cell-iframe-view.js */
 var CellDefaultView = require('views/cell-view'),
 	config 			= require('config/config'),
 	pm 				= require('postmessenger'),
@@ -71,11 +72,13 @@ module.exports = CellDefaultView.extend({
 		if ( Handlebars.compile && data['iframe-src'] ) {
 			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
 		}
-		var spl = data['iframe-src'].split('?');
-		data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
-		// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
-		// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
-		// }
+		if ( data['iframe-src'] ) {
+			var spl = data['iframe-src'].split('?');
+			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
+			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
+			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
+			// }
+		}
 		
 		// collect attributes for <iframe>
 		data.attr = {};

From c15bfbb14ae8e139023ea01b1bc457c088065849 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Tue, 12 Nov 2013 00:22:24 +0100
Subject: [PATCH 04/20] implemented default view attributes (autoload, sticky,
 solo)

---
 app-base/models/cell-model.js                 | 15 ++++++++++-----
 app-base/views/cell-types/cell-iframe-view.js |  8 ++++++++
 app-base/views/cell-types/cell-vimeo-view.js  |  8 ++++++++
 app-base/views/cell-view.js                   | 15 ++++++++++++++-
 4 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/app-base/models/cell-model.js b/app-base/models/cell-model.js
index 9eded1b..52bbb57 100644
--- a/app-base/models/cell-model.js
+++ b/app-base/models/cell-model.js
@@ -19,6 +19,7 @@ module.exports = BaseModel.extend({
 
 	modeltype : 'cell',
 
+	// attributes that can't be overwritten in fields
 	lockedAttributes : {
 		type   : null,
 		sets   : null,
@@ -29,13 +30,17 @@ module.exports = BaseModel.extend({
 	},
 
 	// check if this cell has the sticky flag set
-	// TODO: using fields is not necessary. just use this.attributes.sticky with RegEx.test
-	isSticky : function() {
-		return _.any(this.attributes.fields, function(field) {
-			return ( field.name === 'sticky' && (field.value === 'true' || field.value === '1') );
-		});
+	// TODO: just use getFlag('sticky') instead
+	isSticky : function () {
+		return this.getFlag('sticky');
 	},
 
+	// checks if an attribute is present and either 'true' or '1'
+	getFlag : function (flag) {
+		return /true|1/i.test(this.get(flag));
+	},
+
+	// sets attributes and applies overrides set via fields
 	set : function ( opts ) {
 		// override some attributes per set<->cell connection
 		if ( opts && typeof opts === 'object' && 'fields' in opts ) {
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index c0d4611..d15d9e6 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -5,6 +5,14 @@ var CellDefaultView = require('views/cell-view'),
 	hasher			= require('hasher');
 
 module.exports = CellDefaultView.extend({
+	// attributes governing how a cell behaves in the view
+	// cell types have default values. can be overridden via fields
+	// these are the defaults use by most cell types
+	defaultViewAttributes : {
+		autoload : 1, // automatically open a cell on set load or scroll in?
+		sticky : 0, // close a cell on scroll out?
+		solo: 1 // close other cells on open?
+	},
 
 	// events : {
 	// 	'click' : function () {
diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index a7c9d04..d317bb8 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -1,6 +1,14 @@
 var CellIFrameView = require('views/cell-types/cell-iframe-view');
 
 module.exports = CellIFrameView.extend({
+	// attributes governing how a cell behaves in the view
+	// cell types have default values. can be overridden via fields
+	// these are the defaults use by most cell types
+	defaultViewAttributes : {
+		autoload : 0, // automatically open a cell on set load or scroll in?
+		sticky : 0, // close a cell on scroll out?
+		solo: 1 // close other cells on open?
+	},
 
 	initialize : function ( opts ) {
 
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index a19b803..6b58962 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -3,6 +3,14 @@ BaseView = require('views/base/view');
 // see ```views/cell-types``` for per cell type views
 
 module.exports = BaseView.extend({
+	// attributes governing how a cell behaves in the view
+	// cell types have default values. can be overridden via fields
+	// these are the defaults use by most cell types
+	defaultViewAttributes : {
+		autoload : 1, // automatically open a cell on set load or scroll in?
+		sticky : 1, // close a cell on scroll out?
+		solo: 0 // close other cells on open?
+	},
 
 	events: {
 		click: function () {
@@ -21,6 +29,9 @@ module.exports = BaseView.extend({
 		} catch (e) {
 			// ignore, uses default template
 		}
+
+		// fill in missing view attributs with defaults
+		_.defaults(this.model.attributes, this.defaultViewAttributes);
 	},
 
 	autoRender : false,
@@ -38,7 +49,9 @@ module.exports = BaseView.extend({
 	},
 
 	render : function () {
-		
+		console.log("rendering");
+		console.log(this);
+
 		if ( this.active ) {
 			BaseView.prototype.render.apply(this,arguments);
 

From f6f6f6cfa64b881a6d7636ab7ca099dcf9817890 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Tue, 12 Nov 2013 15:28:22 +0100
Subject: [PATCH 05/20] fully establish cell grid on render + clean up

---
 app-base/views/set-view.js | 122 +++++++++++++++++++------------------
 1 file changed, 62 insertions(+), 60 deletions(-)

diff --git a/app-base/views/set-view.js b/app-base/views/set-view.js
index 1f5c8f8..10ef0d8 100644
--- a/app-base/views/set-view.js
+++ b/app-base/views/set-view.js
@@ -1,3 +1,4 @@
+/* set-view.js */	
 var View 	 = require('views/base/view');
 
 module.exports = View.extend({
@@ -7,7 +8,7 @@ module.exports = View.extend({
 
 		this.subscribeEvent('set:scrolled',function(val){
 			this.layoutAttributes.position = val;
-			this.updateVisibleCells();
+			this.updateCellVisibility();
 		});
 
 		this.subscribeEvent('window:resized',function(){
@@ -24,41 +25,42 @@ module.exports = View.extend({
 	template: require('views/templates/set'),
 
 	layoutAttributes : {
-		position : 0.0,
-		visible_x : 0,
-		visible_y : 0,
-		width : -1,
-		height : -1,
-		cell_width : 0,
-		cell_height : 0
+		position : 0.0, // scroll position in set [0,1]
+		visible_x : 0, // #cells that fit in one screen horizontally
+		visible_y : 0, // #cells that fit in one screen vertically
+		width : -1, // set width in px
+		height : -1, // set height in px
+		cell_width : 0, // cell width in px
+		cell_height : 0 // cell height in px
 	},
 
 	render : function () {
-
+		// console.log("rendering set");
 		View.prototype.render.apply(this,arguments);
 
 		this.layoutAttributes.position = 0.0;
 		
 		this.model.collectionView.render();
+
 		// call updateCellGrid() after render finished (for it to have width, height avail)
 		_(function(){
 			this.updateCellGrid();
-			this.updateVisibleCells();
+			this.establishCellGrid();
+			this.updateCellVisibility();
 		}).bind(this).defer();
 
 		return this;
 	},
 
-	updateLayoutSize : function () {
-		this.layoutAttributes.width  = this.$el.width();
-		this.layoutAttributes.height = this.$el.height();
-	},
-
+	// re-calculate layout attributes: set dimensions, grid dimensions (on resize)
 	updateCellGrid : function () {
+		// console.log("updateCellGrid");
 
 		var layAttrs = this.layoutAttributes;
 
-		this.updateLayoutSize();
+		// update layout size
+		layAttrs.width  = this.$el.width();
+		layAttrs.height = this.$el.height();
 		
 		var cell_height = parseInt( Math.floor( layAttrs.height / this.model.get('grid_rows') ) );
 		var cell_width  = (this.model.get('cell_width') / this.model.get('cell_height')) * cell_height;
@@ -78,68 +80,68 @@ module.exports = View.extend({
 		layAttrs.cell_width  = cell_width;
 		layAttrs.cell_height = cell_height;
 
-		//console.log( this.layoutAttributes );
+		console.log( this.layoutAttributes );
+
+		// add media-query style classes to cells
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+		var cellDim = cellView.model.get('extra');
+			cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/ cell-(width|height)-[0-9]+/ig,'') );
+			// console.log('cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50));
+			cellView.$el.addClass( 'cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50) );
+			cellView.$el.addClass( 'cell-height-'+(parseInt((layAttrs.cell_height*cellDim.height)/50)*50) );
+		});
 	},
 
-	updateVisibleCells : function () {
+	// establish css cell positions and dimensions (once)
+	establishCellGrid : function () {
+		// console.log("establishCellGrid");
 
 		var gridWidth = this.model.get('grid_cols');
 		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
 
-		var cw = 100.0/gridWidth;
-		var ch = 100.0/this.layoutAttributes.visible_y;
+		var cw = 100.0/gridWidth;  // cell width (% of set)
+		var ch = 100.0/this.layoutAttributes.visible_y; // cell height (% of set)
 
-		var absCw = (1.0*this.layoutAttributes.width) /this.layoutAttributes.visible_x,
-			absCh = (1.0*this.layoutAttributes.height)/this.layoutAttributes.visible_y;
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+			var cellDim = cellView.model.get('extra');
 
-		// TODO: clean this mess
-		_.each( this.model.collectionView.getItemViews(), 
-				(function(layAttrs){ return function( cellView, cid ) {
+			var left  = cw * cellDim.x;
+			var width = cw * cellDim.width;
 
-			var cellDim = cellView.model.get('extra');
+			cellView.$el.css({
+				left: 	left+'%',
+				top: 	(ch*cellDim.y)+'%',
+				width: 	width+'%',
+				height: (ch*cellDim.height)+'%'
+			});
+		});
+	},
 
-			cellView.$el.removeClass('lastcol').removeClass('lastrow');
+	// send activation / deactivation to cells (on scroll)
+	updateCellVisibility : function () {
+		// console.log("updateVisibleCells");
 
+		var gridWidth = this.model.get('grid_cols');
+		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
+		var layAttrs = this.layoutAttributes;
+
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+			var cellDim = cellView.model.get('extra');
 			// ... not too far left or right
 			if ( !( (cellDim.x + (cellDim.width-1)) < xFrom - 1 ||
 					 cellDim.x > xFrom + layAttrs.visible_x + 1 ) 
 				) {
-				
-				var left  = cw * cellDim.x;
-				var width = cw * cellDim.width;
-
-				// show, set position and size in % to make responsive
-				
-				cellView.activate();
-
-				cellView.$el.css({
-					left: 	left+'%',
-					top: 	(ch*cellDim.y)+'%',
-					width: 	width+'%',
-					height: (ch*cellDim.height)+'%'
-				});
-
-				// add media-query style classes to cells
-				cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/cell-(width|height)-[0-9]+/ig,'') );
-				cellView.$el.addClass( 'cell-width-'+ (parseInt((absCw*cellDim.width) /50)*50) ).
-					   addClass( 'cell-height-'+(parseInt((absCh*cellDim.height)/50)*50) );
-
-				if ( (cellDim.x-xFrom) + cellDim.width >= layAttrs.visible_x ) {
-					cellView.$el.addClass('lastcol');
-				}
-				if ( cellDim.y+cellDim.height >= layAttrs.visible_y ) {
-					cellView.$el.addClass('lastrow');
+				if ( !cellView.isVisible ) { 
+					cellView.activate();
+					cellView.isVisible = true;
 				}
 			} else {
-				cellView.deactivate();
+				if ( cellView.isVisible ) {
+					cellView.deactivate();
+					cellView.isVisible = false;
+				}
 			}
-
-			// if ( showCellInfo ) {
-			// 	cellView.$el.addClass('with-info');
-			// } else {
-			// 	cellView.$el.removeClass('with-info');
-			// }
-		}})(this.layoutAttributes));
+		});
 	}
   
 });
\ No newline at end of file

From 0273207578be882fafcb78229b9c1a3c2520e4d6 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Tue, 12 Nov 2013 18:04:01 +0100
Subject: [PATCH 06/20] iframe/vimeo lifecycle redone. added 'solo' attribute.

---
 app-base/views/cell-collection-view.js        |   2 +
 app-base/views/cell-types/cell-iframe-view.js | 191 ++++++------------
 app-base/views/cell-types/cell-vimeo-view.js  |   1 +
 app-base/views/cell-view.js                   |  77 +++----
 app-base/views/set-view.js                    |   2 -
 .../templates/cell-types/cell-iframe.hbs      |  11 +-
 6 files changed, 104 insertions(+), 180 deletions(-)

diff --git a/app-base/views/cell-collection-view.js b/app-base/views/cell-collection-view.js
index 1c2e59f..1414122 100644
--- a/app-base/views/cell-collection-view.js
+++ b/app-base/views/cell-collection-view.js
@@ -1,3 +1,4 @@
+/* cell-collection-view.js */
 var CellDefaultView = require('views/cell-view'),
 	BaseCollectionView = require('views/base/collection-view'),
 	mediator = require('mediator'),
@@ -21,6 +22,7 @@ module.exports = BaseCollectionView.extend({
 	},
 
 	render : function () {
+		console.log("rendering cell collection");
 		BaseCollectionView.prototype.render.apply(this,arguments);
 		// after rendring is finished attach scroll listener
 		_(function(){
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index d15d9e6..ca46dad 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -9,155 +9,90 @@ module.exports = CellDefaultView.extend({
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 1, // automatically open a cell on set load or scroll in?
+		autoload : 1, // automatically open on scroll in?
 		sticky : 0, // close a cell on scroll out?
-		solo: 1 // close other cells on open?
+		solo: 0 // close other cells on open?
 	},
 
-	// events : {
-	// 	'click' : function () {
-	// 		this.renderContent();
-	// 	}
-	// },
+	events : {
+		'click' : function () {
+			console.log("click"); 
+			if ( !this.isOpen ) {
+				this.open();
+
+				// console.log("solo " + this.model.get('solo'));
+				if ( this.model.getFlag('solo') ) {
+					var soloGroup = this.model.get('solo');
+					// console.log('publish solo ' + soloGroup);
+					this.publishEvent('!solo', { group : soloGroup, origin : this });
+				}
+			}
+		}
+	},
 
-	// keep this in sync with cell-vimeo!
-	render : function () {
+	initialize : function () {
+		CellDefaultView.prototype.initialize.apply(this,arguments);
+		// fill in missing view attributs with defaults
+		_.defaults(this.model.attributes, this.defaultViewAttributes);
+		
+		// listen for solo event. close if in same solo group
+		this.subscribeEvent('!solo', function(args) {
+			// console.log("solo ");
+			// console.log(args);
+			// skip if we sent that event
+			if ( args.origin == this ) { return; }
+			if ( args.group == this.model.get('solo') ) { this.close(); }
+		});
+	},
 
+	render : function () {
 		CellDefaultView.prototype.render.apply(this,arguments);
 
-		if ( this.model.attributes['autoload'] && 
-			/^(1|true)$/i.test(this.model.attributes['autoload']) ) {
-			this.renderContent();
-		}
-
 		return this;
 	},
 
-	renderContent : function () {
-		// load iframe from data-src
-		$('iframe',this.$el).attr('src',$('iframe',this.$el).data('src'));
-
-		// connect to iframe with postmessenger
-		_(function(){
+	// render content
+	open : function () {
+		console.log("open " + this.cellInfo());
 
-			var view = this;
-			var iframe = $('iframe',this.$el);
-			
-			iframe.load(function() {
-				// show content, hide info
-				$('.element-hidden',view.$el).removeClass('element-hidden');
-				$('.info',view.$el).addClass('element-hidden');
-
-				view.$iframe = $(this);
-				// if iframe on another domain add that to the accept list
-				var src = view.model.get('iframe-src');
-				if ( /^http[s]?:\/\/.+/.test(src) ) {
-					var iframe_domain = (function(){
-						var p = src.split('/');
-						return p[0]+'//'+p[2];
-					})();
-					pm.accept(iframe_domain);
-				}
-
-				// connect it
-				pm.send(
-					'connect?',
-					{ listener_id: hasher.generate(20) }, 
-					this.contentWindow, 
-					iframe_domain
-				);
-			});
-			
-		}).bind(this).defer();
+		// load iframe from data-src
+		var $iframe = $('iframe',this.$el);
+		$iframe.attr( 'src', $iframe.data('src') );
+		
+		$('.content',this.$el).removeClass('element-hidden');
+		$('.info',this.$el).addClass('element-hidden');
+		this.$el.css( 'background-image', 'none' );
 
-		this.$el.css({
-			'background-image' : 'none'
-		});
+		this.isOpen = true;
 	},
 
-	getTemplateData : function () {
-		var data = CellDefaultView.prototype.getTemplateData.apply(this,arguments);
-		if ( Handlebars.compile && data['iframe-src'] ) {
-			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
-		}
-		if ( data['iframe-src'] ) {
-			var spl = data['iframe-src'].split('?');
-			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
-			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
-			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
-			// }
-		}
-		
-		// collect attributes for <iframe>
-		data.attr = {};
-		_.each(data.fields, function(element, index, list) {
-			if (element.name.substr(0,5) == 'attr-') {
-				var attrName = element.name.substr(5);
-				data.attr[attrName] = element.value;
-			}
-		});
+	// remove content
+	close : function () {
+		console.log("close " + this.cellInfo());
+
+		var $iframe = $('iframe',this.$el);
+		$iframe.attr( 'src', '');
 		
-		return data;
-	},
-	
-	listen : {
-		// listen to changes of the active property
-		'change:focused model' : function(model, focused, options) {
-			if (focused) {
-				this.activate();
-				this.renderContent();
-			} else {
-				if (!model.isSticky()) this.deactivate();
-			}
-		}
+		$('.content',this.$el).addClass('element-hidden');
+		$('.info',this.$el).removeClass('element-hidden');
+		this.$el.css( 'background-image', 'url('+this.model.getPosterImageURL()+')' );
+
+		this.isOpen = false;
 	},
 
+	// called when scrolled into view 
 	activate : function () {
-		if ( !this.active ) {
-			// console.log("activate iframe: " + this.cid);
-
-			this.active = true; // needs to be before render(). why? don't know...
-
-			if ( !this.model.isSticky() ) {
-				this.render();
-			} else {
-				if (!this.rendered) {
-					this.render();
-					var iframe = $('iframe', this.$el)[0];
-					var that = this;
-					$(iframe).one('load', function(){
-						pm.send(that.active ? 'activate!' : 'deactivate!', {}, this.contentWindow );
-						that.rendered = true;
-					});
-				} else {
-					var iframe = $('iframe', this.$el)[0];
-					pm.send( 'activate!', {}, iframe.contentWindow );
-			}}
-
+		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
+		if ( this.model.getFlag('autoload') ) {
+			this.open();
 		}
 	},
 
+	// called when scrolled out of view
 	deactivate : function () {
-		if ( this.active ) {
-			if (!this.model.isSticky()) {
-				// console.log("deactivate iframe: " + this.cid);
-				//this.$el.empty();
-				// remove content and show info again
-				$('.content', this.$el).remove();
-				$('.info', this.$el).removeClass('element-hidden');
-
-				this.$el.css({
-					'background-image': 'url('+this.model.getPosterImageURL()+')'
-				});
-
-				this.rendered = false;
-			} else {
-				var iframe = $('iframe', this.$el)[0];
-				if (iframe)  {
-					pm.send('deactivate!', {}, iframe.contentWindow );
-				}
-			}
-			this.active = false;
+		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
+		if ( !this.model.getFlag('sticky') ) {
+			this.close();
 		}
-	}
+	},
 });
\ No newline at end of file
diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index d317bb8..21952cd 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -1,3 +1,4 @@
+/* cell-vimeo-view.js */
 var CellIFrameView = require('views/cell-types/cell-iframe-view');
 
 module.exports = CellIFrameView.extend({
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 6b58962..69ad603 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -1,16 +1,9 @@
+/* cell-view.js */
 BaseView = require('views/base/view');
 
 // see ```views/cell-types``` for per cell type views
 
 module.exports = BaseView.extend({
-	// attributes governing how a cell behaves in the view
-	// cell types have default values. can be overridden via fields
-	// these are the defaults use by most cell types
-	defaultViewAttributes : {
-		autoload : 1, // automatically open a cell on set load or scroll in?
-		sticky : 1, // close a cell on scroll out?
-		solo: 0 // close other cells on open?
-	},
 
 	events: {
 		click: function () {
@@ -19,7 +12,6 @@ module.exports = BaseView.extend({
 	},
 
 	initialize : function ( opts ) {
-
 		BaseView.prototype.initialize.apply(this,arguments);
 
 		try {
@@ -29,9 +21,6 @@ module.exports = BaseView.extend({
 		} catch (e) {
 			// ignore, uses default template
 		}
-
-		// fill in missing view attributs with defaults
-		_.defaults(this.model.attributes, this.defaultViewAttributes);
 	},
 
 	autoRender : false,
@@ -40,7 +29,7 @@ module.exports = BaseView.extend({
 	template : require('views/templates/cell'),
 
 	// always on for now, see setActive / setInactive and render
-	active : false,
+	// active : false,
 
 	getTemplateData : function () {
 		var data = _.extend({},this.model.attributes);
@@ -49,43 +38,43 @@ module.exports = BaseView.extend({
 	},
 
 	render : function () {
-		console.log("rendering");
-		console.log(this);
-
-		if ( this.active ) {
-			BaseView.prototype.render.apply(this,arguments);
-
-			this.$el.addClass( 'type-' + this.model.get('type') );
-			this.$el.addClass( this.cid ); // add view id as class (viewXX) to make debugging easier
-
-			// use cell fields that start with "css-" as css attributes on the $el
-			var cssOpts = {
-				'background-image': 'url('+this.model.getPosterImageURL()+')'
-			};
-			attribs = {};
-			_.filter(this.model.attributes.fields,function(f){
-				return /^css-/i.test(f.name);
-			}).map(function(f){
-				attribs[f.name.replace(/^css-/i,'')] = f.value;
-			});
-			cssOpts = _.extend(cssOpts,attribs);
-			this.$el.css(cssOpts);
-		}
+		console.log("rendering " + this.cellInfo());
+		// if ( this.active ) {
+		BaseView.prototype.render.apply(this,arguments);
+
+		// add classes (cell type, cell id)
+		this.$el.addClass( 'type-' + this.model.get('type') );
+		this.$el.addClass( 'cellid-' + this.model.get('connection_id') ); // add view id as class (viewXX) to make debugging easier
+
+		// add css from "css-"-fields
+		var cssOpts = {
+			'background-image': 'url('+this.model.getPosterImageURL()+')'
+		};
+		attribs = {};
+		_.filter(this.model.attributes.fields,function(f){
+			return /^css-/i.test(f.name);
+		}).map(function(f){
+			attribs[f.name.replace(/^css-/i,'')] = f.value;
+		});
+		cssOpts = _.extend(cssOpts,attribs);
+		this.$el.css(cssOpts);
+		// }
 
 		return this;
 	},
+
+	// get a string made up of cell type + id
+	cellInfo : function () {
+		return this.model.get('type') + this.model.get('connection_id');
+	},
 	
+	// called when scrolled into view 
 	activate : function () {
-		if ( !this.active ) {
-			this.active = true;
-			this.render();
-		}
-		// console.log("activate: " + this.cid);
+		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
 	},
 
+	// called when scrolled out of view
 	deactivate : function () {
-		this.active = false;
-		this.$el.empty();
-		// console.log("deactivate: " + this.cid);
-	}
+		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
+	},
 });
\ No newline at end of file
diff --git a/app-base/views/set-view.js b/app-base/views/set-view.js
index 10ef0d8..0c27884 100644
--- a/app-base/views/set-view.js
+++ b/app-base/views/set-view.js
@@ -80,8 +80,6 @@ module.exports = View.extend({
 		layAttrs.cell_width  = cell_width;
 		layAttrs.cell_height = cell_height;
 
-		console.log( this.layoutAttributes );
-
 		// add media-query style classes to cells
 		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
 		var cellDim = cellView.model.get('extra');
diff --git a/app-base/views/templates/cell-types/cell-iframe.hbs b/app-base/views/templates/cell-types/cell-iframe.hbs
index 62f2a39..c8cdba8 100644
--- a/app-base/views/templates/cell-types/cell-iframe.hbs
+++ b/app-base/views/templates/cell-types/cell-iframe.hbs
@@ -1,10 +1,9 @@
+<div class="content element-hidden">
+	<iframe src="" data-src="{{iframe-src}}" 
+			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
+	</iframe>
+</div>
 <div class="info">
 	<h1 class="title">{{{title}}}</h1>
 	<div class="description">{{description}}</div>
-</div>
-<div class="content element-hidden">
-	<iframe src="" 
-			data-src="{{iframe-src}}" 
-			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
-			</iframe>
 </div>
\ No newline at end of file

From b69770cb45bca531ca71df2cbe01ae1cad4ed584 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Tue, 12 Nov 2013 22:01:23 +0100
Subject: [PATCH 07/20] added loading animation for iframe/vimeo cells

---
 app-base/css/34-cell.css                           |  9 +++++++++
 app-base/views/cell-types/cell-iframe-view.js      | 14 ++++++++++++--
 .../views/templates/cell-types/cell-iframe.hbs     |  3 ++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app-base/css/34-cell.css b/app-base/css/34-cell.css
index b0d61ba..88543e8 100644
--- a/app-base/css/34-cell.css
+++ b/app-base/css/34-cell.css
@@ -228,3 +228,12 @@
 .cell-collection .cell.type-text .info {
 	display: none;
 }*/
+.loading { color:white; position:absolute; top:0;left:0;bottom:0;right:0; font-size:200%; text-align:center; vertical-align: middle; line-height:100%;}
+.loading span { display:inline-block; margin-top:30%; }
+.loading span:after { content:'•'; }
+.loading .dot1 { -webkit-animation: fadeOut 0.7s 0.00s infinite alternate; animation: fadeOut 0.7s 0.00s infinite alternate; }
+.loading .dot2 { -webkit-animation: fadeOut 0.7s 0.35s infinite alternate; animation: fadeOut 0.7s 0.35s infinite alternate; }
+.loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
+@-webkit-keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
+@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
+
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index ca46dad..cfbf015 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -47,7 +47,7 @@ module.exports = CellDefaultView.extend({
 
 	render : function () {
 		CellDefaultView.prototype.render.apply(this,arguments);
-
+		
 		return this;
 	},
 
@@ -55,6 +55,9 @@ module.exports = CellDefaultView.extend({
 	open : function () {
 		console.log("open " + this.cellInfo());
 
+		// show loading animation
+		this.showLoadingAnimation();
+
 		// load iframe from data-src
 		var $iframe = $('iframe',this.$el);
 		$iframe.attr( 'src', $iframe.data('src') );
@@ -69,7 +72,7 @@ module.exports = CellDefaultView.extend({
 	// remove content
 	close : function () {
 		console.log("close " + this.cellInfo());
-
+		
 		var $iframe = $('iframe',this.$el);
 		$iframe.attr( 'src', '');
 		
@@ -95,4 +98,11 @@ module.exports = CellDefaultView.extend({
 			this.close();
 		}
 	},
+
+	showLoadingAnimation : function() {
+		$('.loading', this.$el).show(0);
+		$('iframe', this.$el).off('load').on('load', function() {
+			$('.loading', this.$el).hide(0);
+		});
+	}
 });
\ No newline at end of file
diff --git a/app-base/views/templates/cell-types/cell-iframe.hbs b/app-base/views/templates/cell-types/cell-iframe.hbs
index c8cdba8..11c9905 100644
--- a/app-base/views/templates/cell-types/cell-iframe.hbs
+++ b/app-base/views/templates/cell-types/cell-iframe.hbs
@@ -6,4 +6,5 @@
 <div class="info">
 	<h1 class="title">{{{title}}}</h1>
 	<div class="description">{{description}}</div>
-</div>
\ No newline at end of file
+</div>
+<div class="loading" style="display:none;"><span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span></div>
\ No newline at end of file

From aa025d24cca4caf4bb5a80c7fd8b2b3895e20afa Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Tue, 12 Nov 2013 22:09:19 +0100
Subject: [PATCH 08/20] add extra attribute fields to iframe cell

---
 app-base/views/cell-types/cell-iframe-view.js | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index cfbf015..7c39c97 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -45,9 +45,35 @@ module.exports = CellDefaultView.extend({
 		});
 	},
 
+	getTemplateData : function () {
+		var data = CellDefaultView.prototype.getTemplateData.apply(this,arguments);
+		// TODO: check this again
+		if ( Handlebars.compile && data['iframe-src'] ) {
+			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
+		}
+		if ( data['iframe-src'] ) {
+			var spl = data['iframe-src'].split('?');
+			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
+			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
+			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
+			// }
+		}
+		
+		// collect extra attributes for <iframe>
+		data.attr = {};
+		_.each(data.fields, function(element, index, list) {
+			if (element.name.substr(0,5) == 'attr-') {
+				var attrName = element.name.substr(5);
+				data.attr[attrName] = element.value;
+			}
+		});
+		
+		return data;
+	},
+
 	render : function () {
 		CellDefaultView.prototype.render.apply(this,arguments);
-		
+
 		return this;
 	},
 

From 982740021d1f85568beb3717830fd102d7bf2bf9 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Wed, 13 Nov 2013 11:10:32 +0100
Subject: [PATCH 09/20] let the iframe content overlay the loading anim, as
 soon as possible. (don't wait on load event)

---
 app-base/css/34-cell.css                            | 1 +
 app-base/views/templates/cell-types/cell-iframe.hbs | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app-base/css/34-cell.css b/app-base/css/34-cell.css
index 88543e8..1464e7b 100644
--- a/app-base/css/34-cell.css
+++ b/app-base/css/34-cell.css
@@ -236,4 +236,5 @@
 .loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
 @-webkit-keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
 @keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
+.cell .content { position:relative; } /* so .loading doesn't overlay it */
 
diff --git a/app-base/views/templates/cell-types/cell-iframe.hbs b/app-base/views/templates/cell-types/cell-iframe.hbs
index 11c9905..a32e9ba 100644
--- a/app-base/views/templates/cell-types/cell-iframe.hbs
+++ b/app-base/views/templates/cell-types/cell-iframe.hbs
@@ -1,3 +1,4 @@
+<div class="loading" style="display:none;"><span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span></div>
 <div class="content element-hidden">
 	<iframe src="" data-src="{{iframe-src}}" 
 			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
@@ -6,5 +7,4 @@
 <div class="info">
 	<h1 class="title">{{{title}}}</h1>
 	<div class="description">{{description}}</div>
-</div>
-<div class="loading" style="display:none;"><span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span></div>
\ No newline at end of file
+</div>
\ No newline at end of file

From d850c8d2ee1d772d2ca68a3c34ae9b891c0c9db8 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Wed, 13 Nov 2013 17:21:29 +0100
Subject: [PATCH 10/20] added postmessenger communication with iframe

---
 app-base/views/cell-types/cell-iframe-view.js | 87 ++++++++++++++++---
 app-base/views/cell-types/cell-vimeo-view.js  |  4 +-
 app-base/views/cell-view.js                   |  2 +-
 3 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index 7c39c97..66743f3 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -9,14 +9,14 @@ module.exports = CellDefaultView.extend({
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 1, // automatically open on scroll in?
-		sticky : 0, // close a cell on scroll out?
+		autoload : 1, // open on scroll in?
+		sticky : 0, // don't close on scroll out?
 		solo: 0 // close other cells on open?
 	},
 
 	events : {
 		'click' : function () {
-			console.log("click"); 
+			// console.log("click"); 
 			if ( !this.isOpen ) {
 				this.open();
 
@@ -47,16 +47,13 @@ module.exports = CellDefaultView.extend({
 
 	getTemplateData : function () {
 		var data = CellDefaultView.prototype.getTemplateData.apply(this,arguments);
-		// TODO: check this again
+
 		if ( Handlebars.compile && data['iframe-src'] ) {
 			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
 		}
 		if ( data['iframe-src'] ) {
 			var spl = data['iframe-src'].split('?');
 			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
-			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
-			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
-			// }
 		}
 		
 		// collect extra attributes for <iframe>
@@ -73,7 +70,10 @@ module.exports = CellDefaultView.extend({
 
 	render : function () {
 		CellDefaultView.prototype.render.apply(this,arguments);
-
+		
+		// when rendering is finished, meaning the <iframe> exists, connect postmessenger
+		_(this.connectPM).bind(this).defer();
+		
 		return this;
 	},
 
@@ -86,13 +86,13 @@ module.exports = CellDefaultView.extend({
 
 		// load iframe from data-src
 		var $iframe = $('iframe',this.$el);
+		var that = this;
+		$iframe.one('load.open', function() { that.isOpen = true; }); // once loaded, set isOpen flag
 		$iframe.attr( 'src', $iframe.data('src') );
 		
 		$('.content',this.$el).removeClass('element-hidden');
 		$('.info',this.$el).addClass('element-hidden');
 		this.$el.css( 'background-image', 'none' );
-
-		this.isOpen = true;
 	},
 
 	// remove content
@@ -100,6 +100,7 @@ module.exports = CellDefaultView.extend({
 		console.log("close " + this.cellInfo());
 		
 		var $iframe = $('iframe',this.$el);
+		$iframe.off('.open'); // don't set isOpen anymore, if pending
 		$iframe.attr( 'src', '');
 		
 		$('.content',this.$el).addClass('element-hidden');
@@ -112,9 +113,14 @@ module.exports = CellDefaultView.extend({
 	// called when scrolled into view 
 	activate : function () {
 		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
-		if ( this.model.getFlag('autoload') ) {
+		if ( this.model.getFlag('autoload') && !this.isOpen ) {
 			this.open();
 		}
+		
+		if ( this.model.getFlag('sticky') && this.isOpen ) {
+			// console.log("sending activate");
+			this.sendPM('activate!');
+		}
 	},
 
 	// called when scrolled out of view
@@ -123,12 +129,65 @@ module.exports = CellDefaultView.extend({
 		if ( !this.model.getFlag('sticky') ) {
 			this.close();
 		}
+
+		if ( this.model.getFlag('sticky') && this.isOpen ) {
+			// console.log("sending deactivate");
+			this.sendPM('deactivate!');
+		}
 	},
 
-	showLoadingAnimation : function() {
+	showLoadingAnimation : function () {
 		$('.loading', this.$el).show(0);
-		$('iframe', this.$el).off('load').on('load', function() {
-			$('.loading', this.$el).hide(0);
+		var that = this;
+		$('iframe', this.$el).one('load', function() {
+			$('.loading', that.$el).hide(0);
 		});
+	},
+
+	// connect postmessenger to iframe
+	// remains on the iframe and reconnects on load, so only call this once
+	connectPM : function () {
+		// console.log("connectPM " + this.cellInfo());
+		
+		var that = this;
+		$('iframe', this.$el).on('load', function() {
+			// load event is also fired on close, when src is set to "". skip this.
+			if (!this.src) {
+				// console.log("src not valid: " + this.src);
+				return;
+			}
+
+			// if iframe on another domain add that to the accept list
+			var src = that.model.get('iframe-src');
+			if ( /^http[s]?:\/\/.+/.test(src) ) {
+				var iframe_domain = (function(){
+					var p = src.split('/');
+					return p[0]+'//'+p[2];
+				})();
+				pm.accept(iframe_domain);
+			}
+			// connect it
+			pm.send(
+				'connect?',
+				{ listener_id: hasher.generate(20) }, 
+				this.contentWindow,
+				iframe_domain
+			);
+		});
+	},
+	
+	sendPM : function (msg, opts) {
+		var iframe = $('iframe', this.$el)[0];
+		if (opts == undefined) { opts = {}; }
+
+		if (this.isOpen) {
+			// console.log("sending " + msg);
+			pm.send(msg, opts, iframe.contentWindow );
+		} else { // wait till iframe is loaded to send message
+			$(iframe).one('load', function() {
+				// console.log("late sending " + msg);
+				pm.send(msg, opts, this.contentWindow );
+			});
+		}
 	}
 });
\ No newline at end of file
diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index 21952cd..ea1f8f4 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -6,8 +6,8 @@ module.exports = CellIFrameView.extend({
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 0, // automatically open a cell on set load or scroll in?
-		sticky : 0, // close a cell on scroll out?
+		autoload : 0, // open on scroll in?
+		sticky : 0, // don't close on scroll out?
 		solo: 1 // close other cells on open?
 	},
 
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 69ad603..e0b72c8 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -38,7 +38,7 @@ module.exports = BaseView.extend({
 	},
 
 	render : function () {
-		console.log("rendering " + this.cellInfo());
+		//console.log("rendering " + this.cellInfo());
 		// if ( this.active ) {
 		BaseView.prototype.render.apply(this,arguments);
 

From b5dcf521ac9d5e705a248cf6741a445a74c3f280 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 01:03:10 +0100
Subject: [PATCH 11/20] solo should not just be handled on click

---
 app-base/views/cell-types/cell-iframe-view.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index 66743f3..0c6d219 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -19,13 +19,6 @@ module.exports = CellDefaultView.extend({
 			// console.log("click"); 
 			if ( !this.isOpen ) {
 				this.open();
-
-				// console.log("solo " + this.model.get('solo'));
-				if ( this.model.getFlag('solo') ) {
-					var soloGroup = this.model.get('solo');
-					// console.log('publish solo ' + soloGroup);
-					this.publishEvent('!solo', { group : soloGroup, origin : this });
-				}
 			}
 		}
 	},
@@ -93,6 +86,14 @@ module.exports = CellDefaultView.extend({
 		$('.content',this.$el).removeClass('element-hidden');
 		$('.info',this.$el).addClass('element-hidden');
 		this.$el.css( 'background-image', 'none' );
+
+		// handle solo
+		// console.log("solo " + this.model.get('solo'));
+		if ( this.model.getFlag('solo') ) {
+			var soloGroup = this.model.get('solo');
+			// console.log('publish solo ' + soloGroup);
+			this.publishEvent('!solo', { group : soloGroup, origin : this });
+		}
 	},
 
 	// remove content

From 09cedc898a80ac1d7c4ab6a158d1e7bbc55792c2 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 01:08:31 +0100
Subject: [PATCH 12/20] implemented on-finish trigger for vimeo cells

---
 app-base/views/cell-types/cell-vimeo-view.js | 70 +++++++++++++++++++-
 app-base/views/cell-view.js                  |  1 +
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index ea1f8f4..5d60aad 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -1,5 +1,6 @@
 /* cell-vimeo-view.js */
-var CellIFrameView = require('views/cell-types/cell-iframe-view');
+var CellIFrameView = require('views/cell-types/cell-iframe-view'),
+	pm  = require('postmessenger');
 
 module.exports = CellIFrameView.extend({
 	// attributes governing how a cell behaves in the view
@@ -8,11 +9,11 @@ module.exports = CellIFrameView.extend({
 	defaultViewAttributes : {
 		autoload : 0, // open on scroll in?
 		sticky : 0, // don't close on scroll out?
-		solo: 1 // close other cells on open?
+		solo: 1, // close other cells on open?
+		autoplay : 1
 	},
 
 	initialize : function ( opts ) {
-
 		CellIFrameView.prototype.initialize.apply(this,arguments);
 
 		var loop = this.model.attributes['loop'] && /^true|1$/i.test(this.model.attributes['loop']);
@@ -20,6 +21,69 @@ module.exports = CellIFrameView.extend({
 		this.model.set( 'iframe-src','http://player.vimeo.com/video/' + this.model.get('vimeo-id') + '?autoplay=' + (autoplay ? 1 : 0) + '&loop=' + (loop ? 1 : 0) );
 
 		this.template = require('views/templates/cell-types/cell-iframe');
+
+		this.subscribeEvent('!open', function(args) {
+			if ( args.origin == this ) { return; }
+			//console.log("open received for: " + args.cellid);
+			if ( args.cellid == this.model.get('connection_id') ) { this.open(); }
+		});
+	},
+
+	// overridden
+	connectPM : function () {
+		// console.log("connectPM " + this.cellInfo());
+		var that = this;
+		
+		pm.accept( 'http://player.vimeo.com' );
+		// pm.on({
+		// 	matcher: /.+/,
+		// 	callback: function ( request, response ) {
+		// 		var iframe = $('iframe', that.$el)[0];
+		// 		// check source window
+		// 		if (iframe.contentWindow == request.source) {
+		// 			console.log(that.cellInfo() + ' received: ', request.name );
+		// 			//console.log(iframe);
+		// 		}
+		// 	},
+		// 	nameAlias: 'event'
+		// });
+
+		pm.on({
+			matcher: 'finish',
+			callback: function ( request, response ) {
+				var iframe = $('iframe', that.$el)[0];
+				// check source window
+				if (iframe.contentWindow == request.source) {
+					console.log(that.cellInfo() + ' received: ', request.name );
+					//console.log(iframe);
+					var onfinish = that.model.get('on-finish');
+					if (onfinish) {
+						that.publishEvent('!open', {cellid : onfinish, origin : that});
+					}
+				}
+			},
+			nameAlias: 'event'
+		});
+		
+		var that = this;
+		$('iframe', this.$el).on('load', function() {
+			// load event is also fired on close, when src is set to "". skip this.
+			if (!this.src) {
+				// console.log("src not valid: " + this.src);
+				return;
+			}
+			// request finish events from player
+			pm.send({
+        		name: 'addEventListener', data: 'finish',
+        		receiver: this.contentWindow, receiverOrigin: 'http://player.vimeo.com',
+        		nameAlias: 'method', dataAlias: 'value'
+			});
+
+		});
+	},
+
+	sendPM : function (msg, opts) {
+		// no op
 	}
 
 });
\ No newline at end of file
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index e0b72c8..599da44 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -45,6 +45,7 @@ module.exports = BaseView.extend({
 		// add classes (cell type, cell id)
 		this.$el.addClass( 'type-' + this.model.get('type') );
 		this.$el.addClass( 'cellid-' + this.model.get('connection_id') ); // add view id as class (viewXX) to make debugging easier
+		this.$el.data('cellid', this.model.get('connection_id'));
 
 		// add css from "css-"-fields
 		var cssOpts = {

From 49e0b6598004e8aff47389f5a71034a56cbf87fa Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 01:12:54 +0100
Subject: [PATCH 13/20] Revert c15bfbb..09cedc8

This rolls back to commit c15bfbb14ae8e139023ea01b1bc457c088065849.
---
 app-base/css/34-cell.css                      |  10 -
 app-base/views/cell-collection-view.js        |   2 -
 app-base/views/cell-types/cell-iframe-view.js | 255 ++++++++----------
 app-base/views/cell-types/cell-vimeo-view.js  |  75 +-----
 app-base/views/cell-view.js                   |  78 +++---
 app-base/views/set-view.js                    | 120 ++++-----
 .../templates/cell-types/cell-iframe.hbs      |  12 +-
 7 files changed, 227 insertions(+), 325 deletions(-)

diff --git a/app-base/css/34-cell.css b/app-base/css/34-cell.css
index 1464e7b..b0d61ba 100644
--- a/app-base/css/34-cell.css
+++ b/app-base/css/34-cell.css
@@ -228,13 +228,3 @@
 .cell-collection .cell.type-text .info {
 	display: none;
 }*/
-.loading { color:white; position:absolute; top:0;left:0;bottom:0;right:0; font-size:200%; text-align:center; vertical-align: middle; line-height:100%;}
-.loading span { display:inline-block; margin-top:30%; }
-.loading span:after { content:'•'; }
-.loading .dot1 { -webkit-animation: fadeOut 0.7s 0.00s infinite alternate; animation: fadeOut 0.7s 0.00s infinite alternate; }
-.loading .dot2 { -webkit-animation: fadeOut 0.7s 0.35s infinite alternate; animation: fadeOut 0.7s 0.35s infinite alternate; }
-.loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
-@-webkit-keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
-@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
-.cell .content { position:relative; } /* so .loading doesn't overlay it */
-
diff --git a/app-base/views/cell-collection-view.js b/app-base/views/cell-collection-view.js
index 1414122..1c2e59f 100644
--- a/app-base/views/cell-collection-view.js
+++ b/app-base/views/cell-collection-view.js
@@ -1,4 +1,3 @@
-/* cell-collection-view.js */
 var CellDefaultView = require('views/cell-view'),
 	BaseCollectionView = require('views/base/collection-view'),
 	mediator = require('mediator'),
@@ -22,7 +21,6 @@ module.exports = BaseCollectionView.extend({
 	},
 
 	render : function () {
-		console.log("rendering cell collection");
 		BaseCollectionView.prototype.render.apply(this,arguments);
 		// after rendring is finished attach scroll listener
 		_(function(){
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index 0c6d219..d15d9e6 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -9,47 +9,86 @@ module.exports = CellDefaultView.extend({
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 1, // open on scroll in?
-		sticky : 0, // don't close on scroll out?
-		solo: 0 // close other cells on open?
+		autoload : 1, // automatically open a cell on set load or scroll in?
+		sticky : 0, // close a cell on scroll out?
+		solo: 1 // close other cells on open?
 	},
 
-	events : {
-		'click' : function () {
-			// console.log("click"); 
-			if ( !this.isOpen ) {
-				this.open();
-			}
+	// events : {
+	// 	'click' : function () {
+	// 		this.renderContent();
+	// 	}
+	// },
+
+	// keep this in sync with cell-vimeo!
+	render : function () {
+
+		CellDefaultView.prototype.render.apply(this,arguments);
+
+		if ( this.model.attributes['autoload'] && 
+			/^(1|true)$/i.test(this.model.attributes['autoload']) ) {
+			this.renderContent();
 		}
+
+		return this;
 	},
 
-	initialize : function () {
-		CellDefaultView.prototype.initialize.apply(this,arguments);
-		// fill in missing view attributs with defaults
-		_.defaults(this.model.attributes, this.defaultViewAttributes);
-		
-		// listen for solo event. close if in same solo group
-		this.subscribeEvent('!solo', function(args) {
-			// console.log("solo ");
-			// console.log(args);
-			// skip if we sent that event
-			if ( args.origin == this ) { return; }
-			if ( args.group == this.model.get('solo') ) { this.close(); }
+	renderContent : function () {
+		// load iframe from data-src
+		$('iframe',this.$el).attr('src',$('iframe',this.$el).data('src'));
+
+		// connect to iframe with postmessenger
+		_(function(){
+
+			var view = this;
+			var iframe = $('iframe',this.$el);
+			
+			iframe.load(function() {
+				// show content, hide info
+				$('.element-hidden',view.$el).removeClass('element-hidden');
+				$('.info',view.$el).addClass('element-hidden');
+
+				view.$iframe = $(this);
+				// if iframe on another domain add that to the accept list
+				var src = view.model.get('iframe-src');
+				if ( /^http[s]?:\/\/.+/.test(src) ) {
+					var iframe_domain = (function(){
+						var p = src.split('/');
+						return p[0]+'//'+p[2];
+					})();
+					pm.accept(iframe_domain);
+				}
+
+				// connect it
+				pm.send(
+					'connect?',
+					{ listener_id: hasher.generate(20) }, 
+					this.contentWindow, 
+					iframe_domain
+				);
+			});
+			
+		}).bind(this).defer();
+
+		this.$el.css({
+			'background-image' : 'none'
 		});
 	},
 
 	getTemplateData : function () {
 		var data = CellDefaultView.prototype.getTemplateData.apply(this,arguments);
-
 		if ( Handlebars.compile && data['iframe-src'] ) {
 			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
 		}
 		if ( data['iframe-src'] ) {
 			var spl = data['iframe-src'].split('?');
 			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
+			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
+			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
+			// }
 		}
 		
-		// collect extra attributes for <iframe>
+		// collect attributes for <iframe>
 		data.attr = {};
 		_.each(data.fields, function(element, index, list) {
 			if (element.name.substr(0,5) == 'attr-') {
@@ -60,135 +99,65 @@ module.exports = CellDefaultView.extend({
 		
 		return data;
 	},
-
-	render : function () {
-		CellDefaultView.prototype.render.apply(this,arguments);
-		
-		// when rendering is finished, meaning the <iframe> exists, connect postmessenger
-		_(this.connectPM).bind(this).defer();
-		
-		return this;
-	},
-
-	// render content
-	open : function () {
-		console.log("open " + this.cellInfo());
-
-		// show loading animation
-		this.showLoadingAnimation();
-
-		// load iframe from data-src
-		var $iframe = $('iframe',this.$el);
-		var that = this;
-		$iframe.one('load.open', function() { that.isOpen = true; }); // once loaded, set isOpen flag
-		$iframe.attr( 'src', $iframe.data('src') );
-		
-		$('.content',this.$el).removeClass('element-hidden');
-		$('.info',this.$el).addClass('element-hidden');
-		this.$el.css( 'background-image', 'none' );
-
-		// handle solo
-		// console.log("solo " + this.model.get('solo'));
-		if ( this.model.getFlag('solo') ) {
-			var soloGroup = this.model.get('solo');
-			// console.log('publish solo ' + soloGroup);
-			this.publishEvent('!solo', { group : soloGroup, origin : this });
+	
+	listen : {
+		// listen to changes of the active property
+		'change:focused model' : function(model, focused, options) {
+			if (focused) {
+				this.activate();
+				this.renderContent();
+			} else {
+				if (!model.isSticky()) this.deactivate();
+			}
 		}
 	},
 
-	// remove content
-	close : function () {
-		console.log("close " + this.cellInfo());
-		
-		var $iframe = $('iframe',this.$el);
-		$iframe.off('.open'); // don't set isOpen anymore, if pending
-		$iframe.attr( 'src', '');
-		
-		$('.content',this.$el).addClass('element-hidden');
-		$('.info',this.$el).removeClass('element-hidden');
-		this.$el.css( 'background-image', 'url('+this.model.getPosterImageURL()+')' );
-
-		this.isOpen = false;
-	},
-
-	// called when scrolled into view 
 	activate : function () {
-		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
-		if ( this.model.getFlag('autoload') && !this.isOpen ) {
-			this.open();
-		}
-		
-		if ( this.model.getFlag('sticky') && this.isOpen ) {
-			// console.log("sending activate");
-			this.sendPM('activate!');
-		}
-	},
+		if ( !this.active ) {
+			// console.log("activate iframe: " + this.cid);
+
+			this.active = true; // needs to be before render(). why? don't know...
+
+			if ( !this.model.isSticky() ) {
+				this.render();
+			} else {
+				if (!this.rendered) {
+					this.render();
+					var iframe = $('iframe', this.$el)[0];
+					var that = this;
+					$(iframe).one('load', function(){
+						pm.send(that.active ? 'activate!' : 'deactivate!', {}, this.contentWindow );
+						that.rendered = true;
+					});
+				} else {
+					var iframe = $('iframe', this.$el)[0];
+					pm.send( 'activate!', {}, iframe.contentWindow );
+			}}
 
-	// called when scrolled out of view
-	deactivate : function () {
-		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
-		if ( !this.model.getFlag('sticky') ) {
-			this.close();
 		}
-
-		if ( this.model.getFlag('sticky') && this.isOpen ) {
-			// console.log("sending deactivate");
-			this.sendPM('deactivate!');
-		}
-	},
-
-	showLoadingAnimation : function () {
-		$('.loading', this.$el).show(0);
-		var that = this;
-		$('iframe', this.$el).one('load', function() {
-			$('.loading', that.$el).hide(0);
-		});
 	},
 
-	// connect postmessenger to iframe
-	// remains on the iframe and reconnects on load, so only call this once
-	connectPM : function () {
-		// console.log("connectPM " + this.cellInfo());
-		
-		var that = this;
-		$('iframe', this.$el).on('load', function() {
-			// load event is also fired on close, when src is set to "". skip this.
-			if (!this.src) {
-				// console.log("src not valid: " + this.src);
-				return;
-			}
-
-			// if iframe on another domain add that to the accept list
-			var src = that.model.get('iframe-src');
-			if ( /^http[s]?:\/\/.+/.test(src) ) {
-				var iframe_domain = (function(){
-					var p = src.split('/');
-					return p[0]+'//'+p[2];
-				})();
-				pm.accept(iframe_domain);
+	deactivate : function () {
+		if ( this.active ) {
+			if (!this.model.isSticky()) {
+				// console.log("deactivate iframe: " + this.cid);
+				//this.$el.empty();
+				// remove content and show info again
+				$('.content', this.$el).remove();
+				$('.info', this.$el).removeClass('element-hidden');
+
+				this.$el.css({
+					'background-image': 'url('+this.model.getPosterImageURL()+')'
+				});
+
+				this.rendered = false;
+			} else {
+				var iframe = $('iframe', this.$el)[0];
+				if (iframe)  {
+					pm.send('deactivate!', {}, iframe.contentWindow );
+				}
 			}
-			// connect it
-			pm.send(
-				'connect?',
-				{ listener_id: hasher.generate(20) }, 
-				this.contentWindow,
-				iframe_domain
-			);
-		});
-	},
-	
-	sendPM : function (msg, opts) {
-		var iframe = $('iframe', this.$el)[0];
-		if (opts == undefined) { opts = {}; }
-
-		if (this.isOpen) {
-			// console.log("sending " + msg);
-			pm.send(msg, opts, iframe.contentWindow );
-		} else { // wait till iframe is loaded to send message
-			$(iframe).one('load', function() {
-				// console.log("late sending " + msg);
-				pm.send(msg, opts, this.contentWindow );
-			});
+			this.active = false;
 		}
 	}
 });
\ No newline at end of file
diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index 5d60aad..d317bb8 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -1,19 +1,17 @@
-/* cell-vimeo-view.js */
-var CellIFrameView = require('views/cell-types/cell-iframe-view'),
-	pm  = require('postmessenger');
+var CellIFrameView = require('views/cell-types/cell-iframe-view');
 
 module.exports = CellIFrameView.extend({
 	// attributes governing how a cell behaves in the view
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 0, // open on scroll in?
-		sticky : 0, // don't close on scroll out?
-		solo: 1, // close other cells on open?
-		autoplay : 1
+		autoload : 0, // automatically open a cell on set load or scroll in?
+		sticky : 0, // close a cell on scroll out?
+		solo: 1 // close other cells on open?
 	},
 
 	initialize : function ( opts ) {
+
 		CellIFrameView.prototype.initialize.apply(this,arguments);
 
 		var loop = this.model.attributes['loop'] && /^true|1$/i.test(this.model.attributes['loop']);
@@ -21,69 +19,6 @@ module.exports = CellIFrameView.extend({
 		this.model.set( 'iframe-src','http://player.vimeo.com/video/' + this.model.get('vimeo-id') + '?autoplay=' + (autoplay ? 1 : 0) + '&loop=' + (loop ? 1 : 0) );
 
 		this.template = require('views/templates/cell-types/cell-iframe');
-
-		this.subscribeEvent('!open', function(args) {
-			if ( args.origin == this ) { return; }
-			//console.log("open received for: " + args.cellid);
-			if ( args.cellid == this.model.get('connection_id') ) { this.open(); }
-		});
-	},
-
-	// overridden
-	connectPM : function () {
-		// console.log("connectPM " + this.cellInfo());
-		var that = this;
-		
-		pm.accept( 'http://player.vimeo.com' );
-		// pm.on({
-		// 	matcher: /.+/,
-		// 	callback: function ( request, response ) {
-		// 		var iframe = $('iframe', that.$el)[0];
-		// 		// check source window
-		// 		if (iframe.contentWindow == request.source) {
-		// 			console.log(that.cellInfo() + ' received: ', request.name );
-		// 			//console.log(iframe);
-		// 		}
-		// 	},
-		// 	nameAlias: 'event'
-		// });
-
-		pm.on({
-			matcher: 'finish',
-			callback: function ( request, response ) {
-				var iframe = $('iframe', that.$el)[0];
-				// check source window
-				if (iframe.contentWindow == request.source) {
-					console.log(that.cellInfo() + ' received: ', request.name );
-					//console.log(iframe);
-					var onfinish = that.model.get('on-finish');
-					if (onfinish) {
-						that.publishEvent('!open', {cellid : onfinish, origin : that});
-					}
-				}
-			},
-			nameAlias: 'event'
-		});
-		
-		var that = this;
-		$('iframe', this.$el).on('load', function() {
-			// load event is also fired on close, when src is set to "". skip this.
-			if (!this.src) {
-				// console.log("src not valid: " + this.src);
-				return;
-			}
-			// request finish events from player
-			pm.send({
-        		name: 'addEventListener', data: 'finish',
-        		receiver: this.contentWindow, receiverOrigin: 'http://player.vimeo.com',
-        		nameAlias: 'method', dataAlias: 'value'
-			});
-
-		});
-	},
-
-	sendPM : function (msg, opts) {
-		// no op
 	}
 
 });
\ No newline at end of file
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 599da44..6b58962 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -1,9 +1,16 @@
-/* cell-view.js */
 BaseView = require('views/base/view');
 
 // see ```views/cell-types``` for per cell type views
 
 module.exports = BaseView.extend({
+	// attributes governing how a cell behaves in the view
+	// cell types have default values. can be overridden via fields
+	// these are the defaults use by most cell types
+	defaultViewAttributes : {
+		autoload : 1, // automatically open a cell on set load or scroll in?
+		sticky : 1, // close a cell on scroll out?
+		solo: 0 // close other cells on open?
+	},
 
 	events: {
 		click: function () {
@@ -12,6 +19,7 @@ module.exports = BaseView.extend({
 	},
 
 	initialize : function ( opts ) {
+
 		BaseView.prototype.initialize.apply(this,arguments);
 
 		try {
@@ -21,6 +29,9 @@ module.exports = BaseView.extend({
 		} catch (e) {
 			// ignore, uses default template
 		}
+
+		// fill in missing view attributs with defaults
+		_.defaults(this.model.attributes, this.defaultViewAttributes);
 	},
 
 	autoRender : false,
@@ -29,7 +40,7 @@ module.exports = BaseView.extend({
 	template : require('views/templates/cell'),
 
 	// always on for now, see setActive / setInactive and render
-	// active : false,
+	active : false,
 
 	getTemplateData : function () {
 		var data = _.extend({},this.model.attributes);
@@ -38,44 +49,43 @@ module.exports = BaseView.extend({
 	},
 
 	render : function () {
-		//console.log("rendering " + this.cellInfo());
-		// if ( this.active ) {
-		BaseView.prototype.render.apply(this,arguments);
-
-		// add classes (cell type, cell id)
-		this.$el.addClass( 'type-' + this.model.get('type') );
-		this.$el.addClass( 'cellid-' + this.model.get('connection_id') ); // add view id as class (viewXX) to make debugging easier
-		this.$el.data('cellid', this.model.get('connection_id'));
-
-		// add css from "css-"-fields
-		var cssOpts = {
-			'background-image': 'url('+this.model.getPosterImageURL()+')'
-		};
-		attribs = {};
-		_.filter(this.model.attributes.fields,function(f){
-			return /^css-/i.test(f.name);
-		}).map(function(f){
-			attribs[f.name.replace(/^css-/i,'')] = f.value;
-		});
-		cssOpts = _.extend(cssOpts,attribs);
-		this.$el.css(cssOpts);
-		// }
+		console.log("rendering");
+		console.log(this);
 
-		return this;
-	},
+		if ( this.active ) {
+			BaseView.prototype.render.apply(this,arguments);
+
+			this.$el.addClass( 'type-' + this.model.get('type') );
+			this.$el.addClass( this.cid ); // add view id as class (viewXX) to make debugging easier
 
-	// get a string made up of cell type + id
-	cellInfo : function () {
-		return this.model.get('type') + this.model.get('connection_id');
+			// use cell fields that start with "css-" as css attributes on the $el
+			var cssOpts = {
+				'background-image': 'url('+this.model.getPosterImageURL()+')'
+			};
+			attribs = {};
+			_.filter(this.model.attributes.fields,function(f){
+				return /^css-/i.test(f.name);
+			}).map(function(f){
+				attribs[f.name.replace(/^css-/i,'')] = f.value;
+			});
+			cssOpts = _.extend(cssOpts,attribs);
+			this.$el.css(cssOpts);
+		}
+
+		return this;
 	},
 	
-	// called when scrolled into view 
 	activate : function () {
-		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
+		if ( !this.active ) {
+			this.active = true;
+			this.render();
+		}
+		// console.log("activate: " + this.cid);
 	},
 
-	// called when scrolled out of view
 	deactivate : function () {
-		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
-	},
+		this.active = false;
+		this.$el.empty();
+		// console.log("deactivate: " + this.cid);
+	}
 });
\ No newline at end of file
diff --git a/app-base/views/set-view.js b/app-base/views/set-view.js
index 0c27884..1f5c8f8 100644
--- a/app-base/views/set-view.js
+++ b/app-base/views/set-view.js
@@ -1,4 +1,3 @@
-/* set-view.js */	
 var View 	 = require('views/base/view');
 
 module.exports = View.extend({
@@ -8,7 +7,7 @@ module.exports = View.extend({
 
 		this.subscribeEvent('set:scrolled',function(val){
 			this.layoutAttributes.position = val;
-			this.updateCellVisibility();
+			this.updateVisibleCells();
 		});
 
 		this.subscribeEvent('window:resized',function(){
@@ -25,42 +24,41 @@ module.exports = View.extend({
 	template: require('views/templates/set'),
 
 	layoutAttributes : {
-		position : 0.0, // scroll position in set [0,1]
-		visible_x : 0, // #cells that fit in one screen horizontally
-		visible_y : 0, // #cells that fit in one screen vertically
-		width : -1, // set width in px
-		height : -1, // set height in px
-		cell_width : 0, // cell width in px
-		cell_height : 0 // cell height in px
+		position : 0.0,
+		visible_x : 0,
+		visible_y : 0,
+		width : -1,
+		height : -1,
+		cell_width : 0,
+		cell_height : 0
 	},
 
 	render : function () {
-		// console.log("rendering set");
+
 		View.prototype.render.apply(this,arguments);
 
 		this.layoutAttributes.position = 0.0;
 		
 		this.model.collectionView.render();
-
 		// call updateCellGrid() after render finished (for it to have width, height avail)
 		_(function(){
 			this.updateCellGrid();
-			this.establishCellGrid();
-			this.updateCellVisibility();
+			this.updateVisibleCells();
 		}).bind(this).defer();
 
 		return this;
 	},
 
-	// re-calculate layout attributes: set dimensions, grid dimensions (on resize)
+	updateLayoutSize : function () {
+		this.layoutAttributes.width  = this.$el.width();
+		this.layoutAttributes.height = this.$el.height();
+	},
+
 	updateCellGrid : function () {
-		// console.log("updateCellGrid");
 
 		var layAttrs = this.layoutAttributes;
 
-		// update layout size
-		layAttrs.width  = this.$el.width();
-		layAttrs.height = this.$el.height();
+		this.updateLayoutSize();
 		
 		var cell_height = parseInt( Math.floor( layAttrs.height / this.model.get('grid_rows') ) );
 		var cell_width  = (this.model.get('cell_width') / this.model.get('cell_height')) * cell_height;
@@ -80,66 +78,68 @@ module.exports = View.extend({
 		layAttrs.cell_width  = cell_width;
 		layAttrs.cell_height = cell_height;
 
-		// add media-query style classes to cells
-		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
-		var cellDim = cellView.model.get('extra');
-			cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/ cell-(width|height)-[0-9]+/ig,'') );
-			// console.log('cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50));
-			cellView.$el.addClass( 'cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50) );
-			cellView.$el.addClass( 'cell-height-'+(parseInt((layAttrs.cell_height*cellDim.height)/50)*50) );
-		});
+		//console.log( this.layoutAttributes );
 	},
 
-	// establish css cell positions and dimensions (once)
-	establishCellGrid : function () {
-		// console.log("establishCellGrid");
+	updateVisibleCells : function () {
 
 		var gridWidth = this.model.get('grid_cols');
 		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
 
-		var cw = 100.0/gridWidth;  // cell width (% of set)
-		var ch = 100.0/this.layoutAttributes.visible_y; // cell height (% of set)
+		var cw = 100.0/gridWidth;
+		var ch = 100.0/this.layoutAttributes.visible_y;
 
-		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
-			var cellDim = cellView.model.get('extra');
-
-			var left  = cw * cellDim.x;
-			var width = cw * cellDim.width;
+		var absCw = (1.0*this.layoutAttributes.width) /this.layoutAttributes.visible_x,
+			absCh = (1.0*this.layoutAttributes.height)/this.layoutAttributes.visible_y;
 
-			cellView.$el.css({
-				left: 	left+'%',
-				top: 	(ch*cellDim.y)+'%',
-				width: 	width+'%',
-				height: (ch*cellDim.height)+'%'
-			});
-		});
-	},
+		// TODO: clean this mess
+		_.each( this.model.collectionView.getItemViews(), 
+				(function(layAttrs){ return function( cellView, cid ) {
 
-	// send activation / deactivation to cells (on scroll)
-	updateCellVisibility : function () {
-		// console.log("updateVisibleCells");
+			var cellDim = cellView.model.get('extra');
 
-		var gridWidth = this.model.get('grid_cols');
-		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
-		var layAttrs = this.layoutAttributes;
+			cellView.$el.removeClass('lastcol').removeClass('lastrow');
 
-		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
-			var cellDim = cellView.model.get('extra');
 			// ... not too far left or right
 			if ( !( (cellDim.x + (cellDim.width-1)) < xFrom - 1 ||
 					 cellDim.x > xFrom + layAttrs.visible_x + 1 ) 
 				) {
-				if ( !cellView.isVisible ) { 
-					cellView.activate();
-					cellView.isVisible = true;
+				
+				var left  = cw * cellDim.x;
+				var width = cw * cellDim.width;
+
+				// show, set position and size in % to make responsive
+				
+				cellView.activate();
+
+				cellView.$el.css({
+					left: 	left+'%',
+					top: 	(ch*cellDim.y)+'%',
+					width: 	width+'%',
+					height: (ch*cellDim.height)+'%'
+				});
+
+				// add media-query style classes to cells
+				cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/cell-(width|height)-[0-9]+/ig,'') );
+				cellView.$el.addClass( 'cell-width-'+ (parseInt((absCw*cellDim.width) /50)*50) ).
+					   addClass( 'cell-height-'+(parseInt((absCh*cellDim.height)/50)*50) );
+
+				if ( (cellDim.x-xFrom) + cellDim.width >= layAttrs.visible_x ) {
+					cellView.$el.addClass('lastcol');
 				}
-			} else {
-				if ( cellView.isVisible ) {
-					cellView.deactivate();
-					cellView.isVisible = false;
+				if ( cellDim.y+cellDim.height >= layAttrs.visible_y ) {
+					cellView.$el.addClass('lastrow');
 				}
+			} else {
+				cellView.deactivate();
 			}
-		});
+
+			// if ( showCellInfo ) {
+			// 	cellView.$el.addClass('with-info');
+			// } else {
+			// 	cellView.$el.removeClass('with-info');
+			// }
+		}})(this.layoutAttributes));
 	}
   
 });
\ No newline at end of file
diff --git a/app-base/views/templates/cell-types/cell-iframe.hbs b/app-base/views/templates/cell-types/cell-iframe.hbs
index a32e9ba..62f2a39 100644
--- a/app-base/views/templates/cell-types/cell-iframe.hbs
+++ b/app-base/views/templates/cell-types/cell-iframe.hbs
@@ -1,10 +1,10 @@
-<div class="loading" style="display:none;"><span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span></div>
-<div class="content element-hidden">
-	<iframe src="" data-src="{{iframe-src}}" 
-			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
-	</iframe>
-</div>
 <div class="info">
 	<h1 class="title">{{{title}}}</h1>
 	<div class="description">{{description}}</div>
+</div>
+<div class="content element-hidden">
+	<iframe src="" 
+			data-src="{{iframe-src}}" 
+			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
+			</iframe>
 </div>
\ No newline at end of file

From d2f5519695882b1c9052d54bdde8d3b7b0e18cfc Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 01:13:57 +0100
Subject: [PATCH 14/20] Revert "Revert c15bfbb..09cedc8"

This reverts commit 49e0b6598004e8aff47389f5a71034a56cbf87fa.
---
 app-base/css/34-cell.css                      |  10 +
 app-base/views/cell-collection-view.js        |   2 +
 app-base/views/cell-types/cell-iframe-view.js | 255 ++++++++++--------
 app-base/views/cell-types/cell-vimeo-view.js  |  75 +++++-
 app-base/views/cell-view.js                   |  78 +++---
 app-base/views/set-view.js                    | 120 ++++-----
 .../templates/cell-types/cell-iframe.hbs      |  12 +-
 7 files changed, 325 insertions(+), 227 deletions(-)

diff --git a/app-base/css/34-cell.css b/app-base/css/34-cell.css
index b0d61ba..1464e7b 100644
--- a/app-base/css/34-cell.css
+++ b/app-base/css/34-cell.css
@@ -228,3 +228,13 @@
 .cell-collection .cell.type-text .info {
 	display: none;
 }*/
+.loading { color:white; position:absolute; top:0;left:0;bottom:0;right:0; font-size:200%; text-align:center; vertical-align: middle; line-height:100%;}
+.loading span { display:inline-block; margin-top:30%; }
+.loading span:after { content:'•'; }
+.loading .dot1 { -webkit-animation: fadeOut 0.7s 0.00s infinite alternate; animation: fadeOut 0.7s 0.00s infinite alternate; }
+.loading .dot2 { -webkit-animation: fadeOut 0.7s 0.35s infinite alternate; animation: fadeOut 0.7s 0.35s infinite alternate; }
+.loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
+@-webkit-keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
+@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
+.cell .content { position:relative; } /* so .loading doesn't overlay it */
+
diff --git a/app-base/views/cell-collection-view.js b/app-base/views/cell-collection-view.js
index 1c2e59f..1414122 100644
--- a/app-base/views/cell-collection-view.js
+++ b/app-base/views/cell-collection-view.js
@@ -1,3 +1,4 @@
+/* cell-collection-view.js */
 var CellDefaultView = require('views/cell-view'),
 	BaseCollectionView = require('views/base/collection-view'),
 	mediator = require('mediator'),
@@ -21,6 +22,7 @@ module.exports = BaseCollectionView.extend({
 	},
 
 	render : function () {
+		console.log("rendering cell collection");
 		BaseCollectionView.prototype.render.apply(this,arguments);
 		// after rendring is finished attach scroll listener
 		_(function(){
diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index d15d9e6..0c6d219 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -9,86 +9,47 @@ module.exports = CellDefaultView.extend({
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 1, // automatically open a cell on set load or scroll in?
-		sticky : 0, // close a cell on scroll out?
-		solo: 1 // close other cells on open?
+		autoload : 1, // open on scroll in?
+		sticky : 0, // don't close on scroll out?
+		solo: 0 // close other cells on open?
 	},
 
-	// events : {
-	// 	'click' : function () {
-	// 		this.renderContent();
-	// 	}
-	// },
-
-	// keep this in sync with cell-vimeo!
-	render : function () {
-
-		CellDefaultView.prototype.render.apply(this,arguments);
-
-		if ( this.model.attributes['autoload'] && 
-			/^(1|true)$/i.test(this.model.attributes['autoload']) ) {
-			this.renderContent();
+	events : {
+		'click' : function () {
+			// console.log("click"); 
+			if ( !this.isOpen ) {
+				this.open();
+			}
 		}
-
-		return this;
 	},
 
-	renderContent : function () {
-		// load iframe from data-src
-		$('iframe',this.$el).attr('src',$('iframe',this.$el).data('src'));
-
-		// connect to iframe with postmessenger
-		_(function(){
-
-			var view = this;
-			var iframe = $('iframe',this.$el);
-			
-			iframe.load(function() {
-				// show content, hide info
-				$('.element-hidden',view.$el).removeClass('element-hidden');
-				$('.info',view.$el).addClass('element-hidden');
-
-				view.$iframe = $(this);
-				// if iframe on another domain add that to the accept list
-				var src = view.model.get('iframe-src');
-				if ( /^http[s]?:\/\/.+/.test(src) ) {
-					var iframe_domain = (function(){
-						var p = src.split('/');
-						return p[0]+'//'+p[2];
-					})();
-					pm.accept(iframe_domain);
-				}
-
-				// connect it
-				pm.send(
-					'connect?',
-					{ listener_id: hasher.generate(20) }, 
-					this.contentWindow, 
-					iframe_domain
-				);
-			});
-			
-		}).bind(this).defer();
-
-		this.$el.css({
-			'background-image' : 'none'
+	initialize : function () {
+		CellDefaultView.prototype.initialize.apply(this,arguments);
+		// fill in missing view attributs with defaults
+		_.defaults(this.model.attributes, this.defaultViewAttributes);
+		
+		// listen for solo event. close if in same solo group
+		this.subscribeEvent('!solo', function(args) {
+			// console.log("solo ");
+			// console.log(args);
+			// skip if we sent that event
+			if ( args.origin == this ) { return; }
+			if ( args.group == this.model.get('solo') ) { this.close(); }
 		});
 	},
 
 	getTemplateData : function () {
 		var data = CellDefaultView.prototype.getTemplateData.apply(this,arguments);
+
 		if ( Handlebars.compile && data['iframe-src'] ) {
 			data['iframe-src'] = Handlebars.compile(data['iframe-src'])(config);
 		}
 		if ( data['iframe-src'] ) {
 			var spl = data['iframe-src'].split('?');
 			data['iframe-src'] = spl[0] + '?' + 'domain=http://' + config.host + '&' + (spl[1] || '');
-			// if ( false === /^http[s]:\/\/.+/.test(data['iframe-src']) ) {
-			// 	data['iframe-src'] = 'http://' + config.host + config.baseUrl + data['iframe-src'];
-			// }
 		}
 		
-		// collect attributes for <iframe>
+		// collect extra attributes for <iframe>
 		data.attr = {};
 		_.each(data.fields, function(element, index, list) {
 			if (element.name.substr(0,5) == 'attr-') {
@@ -99,65 +60,135 @@ module.exports = CellDefaultView.extend({
 		
 		return data;
 	},
-	
-	listen : {
-		// listen to changes of the active property
-		'change:focused model' : function(model, focused, options) {
-			if (focused) {
-				this.activate();
-				this.renderContent();
-			} else {
-				if (!model.isSticky()) this.deactivate();
-			}
+
+	render : function () {
+		CellDefaultView.prototype.render.apply(this,arguments);
+		
+		// when rendering is finished, meaning the <iframe> exists, connect postmessenger
+		_(this.connectPM).bind(this).defer();
+		
+		return this;
+	},
+
+	// render content
+	open : function () {
+		console.log("open " + this.cellInfo());
+
+		// show loading animation
+		this.showLoadingAnimation();
+
+		// load iframe from data-src
+		var $iframe = $('iframe',this.$el);
+		var that = this;
+		$iframe.one('load.open', function() { that.isOpen = true; }); // once loaded, set isOpen flag
+		$iframe.attr( 'src', $iframe.data('src') );
+		
+		$('.content',this.$el).removeClass('element-hidden');
+		$('.info',this.$el).addClass('element-hidden');
+		this.$el.css( 'background-image', 'none' );
+
+		// handle solo
+		// console.log("solo " + this.model.get('solo'));
+		if ( this.model.getFlag('solo') ) {
+			var soloGroup = this.model.get('solo');
+			// console.log('publish solo ' + soloGroup);
+			this.publishEvent('!solo', { group : soloGroup, origin : this });
 		}
 	},
 
-	activate : function () {
-		if ( !this.active ) {
-			// console.log("activate iframe: " + this.cid);
-
-			this.active = true; // needs to be before render(). why? don't know...
-
-			if ( !this.model.isSticky() ) {
-				this.render();
-			} else {
-				if (!this.rendered) {
-					this.render();
-					var iframe = $('iframe', this.$el)[0];
-					var that = this;
-					$(iframe).one('load', function(){
-						pm.send(that.active ? 'activate!' : 'deactivate!', {}, this.contentWindow );
-						that.rendered = true;
-					});
-				} else {
-					var iframe = $('iframe', this.$el)[0];
-					pm.send( 'activate!', {}, iframe.contentWindow );
-			}}
+	// remove content
+	close : function () {
+		console.log("close " + this.cellInfo());
+		
+		var $iframe = $('iframe',this.$el);
+		$iframe.off('.open'); // don't set isOpen anymore, if pending
+		$iframe.attr( 'src', '');
+		
+		$('.content',this.$el).addClass('element-hidden');
+		$('.info',this.$el).removeClass('element-hidden');
+		this.$el.css( 'background-image', 'url('+this.model.getPosterImageURL()+')' );
+
+		this.isOpen = false;
+	},
 
+	// called when scrolled into view 
+	activate : function () {
+		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
+		if ( this.model.getFlag('autoload') && !this.isOpen ) {
+			this.open();
+		}
+		
+		if ( this.model.getFlag('sticky') && this.isOpen ) {
+			// console.log("sending activate");
+			this.sendPM('activate!');
 		}
 	},
 
+	// called when scrolled out of view
 	deactivate : function () {
-		if ( this.active ) {
-			if (!this.model.isSticky()) {
-				// console.log("deactivate iframe: " + this.cid);
-				//this.$el.empty();
-				// remove content and show info again
-				$('.content', this.$el).remove();
-				$('.info', this.$el).removeClass('element-hidden');
-
-				this.$el.css({
-					'background-image': 'url('+this.model.getPosterImageURL()+')'
-				});
-
-				this.rendered = false;
-			} else {
-				var iframe = $('iframe', this.$el)[0];
-				if (iframe)  {
-					pm.send('deactivate!', {}, iframe.contentWindow );
-				}
+		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
+		if ( !this.model.getFlag('sticky') ) {
+			this.close();
+		}
+
+		if ( this.model.getFlag('sticky') && this.isOpen ) {
+			// console.log("sending deactivate");
+			this.sendPM('deactivate!');
+		}
+	},
+
+	showLoadingAnimation : function () {
+		$('.loading', this.$el).show(0);
+		var that = this;
+		$('iframe', this.$el).one('load', function() {
+			$('.loading', that.$el).hide(0);
+		});
+	},
+
+	// connect postmessenger to iframe
+	// remains on the iframe and reconnects on load, so only call this once
+	connectPM : function () {
+		// console.log("connectPM " + this.cellInfo());
+		
+		var that = this;
+		$('iframe', this.$el).on('load', function() {
+			// load event is also fired on close, when src is set to "". skip this.
+			if (!this.src) {
+				// console.log("src not valid: " + this.src);
+				return;
 			}
-			this.active = false;
+
+			// if iframe on another domain add that to the accept list
+			var src = that.model.get('iframe-src');
+			if ( /^http[s]?:\/\/.+/.test(src) ) {
+				var iframe_domain = (function(){
+					var p = src.split('/');
+					return p[0]+'//'+p[2];
+				})();
+				pm.accept(iframe_domain);
+			}
+			// connect it
+			pm.send(
+				'connect?',
+				{ listener_id: hasher.generate(20) }, 
+				this.contentWindow,
+				iframe_domain
+			);
+		});
+	},
+	
+	sendPM : function (msg, opts) {
+		var iframe = $('iframe', this.$el)[0];
+		if (opts == undefined) { opts = {}; }
+
+		if (this.isOpen) {
+			// console.log("sending " + msg);
+			pm.send(msg, opts, iframe.contentWindow );
+		} else { // wait till iframe is loaded to send message
+			$(iframe).one('load', function() {
+				// console.log("late sending " + msg);
+				pm.send(msg, opts, this.contentWindow );
+			});
 		}
 	}
 });
\ No newline at end of file
diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index d317bb8..5d60aad 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -1,17 +1,19 @@
-var CellIFrameView = require('views/cell-types/cell-iframe-view');
+/* cell-vimeo-view.js */
+var CellIFrameView = require('views/cell-types/cell-iframe-view'),
+	pm  = require('postmessenger');
 
 module.exports = CellIFrameView.extend({
 	// attributes governing how a cell behaves in the view
 	// cell types have default values. can be overridden via fields
 	// these are the defaults use by most cell types
 	defaultViewAttributes : {
-		autoload : 0, // automatically open a cell on set load or scroll in?
-		sticky : 0, // close a cell on scroll out?
-		solo: 1 // close other cells on open?
+		autoload : 0, // open on scroll in?
+		sticky : 0, // don't close on scroll out?
+		solo: 1, // close other cells on open?
+		autoplay : 1
 	},
 
 	initialize : function ( opts ) {
-
 		CellIFrameView.prototype.initialize.apply(this,arguments);
 
 		var loop = this.model.attributes['loop'] && /^true|1$/i.test(this.model.attributes['loop']);
@@ -19,6 +21,69 @@ module.exports = CellIFrameView.extend({
 		this.model.set( 'iframe-src','http://player.vimeo.com/video/' + this.model.get('vimeo-id') + '?autoplay=' + (autoplay ? 1 : 0) + '&loop=' + (loop ? 1 : 0) );
 
 		this.template = require('views/templates/cell-types/cell-iframe');
+
+		this.subscribeEvent('!open', function(args) {
+			if ( args.origin == this ) { return; }
+			//console.log("open received for: " + args.cellid);
+			if ( args.cellid == this.model.get('connection_id') ) { this.open(); }
+		});
+	},
+
+	// overridden
+	connectPM : function () {
+		// console.log("connectPM " + this.cellInfo());
+		var that = this;
+		
+		pm.accept( 'http://player.vimeo.com' );
+		// pm.on({
+		// 	matcher: /.+/,
+		// 	callback: function ( request, response ) {
+		// 		var iframe = $('iframe', that.$el)[0];
+		// 		// check source window
+		// 		if (iframe.contentWindow == request.source) {
+		// 			console.log(that.cellInfo() + ' received: ', request.name );
+		// 			//console.log(iframe);
+		// 		}
+		// 	},
+		// 	nameAlias: 'event'
+		// });
+
+		pm.on({
+			matcher: 'finish',
+			callback: function ( request, response ) {
+				var iframe = $('iframe', that.$el)[0];
+				// check source window
+				if (iframe.contentWindow == request.source) {
+					console.log(that.cellInfo() + ' received: ', request.name );
+					//console.log(iframe);
+					var onfinish = that.model.get('on-finish');
+					if (onfinish) {
+						that.publishEvent('!open', {cellid : onfinish, origin : that});
+					}
+				}
+			},
+			nameAlias: 'event'
+		});
+		
+		var that = this;
+		$('iframe', this.$el).on('load', function() {
+			// load event is also fired on close, when src is set to "". skip this.
+			if (!this.src) {
+				// console.log("src not valid: " + this.src);
+				return;
+			}
+			// request finish events from player
+			pm.send({
+        		name: 'addEventListener', data: 'finish',
+        		receiver: this.contentWindow, receiverOrigin: 'http://player.vimeo.com',
+        		nameAlias: 'method', dataAlias: 'value'
+			});
+
+		});
+	},
+
+	sendPM : function (msg, opts) {
+		// no op
 	}
 
 });
\ No newline at end of file
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 6b58962..599da44 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -1,16 +1,9 @@
+/* cell-view.js */
 BaseView = require('views/base/view');
 
 // see ```views/cell-types``` for per cell type views
 
 module.exports = BaseView.extend({
-	// attributes governing how a cell behaves in the view
-	// cell types have default values. can be overridden via fields
-	// these are the defaults use by most cell types
-	defaultViewAttributes : {
-		autoload : 1, // automatically open a cell on set load or scroll in?
-		sticky : 1, // close a cell on scroll out?
-		solo: 0 // close other cells on open?
-	},
 
 	events: {
 		click: function () {
@@ -19,7 +12,6 @@ module.exports = BaseView.extend({
 	},
 
 	initialize : function ( opts ) {
-
 		BaseView.prototype.initialize.apply(this,arguments);
 
 		try {
@@ -29,9 +21,6 @@ module.exports = BaseView.extend({
 		} catch (e) {
 			// ignore, uses default template
 		}
-
-		// fill in missing view attributs with defaults
-		_.defaults(this.model.attributes, this.defaultViewAttributes);
 	},
 
 	autoRender : false,
@@ -40,7 +29,7 @@ module.exports = BaseView.extend({
 	template : require('views/templates/cell'),
 
 	// always on for now, see setActive / setInactive and render
-	active : false,
+	// active : false,
 
 	getTemplateData : function () {
 		var data = _.extend({},this.model.attributes);
@@ -49,43 +38,44 @@ module.exports = BaseView.extend({
 	},
 
 	render : function () {
-		console.log("rendering");
-		console.log(this);
-
-		if ( this.active ) {
-			BaseView.prototype.render.apply(this,arguments);
-
-			this.$el.addClass( 'type-' + this.model.get('type') );
-			this.$el.addClass( this.cid ); // add view id as class (viewXX) to make debugging easier
-
-			// use cell fields that start with "css-" as css attributes on the $el
-			var cssOpts = {
-				'background-image': 'url('+this.model.getPosterImageURL()+')'
-			};
-			attribs = {};
-			_.filter(this.model.attributes.fields,function(f){
-				return /^css-/i.test(f.name);
-			}).map(function(f){
-				attribs[f.name.replace(/^css-/i,'')] = f.value;
-			});
-			cssOpts = _.extend(cssOpts,attribs);
-			this.$el.css(cssOpts);
-		}
+		//console.log("rendering " + this.cellInfo());
+		// if ( this.active ) {
+		BaseView.prototype.render.apply(this,arguments);
+
+		// add classes (cell type, cell id)
+		this.$el.addClass( 'type-' + this.model.get('type') );
+		this.$el.addClass( 'cellid-' + this.model.get('connection_id') ); // add view id as class (viewXX) to make debugging easier
+		this.$el.data('cellid', this.model.get('connection_id'));
+
+		// add css from "css-"-fields
+		var cssOpts = {
+			'background-image': 'url('+this.model.getPosterImageURL()+')'
+		};
+		attribs = {};
+		_.filter(this.model.attributes.fields,function(f){
+			return /^css-/i.test(f.name);
+		}).map(function(f){
+			attribs[f.name.replace(/^css-/i,'')] = f.value;
+		});
+		cssOpts = _.extend(cssOpts,attribs);
+		this.$el.css(cssOpts);
+		// }
 
 		return this;
 	},
+
+	// get a string made up of cell type + id
+	cellInfo : function () {
+		return this.model.get('type') + this.model.get('connection_id');
+	},
 	
+	// called when scrolled into view 
 	activate : function () {
-		if ( !this.active ) {
-			this.active = true;
-			this.render();
-		}
-		// console.log("activate: " + this.cid);
+		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
 	},
 
+	// called when scrolled out of view
 	deactivate : function () {
-		this.active = false;
-		this.$el.empty();
-		// console.log("deactivate: " + this.cid);
-	}
+		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
+	},
 });
\ No newline at end of file
diff --git a/app-base/views/set-view.js b/app-base/views/set-view.js
index 1f5c8f8..0c27884 100644
--- a/app-base/views/set-view.js
+++ b/app-base/views/set-view.js
@@ -1,3 +1,4 @@
+/* set-view.js */	
 var View 	 = require('views/base/view');
 
 module.exports = View.extend({
@@ -7,7 +8,7 @@ module.exports = View.extend({
 
 		this.subscribeEvent('set:scrolled',function(val){
 			this.layoutAttributes.position = val;
-			this.updateVisibleCells();
+			this.updateCellVisibility();
 		});
 
 		this.subscribeEvent('window:resized',function(){
@@ -24,41 +25,42 @@ module.exports = View.extend({
 	template: require('views/templates/set'),
 
 	layoutAttributes : {
-		position : 0.0,
-		visible_x : 0,
-		visible_y : 0,
-		width : -1,
-		height : -1,
-		cell_width : 0,
-		cell_height : 0
+		position : 0.0, // scroll position in set [0,1]
+		visible_x : 0, // #cells that fit in one screen horizontally
+		visible_y : 0, // #cells that fit in one screen vertically
+		width : -1, // set width in px
+		height : -1, // set height in px
+		cell_width : 0, // cell width in px
+		cell_height : 0 // cell height in px
 	},
 
 	render : function () {
-
+		// console.log("rendering set");
 		View.prototype.render.apply(this,arguments);
 
 		this.layoutAttributes.position = 0.0;
 		
 		this.model.collectionView.render();
+
 		// call updateCellGrid() after render finished (for it to have width, height avail)
 		_(function(){
 			this.updateCellGrid();
-			this.updateVisibleCells();
+			this.establishCellGrid();
+			this.updateCellVisibility();
 		}).bind(this).defer();
 
 		return this;
 	},
 
-	updateLayoutSize : function () {
-		this.layoutAttributes.width  = this.$el.width();
-		this.layoutAttributes.height = this.$el.height();
-	},
-
+	// re-calculate layout attributes: set dimensions, grid dimensions (on resize)
 	updateCellGrid : function () {
+		// console.log("updateCellGrid");
 
 		var layAttrs = this.layoutAttributes;
 
-		this.updateLayoutSize();
+		// update layout size
+		layAttrs.width  = this.$el.width();
+		layAttrs.height = this.$el.height();
 		
 		var cell_height = parseInt( Math.floor( layAttrs.height / this.model.get('grid_rows') ) );
 		var cell_width  = (this.model.get('cell_width') / this.model.get('cell_height')) * cell_height;
@@ -78,68 +80,66 @@ module.exports = View.extend({
 		layAttrs.cell_width  = cell_width;
 		layAttrs.cell_height = cell_height;
 
-		//console.log( this.layoutAttributes );
+		// add media-query style classes to cells
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+		var cellDim = cellView.model.get('extra');
+			cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/ cell-(width|height)-[0-9]+/ig,'') );
+			// console.log('cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50));
+			cellView.$el.addClass( 'cell-width-'+ (parseInt((layAttrs.cell_width*cellDim.width) /50)*50) );
+			cellView.$el.addClass( 'cell-height-'+(parseInt((layAttrs.cell_height*cellDim.height)/50)*50) );
+		});
 	},
 
-	updateVisibleCells : function () {
+	// establish css cell positions and dimensions (once)
+	establishCellGrid : function () {
+		// console.log("establishCellGrid");
 
 		var gridWidth = this.model.get('grid_cols');
 		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
 
-		var cw = 100.0/gridWidth;
-		var ch = 100.0/this.layoutAttributes.visible_y;
+		var cw = 100.0/gridWidth;  // cell width (% of set)
+		var ch = 100.0/this.layoutAttributes.visible_y; // cell height (% of set)
 
-		var absCw = (1.0*this.layoutAttributes.width) /this.layoutAttributes.visible_x,
-			absCh = (1.0*this.layoutAttributes.height)/this.layoutAttributes.visible_y;
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+			var cellDim = cellView.model.get('extra');
 
-		// TODO: clean this mess
-		_.each( this.model.collectionView.getItemViews(), 
-				(function(layAttrs){ return function( cellView, cid ) {
+			var left  = cw * cellDim.x;
+			var width = cw * cellDim.width;
 
-			var cellDim = cellView.model.get('extra');
+			cellView.$el.css({
+				left: 	left+'%',
+				top: 	(ch*cellDim.y)+'%',
+				width: 	width+'%',
+				height: (ch*cellDim.height)+'%'
+			});
+		});
+	},
 
-			cellView.$el.removeClass('lastcol').removeClass('lastrow');
+	// send activation / deactivation to cells (on scroll)
+	updateCellVisibility : function () {
+		// console.log("updateVisibleCells");
 
+		var gridWidth = this.model.get('grid_cols');
+		var xFrom = Math.round( this.layoutAttributes.position * (gridWidth - this.layoutAttributes.visible_x) );
+		var layAttrs = this.layoutAttributes;
+
+		_.each( this.model.collectionView.getItemViews(), function( cellView ) {
+			var cellDim = cellView.model.get('extra');
 			// ... not too far left or right
 			if ( !( (cellDim.x + (cellDim.width-1)) < xFrom - 1 ||
 					 cellDim.x > xFrom + layAttrs.visible_x + 1 ) 
 				) {
-				
-				var left  = cw * cellDim.x;
-				var width = cw * cellDim.width;
-
-				// show, set position and size in % to make responsive
-				
-				cellView.activate();
-
-				cellView.$el.css({
-					left: 	left+'%',
-					top: 	(ch*cellDim.y)+'%',
-					width: 	width+'%',
-					height: (ch*cellDim.height)+'%'
-				});
-
-				// add media-query style classes to cells
-				cellView.$el.attr( 'class', cellView.$el.attr('class').replace(/cell-(width|height)-[0-9]+/ig,'') );
-				cellView.$el.addClass( 'cell-width-'+ (parseInt((absCw*cellDim.width) /50)*50) ).
-					   addClass( 'cell-height-'+(parseInt((absCh*cellDim.height)/50)*50) );
-
-				if ( (cellDim.x-xFrom) + cellDim.width >= layAttrs.visible_x ) {
-					cellView.$el.addClass('lastcol');
-				}
-				if ( cellDim.y+cellDim.height >= layAttrs.visible_y ) {
-					cellView.$el.addClass('lastrow');
+				if ( !cellView.isVisible ) { 
+					cellView.activate();
+					cellView.isVisible = true;
 				}
 			} else {
-				cellView.deactivate();
+				if ( cellView.isVisible ) {
+					cellView.deactivate();
+					cellView.isVisible = false;
+				}
 			}
-
-			// if ( showCellInfo ) {
-			// 	cellView.$el.addClass('with-info');
-			// } else {
-			// 	cellView.$el.removeClass('with-info');
-			// }
-		}})(this.layoutAttributes));
+		});
 	}
   
 });
\ No newline at end of file
diff --git a/app-base/views/templates/cell-types/cell-iframe.hbs b/app-base/views/templates/cell-types/cell-iframe.hbs
index 62f2a39..a32e9ba 100644
--- a/app-base/views/templates/cell-types/cell-iframe.hbs
+++ b/app-base/views/templates/cell-types/cell-iframe.hbs
@@ -1,10 +1,10 @@
+<div class="loading" style="display:none;"><span class="dot1"></span> <span class="dot2"></span> <span class="dot3"></span></div>
+<div class="content element-hidden">
+	<iframe src="" data-src="{{iframe-src}}" 
+			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
+	</iframe>
+</div>
 <div class="info">
 	<h1 class="title">{{{title}}}</h1>
 	<div class="description">{{description}}</div>
-</div>
-<div class="content element-hidden">
-	<iframe src="" 
-			data-src="{{iframe-src}}" 
-			{{#each attr}}{{@key}}="{{this}}" {{/each}}>
-			</iframe>
 </div>
\ No newline at end of file

From ffcd8a88521ff06796d79031a011c3d35efd95b4 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 01:54:35 +0100
Subject: [PATCH 15/20] added smooth scrolling to vimeo on-finish trigger

---
 app-base/views/cell-types/cell-vimeo-view.js |  2 +-
 app-base/views/cell-view.js                  | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index 5d60aad..b1d364a 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -25,7 +25,7 @@ module.exports = CellIFrameView.extend({
 		this.subscribeEvent('!open', function(args) {
 			if ( args.origin == this ) { return; }
 			//console.log("open received for: " + args.cellid);
-			if ( args.cellid == this.model.get('connection_id') ) { this.open(); }
+			if ( args.cellid == this.model.get('connection_id') ) { this.scrollTo(); this.open();  }
 		});
 	},
 
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 599da44..1909591 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -78,4 +78,18 @@ module.exports = BaseView.extend({
 	deactivate : function () {
 		// console.log( "deactivate " + this.model.get('type') + this.model.get('connection_id') );
 	},
+
+	// smoothly scroll to this cell
+	scrollTo : function() {
+		console.log("scrolling to " + this.cellInfo());
+		//$('#set .cell-collection-container').scrollLeft(this.$el.position().left); // jump
+		//$('#set .cell-collection-container').animate( {scrollLeft : this.$el.position().left}, 1500 ); // smoother
+		
+		var $viewport = $('#set .cell-collection-container');
+		if ( this.$el.offset().left + this.$el.width() > $viewport.width() ) { // if not fully in view
+			var destLeft = this.$el.position().left - ($viewport.width() - this.$el.width()) / 2;
+			//$viewport.scrollLeft( destLeft ); //jump 
+			$viewport.animate( {scrollLeft : destLeft}, 1500 ); // smooth
+		}
+	}
 });
\ No newline at end of file

From f7af97c93fbab0736e72420d2a04d9f048040db1 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 02:16:21 +0100
Subject: [PATCH 16/20] added random choice syntax to on-finish trigger.

updated lodash for _.sample(). (lazy, yes, but hey, it's 2.15 a.m.)
---
 app-base/views/cell-types/cell-vimeo-view.js | 3 ++-
 bower.json                                   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/app-base/views/cell-types/cell-vimeo-view.js b/app-base/views/cell-types/cell-vimeo-view.js
index b1d364a..1b87309 100644
--- a/app-base/views/cell-types/cell-vimeo-view.js
+++ b/app-base/views/cell-types/cell-vimeo-view.js
@@ -58,7 +58,8 @@ module.exports = CellIFrameView.extend({
 					//console.log(iframe);
 					var onfinish = that.model.get('on-finish');
 					if (onfinish) {
-						that.publishEvent('!open', {cellid : onfinish, origin : that});
+						var random = _.sample( onfinish.split('/') );
+						that.publishEvent('!open', {cellid : random, origin : that});
 					}
 				}
 			},
diff --git a/bower.json b/bower.json
index b934cfd..abfcb5f 100644
--- a/bower.json
+++ b/bower.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "chaplin" : "~0.11.3",
     "console-polyfill" : "~0.1.0",
-    "lodash" : "~1.3.1",
+    "lodash" : "~2.3.0",
     "jquery" : "~2.0.2",
     "normalize-css" : "~2.1.2",
     "h5bp-helpers" : "~0.1.0",

From f3050ee958e475947c8d22377200547081788801 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 13:14:46 +0100
Subject: [PATCH 17/20] proper load states for "media" cells

---
 app-base/views/cell-types/cell-iframe-view.js | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/app-base/views/cell-types/cell-iframe-view.js b/app-base/views/cell-types/cell-iframe-view.js
index 0c6d219..852c1c4 100644
--- a/app-base/views/cell-types/cell-iframe-view.js
+++ b/app-base/views/cell-types/cell-iframe-view.js
@@ -17,12 +17,26 @@ module.exports = CellDefaultView.extend({
 	events : {
 		'click' : function () {
 			// console.log("click"); 
-			if ( !this.isOpen ) {
+			if ( !this.isOpen() ) {
 				this.open();
 			}
 		}
 	},
 
+	loadState : "closed",
+
+	isOpen : function() {
+		return this.loadState.toLowerCase() == "open";
+	},
+
+	isClosed : function() {
+		return this.loadState.toLowerCase() == "closed";
+	},
+
+	isLoading : function() {
+		return this.loadState.toLowerCase() == "loading";
+	},
+
 	initialize : function () {
 		CellDefaultView.prototype.initialize.apply(this,arguments);
 		// fill in missing view attributs with defaults
@@ -34,7 +48,10 @@ module.exports = CellDefaultView.extend({
 			// console.log(args);
 			// skip if we sent that event
 			if ( args.origin == this ) { return; }
-			if ( args.group == this.model.get('solo') ) { this.close(); }
+			if ( args.group == this.model.get('solo') ) { 
+				// close if open or loading
+				if (!this.isClosed()) this.close(); 
+			}
 		});
 	},
 
@@ -73,6 +90,7 @@ module.exports = CellDefaultView.extend({
 	// render content
 	open : function () {
 		console.log("open " + this.cellInfo());
+		this.loadState = "loading";
 
 		// show loading animation
 		this.showLoadingAnimation();
@@ -80,7 +98,7 @@ module.exports = CellDefaultView.extend({
 		// load iframe from data-src
 		var $iframe = $('iframe',this.$el);
 		var that = this;
-		$iframe.one('load.open', function() { that.isOpen = true; }); // once loaded, set isOpen flag
+		$iframe.one('load.open', function() { that.loadState = "open"; }); // once loaded, set isOpen flag
 		$iframe.attr( 'src', $iframe.data('src') );
 		
 		$('.content',this.$el).removeClass('element-hidden');
@@ -99,26 +117,26 @@ module.exports = CellDefaultView.extend({
 	// remove content
 	close : function () {
 		console.log("close " + this.cellInfo());
+		// debugger;
+		this.$el.css( 'background-image', 'url('+this.model.getPosterImageURL()+')' ); // show poster image
+		$('.info',this.$el).removeClass('element-hidden'); // show info
+		$('.content',this.$el).addClass('element-hidden'); // hide content
 		
 		var $iframe = $('iframe',this.$el);
 		$iframe.off('.open'); // don't set isOpen anymore, if pending
 		$iframe.attr( 'src', '');
-		
-		$('.content',this.$el).addClass('element-hidden');
-		$('.info',this.$el).removeClass('element-hidden');
-		this.$el.css( 'background-image', 'url('+this.model.getPosterImageURL()+')' );
 
-		this.isOpen = false;
+		this.loadState = "closed";
 	},
 
 	// called when scrolled into view 
 	activate : function () {
 		// console.log( "activate " + this.model.get('type') + this.model.get('connection_id') );
-		if ( this.model.getFlag('autoload') && !this.isOpen ) {
+		if ( this.model.getFlag('autoload') && !this.isOpen() ) {
 			this.open();
 		}
 		
-		if ( this.model.getFlag('sticky') && this.isOpen ) {
+		if ( this.model.getFlag('sticky') && this.isOpen() ) {
 			// console.log("sending activate");
 			this.sendPM('activate!');
 		}
@@ -131,7 +149,7 @@ module.exports = CellDefaultView.extend({
 			this.close();
 		}
 
-		if ( this.model.getFlag('sticky') && this.isOpen ) {
+		if ( this.model.getFlag('sticky') && this.isOpen() ) {
 			// console.log("sending deactivate");
 			this.sendPM('deactivate!');
 		}
@@ -181,7 +199,7 @@ module.exports = CellDefaultView.extend({
 		var iframe = $('iframe', this.$el)[0];
 		if (opts == undefined) { opts = {}; }
 
-		if (this.isOpen) {
+		if (this.isOpen()) {
 			// console.log("sending " + msg);
 			pm.send(msg, opts, iframe.contentWindow );
 		} else { // wait till iframe is loaded to send message

From 633939c283cc824d360b52120699bfc1f83ad2ed Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 17:07:32 +0100
Subject: [PATCH 18/20] fix loading css

---
 app-base/css/34-cell.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app-base/css/34-cell.css b/app-base/css/34-cell.css
index 1464e7b..7365e25 100644
--- a/app-base/css/34-cell.css
+++ b/app-base/css/34-cell.css
@@ -228,12 +228,12 @@
 .cell-collection .cell.type-text .info {
 	display: none;
 }*/
-.loading { color:white; position:absolute; top:0;left:0;bottom:0;right:0; font-size:200%; text-align:center; vertical-align: middle; line-height:100%;}
-.loading span { display:inline-block; margin-top:30%; }
-.loading span:after { content:'•'; }
-.loading .dot1 { -webkit-animation: fadeOut 0.7s 0.00s infinite alternate; animation: fadeOut 0.7s 0.00s infinite alternate; }
-.loading .dot2 { -webkit-animation: fadeOut 0.7s 0.35s infinite alternate; animation: fadeOut 0.7s 0.35s infinite alternate; }
-.loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
+.cell .loading { color:white; position:absolute; top:0;left:0;bottom:0;right:0; font-size:200%; text-align:center; vertical-align: middle; line-height:100%;}
+.cell .loading span { display:inline-block; margin-top:30%; }
+.cell .loading span:after { content:'•'; }
+.cell .loading .dot1 { -webkit-animation: fadeOut 0.7s 0.00s infinite alternate; animation: fadeOut 0.7s 0.00s infinite alternate; }
+.cell .loading .dot2 { -webkit-animation: fadeOut 0.7s 0.35s infinite alternate; animation: fadeOut 0.7s 0.35s infinite alternate; }
+.cell .loading .dot3 { -webkit-animation: fadeOut 0.7s 0.70s infinite alternate; animation: fadeOut 0.7s 0.70s infinite alternate; }
 @-webkit-keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
 @keyframes fadeOut { from {opacity:1;} to {opacity:0;} }
 .cell .content { position:relative; } /* so .loading doesn't overlay it */

From a67319e42635d485e6e0243ebb95233ee212a975 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 17:41:23 +0100
Subject: [PATCH 19/20] changed background gradient

---
 app-base/css/11-app.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app-base/css/11-app.css b/app-base/css/11-app.css
index 1e50a06..b1de894 100644
--- a/app-base/css/11-app.css
+++ b/app-base/css/11-app.css
@@ -1,8 +1,8 @@
 #app-background {
 	/*background-image: url('http://motionbank-media.s3.amazonaws.com/dh/app/imgs/backs/background-1.jpg');*/
-  background: -webkit-radial-gradient(45px 45px, cover, #666 0%, #222 100%);
-  background: -moz-radial-gradient(45px 45px, cover, #666 0%, #222 100%);
-  background: radial-gradient(45px 45px, cover, #666 0%, #222 100%);
+  background: -webkit-radial-gradient(45px 45px, cover, #3b4241 0%, #1d2121 100%);
+  background: -moz-radial-gradient(45px 45px, cover, #3b4241 0%, #1d2121 100%);
+  background: radial-gradient(45px 45px, cover, #3b4241 0%, #1d2121 100%);
 	background-size: cover;
 	-webkit-background-size: cover;
 	-moz-background-size: cover;

From e63a6e1801da835b94574f98d7737c58387c3fb7 Mon Sep 17 00:00:00 2001
From: Martin Leopold <m@martinleopold.com>
Date: Thu, 14 Nov 2013 18:09:53 +0100
Subject: [PATCH 20/20] implemented cell permalinks

e.g. set/setid/cellid
---
 app-base/controllers/set-controller.js | 72 ++++++++++++++++++++------
 app-base/routes.js                     |  8 +--
 app-base/views/cell-collection-view.js |  9 ++++
 app-base/views/cell-view.js            |  9 ++--
 4 files changed, 77 insertions(+), 21 deletions(-)

diff --git a/app-base/controllers/set-controller.js b/app-base/controllers/set-controller.js
index d1c6307..bcde376 100644
--- a/app-base/controllers/set-controller.js
+++ b/app-base/controllers/set-controller.js
@@ -3,29 +3,71 @@ var Controller = require('controllers/base/controller'),
     SetModel   = require('models/set-model'),
     ErrorView    = require('views/error-view');
 
+var current_opts = prev_opts = {}; // hack this sh*t
+
 module.exports = Controller.extend({
 
 	show : function ( opts ) {
-		
-		this.model = new SetModel();
+		// console.log("set#show", opts.setid, opts.cellid);
+
+		prev_opts = current_opts;
+		current_opts = opts;
+
+		this.compose('set', {
+			compose : function() {
+				// console.log("composing");
+
+				// create set model
+				this.model = new SetModel();
+
+				// create set view
+				this.view = new SetView({
+					region: 'content',
+					model: this.model
+				});
+				
+				this.model.fetch({
+					id : opts.setid,
+
+					error : function(model, response, options) {
+						//Chaplin.helpers.redirectTo('error#show', {message: 'Error message'}); // use this to redirect to an error page (changes url)
+						new ErrorView( {message : 'Couldn\'t get the set you requested. (' + response.status + ')'} );
+					}
+				});
+
+				this.model.synced(function(){
+					this.view.render();
 
-		this.model.fetch({
-			id : opts.setid,
+					// scroll (jump) to cellid
+					_(function() {
+						if (current_opts.cellid) {
+							this.model.collectionView.scrollToCell(current_opts.cellid, 0);
+						}
+					}).bind(this).defer();
+				}, this);
+			},
 
-			error : function(model, response, options) {
-				//Chaplin.helpers.redirectTo('error#show', {message: 'Error message'}); // use this to redirect to an error page (changes url)
-				new ErrorView( {message : 'Couldn\'t get the set you requested. (' + response.status + ')'} );
+			check : function() {
+				// differnet set -> reload
+				if ( current_opts.setid != prev_opts.setid ) {
+					return false; //rerun compose()
+				}
+
+				// same set, but removed cell id -> reload
+				if ( current_opts.cellid == undefined && current_opts.setid == prev_opts.setid ) {
+					return false; //rerun compose()
+				}
+
+				// same set, cell id given -> scroll to cell
+				if (current_opts.cellid) {
+					this.model.collectionView.scrollToCell(current_opts.cellid, 0);
+				}
+
+				return true;  // don't rerun compose()
 			}
-		});
 
-		this.model.synced(function(){
-			setView.render();
-		});
-		
-		var setView = this.view = new SetView({
-			region: 'content',
-			model: this.model
 		});
+
 	}
 
 });
diff --git a/app-base/routes.js b/app-base/routes.js
index eb7a820..51cada8 100644
--- a/app-base/routes.js
+++ b/app-base/routes.js
@@ -1,8 +1,10 @@
 module.exports = function(match) {
+	
+	match( 'set/:setid', 'set#show' );
+	match( 'set/:setid/', 'set#show' );
+	match( 'set/:setid/:cellid', 'set#show' );
+	match( 'set/:setid/:cellid/', 'set#show' );
 
-	match( 'set/:setid', 'set#show' 
-		//,{ constraints: { setid: /^\d+$/ }}
-	);
 	match( '', 'cover#index' );
 
 	// match( 'error', 'error#show' ); // to test and error page (to redirect to)
diff --git a/app-base/views/cell-collection-view.js b/app-base/views/cell-collection-view.js
index 1414122..b4957f0 100644
--- a/app-base/views/cell-collection-view.js
+++ b/app-base/views/cell-collection-view.js
@@ -56,6 +56,15 @@ module.exports = BaseCollectionView.extend({
 		}
 		
 		return cellView;
+	},
+
+	// scroll to a cell
+	scrollToCell : function (cellid, time) {
+		if (cellid == undefined) return;
+		var cellView = _.find(this.subviews, function(cellView) {
+			return cellView.model.id == cellid;
+		});
+		if (cellView) cellView.scrollTo(time);
 	}
 
 });
\ No newline at end of file
diff --git a/app-base/views/cell-view.js b/app-base/views/cell-view.js
index 1909591..c558677 100644
--- a/app-base/views/cell-view.js
+++ b/app-base/views/cell-view.js
@@ -80,16 +80,19 @@ module.exports = BaseView.extend({
 	},
 
 	// smoothly scroll to this cell
-	scrollTo : function() {
+	scrollTo : function(time) {
 		console.log("scrolling to " + this.cellInfo());
 		//$('#set .cell-collection-container').scrollLeft(this.$el.position().left); // jump
 		//$('#set .cell-collection-container').animate( {scrollLeft : this.$el.position().left}, 1500 ); // smoother
 		
+		if (time == undefined) time = 1500;
+
 		var $viewport = $('#set .cell-collection-container');
-		if ( this.$el.offset().left + this.$el.width() > $viewport.width() ) { // if not fully in view
+		if ( this.$el.offset().left + this.$el.width() > $viewport.width() 
+			|| this.$el.offset().left < 0 ) { // if not fully in view
 			var destLeft = this.$el.position().left - ($viewport.width() - this.$el.width()) / 2;
 			//$viewport.scrollLeft( destLeft ); //jump 
-			$viewport.animate( {scrollLeft : destLeft}, 1500 ); // smooth
+			$viewport.animate( {scrollLeft : destLeft}, time ); // smooth
 		}
 	}
 });
\ No newline at end of file