// Scrollbar 
// by REAS <http://reas.com> 

HScrollbar hs1, hs2; 
 
PImage top, bottom;         // Two image to load 
int topWidth, bottomWidth;  // The width of the top and bottom images 
 
 
void setup() 
{ 
  size(200, 200); 
  noStroke(); 
  hs1 = new HScrollbar(0, 20, width, 10, 3*5+1); 
  hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1); 
  setImage(); 
} 
 
void draw() 
{ 
  background(255); 
  
  // Get the position of the top scrollbar 
  // and convert to a value to display the top image 
  float topPos = hs1.getPos()-width/2; 
  fill(255); 
  image(top, width/2-topWidth/2 + topPos*2, 0); 
  //println(hs1.getPos()); 
  // Get the position of the bottom scrollbar 
  // and convert to a value to display the bottom image 
  float bottomPos = hs2.getPos()-width/2; 
  fill(255); 
  image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2); 
 
  hs1.update(); 
  hs2.update(); 
  hs1.draw(); 
  hs2.draw(); 
  
  //println(hs1.getPos()); 
} 
 
void setImage() { 
  top = loadImage("seedTop.jpg"); 
  topWidth = top.width; 
  bottom = loadImage("seedBottom.jpg"); 
  bottomWidth = bottom.width; 
 
} 
 
class HScrollbar 
{ 
  int swidth, sheight;    // width and height of bar 
  int xpos, ypos;         // x and y position of bar 
  float spos, newspos;    // x position of slider 
  int sposMin, sposMax;   // max and min values of slider 
  int loose;              // how loose/heavy 
  boolean over;           // is the mouse over the slider? 
  boolean locked; 
  float ratio; 
 
  HScrollbar (int xp, int yp, int sw, int sh, int l) { 
    swidth = sw; 
    sheight = sh; 
    int widthtoheight = sw - sh; 
    ratio = (float)sw / (float)widthtoheight; 
    xpos = xp; 
    ypos = yp-sheight/2; 
    spos = xpos + swidth/2 - sheight/2; 
    newspos = spos; 
    sposMin = xpos; 
    sposMax = xpos + swidth - sheight; 
    loose = l; 
  } 
 
  void update() { 
    if(over()) { 
      over = true; 
    } else { 
      over = false; 
    } 
    if(mousePressed && over) { 
      locked = true; 
    } 
    if(!mousePressed) { 
      locked = false; 
    } 
    if(locked) { 
      newspos = constrain(mouseX-sheight/2, sposMin, sposMax); 
    } 
    if(abs(newspos - spos) > 1) { 
      spos = spos + (newspos-spos)/loose; 
    } 
  } 
 
  int constrain(int val, int minv, int maxv) { 
    return min(max(val, minv), maxv); 
  } 
 
  boolean over() { 
    if(mouseX > xpos && mouseX < xpos+swidth && 
    mouseY > ypos && mouseY < ypos+sheight) { 
      return true; 
    } else { 
      return false; 
    } 
  } 
 
  void draw() { 
    fill(255); 
    rect(xpos, ypos, swidth, sheight); 
    if(over || locked) { 
      fill(153, 102, 0); 
    } else { 
      fill(102, 102, 102); 
    } 
    rect(spos, ypos, sheight, sheight); 
  } 
 
  float getPos() { 
    // convert spos to be values between 
    // 0 and the total width of the scrollbar 
    return spos * ratio; 
  } 
}