Basic grid with awesome properties

The goals were to make the grid as spacious as possible, while not
compromising many-column layouts and small screen sizes. Works for an
arbitrary number of columns and adjusts horizontal spacing according to
the number of columns and the viewport size.

source/documents/scripts/controllers.js.coffee

@@ -1,7 +1,57 @@
 angular.module("sideBySide.controllers", [])
 .controller "comparisonController", ['$scope', ($scope) ->
+	$scope.columns = 2
 	$scope.verses = [
-		{ section: 'first',  versions: [ 'a', '1' ] }
-		{ section: 'second', versions: [ 'b', '2' ] }
+		[
+			{
+				section: 'first'
+				text: 'a'
+			}, {
+				section: 'I'
+				text: '1'
+			}
+		], [
+			{
+				section: 'second'
+				text: 'b'
+			}, {
+				section: 'II'
+				text: '2'
+			}
+		], [
+			{
+				section: 'third'
+				text: 'c'
+			}, {
+				section: 'III'
+				text: '3'
+			}
+		], [
+			{
+				section: 'fourth'
+				text: 'd'
+			}, {
+				section: 'IV'
+				text: '4'
+			}
+		]
 	]
 ]
+
+#.controller "notificationController", ['$scope', '$timeout', ($scope, $timeout) ->
+#	$scope.id = 0
+#	$scope.notifications = []
+#
+#	$scope.notify = (text, type = "info") ->
+#		$scope.notifications[$scope.id] = {
+#			text: text
+#			type: type
+#		}
+#		$timeout(() ->
+#			$scope.remove($scope.id)
+#		, 1000)
+#		$scope.id++
+#
+#	$scope.remove = (id) ->
+#		delete $scope.notifications[id]
+#]