/*
  Ideas for slider:
    Set up "zones" of mouse coordinates that tell a function() or whatever
    when the mouse is at either end of the slider....
*/
int numPics = 21;
int picsDisplayed;
int mX;
int picWidth;
int picHeight;
int picMaxWidth = 600;
int picMaxHeight = int(picMaxWidth * 0.7566667);
PImage[] images = new PImage[numPics];
float slider_width;

void setup() {
  
  size( 600, 700 );
 
  picWidth = width / 3;
  picHeight = int(picWidth * 0.7566667);  
  
  slider_width = (numPics * picWidth)-width;
   
  background( 255 );
  picsDisplayed = int( (numPics * picWidth) / 100 );
  
  // load all imgaes into the array
  for(int i=0; i<numPics; i++) {
    String imageName = "0" + i + ".jpg";
    images[i] = loadImage(imageName);
  }  
  
}

void draw() {
  
  int img = 0;
  //imageMode(CENTER);
  for (int x=0; x<numPics; x++) {
    translate(x*picWidth, 0);
    if (img<numPics) {
      mX = int( map( mouseX, 0, width, 0, slider_width ) );
      image( images[img], -mX, 0, picWidth, picHeight );
      img++;
    }else{
      img = 0;
    }
    translate(-x*picWidth,0);
  }
  
  int curPic = int( map( mX, 0, slider_width, 0, numPics) );
  int pX = ( width / 2) - (picMaxWidth / 2);
  image( images[curPic], pX, picHeight + 10 );
}