diff --git a/README.md b/README.md
new file mode 100644
index 0000000..aa79f73
--- /dev/null
+++ b/README.md
@@ -0,0 +1,4 @@
+# Message Center
+
+- Groups messages from same sender.
+- Scroll through all current messages.
diff --git a/icons8-chat-room-48.png b/icons8-chat-room-48.png
new file mode 100644
index 0000000..546be72
Binary files /dev/null and b/icons8-chat-room-48.png differ
diff --git a/messagebox.lib.js b/messagebox.lib.js
index 9195ace..034393f 100644
--- a/messagebox.lib.js
+++ b/messagebox.lib.js
@@ -1,246 +1,244 @@
 {
-	let options = {
-		srcFont: "6x8",
-		titleFont: "12x20",
-		bodyFont: "6x15:2",
-		headerBgColor: g.theme.bgH,
-		headerFgColor: g.theme.fg,
-		headerHlColor: g.toColor(0, 1, 0),
-		margin: 3,	// space on sides
-		padding: 16,	// space between header and body
-		lineSpacing: 0,
-		fh: 20, // footer height - leave this much space for a footer
-	};
+  let options = {
+    srcFont: "6x8",
+    titleFont: "12x20",
+    bodyFont: "6x15:2",
+    headerBgColor: g.theme.bgH,
+    headerFgColor: g.theme.fg,
+    headerHlColor: g.toColor(0, 1, 0),
+    margin: 3,	// space on sides
+    padding: 16,	// space between header and body
+    lineSpacing: 0,
+    fh: 20, // footer height - leave this much space for a footer
+  };
 
-	let setOptions = function(opts) {
-		options = Object.assign(options, opts);
-	};
+  let setOptions = function (opts) {
+    options = Object.assign(options, opts);
+  };
 
-	let setClipRect = function (x, y, x2, y2) {
-		if (y < Bangle.appRect.y) y = Bangle.appRect.y;
-		if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
-		if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
-		if (y2 > Bangle.appRect.y2 - 10) y2 = Bangle.appRect.y2 - options.fh - 1;
-		return g.setClipRect(x, y, x2, y2);
-	};
+  let setClipRect = function (x, y, x2, y2) {
+    if (y < Bangle.appRect.y) y = Bangle.appRect.y;
+    if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
+    if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
+    if (y2 > Bangle.appRect.y2 - 10) y2 = Bangle.appRect.y2 - options.fh - 1;
+    return g.setClipRect(x, y, x2, y2);
+  };
 
-	const centerString = (str, x, y, w) => {
-		g.setFontAlign(0, 0);
-		g.drawString(str, x + (w / 2), y);
-	};
+  const centerString = (str, x, y, w) => {
+    g.setFontAlign(0, 0);
+    g.drawString(str, x + (w / 2), y);
+  };
 
-	HeaderBox = function(msg, messageRect) {
-		this.icon = require("messageicons").getImage(msg);
-		this.color = require("messageicons").getColor(msg, {default:g.theme.fg2});
-		this.im = g.imageMetrics(this.icon);
-		this.iconSize =  this.im.height;
-		this.titleW =  messageRect.w - this.iconSize;
-		this.titleLines = (() => {
-				if (msg.title) return g.setFont(options.titleFont).wrapString(msg.title, this.titleW);
-				else return "";
-			})();
-		let sw = g.stringWidth(msg.title);	// string width
-		let ew = g.stringWidth("...");	// elipsis width
-		let w = this.titleW - ew - options.margin; // max width for title
-		let cw = sw / msg.title.length; // character width - will only be an average if not a fixed width font
-		this.titleOneLine = msg.title.substr(0, Math.floor(w / cw)).concat("...");
-		this.titleLineH = g.setFont(options.titleFont).getFontHeight();
-		this.titleX = 0;
-		this.titleY = 0;
-		this.srcLineH = g.setFont(options.srcFont).getFontHeight();
-		this.srcLines = g.wrapString(msg.src, this.iconSize);
-		this.srcH = this.srcLineH * this.srcLines.length;
-		this.srcX = this.x2 - this.iconSize;
-		this.srcY = 0;
-		this.imgX = this.titleW + ((this.iconSize - this.im.width) / 2);
-		this.minH = Math.max(this.titleLineH, this.im.height) + options.padding;
-		this.maxH = Math.max(this.titleLineH * this.titleLines.length, this.im.height + this.srcH) + options.padding;
-		this.h = this.maxH;
-		this.new = msg.new ?? false;
-	}; // HeaderBox
+  HeaderBox = function (msg, messageRect) {
+    this.icon = require("messageicons").getImage(msg);
+    this.color = require("messageicons").getColor(msg, { default: g.theme.fg2 });
+    this.im = g.imageMetrics(this.icon);
+    this.iconSize = this.im.height;
+    this.titleW = messageRect.w - this.iconSize;
+    this.titleLines = (() => {
+      if (msg.title) return g.setFont(options.titleFont).wrapString(msg.title, this.titleW);
+      else return "";
+    })();
+    let sw = g.stringWidth(msg.title);	// string width
+    let ew = g.stringWidth("...");	// elipsis width
+    let w = this.titleW - ew - options.margin; // max width for title
+    let cw = sw / msg.title.length; // character width - will only be an average if not a fixed width font
+    this.titleOneLine = msg.title.substr(0, Math.floor(w / cw)).concat("...");
+    this.titleLineH = g.setFont(options.titleFont).getFontHeight();
+    this.titleX = 0;
+    this.titleY = 0;
+    this.srcLineH = g.setFont(options.srcFont).getFontHeight();
+    this.srcLines = g.wrapString(msg.src, this.iconSize);
+    this.srcH = this.srcLineH * this.srcLines.length;
+    this.srcX = this.x2 - this.iconSize;
+    this.srcY = 0;
+    this.imgX = this.titleW + ((this.iconSize - this.im.width) / 2);
+    this.minH = Math.max(this.titleLineH, this.im.height) + options.padding;
+    this.maxH = Math.max(this.titleLineH * this.titleLines.length, this.im.height + this.srcH) + options.padding;
+    this.h = this.maxH;
+    this.new = msg.new ?? false;
+  }; // HeaderBox
 
-	HeaderBox.prototype.draw = function(messageRect) {
-		//const getImgY = () => (this.h - options.padding - this.im.height + (this.h == this.maxH ? this.srcH : 0)) / 2;
-		const getImgY = () => (this.h - options.padding - (this.im.height / 2)) / 2;
-		const x = messageRect.x
-		const x2 = messageRect.x2;
-		const y = messageRect.y;
-		if (this.h < this.minH) this.h = this.minH;
-		else if (this.h > this.maxH) this.h = this.maxH;
-		let y2 = messageRect.y + this.h - 1;
-		exports.setClipRect(x, y, x2, y2);
-		g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2)
-			.setBgColor(g.theme.bg2).clearRect(x+3, y+3, x2-3, y2-3);
-		if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
-		g.setColor(options.headerFgColor)
-			.setFont(options.titleFont);
-		if (this.h > this.minH) {	// multi-line title
-			let titleY = Math.floor(((this.h + options.padding - (this.titleLineH * this.titleLines.length)) / 2) + y);
-			if (this.titleLines) {
-				for (let line of this.titleLines) {
-					centerString(line, x, titleY, this.titleW);
-					titleY += this.titleLineH;
-				}
-			}
-		} else {	// single-line title
-			const titleY = Math.floor(((this.h + options.padding - this.titleLineH) / 2) + y);
-			centerString(this.titleOneLine, x + options.margin, titleY, this.titleW);
-		}
-		// g.setFont(options.srcFont);
-		// if (this.h == this.maxH) {
-		// 	let srcY = y+4;
-		// 	for (let line of this.srcLines) {
-		// 		centerString(line, x2 - this.iconSize, srcY, this.iconSize);
-		// 		srcY += this.srcLineH;
-		// 	}
-		// }
-		g.setColor(this.color).drawImage(this.icon, x + this.imgX, y + getImgY());
-	};
+  HeaderBox.prototype.draw = function (messageRect) {
+    //const getImgY = () => (this.h - options.padding - this.im.height + (this.h == this.maxH ? this.srcH : 0)) / 2;
+    const getImgY = () => (this.h - options.padding - (this.im.height / 2)) / 2;
+    const x = messageRect.x
+    const x2 = messageRect.x2;
+    const y = messageRect.y;
+    if (this.h < this.minH) this.h = this.minH;
+    else if (this.h > this.maxH) this.h = this.maxH;
+    let y2 = messageRect.y + this.h - 1;
+    exports.setClipRect(x, y, x2, y2);
+    g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2)
+      .setBgColor(g.theme.bg2).clearRect(x + 3, y + 3, x2 - 3, y2 - 3);
+    if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
+    g.setColor(options.headerFgColor)
+      .setFont(options.titleFont);
+    if (this.h > this.minH) {	// multi-line title
+      let titleY = Math.floor(((this.h + options.padding - (this.titleLineH * this.titleLines.length)) / 2) + y);
+      if (this.titleLines) {
+        for (let line of this.titleLines) {
+          centerString(line, x, titleY, this.titleW);
+          titleY += this.titleLineH;
+        }
+      }
+    } else {	// single-line title
+      const titleY = Math.floor(((this.h + options.padding - this.titleLineH) / 2) + y);
+      centerString(this.titleOneLine, x + options.margin, titleY, this.titleW);
+    }
+    // g.setFont(options.srcFont);
+    // if (this.h == this.maxH) {
+    // 	let srcY = y+4;
+    // 	for (let line of this.srcLines) {
+    // 		centerString(line, x2 - this.iconSize, srcY, this.iconSize);
+    // 		srcY += this.srcLineH;
+    // 	}
+    // }
+    g.setColor(this.color).drawImage(this.icon, x + this.imgX, y + getImgY());
+  };
 
-	const TextBox = function(msgGroup, messageRect) {
-		this.messageGroup = msgGroup;
-		this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + options.lineSpacing;
-		this.messages = new Array(this.messageGroup.length);
-		this.numLines = 0;
-		let mnum = 0;
-		for (msg of this.messageGroup.bodies) {
-			this.messages[mnum] = g.wrapString(msg, messageRect.w - options.margin);
-			this.numLines += this.messages[mnum].length;
-			mnum++;
-		}
-		this.scrollY = 0;
-		console.log("options.fh: ", options.fh);
-		console.log("lineH: ", this.lineH);
-		console.log("numLines", this.numLines);
-		console.log("messageRect.y2", messageRect.y2);
-		this.minY = (messageRect.y2 - options.fh - (this.lineH * (this.numLines)));	// can't for the life of me figure out why I'm having to +1 the num of lines
-		console.log("minY", this.minY);
-		if (this.minY > 0) this.minY = 0;
-	}; // TextBox
+  const TextBox = function (msgGroup, messageRect) {
+    this.messageGroup = msgGroup;
+    this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + options.lineSpacing;
+    this.messages = new Array(this.messageGroup.length);
+    this.numLines = 0;
+    let mnum = 0;
+    for (msg of this.messageGroup.bodies) {
+      this.messages[mnum] = {
+        msg: g.wrapString(msg, messageRect.w - options.margin),
+        offset: this.numLines * this.lineH
+      }
+      this.numLines += this.messages[mnum].msg.length;
+      mnum++;
+    }
+    this.scrollY = 0;
+    this.minY = (messageRect.y2 - options.fh - (this.lineH * (this.numLines)));	// can't for the life of me figure out why I'm having to +1 the num of lines
+    if (this.minY > 0) this.minY = 0;
+  }; // TextBox
 
-	TextBox.prototype.draw = function(messageRect, yOffset) {
-		x = messageRect.x;
-		y = messageRect.y + yOffset;
-		x2 = messageRect.x2;
-		y2 = messageRect.y2;
-		exports.setClipRect(x, y, x2, y2);
-		g.setColor(g.theme.fg).setBgColor(g.theme.bg)
-			.clearRect(x, y, x2, y2)
-			.setFont(options.bodyFont).setFontAlign(-1, -1);
-		let lineY = this.scrollY;
-		for (msgNum in this.messages) {
-				g.drawLine(x2-20, y+lineY-5, x2, y+lineY-10)
-					.drawLine(x2-20, y+lineY-5, x2, y+lineY);
-				//.drawLine(x, y+lineY, x, y+(this.lineH*this.messages[msgNum].length));
-			for (let line of this.messages[msgNum]) {
-				if (y + lineY >= y - this.lineH) g.drawString(line, x + options.margin, y + lineY);
-				lineY += this.lineH;
-			}
-			g.drawLine(x+20, y+lineY-5, x, y+lineY-10)
-				.drawLine(x+20, y+lineY-5, x, y+lineY);
-		}
-	};
+  TextBox.prototype.draw = function (messageRect, yOffset) {
+    x = messageRect.x;
+    y = messageRect.y + yOffset;
+    x2 = messageRect.x2;
+    y2 = messageRect.y2;
+    exports.setClipRect(x, y, x2, y2);
+    g.setColor(g.theme.fg).setBgColor(g.theme.bg)
+      .clearRect(x, y, x2, y2)
+      .setFont(options.bodyFont).setFontAlign(-1, -1);
+    let lineY = this.scrollY;
+    for (msgNum in this.messages) {
+      g.drawLine(x2 - 20, y + lineY - 5, x2, y + lineY - 10)
+        .drawLine(x2 - 20, y + lineY - 5, x2, y + lineY);
+      //.drawLine(x, y+lineY, x, y+(this.lineH*this.messages[msgNum].length));
+      for (let line of this.messages[msgNum].msg) {
+        if (y + lineY >= y - this.lineH) g.drawString(line, x + options.margin, y + lineY);
+        lineY += this.lineH;
+      }
+      g.drawLine(x + 20, y + lineY - 5, x, y + lineY - 10)
+        .drawLine(x + 20, y + lineY - 5, x, y + lineY);
+    }
+  };
 
-	MessageBox = function(msgGroup, yOffset) {
-		this.messageGroup = msgGroup;
-		//if (!Array.isArray(msgGroup)) msgGroup = [msgGroup];	// make sure we have an array
-		this.yOffset = yOffset ??  0;
-		this.xOffset = 0;
-		this.rect = {
-			w: Bangle.appRect.w,
-			h: Bangle.appRect.h,
-			x: Bangle.appRect.x + this.xOffset,
-			y: Bangle.appRect.y + this.yOffset,
-			x2: Bangle.appRect.x2 + this.xOffset,
-			y2: Bangle.appRect.y2 + this.yOffset
-		};
-		this.headerBox = new HeaderBox(msgGroup, this.rect);
-		this.textBox = new TextBox(msgGroup, this.rect);
-		let messageH = this.numLines * this.textBox.lineH;
-		let boxH = this.rect.h - this.headerBox.maxH - options.fh;
-		if (messageH <= boxH) this.oneScreen = true;
-		else this.oneScreen = false;
-		this.top = true;
-		if (this.oneScreen) {
-			this.bottom = true;
-			this.textBox.initScrollY = Math.round((boxH - messageH) / 2);
-		} else {
-			this.bottom = false;
-			this.textBox.initScrollY = 0;
-		}
-		this.textBox.scrollY = this.textBox.initScrollY;
-		this.sbH = this.rect.h / messageH * this.rect.h; // scrollbar height
-		this.sbRatio = (this.rect.h - this.sbH) / Math.abs(this.textBox.minY);	// scrollbar ratio
-	}; // MessageBox
+  MessageBox = function (msgGroup, yOffset) {
+    this.messageGroup = msgGroup;
+    //if (!Array.isArray(msgGroup)) msgGroup = [msgGroup];	// make sure we have an array
+    this.yOffset = yOffset ?? 0;
+    this.xOffset = 0;
+    this.rect = {
+      w: Bangle.appRect.w,
+      h: Bangle.appRect.h,
+      x: Bangle.appRect.x + this.xOffset,
+      y: Bangle.appRect.y + this.yOffset,
+      x2: Bangle.appRect.x2 + this.xOffset,
+      y2: Bangle.appRect.y2 + this.yOffset
+    };
+    this.headerBox = new HeaderBox(msgGroup, this.rect);
+    this.textBox = new TextBox(msgGroup, this.rect);
+    let messageH = this.numLines * this.textBox.lineH;
+    let boxH = this.rect.h - this.headerBox.maxH - options.fh;
+    if (messageH <= boxH) this.oneScreen = true;
+    else this.oneScreen = false;
+    this.top = true;
+    if (this.oneScreen) {
+      this.bottom = true;
+      this.textBox.initScrollY = Math.round((boxH - messageH) / 2);
+    } else {
+      this.bottom = false;
+      this.textBox.initScrollY = 0;
+    }
+    this.textBox.scrollY = this.textBox.initScrollY;
+    this.sbH = this.rect.h / messageH * this.rect.h; // scrollbar height
+    this.sbRatio = (this.rect.h - this.sbH) / Math.abs(this.textBox.minY);	// scrollbar ratio
+  }; // MessageBox
 
-	MessageBox.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h;
-	MessageBox.prototype.nextOffset = Bangle.appRect.y2 + 1;
+  MessageBox.prototype.prevOffset = Bangle.appRect.y - Bangle.appRect.h;
+  MessageBox.prototype.nextOffset = Bangle.appRect.y2 + 1;
 
-	MessageBox.prototype.setNew = function() {
-		this.headerBox.new = true;
-	}
+  MessageBox.prototype.setNew = function () {
+    this.headerBox.new = true;
+  }
 
-	MessageBox.prototype.clearNew = function() {
-		this.headerBox.new = false;
-	}
+  MessageBox.prototype.clearNew = function () {
+    this.headerBox.new = false;
+  }
 
-	MessageBox.prototype.reset = function(yOffset) {
-		if (!yOffset) yOffset = 0;
-		this.yOffset = yOffset;
-		this.headerBox.h = this.headerBox.maxH;
-		this.textBox.scrollY = this.textBox.initScrollY;
-		this.top = true;
-		if (this.oneScreen) this.bottom = true;
-		else this.bottom = false;
-	};
+  MessageBox.prototype.reset = function (yOffset) {
+    if (!yOffset) yOffset = 0;
+    this.yOffset = yOffset;
+    this.headerBox.h = this.headerBox.maxH;
+    this.textBox.scrollY = this.textBox.initScrollY;
+    this.top = true;
+    if (this.oneScreen) this.bottom = true;
+    else this.bottom = false;
+  };
 
-	MessageBox.prototype.draw = function() {
-		this.rect.x = Bangle.appRect.x + this.xOffset;
-		this.rect.x2 = Bangle.appRect.x2 + this.xOffset;
-		this.rect.y = Bangle.appRect.y + this.yOffset;
-		this.rect.y2 = Bangle.appRect.y2 + this.yOffset;
-		exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
-		g.clearRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
-		this.headerBox.draw(this.rect);
-		this.textBox.draw(this.rect, this.headerBox.h);
-		exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
-		this.drawScrollbar();
-	};
+  MessageBox.prototype.draw = function () {
+    this.rect.x = Bangle.appRect.x + this.xOffset;
+    this.rect.x2 = Bangle.appRect.x2 + this.xOffset;
+    this.rect.y = Bangle.appRect.y + this.yOffset;
+    this.rect.y2 = Bangle.appRect.y2 + this.yOffset;
+    exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
+    g.clearRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
+    this.headerBox.draw(this.rect);
+    this.textBox.draw(this.rect, this.headerBox.h);
+    exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
+    this.drawScrollbar();
+  };
 
-	MessageBox.prototype.drawScrollbar = function() {
-		if (this.oneScreen) return;
-		let sbY = this.rect.y + (this.sbRatio * Math.abs(this.textBox.scrollY));
-		g.setColor(g.theme.fg).drawLine(this.rect.x, sbY, this.rect.x, sbY + this.sbH);
-	};
+  MessageBox.prototype.drawScrollbar = function () {
+    if (this.oneScreen) return;
+    let sbY = this.rect.y + (this.sbRatio * Math.abs(this.textBox.scrollY));
+    g.setColor(g.theme.fg).drawLine(this.rect.x, sbY, this.rect.x, sbY + this.sbH);
+  };
 
-	MessageBox.prototype.scroll = function(dy) {
-		if (this.oneScreen) return;
-		if (this.headerBox.h > this.headerBox.minH && dy < 0) {
-			this.headerBox.h += dy;
-			if (this.headerBox.h < this.headerBox.minH) this.headerBox.h = this.headerBox.minH;
-		} else if (this.headerBox.h < this.headerBox.maxH && dy > 0) {
-			this.headerBox.h += dy;
-			if (this.headerBox.h > this.headerBox.maxH) this.headerBox.h = this.headerBox.maxH;
-		}
-		if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
-		else if (dy > 0) this.textBox.scrollY += dy;
-		if (this.textBox.scrollY <= this.textBox.minY - this.headerBox.h) {
-			this.bottom = true;
-			this.textBox.scrollY = this.textBox.minY - this.headerBox.h;
-		} else {
-			this.bottom = false;
-		}
-		if (this.textBox.scrollY >= 0 && this.headerBox.h == this.headerBox.maxH) {
-			this.top = true;
-			this.textBox.scrollY = this.textBox.initScrollY;
-		} else {
-			this.top = false;
-		}
-		this.draw();
-	};
+  MessageBox.prototype.scroll = function (dy) {
+    if (this.oneScreen) return;
+    if (this.headerBox.h > this.headerBox.minH && dy < 0) {
+      this.headerBox.h += dy;
+      if (this.headerBox.h < this.headerBox.minH) this.headerBox.h = this.headerBox.minH;
+    } else if (this.headerBox.h < this.headerBox.maxH && dy > 0) {
+      this.headerBox.h += dy;
+      if (this.headerBox.h > this.headerBox.maxH) this.headerBox.h = this.headerBox.maxH;
+    }
+    if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
+    else if (dy > 0) this.textBox.scrollY += dy;
+    if (this.textBox.scrollY <= this.textBox.minY - this.headerBox.h) {
+      this.bottom = true;
+      this.textBox.scrollY = this.textBox.minY - this.headerBox.h;
+    } else {
+      this.bottom = false;
+    }
+    if (this.textBox.scrollY >= 0 && this.headerBox.h == this.headerBox.maxH) {
+      this.top = true;
+      this.textBox.scrollY = this.textBox.initScrollY;
+    } else {
+      this.top = false;
+    }
+    this.draw();
+  };
 
-	module.exports.HeaderBox = HeaderBox;
-	module.exports.MessageBox = MessageBox;
-	module.exports.setOptions = setOptions;
-	module.exports.setClipRect = setClipRect;
+  module.exports.HeaderBox = HeaderBox;
+  module.exports.MessageBox = MessageBox;
+  module.exports.setOptions = setOptions;
+  module.exports.setClipRect = setClipRect;
 };
diff --git a/messagecenter.app.js b/messagecenter.app.js
index f600b31..fcc50a0 100644
--- a/messagecenter.app.js
+++ b/messagecenter.app.js
@@ -1,20 +1,20 @@
 //{
 
-	// let settings = require('Storage').readJSON("messages.settings.json", true) || {};
-	// let settings = () => require("messagegui").settings();
-  // let fontTiny = "6x8"; // fixed size, don't use this for important things
-  // let fontNormal;
-  // setFont() is also called after we close the settings screen
-  // let setFont = function() {
-  //   let fontSize = settings().fontSize;
-  //   if (fontSize===0) // small
-  //     fontNormal = g.getFonts().includes("6x15") ? "6x15" : "6x8:2";
-  //   else if (fontSize===2) // large
-  //     fontNormal = g.getFonts().includes("6x15") ? "6x15:2" : "6x8:4";
-  //   else // medium
-  //     fontNormal = g.getFonts().includes("12x20") ? "12x20" : "6x8:3";
-  // };
-  // setFont();
+// let settings = require('Storage').readJSON("messages.settings.json", true) || {};
+// let settings = () => require("messagegui").settings();
+// let fontTiny = "6x8"; // fixed size, don't use this for important things
+// let fontNormal;
+// setFont() is also called after we close the settings screen
+// let setFont = function() {
+//   let fontSize = settings().fontSize;
+//   if (fontSize===0) // small
+//     fontNormal = g.getFonts().includes("6x15") ? "6x15" : "6x8:2";
+//   else if (fontSize===2) // large
+//     fontNormal = g.getFonts().includes("6x15") ? "6x15:2" : "6x8:4";
+//   else // medium
+//     fontNormal = g.getFonts().includes("12x20") ? "12x20" : "6x8:3";
+// };
+// setFont();
 
 let haveNewMessage = false;
 let active;
@@ -31,688 +31,681 @@ let map;
 let music;
 
 let setListener = function(event, callback) {
-	if (!event || !callback) return;
-	events[event] = callback;
-	Bangle.on(event, events[event]);
+  if (!event || !callback) return;
+  events[event] = callback;
+  Bangle.on(event, events[event]);
 };
 
 let cleanup = function() {
-	for (let e in events) if (e) Bangle.removeListener(e, events[e]);
-	console.log(timeouts);
-	for (let t in timeouts) clearTimeout(timeouts[t]);
-	require("messages").stopBuzz();
-	require("widget_utils").show();
+  for (let e in events) if (e) Bangle.removeListener(e, events[e]);
+  console.log(timeouts);
+  for (let t in timeouts) clearTimeout(timeouts[t]);
+  require("messages").stopBuzz();
+  require("widget_utils").show();
 };
 
 let clearTimeouts = function() {
-	for (let t in timeouts) clearTimeout(timeouts[t]);
+  for (let t in timeouts) clearTimeout(timeouts[t]);
 };
 
 let setActive = function(newActive) {
-	if (!newActive) return;
-	if (active && !previous.includes(active) && newActive !== active) previous.push(active);
-	active = newActive;
+  if (!newActive) return;
+  if (active && !previous.includes(active) && newActive !== active) previous.push(active);
+  active = newActive;
 }
 
 let setBusy = function(busy) {
-	if (busy) {
-		idle = false;
-		if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
-		timeouts["idleTimer"] = undefined;
-	} else {
-		const idleTime = 250;	// how much time without interaction before we are considered idle
-		if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
-		timeouts["idleTimer"] = setTimeout(() => {
-			idle = true;
-			Bangle.emit("idle");
-		}, idleTime);
-	}
+  if (busy) {
+    idle = false;
+    if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
+    timeouts["idleTimer"] = undefined;
+  } else {
+    const idleTime = 250;	// how much time without interaction before we are considered idle
+    if (timeouts["idleTimer"]) clearTimeout(timeouts["idleTimer"]);
+    timeouts["idleTimer"] = setTimeout(() => {
+      idle = true;
+      Bangle.emit("idle");
+    }, idleTime);
+  }
 };
 
 let goBack = function(timedOut) {
-	setBusy(false);
-	if (buzzing) require("messages").stopBuzz();
-	let backTo;
-	if (previous && previous.length) {
-		backTo = previous.pop();
-		clearTimeouts();
-	} else {
-		if (!timedOut) Bangle.MESSAGES.forEach((m) => {
-			if (m.new) delete m.new;
-			if (m.show) delete m.show;
-		});
-		require("messages").write(Bangle.MESSAGES);
-		Bangle.setUI({mode: "custom", remove: cleanup});
-		Bangle.showClock();
-	}
-	switch (backTo) {
-		case "call": return showCall();
-		case "map": return showMap();
-		case "music": return showMusic();
-		case "alarm": return showAlarm();
-		case "text": return showText(Bangle.MESSAGES, textGid);
-	}
+  setBusy(false);
+  if (buzzing) require("messages").stopBuzz();
+  let backTo;
+  if (previous && previous.length) {
+    backTo = previous.pop();
+    clearTimeouts();
+  } else {
+    if (!timedOut) Bangle.MESSAGES.forEach((m) => {
+      if (m.new) delete m.new;
+      if (m.show) delete m.show;
+    });
+    require("messages").write(Bangle.MESSAGES);
+    Bangle.setUI({ mode: "custom", remove: cleanup });
+    Bangle.showClock();
+  }
+  switch (backTo) {
+    case "call": return showCall();
+    case "map": return showMap();
+    case "music": return showMusic();
+    case "alarm": return showAlarm();
+    case "text": return showText(Bangle.MESSAGES, textGid);
+  }
 }; // goBack
 
 let filterMessages = function() {
-	call = Bangle.MESSAGES.find(m => m.type === "call");
-	alarm = Bangle.MESSAGES.find(m => m.type === "alarm");
-	map = Bangle.MESSAGES.find(m => m.type === "map");
-	music = Bangle.MESSAGES.find(m => m.type === "music");
-	Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.type === "text");
-	// let newUnhandledTexts = Bangle.MESSAGES.filter(m => m.new && !m.handled);
-	// let newHandledTexts = Bangle.MESSAGES.filter(m => m.new && m.handled);
-	// let otherTexts = Bangle.MESSAGES.filter(m => !m.new && m.show);
-	// Bangle.MESSAGES = [].concat(newUnhandledTexts, newHandledTexts, otherTexts);
+  call = Bangle.MESSAGES.find(m => m.type === "call");
+  alarm = Bangle.MESSAGES.find(m => m.type === "alarm");
+  map = Bangle.MESSAGES.find(m => m.type === "map");
+  music = Bangle.MESSAGES.find(m => m.type === "music");
+  Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.type === "text");
+  // let newUnhandledTexts = Bangle.MESSAGES.filter(m => m.new && !m.handled);
+  // let newHandledTexts = Bangle.MESSAGES.filter(m => m.new && m.handled);
+  // let otherTexts = Bangle.MESSAGES.filter(m => !m.new && m.show);
+  // Bangle.MESSAGES = [].concat(newUnhandledTexts, newHandledTexts, otherTexts);
 };
 
 let showNoMessages = function() {
-	g.reset().clear()
-		.setFont("12x20").setFontAlign(0,0)
-		.drawString("No Messages!", Bangle.appRect.x + (Bangle.appRect.w / 2), Bangle.appRect.y + (Bangle.appRect.h / 2));
+  g.reset().clear()
+    .setFont("12x20").setFontAlign(0, 0)
+    .drawString("No Messages!", Bangle.appRect.x + (Bangle.appRect.w / 2), Bangle.appRect.y + (Bangle.appRect.h / 2));
 
-	Bangle.setUI({
-		mode: "custom",
-		btn: _e => goBack(),
-		//remove: cleanup
-	});
+  Bangle.setUI({
+    mode: "custom",
+    btn: _e => goBack(),
+    //remove: cleanup
+  });
 
-	goBack();
+  goBack();
 };
 
 let showMessage = function(textGid) {
-	if (call) {setActive("call"); return showCall();}
-	else if (alarm) {setActive("alarm"); return showAlarm();}
-	else if (map) {setActive("map"); return showMap();}
-	else if (music) {setActive("music"); return showMusic();}
-	else if (Bangle.MESSAGES && Bangle.MESSAGES.length){
-			Bangle.MESSAGES.every(m => m.handled = true); // set all text messages as handled
-			setActive("text");
-			return showText(Bangle.MESSAGES, textGid);
-	}
-	else goBack();
+  if (call) { setActive("call"); return showCall(); }
+  else if (alarm) { setActive("alarm"); return showAlarm(); }
+  else if (map) { setActive("map"); return showMap(); }
+  else if (music) { setActive("music"); return showMusic(); }
+  else if (Bangle.MESSAGES && Bangle.MESSAGES.length) {
+    Bangle.MESSAGES.every(m => m.handled = true); // set all text messages as handled
+    setActive("text");
+    return showText(Bangle.MESSAGES, textGid);
+  }
+  else goBack();
 };
 
 let showMusic = function() {
-	active = "music";
+  active = "music";
 
-	Bangle.setUI({
-		mode: "custom",
-		btn: _e => goBack(),
-		//remove: cleanup
-	});
+  Bangle.setUI({
+    mode: "custom",
+    btn: _e => goBack(),
+    //remove: cleanup
+  });
 };
 
 let showMap = function() {
-	active = "map";
+  active = "map";
 
-	Bangle.setUI({
-		mode: "custom",
-		btn: _e => goBack(),
-		//remove: cleanup
-	});
+  Bangle.setUI({
+    mode: "custom",
+    btn: _e => goBack(),
+    //remove: cleanup
+  });
 };
 
 let showAlarm = function() {
-	active = "alarm";
+  active = "alarm";
 
-	Bangle.setUI({
-		mode: "custom",
-		btn: _e => goBack(),
-		//remove: cleanup
-	});
+  Bangle.setUI({
+    mode: "custom",
+    btn: _e => goBack(),
+    //remove: cleanup
+  });
 };
 
 let showCall = function() {
-	if (!call) return goBack();
-	let incomingImg = require("heatshrink").decompress(atob("j0ewIQNgwDCnEAh0B4EAvEOgEB+F//kP4P/+E/weAgH+g8Agf4CQMH8EYgEfEYU8AYV4AQIhBAYMD8ADBg4vBgEPzwDBj/+AYM/AYV//ADCC4X/EwQiCABo="));
-	let outgoingImg = require("heatshrink").decompress(atob("j0ewIRO4ACBgeAh0Ag8AvEAh0B+F//kP4P/+E/wASB/0AjkD/EA8EH8EDgEfEwU8AYQhBgAhBFwXgAYMHGwUPzwDBj4mBgE/AYV/FQIDBC4X/EwQiCABoA=="));
-	let ringingImg = require("heatshrink").decompress(atob("mUywIlimAFEhgFEgYSF4AWEAIYWBAIYWBAIcAsAYBgOAgEYCwQJBBwIWBHIXAA4YSC4EGAoICCDwQ8DAQUgAQMQVtsD///AoU/AoIGCv5BBh/4gF+B4UfwF4Dgd4nAFDg8cB4P/8EA9gFC/wgBBwIzBwEDSQaOB+BzCRAM8SQSQBDAKSCTAPADwMAGoPwh4eBg+An0/SQX/jv/TwUH/wlBAAQkBADwA="));
-	let leftImg = require("heatshrink").decompress(atob("mEwwJC/AAkBgEQAoUDwE4AoUHwF4AoUPgHwAoUegPgAoU8gfAAoV4DAIFC+AYBFwXgjwuD4E8FygFFCIodFFIo1FIIpNGLIowSRIiVFAH4A="));
+  if (!call) return goBack();
+  let incomingImg = require("heatshrink").decompress(atob("j0ewIQNgwDCnEAh0B4EAvEOgEB+F//kP4P/+E/weAgH+g8Agf4CQMH8EYgEfEYU8AYV4AQIhBAYMD8ADBg4vBgEPzwDBj/+AYM/AYV//ADCC4X/EwQiCABo="));
+  let outgoingImg = require("heatshrink").decompress(atob("j0ewIRO4ACBgeAh0Ag8AvEAh0B+F//kP4P/+E/wASB/0AjkD/EA8EH8EDgEfEwU8AYQhBgAhBFwXgAYMHGwUPzwDBj4mBgE/AYV/FQIDBC4X/EwQiCABoA=="));
+  let ringingImg = require("heatshrink").decompress(atob("mUywIlimAFEhgFEgYSF4AWEAIYWBAIYWBAIcAsAYBgOAgEYCwQJBBwIWBHIXAA4YSC4EGAoICCDwQ8DAQUgAQMQVtsD///AoU/AoIGCv5BBh/4gF+B4UfwF4Dgd4nAFDg8cB4P/8EA9gFC/wgBBwIzBwEDSQaOB+BzCRAM8SQSQBDAKSCTAPADwMAGoPwh4eBg+An0/SQX/jv/TwUH/wlBAAQkBADwA="));
+  let leftImg = require("heatshrink").decompress(atob("mEwwJC/AAkBgEQAoUDwE4AoUHwF4AoUPgHwAoUegPgAoU8gfAAoV4DAIFC+AYBFwXgjwuD4E8FygFFCIodFFIo1FIIpNGLIowSRIiVFAH4A="));
   let rightImg = require("heatshrink").decompress(atob("mEwwJC/AAcIgGAAoUcgPAAoUegPgAoUPgHwAoUHwF4AoUD4E8AoQWBjwqD+AZBAAV4DIIFCngZBGCgFFCIodFFIo1FIIhNFLIouRRIqVFAH8AA=="));
-	Bangle.setUI();	// clear from previous
-	g.reset().clear();
-	msg = call;
-	delete msg.new;
-	if (!msg.name) {
-		let pn = msg.number.replaceAll(/\D/, "");		// remove any non digit characters
-		msg.title = `${pn.slice(-10, -7)}-${pn.slice(-7,-4)}-${pn.slice(-4)}`;
-	}
-	let cmd = msg.cmd;
+  Bangle.setUI();	// clear from previous
+  g.reset().clear();
+  msg = call;
+  delete msg.new;
+  if (!msg.name) {
+    let pn = msg.number.replaceAll(/\D/, "");		// remove any non digit characters
+    msg.title = `${pn.slice(-10, -7)}-${pn.slice(-7, -4)}-${pn.slice(-4)}`;
+  }
+  let cmd = msg.cmd;
 
-	let HeaderBox = require("messagebox").HeaderBox;
-	let headerBox = new HeaderBox(msg, Bangle.appRect);
-	let x = Bangle.appRect.x, y = Bangle.appRect.y + headerBox.h, x2 = Bangle.appRect.x2, y2 = Bangle.appRect.y2;
-	let mx = (x + x2) / 2;
-	headerBox.draw(Bangle.appRect);
-	g.reset();
+  let HeaderBox = require("messagebox").HeaderBox;
+  let headerBox = new HeaderBox(msg, Bangle.appRect);
+  let x = Bangle.appRect.x, y = Bangle.appRect.y + headerBox.h, x2 = Bangle.appRect.x2, y2 = Bangle.appRect.y2;
+  let mx = (x + x2) / 2;
+  headerBox.draw(Bangle.appRect);
+  g.reset();
 
-	let drawAcceptArrow = function(xOffset) {
-		xOffset = xOffset??0;
-		imgX = x + 2 + xOffset;
-		g.setColor(0, 1, 0)
-			.drawImage(rightImg, imgX, y2-50);
-	};
+  let drawAcceptArrow = function(xOffset) {
+    xOffset = xOffset ?? 0;
+    imgX = x + 2 + xOffset;
+    g.setColor(0, 1, 0)
+      .drawImage(rightImg, imgX, y2 - 50);
+  };
 
-	let drawRejectArrow = function(xOffset) {
-		xOffset = xOffset??0;
-		let imgX = x2 - 50 - xOffset;
-		g.setColor(1, 0.25, 0.25)
-			.drawImage(leftImg, imgX, y2-50);
-	};
+  let drawRejectArrow = function(xOffset) {
+    xOffset = xOffset ?? 0;
+    let imgX = x2 - 50 - xOffset;
+    g.setColor(1, 0.25, 0.25)
+      .drawImage(leftImg, imgX, y2 - 50);
+  };
 
-	if (cmd === "end") {
-		if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
-		g.setColor(g.theme.fg).setFont("Vector:25").setFontAlign(0, -1);
-		if (Bangle.elapsedString) {
-			let elapsedString = Bangle.elapsedString;
-			delete Bangle.elapsedString;
-			g.drawString(elapsedString, mx, y+25)
-				.drawString("Call Ended", mx, y);
-		} else {
-			g.drawString("Missed Call", mx, y);
-		}
-		let done = new Promise((resolve, _reject) => {
-			setTimeout(() => {resolve();}, 5000);
-		});
-		done.then(() => {
-			call = undefined;
-			goBack();
-		});
-	}
-	if (cmd === "incoming") {
-		drawRejectArrow();
-		drawAcceptArrow();
-		g.setColor(0,1,0)
-			.drawImage(ringingImg, mx-25, y+15);
-	}
-	if (cmd === "start" || cmd === "outgoing") {
-		drawRejectArrow();
-		startTime = parseInt(Date.now()/1000);
-		g.setColor(g.theme.fg)
-			.drawImage(cmd === "start" ? incomingImg : outgoingImg, x+10, y+20);
-		let timer = () => {
-			g.clearRect(mx-45, y+20, mx+70, y+50);
-			elapsed = parseInt(Date.now()/1000) - startTime;
-			let h = ("0" + Math.floor((elapsed/3600)%60)).slice(-2);
-			let m = ("0" + Math.floor((elapsed/60)%60)).slice(-2);
-			let s = ("0" + Math.floor(elapsed%60)).slice(-2);
-			Bangle.elapsedString = `${h}:${m}:${s}`;
-			g.setFont("Vector:25").setFontAlign(0, -1).drawString(Bangle.elapsedString, mx + 15, y+25);
-			timeouts["timer"] = setTimeout(timer, 1000);
-		};
-		timer();
-	}
+  if (cmd === "end") {
+    if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
+    g.setColor(g.theme.fg).setFont("Vector:25").setFontAlign(0, -1);
+    if (Bangle.elapsedString) {
+      let elapsedString = Bangle.elapsedString;
+      delete Bangle.elapsedString;
+      g.drawString(elapsedString, mx, y + 25)
+        .drawString("Call Ended", mx, y);
+    } else {
+      g.drawString("Missed Call", mx, y);
+    }
+    let done = new Promise((resolve, _reject) => {
+      setTimeout(() => { resolve(); }, 5000);
+    });
+    done.then(() => {
+      call = undefined;
+      goBack();
+    });
+  }
+  if (cmd === "incoming") {
+    drawRejectArrow();
+    drawAcceptArrow();
+    g.setColor(0, 1, 0)
+      .drawImage(ringingImg, mx - 25, y + 15);
+  }
+  if (cmd === "start" || cmd === "outgoing") {
+    drawRejectArrow();
+    startTime = parseInt(Date.now() / 1000);
+    g.setColor(g.theme.fg)
+      .drawImage(cmd === "start" ? incomingImg : outgoingImg, x + 10, y + 20);
+    let timer = () => {
+      g.clearRect(mx - 45, y + 20, mx + 70, y + 50);
+      elapsed = parseInt(Date.now() / 1000) - startTime;
+      let h = ("0" + Math.floor((elapsed / 3600) % 60)).slice(-2);
+      let m = ("0" + Math.floor((elapsed / 60) % 60)).slice(-2);
+      let s = ("0" + Math.floor(elapsed % 60)).slice(-2);
+      Bangle.elapsedString = `${h}:${m}:${s}`;
+      g.setFont("Vector:25").setFontAlign(0, -1).drawString(Bangle.elapsedString, mx + 15, y + 25);
+      timeouts["timer"] = setTimeout(timer, 1000);
+    };
+    timer();
+  }
 
-	let handler = function(dir) {
-		if (cmd === "end") return;
-		if (dir < 0) leftHandler(dir);
-		else if (dir > 0 && cmd === "incoming") rightHandler();
-	};
+  let handler = function(dir) {
+    if (cmd === "end") return;
+    if (dir < 0) leftHandler(dir);
+    else if (dir > 0 && cmd === "incoming") rightHandler();
+  };
 
-	let leftHandler = function(dir) {
-		let xOff = 0;
-		let animate = new Promise((resolve, _reject) => {
-			let swipeAnimation = () => {
-				xOff += 30;
-				g.clearRect(x, y2-50, x2, y2);
-				drawRejectArrow(xOff);
-				if (xOff > 160) return resolve();
-				else setTimeout(swipeAnimation, 30);
-			}
-			swipeAnimation();
-		});
-		animate.then(() => {
-			if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
-			Bangle.messageResponse(msg, false);
-			goBack();
-		});
-	};
+  let leftHandler = function(dir) {
+    let xOff = 0;
+    let animate = new Promise((resolve, _reject) => {
+      let swipeAnimation = () => {
+        xOff += 30;
+        g.clearRect(x, y2 - 50, x2, y2);
+        drawRejectArrow(xOff);
+        if (xOff > 160) return resolve();
+        else setTimeout(swipeAnimation, 30);
+      }
+      swipeAnimation();
+    });
+    animate.then(() => {
+      if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
+      Bangle.messageResponse(msg, false);
+      goBack();
+    });
+  };
 
-	let rightHandler = function(dir) {
-		let xOff = 0;
-		let animate = new Promise((resolve, _reject) => {
-			let swipeAnimation = () => {
-				xOff += 30;
-				g.clearRect(x, y2-50, x2, y2);
-				drawAcceptArrow(xOff);
-				if (xOff > 160) return resolve();
-				else setTimeout(swipeAnimation, 30);
-			}
-			swipeAnimation();
-		});
-		animate.then(() => {
-			if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
-			Bangle.messageResponse(msg, true);
-			goBack();
-		});
-	};
-	Bangle.setUI({
-		mode: "custom",
-		touch: () => {if (buzzing) return require("messages").stopBuzz()},
-		swipe: handler,
-		btn: goBack,
-		//remove: cleanup
-	});
+  let rightHandler = function(dir) {
+    let xOff = 0;
+    let animate = new Promise((resolve, _reject) => {
+      let swipeAnimation = () => {
+        xOff += 30;
+        g.clearRect(x, y2 - 50, x2, y2);
+        drawAcceptArrow(xOff);
+        if (xOff > 160) return resolve();
+        else setTimeout(swipeAnimation, 30);
+      }
+      swipeAnimation();
+    });
+    animate.then(() => {
+      if (timeouts["timer"]) clearTimeout(timeouts["timer"]);
+      Bangle.messageResponse(msg, true);
+      goBack();
+    });
+  };
+  Bangle.setUI({
+    mode: "custom",
+    touch: () => { if (buzzing) return require("messages").stopBuzz() },
+    swipe: handler,
+    btn: goBack,
+    //remove: cleanup
+  });
 };
 
-// let catMessages = function(messageGroup) {
-// 	let msg = "";
-// 	let first = true;
-// 	messageGroup.forEach((m => {
-// 		msg = msg.subject ? msg.subject + "\n" : "";
-// 		msg = msg + (first ? "" : "\n>\n") + m.body;
-// 		first = false;
-// 	}));
-// 	return msg;
-// };
-
 let gid = m => m.title + m.src;		// create unique group id
 
 let groupMessages = function(messages) {
-	if (!messages || !messages.length) return [];
-	let msgs = [].concat(messages);	// don't want to mutate original
-	let messageGroups = [];
-	while (msgs.length) {
-		let currentMessage = msgs[0];
-		let mg = msgs.filter(m => gid(m) === gid(currentMessage)); // put messages into group
-		let messageGroup = Object.assign({}, currentMessage, {id: gid(currentMessage), idList: [], bodies: []});
-		for (msg of mg) {
-			messageGroup.idList.unshift(msg.id);
-			messageGroup.bodies.unshift(msg.body);
-		}
-		messageGroups.push(messageGroup);
-		msgs = msgs.filter(m => gid(m) !== gid(currentMessage));
-	}
-	return messageGroups;
+  if (!messages || !messages.length) return [];
+  let msgs = [].concat(messages);	// don't want to mutate original
+  let messageGroups = [];
+  while (msgs.length) {
+    let currentMessage = msgs[0];
+    let mg = msgs.filter(m => gid(m) === gid(currentMessage)); // put messages into group
+    let messageGroup = Object.assign({}, currentMessage, { id: gid(currentMessage), idList: [], bodies: [], new: [] });
+    for (let msg of mg) {
+      messageGroup.new.unshift(msg.new);
+      messageGroup.idList.unshift(msg.id);
+      messageGroup.bodies.unshift(msg.body);
+    }
+    messageGroups.push(messageGroup);
+    msgs = msgs.filter(m => gid(m) !== gid(currentMessage));
+  }
+  return messageGroups;
 };
 
 let findIndexById = function(messageGroups, id) {
-	return messageGroups.findIndex(groups => groups.messageGroup.some(group => group.id === id));
+  return messageGroups.findIndex(groups => groups.messageGroup.some(group => group.id === id));
 };
 
 let showText = function(messages, id) {
-	if (!messages.length) return goBack();	// no messages
-	setBusy(true);	// busy until everything is set up
-	msgGroups = groupMessages(messages);
-	textGid = textGid ?? msgGroups[0].id; // global text message group id
-	if (!id) id = textGid;
-	let messageNum = msgGroups.findIndex(mg => mg.id === id);
-	if (messageNum < 0) messageNum = 0;
-	g.reset().clear();
-	Bangle.setUI();	// make sure to clear setUI from anything previous
-	let switching = false;
-	let MessageBox = require("messagebox").MessageBox;
-	require("messagebox").setOptions({fh: 20});
-	let step = 42;
-	let delay = 30;
-	let mode = "scroll"; // one of "scroll", "next", "prev" (switch to next/prev message), "swipe" (swipe to delete or archive)
-	//	Bangle.setLocked(false);		// TODO make as option
-	//	Bangle.setLCDPower(true);	// TODO make as option
-	let msgBoxes = [];
-	let i = 0;
-	for (let msgGroup of msgGroups) {
-		msgBoxes[i] = new MessageBox(msgGroup);
-		if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
-		else if (i === messageNum) {
-			msgBoxes[i].yOffset = 0;
-			msgBoxes[i].draw();
-		}
-		else if (i === messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
-		i++;
-	}
+  if (!messages.length) return goBack();	// no messages
+  setBusy(true);	// busy until everything is set up
+  msgGroups = groupMessages(messages);
+  textGid = textGid ?? msgGroups[0].id; // global text message group id
+  if (!id) id = textGid;
+  let messageNum = msgGroups.findIndex(mg => mg.id === id);
+  if (messageNum < 0) messageNum = 0;
+  g.reset().clear();
+  Bangle.setUI();	// make sure to clear setUI from anything previous
+  let switching = false;
+  let MessageBox = require("messagebox").MessageBox;
+  require("messagebox").setOptions({ fh: 20 });
+  let step = 42;
+  let delay = 30;
+  let mode = "scroll"; // one of "scroll", "next", "prev" (switch to next/prev message), "swipe" (swipe to delete or archive)
+  //	Bangle.setLocked(false);		// TODO make as option
+  //	Bangle.setLCDPower(true);	// TODO make as option
+  let msgBoxes = [];
+  let i = 0;
+  for (let msgGroup of msgGroups) {
+    msgBoxes[i] = new MessageBox(msgGroup);
+    if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
+    else if (i === messageNum) {
+      msgBoxes[i].yOffset = 0;
+      msgBoxes[i].draw();
+    }
+    else if (i === messageNum + 1) msgBoxes[i].yOffset = MessageBox.prototype.nextOffset;
+    i++;
+  }
 
-	let drawFooter = function() {		// adapted from messagelist app
-		let fh = 20;	// footer height
-		// left hint: swipe from left for main menu
-		g.reset().setBgColor(g.theme.bg).clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
-			.setColor(g.theme.bgH).drawLine(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2-fh)
-			.setFont("6x15") // TODO make as option
-			.setFontAlign(-1, 1).setColor(0, 1, 0)		//bottom left
-			.drawString(">>",	Bangle.appRect.x + 1, Bangle.appRect.y2);
-		// center message count+hints: swipe up/down for next/prev message
-		let footer = `  ${messageNum + 1}/${msgBoxes.length}  `;
-		let	fw = g.stringWidth(footer);
-		g.setFontAlign(0, 1).setColor(g.theme.fg) // bottom center
-			.drawString(footer, Bangle.appRect.x+Bangle.appRect.w/2, Bangle.appRect.y2);
-		if (messageNum < Bangle.MESSAGES.length - 1 && msgBoxes[messageNum].bottom)
-			g.drawString("\0"+atob("CAiBAABBIhRJIhQI"),	Bangle.appRect.x+Bangle.appRect.w/2-fw/2 - 20, Bangle.appRect.y2); // v swipe to next
-		if (messageNum > 0 && msgBoxes[messageNum].top)
-			g.drawString("\0"+atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x+Bangle.appRect.w/2+fw/2 + 20, Bangle.appRect.y2); // ^ swipe to prev
-		// right hint: swipe from right for message actions
-		g.setFontAlign(1, 1).setColor(1, 0.25, 0.25) // bottom right
-			.drawString("<<", Bangle.appRect.x2 - 1, Bangle.appRect.y2)
-			.setColor(g.theme.fg);
-	};	//// drawFooter();
+  let drawFooter = function() {		// adapted from messagelist app
+    let fh = 20;	// footer height
+    // left hint: swipe from left for main menu
+    g.reset().setBgColor(g.theme.bg).clearRect(Bangle.appRect.x, Bangle.appRect.y2 - fh, Bangle.appRect.x2, Bangle.appRect.y2)
+      .setColor(g.theme.bgH).drawLine(Bangle.appRect.x, Bangle.appRect.y2 - fh, Bangle.appRect.x2, Bangle.appRect.y2 - fh)
+      .setFont("6x15") // TODO make as option
+      .setFontAlign(-1, 1).setColor(0, 1, 0)		//bottom left
+      .drawString(">>", Bangle.appRect.x + 1, Bangle.appRect.y2);
+    // center message count+hints: swipe up/down for next/prev message
+    let footer = `  ${messageNum + 1}/${msgBoxes.length}  `;
+    let fw = g.stringWidth(footer);
+    g.setFontAlign(0, 1).setColor(g.theme.fg) // bottom center
+      .drawString(footer, Bangle.appRect.x + Bangle.appRect.w / 2, Bangle.appRect.y2);
+    if (messageNum < Bangle.MESSAGES.length - 1 && msgBoxes[messageNum].bottom)
+      g.drawString("\0" + atob("CAiBAABBIhRJIhQI"), Bangle.appRect.x + Bangle.appRect.w / 2 - fw / 2 - 20, Bangle.appRect.y2); // v swipe to next
+    if (messageNum > 0 && msgBoxes[messageNum].top)
+      g.drawString("\0" + atob("CAiBABAoRJIoRIIA"), Bangle.appRect.x + Bangle.appRect.w / 2 + fw / 2 + 20, Bangle.appRect.y2); // ^ swipe to prev
+    // right hint: swipe from right for message actions
+    g.setFontAlign(1, 1).setColor(1, 0.25, 0.25) // bottom right
+      .drawString("<<", Bangle.appRect.x2 - 1, Bangle.appRect.y2)
+      .setColor(g.theme.fg);
+  };	//// drawFooter();
 
-	let refresh = function() {
-		if (messageNum >= 0 && messageNum < msgBoxes.length) {
-			msgBoxes[messageNum].reset();
-			if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
-			if (messageNum < msgBoxes.length - 1)	msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
-		}
-	};	//refresh
+  let refresh = function() {
+    if (messageNum >= 0 && messageNum < msgBoxes.length) {
+      msgBoxes[messageNum].reset();
+      if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
+      if (messageNum < msgBoxes.length - 1) msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
+    }
+  };	//refresh
 
-	let removeMessage = function() {
-		let removeAndReset = () => {
-			// TODO let id = msgBoxes[messageNum].msg.id;
-			for (let id of msgBoxes[messageNum].messageGroup.idList) {
-				let idx = Bangle.MESSAGES.findIndex(m => m.id === id);
-				Bangle.MESSAGES.splice(idx, 1); // remove from Bangle.MESSAGES
-			}
-			msgBoxes.splice(messageNum, 1);	// remove from msgBoxes
-			if (!msgBoxes.length) {
-				Bangle.setUI();
-				return goBack();	// no more messages
-			}
-			if (messageNum === msgBoxes.length) {
-				messageNum--; // we removed the last message, go to previous message
-			}
-			// otherwise messageNum is automatically the index of the next message now
-			textGid = msgBoxes[messageNum].messageGroup.id;	// update global current message id
-			refresh();
-			msgBoxes[messageNum].draw();
-			drawFooter();
-		};
+  let removeMessage = function() {
+    let removeAndReset = () => {
+      // TODO let id = msgBoxes[messageNum].msg.id;
+      for (let id of msgBoxes[messageNum].messageGroup.idList) {
+        let idx = Bangle.MESSAGES.findIndex(m => m.id === id);
+        Bangle.MESSAGES.splice(idx, 1); // remove from Bangle.MESSAGES
+      }
+      msgBoxes.splice(messageNum, 1);	// remove from msgBoxes
+      if (!msgBoxes.length) {
+        Bangle.setUI();
+        return goBack();	// no more messages
+      }
+      if (messageNum === msgBoxes.length) {
+        messageNum--; // we removed the last message, go to previous message
+      }
+      // otherwise messageNum is automatically the index of the next message now
+      textGid = msgBoxes[messageNum].messageGroup.id;	// update global current message id
+      refresh();
+      msgBoxes[messageNum].draw();
+      drawFooter();
+    };
 
-		if (messageNum < msgBoxes.length - 1) {
-			require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
-			g.setBgColor(g.theme.bg).clear();
-			toNext(true).then(() => {
-				removeAndReset();
-				switching = false;
-			});
-		} else if (messageNum > 0) {
-			require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
-			g.setBgColor(g.theme.bg).clear();
-			toPrev(true).then(() => {
-				removeAndReset();
-				switching = false;
-			});
-		} else {
-			removeAndReset();
-		}
-	};	//removeMessage
+    if (messageNum < msgBoxes.length - 1) {
+      require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
+      g.setBgColor(g.theme.bg).clear();
+      toNext(true).then(() => {
+        removeAndReset();
+        switching = false;
+      });
+    } else if (messageNum > 0) {
+      require("messagebox").setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2);
+      g.setBgColor(g.theme.bg).clear();
+      toPrev(true).then(() => {
+        removeAndReset();
+        switching = false;
+      });
+    } else {
+      removeAndReset();
+    }
+  };	//removeMessage
 
-	let dismissOnPhone = function() {
-		for (let id of msgBoxes[messageNum].messageGroup.idList) {
-			Bangle.messageResponse({id: id}, false);
-		}
-	};	//dismissOnPhone
+  let dismissOnPhone = function() {
+    for (let id of msgBoxes[messageNum].messageGroup.idList) {
+      Bangle.messageResponse({ id: id }, false);
+    }
+  };	//dismissOnPhone
 
-	let toNext = function(removeCurrent) {
-		if (removeCurrent == undefined) removeCurrent = false;
-		if (timeouts["animID"]){
-			clearTimeout(timeouts["animID"]);
-			timeouts["animID"] = undefined;
-		}
-		firstTouch = true;
-		return new Promise((resolve, _reject) => {
-			let multiplier = 1;
-			let animate = () => {
-				msgBoxes[messageNum].yOffset -= step * multiplier;
-				msgBoxes[messageNum + 1].yOffset -= step * multiplier;
-				if (msgBoxes[messageNum + 1].yOffset <= 0) {
-					if (!removeCurrent) {
-						if (messageNum < msgBoxes.length) {
-							messageNum++;
-							textGid = msgBoxes[messageNum].messageGroup.id; 	// update global message index
-							refresh();
-						}
-					}
-					msgBoxes[messageNum].draw();
-					drawFooter();
-					return resolve();
-				} else {
-					msgBoxes[messageNum].draw();
-					msgBoxes[messageNum + 1].draw();
-					drawFooter();
-					multiplier *= 2.5;
-					timeouts["animID"] = setTimeout(animate, delay);
-				}
-			};
-			animate();
-		});
-	};	//toNext
+  let toNext = function(removeCurrent) {
+    if (removeCurrent == undefined) removeCurrent = false;
+    if (timeouts["animID"]) {
+      clearTimeout(timeouts["animID"]);
+      timeouts["animID"] = undefined;
+    }
+    firstTouch = true;
+    return new Promise((resolve, _reject) => {
+      let multiplier = 1;
+      let animate = () => {
+        msgBoxes[messageNum].yOffset -= step * multiplier;
+        msgBoxes[messageNum + 1].yOffset -= step * multiplier;
+        if (msgBoxes[messageNum + 1].yOffset <= 0) {
+          if (!removeCurrent) {
+            if (messageNum < msgBoxes.length) {
+              messageNum++;
+              textGid = msgBoxes[messageNum].messageGroup.id; 	// update global message index
+              refresh();
+            }
+          }
+          msgBoxes[messageNum].draw();
+          drawFooter();
+          return resolve();
+        } else {
+          msgBoxes[messageNum].draw();
+          msgBoxes[messageNum + 1].draw();
+          drawFooter();
+          multiplier *= 2.5;
+          timeouts["animID"] = setTimeout(animate, delay);
+        }
+      };
+      animate();
+    });
+  };	//toNext
 
-	let toPrev = function(removeCurrent) {
-		if (removeCurrent == undefined) removeCurrent = false;
-		if (timeouts["animID"]){
-			clearTimeout(timeouts["animID"]);
-			timeouts["animID"] = undefined;
-		}
-		firstTouch = true;
-		return new Promise((resolve, _reject) => {
-			let multiplier = 1;
-			let animate = () => {
-				msgBoxes[messageNum].yOffset += step * multiplier;
-				msgBoxes[messageNum - 1].yOffset += step * multiplier;
-				if (msgBoxes[messageNum - 1].yOffset >= 0) {
-					if (!removeCurrent) {
-						if (messageNum > 0) {
-							messageNum--;
-							textGid = msgBoxes[messageNum].messageGroup.id;	// update global message index
-							refresh();
-						}
-					}
-					msgBoxes[messageNum].draw();
-					drawFooter();
-					return resolve();
-				} else {
-					msgBoxes[messageNum].draw();
-					msgBoxes[messageNum - 1].draw();
-					drawFooter();
-					multiplier *= 2.5;
-					timeouts["animID"] = setTimeout(animate, delay);
-				}
-			};
-			animate();
-		});
-	};	//toPrev
+  let toPrev = function(removeCurrent) {
+    if (removeCurrent == undefined) removeCurrent = false;
+    if (timeouts["animID"]) {
+      clearTimeout(timeouts["animID"]);
+      timeouts["animID"] = undefined;
+    }
+    firstTouch = true;
+    return new Promise((resolve, _reject) => {
+      let multiplier = 1;
+      let animate = () => {
+        msgBoxes[messageNum].yOffset += step * multiplier;
+        msgBoxes[messageNum - 1].yOffset += step * multiplier;
+        if (msgBoxes[messageNum - 1].yOffset >= 0) {
+          if (!removeCurrent) {
+            if (messageNum > 0) {
+              messageNum--;
+              textGid = msgBoxes[messageNum].messageGroup.id;	// update global message index
+              refresh();
+            }
+          }
+          msgBoxes[messageNum].draw();
+          drawFooter();
+          return resolve();
+        } else {
+          msgBoxes[messageNum].draw();
+          msgBoxes[messageNum - 1].draw();
+          drawFooter();
+          multiplier *= 2.5;
+          timeouts["animID"] = setTimeout(animate, delay);
+        }
+      };
+      animate();
+    });
+  };	//toPrev
 
-	let drawLeftBackground = function() {
-		//g.setBgColor(1, 0.5, 0); // red
-		g.setBgColor(g.theme.bg)
-			.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
-			.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
-			.setBgColor(g.theme.bg);
-	};	//drawLeftBackground
+  let drawLeftBackground = function() {
+    //g.setBgColor(1, 0.5, 0); // red
+    g.setBgColor(g.theme.bg)
+      .setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
+      .clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
+      .setBgColor(g.theme.bg);
+  };	//drawLeftBackground
 
-	let drawRightBackground = function() {
-		//g.setBgColor(0, 0.5, 1); // red
-		g.setBgColor(g.theme.bg)
-			.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
-			.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
-			.setBgColor(g.theme.bg);
-	};	//drawRightBackground
+  let drawRightBackground = function() {
+    //g.setBgColor(0, 0.5, 1); // red
+    g.setBgColor(g.theme.bg)
+      .setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
+      .clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
+      .setBgColor(g.theme.bg);
+  };	//drawRightBackground
 
-	let animateToLeft = function() {
-		if (timeouts["animID"]) {
-			clearTimeout(timeouts["animID"]);
-			timeouts["animID"] = undefined;
-		}
-		let multiplier = 1;
-		let endX = Bangle.appRect.x - Bangle.appRect.w; //+ (Bangle.appRect.w / 2);
-		let msgBox = msgBoxes[messageNum];
-		return new Promise((resolve, _reject) => {
-			let animate = () => {
-				msgBox.xOffset -= step * multiplier;
-				multiplier *= 2.5;
-				drawLeftBackground();
-				if (msgBox.xOffset <= endX) {
-					return resolve();
-				} else {
-					msgBox.draw();
-					drawFooter();
-					timeouts["animID"] = setTimeout(animate, delay);
-				}
-			};
-			animate();
-		});
-	};	//animateToLeft
+  let animateToLeft = function() {
+    if (timeouts["animID"]) {
+      clearTimeout(timeouts["animID"]);
+      timeouts["animID"] = undefined;
+    }
+    let multiplier = 1;
+    let endX = Bangle.appRect.x - Bangle.appRect.w; //+ (Bangle.appRect.w / 2);
+    let msgBox = msgBoxes[messageNum];
+    return new Promise((resolve, _reject) => {
+      let animate = () => {
+        msgBox.xOffset -= step * multiplier;
+        multiplier *= 2.5;
+        drawLeftBackground();
+        if (msgBox.xOffset <= endX) {
+          return resolve();
+        } else {
+          msgBox.draw();
+          drawFooter();
+          timeouts["animID"] = setTimeout(animate, delay);
+        }
+      };
+      animate();
+    });
+  };	//animateToLeft
 
-	let animateToRight = function() {
-		if (timeouts["animID"]) {
-			clearTimeout(timeouts["animID"]);
-			timeouts["animID"] = undefined;
-		}
-		let multiplier = 1;
-		let endX = Bangle.appRect.x2; // - (Bangle.appRect.w / 2);
-		let msgBox = msgBoxes[messageNum];
-		return new Promise((resolve, _reject) => {
-			let animate = () => {
-				msgBox.xOffset += step * multiplier;
-				multiplier *= 2.5;
-				drawRightBackground();
-				if (msgBox.xOffset >= endX) {
-					return resolve();
-				} else {
-					msgBox.draw();
-					drawFooter();
-					timeouts["animID"] = setTimeout(animate, delay);
-				}
-			};
-			animate();
-		});
-	};	//animateToRight
+  let animateToRight = function() {
+    if (timeouts["animID"]) {
+      clearTimeout(timeouts["animID"]);
+      timeouts["animID"] = undefined;
+    }
+    let multiplier = 1;
+    let endX = Bangle.appRect.x2; // - (Bangle.appRect.w / 2);
+    let msgBox = msgBoxes[messageNum];
+    return new Promise((resolve, _reject) => {
+      let animate = () => {
+        msgBox.xOffset += step * multiplier;
+        multiplier *= 2.5;
+        drawRightBackground();
+        if (msgBox.xOffset >= endX) {
+          return resolve();
+        } else {
+          msgBox.draw();
+          drawFooter();
+          timeouts["animID"] = setTimeout(animate, delay);
+        }
+      };
+      animate();
+    });
+  };	//animateToRight
 
-	let firstTouch = true;
-	let dragHandler = function(e) {
-		if (e.b === 0) {
-			firstTouch = true;
-			setBusy(false);
-			//checkForNewMessages();
-		}
-		if (switching) return;	// don't respond to touch while we are animating
-		if (firstTouch && e.b === 1) {
-			if (buzzing) {
-				require("messages").stopBuzz();
-				buzzing = false;
-			}
-			setBusy(true);
-			// TODO let idx = msgBoxes.findIndex(mb => mb.msg.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
-			// TODO if (idx >= 0) delete Bangle.MESSAGES[idx].new;
-			// TODO msgBoxes[messageNum].clearNew();
-			if (Math.abs(e.dy) > Math.abs(e.dx)) {
-				firstTouch = false;
-				if (e.dy > 0 && msgBoxes[messageNum].top && messageNum > 0) {
-					mode = "prev";
-				} else if (e.dy < 0 && msgBoxes[messageNum].bottom && messageNum + 1 < msgBoxes.length) { // e.dy will be < 0 here
-					mode = "next";
-				} else {
-					mode = "scroll";
-				}
-			}
-			else {
-				mode = undefined;
-				return;
-			}
-		}
-		if (mode == "scroll") scrollHandler(e);
-		else if (mode == "next") nextHandler(e);
-		else if (mode == "prev") prevHandler(e);
-	};	//dragHandler
+  let firstTouch = true;
+  let dragHandler = function(e) {
+    if (e.b === 0) {
+      firstTouch = true;
+      setBusy(false);
+      //checkForNewMessages();
+    }
+    if (switching) return;	// don't respond to touch while we are animating
+    if (firstTouch && e.b === 1) {
+      if (buzzing) {
+        require("messages").stopBuzz();
+        buzzing = false;
+      }
+      setBusy(true);
+      // TODO let idx = msgBoxes.findIndex(mb => mb.msg.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
+      // TODO if (idx >= 0) delete Bangle.MESSAGES[idx].new;
+      // TODO for (msg of msgBoxes[messageNum].m)
 
-	let nextHandler = function(e) {
-		if (e.b == 0) {
-		}
-		if (messageNum == msgBoxes.length - 1) return; // already on last message
-		switching = true;
-		toNext().then(() => {
-			switching = false;
-		});
-	};	//nextHander
 
-	let prevHandler = function(e) {
-		if (e.b == 0) {
-		}
-		if (messageNum == 0) return;  // already on first message
-		switching = true;
-		toPrev().then(() => {
-			switching = false;
-		});
-	};	//prevHandler
+      // TODO msgBoxes[messageNum].clearNew();
+      if (Math.abs(e.dy) > Math.abs(e.dx)) {
+        firstTouch = false;
+        if (e.dy > 0 && msgBoxes[messageNum].top && messageNum > 0) {
+          mode = "prev";
+        } else if (e.dy < 0 && msgBoxes[messageNum].bottom && messageNum + 1 < msgBoxes.length) { // e.dy will be < 0 here
+          mode = "next";
+        } else {
+          mode = "scroll";
+        }
+      }
+      else {
+        mode = undefined;
+        return;
+      }
+    }
+    if (mode == "scroll") scrollHandler(e);
+    else if (mode == "next") nextHandler(e);
+    else if (mode == "prev") prevHandler(e);
+  };	//dragHandler
 
-	let swipeHandler = function(dir) {
-		if (dir > 0) return rightHandler();
-		else if (dir < 0) return leftHandler();
-		else return;
-	};	//swipeHandler
+  let nextHandler = function(e) {
+    if (e.b == 0) {
+    }
+    if (messageNum == msgBoxes.length - 1) return; // already on last message
+    switching = true;
+    toNext().then(() => {
+      switching = false;
+    });
+  };	//nextHander
 
-	let leftHandler = function(e) {
-		//let msgBox = msgBoxes[messageNum];
-				switching = true;
-				animateToLeft().then(() => {
-					g.setBgColor(g.theme.bg);
-					dismissOnPhone();
-					removeMessage();
-					switching = false;
-				});
-	};	//leftHandler
+  let prevHandler = function(e) {
+    if (e.b == 0) {
+    }
+    if (messageNum == 0) return;  // already on first message
+    switching = true;
+    toPrev().then(() => {
+      switching = false;
+    });
+  };	//prevHandler
 
-	let rightHandler = function(e) {
-	//	let msgBox = msgBoxes[messageNum];
-				switching = true;
-				animateToRight().then(() => {
-					g.setBgColor(g.theme.bg);
-					removeMessage();
-					switching = false;
-				});
-	};	//rightHandler
+  let swipeHandler = function(dir) {
+    if (dir > 0) return rightHandler();
+    else if (dir < 0) return leftHandler();
+    else return;
+  };	//swipeHandler
 
-	let scrollHandler = function(e) {
-		if (e.b === 0) {
-		}
-		msgBoxes[messageNum].scroll(e.dy);
-	};	//scrollHandler
+  let leftHandler = function(e) {
+    //let msgBox = msgBoxes[messageNum];
+    switching = true;
+    animateToLeft().then(() => {
+      g.setBgColor(g.theme.bg);
+      dismissOnPhone();
+      removeMessage();
+      switching = false;
+    });
+  };	//leftHandler
 
-	msgBoxes[messageNum].draw();
-	drawFooter();
-	setBusy(false);
-	//checkForNewMessages();
-	Bangle.setUI({
-		mode: "custom",
-		drag: e => dragHandler(e),
-		swipe: dir => swipeHandler(dir),
-		btn: _e => goBack(),
-		//remove: cleanup
-	});
+  let rightHandler = function(e) {
+    //	let msgBox = msgBoxes[messageNum];
+    switching = true;
+    animateToRight().then(() => {
+      g.setBgColor(g.theme.bg);
+      removeMessage();
+      switching = false;
+    });
+  };	//rightHandler
+
+  let scrollHandler = function(e) {
+    if (e.b === 0) {
+    }
+    msgBoxes[messageNum].scroll(e.dy);
+  };	//scrollHandler
+
+  msgBoxes[messageNum].draw();
+  drawFooter();
+  setBusy(false);
+  //checkForNewMessages();
+  Bangle.setUI({
+    mode: "custom",
+    drag: e => dragHandler(e),
+    swipe: dir => swipeHandler(dir),
+    btn: _e => goBack(),
+    //remove: cleanup
+  });
 };	// showText
 
 let newMessage = (type, msg) => {
-	let handleMessage = () => {
-		//msgId = msg.id;
-		if (type === "call" && msg.t === "remove") require("messages").stopBuzz();
-		if (active === "text" && buzzing && msg.t === "remove" && msg.id === textGid) require("messages").stopBuzz(); // if the message being viewed is removed stop buzzing
-		if (type === "text" && msg.t === "remove") {	// TODO
-			let msgIdx = Bangle.MESSAGES.findIndex(m => m.id === msg.id);
-			if (Bangle.MESSAGES.length > 1) {
-				if (msgIdx === 0) msgId = Bangle.MESSAGES[msgIdx+1].id;
-				else if (msgIdx === Bangle.MESSAGES.length - 1) msgId = Bangle.MESSAGES[msgIdx-1].id;
-				else msgId = textGid;
-			} else if (Bangle.MESSAGES.length === 1) msgId = 0;
-			if (textGid === msg.id) msgId = 0;	// just removed the message we were viewing
-		}
-		require("messagegui").handleMessage(type, msg);
-		filterMessages();
-		showMessage();
-	};
-		// Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id);	// remove
-		// require("messages").write(Bangle.MESSAGES); // write removal to flash
-	if (idle) return handleMessage(); // we are idle so updated messages right away
-	else if (!idle) {
-		showMessageOnceIdle = () => {
-			handleMessage(msgId);
-			Bangle.removeAllListeners("idle");
-		}
-		return setListener("idle", showMessageOnceIdle);
-	}
+  let handleMessage = () => {
+    //msgId = msg.id;
+    if (type === "call" && msg.t === "remove") require("messages").stopBuzz();
+    if (active === "text" && buzzing && msg.t === "remove" && msg.id === textGid) require("messages").stopBuzz(); // if the message being viewed is removed stop buzzing
+    if (type === "text" && msg.t === "remove") {	// TODO
+      let msgIdx = Bangle.MESSAGES.findIndex(m => m.id === msg.id);
+      if (Bangle.MESSAGES.length > 1) {
+        if (msgIdx === 0) msgId = Bangle.MESSAGES[msgIdx + 1].id;
+        else if (msgIdx === Bangle.MESSAGES.length - 1) msgId = Bangle.MESSAGES[msgIdx - 1].id;
+        else msgId = textGid;
+      } else if (Bangle.MESSAGES.length === 1) msgId = 0;
+      if (textGid === msg.id) msgId = 0;	// just removed the message we were viewing
+    }
+    require("messagegui").handleMessage(type, msg);
+    filterMessages();
+    showMessage();
+  };
+  // Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id);	// remove
+  // require("messages").write(Bangle.MESSAGES); // write removal to flash
+  if (idle) return handleMessage(); // we are idle so updated messages right away
+  else if (!idle) {
+    showMessageOnceIdle = () => {
+      handleMessage(msgId);
+      Bangle.removeAllListeners("idle");
+    }
+    return setListener("idle", showMessageOnceIdle);
+  }
 };
 setListener("breakingnews", newMessage);
 
 // entry point
 saveMessages = function() {
-	require("messages").write(Bangle.MESSAGES);
+  require("messages").write(Bangle.MESSAGES);
 };
 setListener("kill", saveMessages);
 
@@ -720,18 +713,18 @@ Bangle.loadWidgets();
 require("widget_utils").hide();
 
 if (!Bangle.MESSAGES || !Bangle.MESSAGES.length) {
-	Bangle.MESSAGES = require("messages").getMessages();
+  Bangle.MESSAGES = require("messages").getMessages();
 }
 
 if (!Bangle.MESSAGES.length) showNoMessages();
 
 if (Bangle.notify) {	// notification arrived that opened the app. This is set in messagecenter.notify.js
-	let msg = Bangle.MESSAGES[0];
-	if (msg.t !== "delete") {
-		buzzing = true;
-		require("messages").buzz(msg.src);
-		delete Bangle.notify;
-	}
+  let msg = Bangle.MESSAGES[0];
+  if (msg.t !== "delete") {
+    buzzing = true;
+    require("messages").buzz(msg.src);
+    delete Bangle.notify;
+  }
 }
 msgId = Bangle.MESSAGES.length ? Bangle.MESSAGES[0].id : 0;
 filterMessages();
diff --git a/messagecenter.img b/messagecenter.img
new file mode 100644
index 0000000..dde9e44
--- /dev/null
+++ b/messagecenter.img
@@ -0,0 +1 @@
+atob("MDDCAP//viRSJhslAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKqqqqqqqqgAAAAACqqqqqqqqqqAAAAACqqqqqqqqqqAAAAAKqqqqqqqqqqgAAAAKqqqqqqqqqqgAAAAKqqqqqqqqqqgAAABVVVVVVVVeqqgAAAVVVVVVVVVV6qgAAAVVVVVVVVVVaqgAABVVVVVVVVVVeqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqgAABVVVVVVVVVVWqAAABVVVVVVVVVVWqAAABVVVVVVVVVVWgAAABVVVVVVVVVVUAAAABVVVVVVVVVVUAAAABVVVVVVVVVVUAAAABVVVVVVVVVVQAAAABVVVVVVVVVVQAAAABVVVVVVVVVUAAAAABVUAAAAAAAAAAAAABVQAAAAAAAAAAAAABVAAAAAAAAAAAAAABUAAAAAAAAAAAAAABQAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA")
diff --git a/messagecenter.info b/messagecenter.info
index 6c1445a..7632c55 100644
--- a/messagecenter.info
+++ b/messagecenter.info
@@ -1,5 +1,8 @@
 {
-"id": "messagecenter",
-"name": "Message Center",
-"src": "messagecenter.app.js"
+    "id":"messagecenter",
+    "name":"Message Center",
+    "type":"tool",
+    "version":"0.1",
+    "tags":"tool,system",
+    "files":"messages.info, messagebox, messagecenter.app.js, messagecenter.boot.js, messagecenter.notify.js, messagegui"
 }