/**
 * Historische Vlag: 
 * schuif de schuifbalken links en rechts om de positie van het beeld te veranderen. 
 * </p><p> <a href="http://www.kortrijksetaferelen.net">Keer terug</a>
 */
 
PImage img;
 
HScrollbar hs1, hs2;

PImage top, bottom;        
int topWidth, bottomWidth; 


void setup()
{
  size(986,674);
  noStroke();
  hs1 = new HScrollbar(0, 44, width, 38, 3*5+1);
  hs2 = new HScrollbar(0, height-44, width, 38, 3*5+1);
  top = loadImage("vlagtop.jpg");
  topWidth = top.width;
  bottom = loadImage("vlagbottom.jpg");
  bottomWidth = bottom.width;
}

void draw()
{
  background(255);
  img = loadImage("vlag1.jpg");
  image(img,0,0); 
  

  float topPos = hs1.getPos()-width/2;
  fill(255);
  image(top, width/2-topWidth/2 + topPos*2, 0);
  
 
  float bottomPos = hs2.getPos()-width/2;
  fill(255);
  image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2);
 
  hs1.update();
  hs2.update();
  hs1.display();
  hs2.display();
}


class HScrollbar
{
  int swidth, sheight;    
  int xpos, ypos;         
  float spos, newspos;    
  int sposMin, sposMax;   
  int loose;              
  boolean over;           
  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 display() {
    fill(255,255,204,120);
    rect(xpos, ypos, swidth, sheight);
    if(over || locked) {
      fill(102,102,102);
    } else {
      fill(153,153,153);
    }
    rect(spos, ypos, sheight, sheight);
  }

  float getPos() {
    return spos * ratio;
  }
}