From 6ab3ce5505f62586beeef167fb988be3caafe8e7 Mon Sep 17 00:00:00 2001
From: "Alex A. Naanou" <alex.nanou@gmail.com>
Date: Fri, 3 May 2013 02:27:54 +0400
Subject: [PATCH] added next/prev screen-width navigation...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
---
 ui/ImageGrid.js    | 26 ++++++++++++++++++++++----
 ui/index.html      |  6 +++++-
 ui/keybindings3.js |  4 ++--
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/ui/ImageGrid.js b/ui/ImageGrid.js
index e32de333..cea33b23 100755
--- a/ui/ImageGrid.js
+++ b/ui/ImageGrid.js
@@ -43,6 +43,16 @@ function getRelativeVisualPosition(outer, inner){
 }
 
 
+function getVisibleImageSize(){
+	return $('.image').outerWidth() * getElementScale($('.ribbon-set'))
+}
+
+
+function getScreenWidthInImages(){
+	return $('.viewer').innerWidth() / getVisibleImageSize()
+}
+
+
 // NOTE: if this can't find an image if an order less, it will return 
 // 		the first image in ribbon...
 // NOTE: this might return an empty target if the ribbon is empty...
@@ -368,21 +378,29 @@ var NAV_DEFAULT = NAV_VISIBLE
 
 
 // basic navigation actions...
-function nextImage(mode){
+function nextImage(n, mode){
 	if(mode == null){
 		mode = NAV_DEFAULT
 	}
+	n = n == null ? 1 : n
 	return centerImage(
 		focusImage(
-			$('.current.image').nextAll('.image' + mode).first()))
+			$('.current.image').nextAll('.image' + mode).eq(n-1)))
 }
-function prevImage(mode){
+function prevImage(n, mode){
 	if(mode == null){
 		mode = NAV_DEFAULT
 	}
+	n = n == null ? 1 : n
 	return centerImage(
 		focusImage(
-			$('.current.image').prevAll('.image' + mode).first()))
+			$('.current.image').prevAll('.image' + mode).eq(n-1)))
+}
+function nextScreenImages(mode){
+	return nextImage(Math.round(getScreenWidthInImages()), mode)
+}
+function prevScreenImages(mode){
+	return prevImage(Math.round(getScreenWidthInImages()), mode)
 }
 function firstImage(mode){
 	if(mode == null){
diff --git a/ui/index.html b/ui/index.html
index d748da37..1c3bdc22 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -5,6 +5,11 @@
 
 <style>
 
+/* 
+* XXX move the CSS to a separate file...
+* XXX split-off styling/coloring from layout...
+*/
+
 .viewer {
 	position: relative;
 	width: 800px;
@@ -199,7 +204,6 @@
 
 <script>
 
-/*********************************************************************/
 // setup...
 $(function(){
 
diff --git a/ui/keybindings3.js b/ui/keybindings3.js
index 8b8f86db..bfcf0901 100755
--- a/ui/keybindings3.js
+++ b/ui/keybindings3.js
@@ -35,7 +35,7 @@ var KEYBOARD_CONFIG = {
 				},
 				// XXX prevScreenImages...
 				ctrl: function(){ 
-					console.log('NotImplemented: screen images back.')
+					prevScreenImages()
 				},
 				// XXX need to keep shift explicitly clear for editor...
 				/*
@@ -64,7 +64,7 @@ var KEYBOARD_CONFIG = {
 				},
 				// XXX nextScreenImages...
 				ctrl: function(){ 
-					console.log('NotImplemented: screen images forward.')
+					nextScreenImages()
 				},
 				// XXX need to keep shift explicitly clear for editor...
 				/*