/**
A zoom and pan demo by
<a href="http://www.local-guru.net/blog">Guru</a>
*/

float zoom = 100;
boolean mouseover = false;
int px = 200;
int py = 200;
int mox = 200;
int moy = 200;

int mx = 200;
int my = 200;
PFont fontA;

void setup() {
  size( 400,400 );
  smooth();
  fontA = loadFont("BitstreamVeraSans-Roman-12.vlw");
  textFont(fontA, 12);
}

void draw() {  
   background( 255 );
   pushMatrix();

   float tr = map( zoom, 10, 200, 180, -200);

   translate( tr, tr );
   translate( mx - 200, my - 200 );
   scale( zoom/100, zoom/100 );  
   

   fill(255);
   ellipse( 150,150, 90, 50 );
   ellipse( 200, 200, 80, 120 );
   rect( 230, 200, 50, 40 );
   
 
   popMatrix();
   drawZoom();
}

void drawZoom() {
   line (20, 20, 20, 380 );
   for ( int i = 0; i <= 100; i = i + 2 ) {
     int lx = int( map( i, 0, 100, 0, 10 ));
     int ly = int( map( i, 0, 100, 20, 380 ));
     line( 20 - lx, ly, 20 + lx, ly ); 
   }
   int posx = 10;
   int posy = int(map(zoom, 10, 200, 20, 370 ));
   
   if ( mouseover || mouseX > posx && mouseX < posx+ 20 && mouseY > posy && mouseY < posy + 20 ) {
     fill( 200 );
   }  else {
     fill( 255 );
   }
   
   rect ( posx, posy, 20, 20 );
   fill( 255, 255, 255, 200 );
   noStroke();
   rect( 35, 365, 220, 20 );
   stroke(0);
   fill( 180 );
   text( "click and drag in the image to pan", 40, 380 );
}

void mousePressed() {
   int posx = 10;
   int posy = int(map(zoom, 10, 200, 20, 370 ));
   
   if ( mouseX > posx && mouseX < posx+ 20 && mouseY > posy && mouseY < posy + 20 ) {
      mouseover = true;
   }  else {
      mouseover = false;
      px = mouseX;
      py = mouseY;
      mox = mx;
      moy = my;
   }
}

void mouseReleased() {
    mouseover = false;
}

void mouseDragged() {
  if (mouseover) {
    if ( mouseY >= 30 && mouseY <= 370 ) {
      zoom = map( mouseY - 10, 20, 370, 10, 200 );
    }
  } else {
     mx = mox + mouseX - px;     
     my = moy + mouseY - py;
  }
}