updated todo...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

TODO.otl

@@ -1,5 +1,59 @@
 [_] 35% Priority work
 	[_] 50% general todo
+		try a slightly different layout...
+		| 
+		| 	+-page--------------+
+		| 	|+-content---+		|
+		| 	||			 |		|
+		| 	||			 |<---->|
+		| 	||			 |		|
+		| 	|+-----------+		|
+		| 	+-------------------+
+		|
+		|
+		|	Thumbnail view
+		|				 +------------+------+
+		|	+------------+\ - - +	   \	  \
+		|	 \			  \\     \		\	   \
+		|	  \			   \\     \		 \	    \
+		|	   \		    \+------------+------+
+		|		+------------+------+
+		|						^
+		|						+--- margin-right: -X
+		|
+		|	Full page view
+		|
+		|	+-screen------------+   +----
+		|	 \	+------------+---\--+\
+		|	--\-+\			  \   \  \\
+		|	   \ \\			   \   \  \\
+		|		+-------------------+  \+----
+		|		   \+------------+------+
+		|		----+
+		|
+		| NOTE: this is not a good idea if not all the pages have the 
+		| 		same BG...
+		|
+		|
+		| Here is another approach:
+		|
+		|	Thumbnail view
+		| 	+-page--------------+
+		| 	|+-content---+		|
+		| 	||			 |		|
+		| 	||			 |		|
+		| 	|+-----------+		|
+		| 	+-------------------+
+		|
+		|	Full page view
+		| 	+-page--------------+
+		| 	|   +-content---+	|
+		| 	|   |			|	|
+		| 	|   |			|	|
+		| 	|   +-----------+	|
+		| 	+-------------------+
+		|
+		|
 		[_] make layer default state configurable...
 		| e.g. setting "shown"/"hidden" classes in HTML and adding 
 		| something like a page reset that will restore the default state,

index.html

@@ -73,6 +73,7 @@ $(document).ready(function(){
 				return true
 			},
 
+			excludedElements: '.noSwipe',
 			fingers: $.fn.swipe.fingers.ALL
 		})
 
@@ -200,7 +201,6 @@ $(document).ready(function(){
 			<div class="page">
 				<div class="content">
 					<a name="page-3-anchor"></a>
-					Page
 					<img src="img.jpg" height="100%"/>
 				</div>
 			</div>

magazine.css

@@ -271,6 +271,33 @@ body {
 }
 
 
+/* templates */
+.caption {
+	display: block;
+	position: absolute;
+	height: 100px;
+	width: 100%;
+	bottom: 0px;
+	left: 0px;
+
+	padding: 15px;
+	color: white;
+	background: black;
+	opacity: 0.5;
+	-webkit-transition: all 0.2s ease;
+	-moz-transition: all 0.2s ease;
+	-o-transition: all 0.2s ease;
+	-ms-transition: all 0.2s ease;	
+	transition: all 0.2s ease;
+}
+.caption.hidden {
+	opacity: 0;
+	height: 0px;
+}
+.caption.shown {
+	opacity: 0.8;
+}
+
 
 
 /* keep this at the end... */