int gridSizeX = 8;
int gridSizeY = 4;
String imageExtension = "jpg";
PImage grid[][] = new PImage[gridSizeX][gridSizeY];
PImage frameImg;
int curX = 0, curY = 0;
float xcoord = 0, ycoord = 0;
int scrolling = 0;
int imgWidth = 800;
int imgHeight = 600;
int panelWidth = 800;
int panelHeight = 600;
float frameWidth = 50;
int NW = 1000;
int NE = 1001;
int SW = 1002;
int SE = 1003;
float moveFactorY = 20;
float moveFactorX;
String chars[] = { "a", "b", "c", "d" };


void setup() {
  frameImg = loadImage("frame.gif");
  size(int(panelWidth), int(panelHeight));
  for (int i = 0; i < gridSizeX; i++) {
    for (int j = 0; j < gridSizeY; j++) {
      int realidx = i + 1;
      grid[i][j] = loadImage(realidx + chars[j] + "." + imageExtension);
    }
  }
  frameRate(30);
  moveFactorX = moveFactorY * ((float)panelWidth / (float)panelHeight);
}

void scrollLeft() {
  xcoord += moveFactorX;
}
void scrollRight() {
  xcoord -= moveFactorX;
}
void scrollUp() {
  ycoord += moveFactorY;
}
void scrollDown() {
  ycoord -= moveFactorY;
}

void resetCoords() {
  xcoord = 0;
  ycoord = 0;
  scrolling = 0;
}

void draw() {

  if (scrolling != 0) {

    if (scrolling == LEFT) {
      scrollLeft();
      if (xcoord > panelWidth) {
        resetCoords();
        curX = loopInc(curX, -1, gridSizeX - 1);
      }        
    }
    else if (scrolling == RIGHT) {
      scrollRight();
      if (xcoord < -panelWidth) {
        resetCoords();
        curX = loopInc(curX, 1, gridSizeX - 1);
      }
    }
    else if (scrolling == UP) {
      scrollUp();
      if (ycoord > panelHeight) {
        resetCoords();
        curY--;
      }
    }
    else if (scrolling == DOWN) {
      scrollDown();
      if (ycoord < -panelHeight) {
        resetCoords();
        curY++;
      }
    }
    else if (scrolling == NW) {
      scrollUp();
      scrollLeft();
      if (xcoord > panelWidth && ycoord > panelHeight) {
        resetCoords();
        curX = loopInc(curX, -1, gridSizeX - 1);
        curY--;
      }
    }
    else if (scrolling == NE) {
      scrollUp();
      scrollRight();
      if (xcoord < -panelWidth && ycoord > panelHeight) {
        resetCoords();
        curX = loopInc(curX, 1, gridSizeX - 1);
        curY--;
      }
    }
    else if (scrolling == SW) {
      scrollDown();
      scrollLeft();
      if (xcoord > panelWidth && ycoord < -panelHeight) {
        resetCoords();
        curX = loopInc(curX, -1, gridSizeX - 1);
        curY++;
      }

    }
    else if (scrolling == SE) {
      scrollDown();
      scrollRight();
      if (xcoord < -panelWidth && ycoord < -panelHeight) {
        resetCoords();
        curX = loopInc(curX, 1, gridSizeX - 1);
        curY++;
      }

    }
    curY = constrain(curY, 0, gridSizeY);

  }

  background(0);

  pushMatrix();
  translate(xcoord + frameWidth / 2, ycoord + frameWidth / 2);
  scale(panelWidth/float(imgWidth), panelHeight/float(imgHeight));

  for (int i = -1; i < 2; i++) {
    for (int j = -1; j < 2; j++) {
      int dispX = loopInc(curX, i, gridSizeX-1);
      int dispY = loopInc(curY, j, gridSizeY-1);
      image(grid[dispX][dispY], (imgWidth*i), (imgHeight*j));      
    }
  }
  popMatrix();

  // outer frame
  fill(255);
  noStroke();
  
  image(frameImg, 0, 0);
  
/*  rect(0, 0, width, frameWidth/2);
  rect(0, 0, frameWidth/2, height);
  rect(0, height-frameWidth/2, width, frameWidth/2);
  rect(width-frameWidth/2, 0, frameWidth/2, height); */

}

void mousePressed() {

  // upper left
  if (isBetween(mouseX, 0, width/3) && isBetween(mouseY, 0, height/3) && curY > 0) {
    println("nw");
    scrolling = NW;
  }
  // up
  else if (isBetween(mouseX, width/3, 2*(width/3)) && isBetween(mouseY, 0, height/3) && 
curY > 0) {
    println("up");
    scrolling = UP;
  }
  // upper right
  else if (isBetween(mouseX, 2*(width/3), width) && isBetween(mouseY, 0, height/3) && curY > 0) {
    println("ne");
    scrolling = NE;
  }
  // left
  else if (isBetween(mouseX, 0, width/3) && isBetween(mouseY, height/3, 2*(height/3))) {
    println("left");
    scrolling = LEFT;
  }
  // right
  else if (isBetween(mouseX, 2*(width/3), width) && isBetween(mouseY, height/3, 2*(height/
3))) {
    println("right");
    scrolling = RIGHT;
  }
  // bottom left
  else if (isBetween(mouseX, 0, width/3) && isBetween(mouseY, 2*(height/3), height) && curY 
< gridSizeY - 1) {
    println("sw");
    scrolling = SW;
  }
  // bottom
  else if (isBetween(mouseX, width/3, 2*(width/3)) && isBetween(mouseY, 2*(height/3), 
height) && curY < 
gridSizeY - 1) {
    println("down");
    scrolling = DOWN;
  }
  // bottom right
  else if (isBetween(mouseX, 2*(width/3), width) && isBetween(mouseY, 2*(height/3), height) 
&& curY < 
gridSizeY - 1) {
    println("se");
    scrolling = SE;
  }

}

void keyPressed() {

  if (scrolling != 0) {
    return;
  }
  if (keyCode == LEFT) {
    scrolling = LEFT;
  }
  else if (keyCode == RIGHT) {
    scrolling = RIGHT;
  }
  else if (keyCode == UP && curY > 0) {
    scrolling = UP;
  }
  else if (keyCode == DOWN && curY < gridSizeY - 1) {
    scrolling = DOWN;
  }

}

int loopInc(int val, int inc, int maxVal) {
  val += inc;
  if (val > maxVal) {
    val = 0;
  }
  else if (val < 0) {
    val = maxVal;
  }
  return val;
}

boolean isBetween(int val, int lower, int upper) {
  if (val > lower && val < upper) {
    return true;
  }
  else {
    return false;
  }
}