// time grid + timestamp for frames
//test image loading on web

int thecomposite = 200;
int theframe = 720;

streamedImage Composite; // = new streamedImage("../composites/c_1114_"+thecomposite + ".jpg");
streamedImage Frame; // = new streamedImage("../frames/wts_f_1114" + frame_to_time() + ".jpg");

loadingWidget CompWidget;
loadingWidget FrameWidget;
int comp_load_millis = 0;
int frame_load_millis = 0;

color highlight = color(250,100);//color(203,37,74,150);

int comp_focus = 0;
int frame_focus = 0;

int xmargin = 25;
int ymargin = 40;
int midspace = 20;
int composite_width = 1440;
int composite_height = 300;
int frame_width = 400;
int frame_height = 300;
int applet_width = 800;

Rect compRect = new Rect((applet_width*0.5)-theframe,ymargin,1440,composite_height);
Rect frameRect = new Rect((applet_width*0.5)-thecomposite,ymargin+composite_height+midspace,frame_width,frame_height);

int numframes = 1440;
int numslices = 400;

PFont helvetica;

void setup(){
  size(800,700);
  hint(ENABLE_NATIVE_FONTS);
  helvetica = createFont("Helvetica",24, true);
  Composite = new streamedImage("../composites/c_"+thecomposite + ".jpg");
  Frame = new streamedImage("../frames/10-23-" + frame_to_time() + ".jpg");
  CompWidget = new loadingWidget(width*0.5,ymargin+(composite_height*0.5),millis());
  FrameWidget = new loadingWidget(frameRect.rx+(frameRect.rwidth*0.5),frameRect.ry+(frameRect.rheight*0.5),millis());
  smooth();
}

void draw(){
  background(80); //100,103,107);//(193,196,200);
  // the grey stripe 
  noStroke();
  fill(100);
  rect((width*0.5)-30,6,60,height-13);
  
  textFont(helvetica, 14);
  fill(220);
  text("Watching the Street (Ottawa)",50,550);
  textFont(helvetica, 10);
  text("In this work a webcam overlooking an ordinary streetscape gathers one image per minute over 24 hours. The interface takes slices of these images and composites them into timelines revealing patterns of change and activity on the street - an'urban viewfinder'. Slide the upper image to change the time of the frame; slide the lower image to change the location of the slice.", 50,600,150,200);
 
 strokeWeight(1.0);
  // draw the composite
  image(Composite.img,(width*0.5)-(theframe),ymargin);
  if (Composite.isLoaded() == false){ // && comp_load_millis > (millis()+100)){
    // draw the loading widget
    fill(40,100);
    noStroke();
    rect(compRect.rx,compRect.ry,compRect.rwidth,compRect.rheight);
    CompWidget.drawWidget();
  } 

  noFill();
  if (comp_focus ==1){
  stroke(highlight);
  } else {
   stroke(0);
  }
  rect(compRect.rx,compRect.ry,compRect.rwidth,compRect.rheight);

  // draw the frame
  image(Frame.img,(width*0.5)-(thecomposite),ymargin+composite_height+midspace);
  if (Frame.isLoaded() == false){// && frame_load_millis > (millis()+100)){
    // draw the loading widget
    fill(40,100);
    noStroke();
    rect(frameRect.rx,frameRect.ry,frameRect.rwidth,frameRect.rheight);
    FrameWidget.drawWidget();
  } 

  noFill();
  if (frame_focus ==1){
  stroke(highlight);
  } else {
   stroke(0);
  }
  rect(frameRect.rx,frameRect.ry,frameRect.rwidth,frameRect.rheight);

 // axis line
  strokeWeight(1);
  stroke(highlight);//,150);
  line((width*0.5),ymargin-10,(width*0.5),ymargin+composite_height+midspace+frame_height+10); 
 
  //
  Labels();
  //
  tickLines();
  
}

void loadComposite(){
  Composite.load("../composites/c_"+thecomposite + ".jpg");
  comp_load_millis = millis();
  //CompWidget = new loadingWidget(width*0.5,ymargin+(composite_height*0.5),millis());
}

void loadFrame(){
  Frame.load("../frames/10-23-" + frame_to_time() + ".jpg");
  frame_load_millis = millis();
  //FrameWidget = new loadingWidget(frameRect.rx+(frameRect.rwidth*0.5),frameRect.ry+(frameRect.rheight*0.5),millis());
}

String frame_to_time(){
  int frame_hrs = theframe/60;
  int frame_mins = theframe%60;
  String fr = nf(frame_hrs,2) + "-" + nf(frame_mins,2);
  return fr;
}

void Labels(){  
  textFont(helvetica,16);
  String timestamp = nf(theframe/60,2)+":"+ nf(theframe%60,2);
  fill(200);
  noStroke();
  text(timestamp,(width*0.5)-(textWidth(timestamp)*0.5),ymargin-17);
  //text(timestamp, 50,50);
  String framelabel = thecomposite + "px";
  text(framelabel,(width*0.5)-(textWidth(framelabel)*0.5),ymargin+composite_height+midspace+frame_height+25);
}

void tickLines(){
  float xpos = (width*0.5)-(theframe);
  if (comp_focus ==1){
  stroke(highlight);
  } else {
   stroke(0);
  }
  float ticklength = 5;
  for (int i=0; i<24; i++){      
    if (i%6==0) {
      ticklength = 10;
    } 
    else {
      ticklength = 5;
    }  
    line(xpos+(i*60),ymargin-ticklength,xpos+(i*60),ymargin);
  }
}