void setup() {
  size(350,400);
  background(BACKGROUND_COLOR);
  smooth();
  //load the first image
  currentSlide = loadImage(lines[current_image_count]);
}

int BACKGROUND_COLOR = #e1f0df;
int current_image_count = 0;
//String lines[] = loadStrings("http://danm.ucsc.edu/media/photos/slideshow/");

String lines[] = loadStrings("http://danm.ucsc.edu/media/DANM.01/photos/small_url_list.txt");

PImage currentSlide, slideOut;
char state = 'd'; //start by displaying an image
float FADE_FRAMES = 30.0;
int fadeCount, durationCount = 0;
int DURATION_FRAMES = 180;

void draw() {
  
  switch(state){
   case 'd':
     // displaying the active slide
     centerAndSizeImage(currentSlide);
     if(durationCount < DURATION_FRAMES){
       // let's keep displaying the image
       durationCount ++;
       state = 'd';
     }else{
       // it's time to go to the next slide
       durationCount = 0;
       state = 'n';
     }
     break;
   case 'n':
     //load the Next slide
     //keep the old slide, so that we can fade from it
     slideOut = currentSlide;
     //set our image pointer to the next image, or loop to the begining
     current_image_count = (current_image_count+1)%lines.length;
     // load the "current" slide
     currentSlide = loadImage(lines[current_image_count]);
     state='t';
     break;
   case 't':
     //we are transitioning from the slideOut to the currentSlide
     if (fadeCount < FADE_FRAMES){
       background(BACKGROUND_COLOR);
       fadeCount ++;
       pushMatrix();
         tint(#FFFFFF, 255 - (255*(fadeCount/FADE_FRAMES )));
         centerAndSizeImage(slideOut);
       popMatrix();
  
       pushMatrix();
         tint(#FFFFFF, 255*(fadeCount/FADE_FRAMES));
         centerAndSizeImage(currentSlide);
       popMatrix();
     }else{
       //we have finished our transition, start displaying the currentSlide
       fadeCount = 0;
       state = 'd';
     }
     break;
  }
}
void centerAndSizeImage(PImage theImage){
  // we need to resize the image to the largest that will fit in the applet
  float xPercentage, yPercentage, resizePercentage;
  xPercentage = float(width)/float(theImage.width);
  yPercentage = float(height)/float(theImage.height);
  resizePercentage = min(xPercentage,yPercentage);
  // align top and center in the middle
  image(theImage, width/2-(theImage.width*resizePercentage)/2, 0, theImage.width*resizePercentage,theImage.height*resizePercentage);
}