From 6183d09456432da07f49cf3824d561e19b4263e6 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Tue, 29 Jan 2013 22:25:51 +0400
Subject: [PATCH] added tips to most controls...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 index.html  | 20 ++++++++++----------
 jli.js      |  4 ++++
 magazine.js |  6 +++++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index cc7a790..688fafe 100755
--- a/index.html
+++ b/index.html
@@ -147,7 +147,7 @@ $(document).ready(function(){
 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 					 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 					 <g>
-					  <title>Previous page (S-Left)</title>
+					  <title>Previous bookmark (S-Left)</title>
 					  <path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
 					 </g>
 					</svg>
@@ -158,7 +158,7 @@ $(document).ready(function(){
 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 					 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 					 <g>
-					  <title>Bookmark this page (B)</title>
+					  <title>Toggle bookmark (B)</title>
 					  <rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
 					  <path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
 					 </g>
@@ -170,7 +170,7 @@ $(document).ready(function(){
 					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 					 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 					 <g>
-					  <title>Next page (S-Right)</title>
+					  <title>Next bookmark (S-Right)</title>
 					  <path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
 					 </g>
 					</svg>
@@ -181,13 +181,13 @@ $(document).ready(function(){
 	<div class="bottom-toolbar">
 		<!-- this is just an example-->
 		<div class="controls">
-			<a href="#home">Cover</a>
-			<a href="#prevBookmark">&lt; Bookmark</a>
-			<a href="#prevArticle">&lt; Article</a>
-			<a href="#prev" alt="Previous page (Left)">&lt; Pa</a><a href="#next" alt="Next page (Right)">ge &gt;</a>
-			<a href="#nextArticle">Article &gt;</a>
-			<a href="#nextBookmark">Bookmark &gt;</a>
-			<a href="#end">End</a>
+			<a href="#home" title="(Home)">Cover</a>
+			<a href="#prevBookmark" title="(S-Left)">&lt; Bookmark</a>
+			<a href="#prevArticle" title="(C-Left)">&lt; Article</a>
+			<a href="#prev" title="Previous page (Left)">&lt; Pa</a><a href="#next" title="Next page (Right)">ge &gt;</a>
+			<a href="#nextArticle" title="(C-Right)">Article &gt;</a>
+			<a href="#nextBookmark" title="(S-Right)">Bookmark &gt;</a>
+			<a href="#end" title="(End)">End</a>
 		</div>
 		<!-- position indicator -->
 		<div class="navigator">
diff --git a/jli.js b/jli.js
index d4cc886..ff191d9 100755
--- a/jli.js
+++ b/jli.js
@@ -221,7 +221,9 @@ function toKeyName(code){
 var KEYBOARD_HANDLER_PROPAGATE = true
 
 /* Basic key format:
+ *
  * 		<key-code> : <callback>,
+ *
  * 		<key-code> : {
  * 			'default': <callback>,
  *			// a modifier can be any single modifier, like shift or a 
@@ -233,11 +235,13 @@ var KEYBOARD_HANDLER_PROPAGATE = true
  *			//	- shift
  * 			<modifer>: [...]
  * 		},
+ *
  * 		<key-code> : [
  *			// this can be any type of handler except for an alias...
  * 			<handler>, 
  * 			<doc>
  * 		],
+ *
  *		// alias...
  * 		<key-code-a> : <key-code-b>,
  *
diff --git a/magazine.js b/magazine.js
index e191ad5..6cfa8d1 100755
--- a/magazine.js
+++ b/magazine.js
@@ -30,7 +30,8 @@ var USE_REAL_PAGE_SIZES = false
 
 
 
-/*********************************************************************/
+/*********************************************************** modes ***/
+
 // toggles .dragging CSS class on the viewer while dragging is in 
 // progress.
 // NOTE: this is used mostly for styling and drag assisting...
@@ -448,6 +449,9 @@ function toggleBookmark(n){
 		var res = $('<div/>')
 			.prependTo(cur)
 			.addClass('bookmark justcreated')
+			.attr({
+				title: 'Toggle bookmark (B)'
+			})
 			.click(function(){
 				toggleBookmark(n)
 			})