5 files changed, 56 insertions, 3 deletions
diff --git a/src/gmail_selectors.ts b/src/gmail_selectors.ts
index 63f1242..337ba90 100644
--- a/src/gmail_selectors.ts
+++ b/src/gmail_selectors.ts
@@ -1,12 +1,35 @@
 export type GmailCSSClass = string;
-type GmailSelector = string;
+type GmailCSSSelector = string;
 
 export const TOOLS_PANEL: GmailCSSClass = 'bAw';
 export const SIDEBAR: GmailCSSClass = 'aeN';
 export const MESSAGE_PAGER: GmailCSSClass = 'AO';
 
-export const INDEX: GmailSelector = '.BltHke.nH.oy8Mbf[role="main"]';
-export const PAGER: GmailSelector = '.nH.g.id';
+export const INDEX: GmailCSSSelector = '.BltHke.nH.oy8Mbf[role="main"]';
+export const PAGER: GmailCSSSelector = '.nH.g.id';
+
+// export const PAGER_NEWER: GmailCSSSelector = 'div[aria-label="Newer"][role="button"]:not([aria-disabled="true"])';
+
+export const NEWER: GmailCSSSelector = 'div[aria-label="Newer"][role="button"]';
+export const OLDER: GmailCSSSelector = 'div[aria-label="Older"][role="button"]';
+
+export function PAGER_NEWER_EL(): HTMLElement {
+	return visible_element(document.querySelectorAll(NEWER)) as HTMLElement;
+};
+export function PAGER_OLDER_EL(): HTMLElement {
+	return visible_element(document.querySelectorAll(OLDER)) as HTMLElement;
+};
+
+function visible_element(elements: NodeListOf<Element>) {
+// https://stackoverflow.com/questions/13388616/firefox-query-selector-and-the-visible-pseudo-selector
+
+	elements = Array.prototype.slice.call(elements)
+		.filter(function(el, _) {
+			return el.style.display !== 'none';
+		});
+
+	return elements[0];
+};
 
 
 // Index:
diff --git a/src/index.ts b/src/index.ts
index dbb3b8a..22b720d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -7,6 +7,7 @@
 
 import style from './style';
 import sidebar from './sidebar';
+import pager from './pager';
 
 var loading_view = document.getElementById('loading');
 
@@ -17,5 +18,6 @@ var initialize = window.setInterval(function() {
 
 		style();
 		sidebar();
+		pager();
 	}
 }, 500);
diff --git a/src/key_codes.ts b/src/key_codes.ts
index 2442f3c..c9cb87e 100644
--- a/src/key_codes.ts
+++ b/src/key_codes.ts
@@ -2,6 +2,8 @@ export type KeyCode = number;
 
 var key_codes: { [index: string]: KeyCode } = {
 	SLASH: 220,
+	J: 74,
+	K: 75,
 	M: 77
 };
 
diff --git a/src/pager/index.ts b/src/pager/index.ts
new file mode 100644
index 0000000..06e3b48
--- /dev/null
+++ b/src/pager/index.ts
@@ -0,0 +1,5 @@
+import next_previous from './next_previous';
+
+export default function init(): void {
+	next_previous();
+};
diff --git a/src/pager/next_previous.ts b/src/pager/next_previous.ts
new file mode 100644
index 0000000..54a12d1
--- /dev/null
+++ b/src/pager/next_previous.ts
@@ -0,0 +1,21 @@
+import { PAGER_NEWER_EL, PAGER_OLDER_EL } from '../gmail_selectors';
+import key_codes from '../key_codes';
+
+export default function(): void {
+	/* var pager = document.querySelector(PAGER); */
+
+	// TODO: Needs to be loaded when pager becomes visible.
+	document.addEventListener('keydown', function(e: KeyboardEvent) {
+		if (e.keyCode === key_codes.J) {
+			console.log(PAGER_OLDER_EL());
+			PAGER_OLDER_EL().click();
+		}
+		else if (e.keyCode === key_codes.K) {
+			console.log(PAGER_NEWER_EL());
+			PAGER_NEWER_EL().click();
+		}
+	});
+};
+
+/* document.querySelectorAll('div[aria-label="Newer"][role="button"]') */
+/* document.querySelectorAll('div[aria-label="Older"][role="button"]') */