#include "U8glib.h"

U8GLIB_SSD1306_128X64 u8g(U8G_I2C_OPT_DEV_0 | U8G_I2C_OPT_NO_ACK | U8G_I2C_OPT_FAST); // Fast I2C / TWI

const int MAX_LENGTH = 128;
const int MAX_WIDTH = 64;

const int ITEM_COUNT = 4;

const int ICON_LENGTH = 16;
const int ICON_WIDTH = 16;
//const int FRAME_COUNT = 8;
const int OUTLINE_LENGTH = 128;
const int OUTLINE_WIDTH = 24;
const int FONT_HEIGHT = 10;
const int SCROLLBAR_TRACK = 1;
const int SCROLLBAR_THUMB = 3;

// 'smile', 16x16px
const unsigned char SMILE_ICON [] PROGMEM = {
  0x03, 0xc0, 0x0c, 0x30, 0x10, 0x08, 0x20, 0x04, 0x40, 0x02, 0x4c, 0x32, 0x92, 0x49, 0x80, 0x01,
  0x80, 0x01, 0x80, 0x01, 0x48, 0x12, 0x44, 0x22, 0x23, 0xc4, 0x10, 0x08, 0x0c, 0x30, 0x03, 0xc0
};
// 'poker', 16x16px
const unsigned char POKER_ICON [] PROGMEM = {
  0x03, 0xc0, 0x0c, 0x30, 0x10, 0x08, 0x20, 0x04, 0x40, 0x02, 0x40, 0x02, 0x9e, 0x79, 0x80, 0x01,
  0x80, 0x01, 0x80, 0x01, 0x40, 0x02, 0x47, 0xe2, 0x20, 0x04, 0x10, 0x08, 0x0c, 0x30, 0x03, 0xc0
};
// 'sad', 16x16px
const unsigned char SAD_ICON [] PROGMEM = {
  0x03, 0xc0, 0x0c, 0x30, 0x10, 0x08, 0x20, 0x04, 0x40, 0x02, 0x40, 0x02, 0x92, 0x49, 0x8c, 0x31,
  0x80, 0x01, 0x80, 0x01, 0x43, 0xc2, 0x44, 0x22, 0x20, 0x04, 0x10, 0x08, 0x0c, 0x30, 0x03, 0xc0
};
// 'wow', 16x16px
const unsigned char WOW_ICON [] PROGMEM = {
  0x03, 0xc0, 0x0c, 0x30, 0x10, 0x08, 0x20, 0x04, 0x40, 0x02, 0x4c, 0x32, 0x92, 0x49, 0x8c, 0x31,
  0x80, 0x01, 0x81, 0x81, 0x42, 0x42, 0x44, 0x22, 0x22, 0x44, 0x11, 0x88, 0x0c, 0x30, 0x03, 0xc0
};
// 'outline', 128x24px
const unsigned char OUTLINE [] PROGMEM = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
  0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00,
  0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80,
  0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x80, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x10,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20,
  0x40, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x20,
  0x20, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x40,
  0x18, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x80,
  0x07, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfe, 0x00,
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00
};

const unsigned char* ICONS [ITEM_COUNT] = {
  SMILE_ICON,
  POKER_ICON,
  SAD_ICON,
  WOW_ICON
};

const int MAX_ITEM_NAME_LENGTH = 12;

char itemNames [ITEM_COUNT] [MAX_ITEM_NAME_LENGTH] = {
  {"SMILEY FACE"},
  {"POKER FACE"},
  {"SAD FACE"},
  {"WOW FACE"}
};

int firstItemIndex = 0;
int lastItemIndex = ITEM_COUNT - 1;

int selItem = 0;
int prevItem;
int nextItem;

int iconX = 6;
int iconY = (MAX_WIDTH / 2) - (ICON_LENGTH / 2);
int iconDistance = iconY - 2;
int labelX = iconX + ICON_LENGTH + iconX;
int labelY = (MAX_WIDTH / 2) + (FONT_HEIGHT / 2);
int labelDistance = iconY - 2;
const int UP = 2;
const int DOWN = 3;

void setup() {
  u8g.setColorIndex(1);
  pinMode(UP, INPUT_PULLUP);
  pinMode(DOWN, INPUT_PULLUP);
}

void loop() {
  if (digitalRead(DOWN) == LOW) {
    selItem++;
    if (selItem > lastItemIndex) selItem = firstItemIndex;
    delay(20);
  }
  if (digitalRead(UP) == LOW) {
    selItem--;
    if (selItem < firstItemIndex) selItem = lastItemIndex;
    delay(20);
  }

  prevItem = (selItem != firstItemIndex) ? selItem - 1 : lastItemIndex;
  nextItem = (selItem != lastItemIndex) ? selItem + 1 : firstItemIndex;
  //for (int frame = 0; frame <= FRAME_COUNT; frame++) {
    u8g.firstPage();
    do {
      u8g.drawBitmapP(iconX, iconY - iconDistance, ICON_LENGTH / 8, ICON_WIDTH, ICONS[prevItem]);
      u8g.setFont(u8g_font_7x14);
      u8g.drawStr(labelX, labelY - labelDistance, itemNames[prevItem]);

      u8g.drawBitmapP(iconX, iconY, ICON_LENGTH / 8, ICON_WIDTH, ICONS[selItem]);
      u8g.setFont(u8g_font_7x14B);
      u8g.drawStr(labelX, labelY, itemNames[selItem]);

      u8g.drawBitmapP(iconX, iconY + iconDistance, ICON_LENGTH / 8, ICON_WIDTH, ICONS[nextItem]);
      u8g.setFont(u8g_font_7x14);
      u8g.drawStr(labelX, labelY + labelDistance, itemNames[nextItem]);

      u8g.drawBitmapP(0, (MAX_WIDTH / 2) - (OUTLINE_WIDTH / 2), OUTLINE_LENGTH / 8, OUTLINE_WIDTH, OUTLINE);
      u8g.drawBox(MAX_LENGTH - SCROLLBAR_TRACK - 1, 0, SCROLLBAR_TRACK, MAX_WIDTH);
      u8g.drawBox(MAX_LENGTH - SCROLLBAR_THUMB, selItem * (MAX_WIDTH / ITEM_COUNT), SCROLLBAR_THUMB, (MAX_WIDTH / ITEM_COUNT));
    } while (u8g.nextPage());
  //}
}