/* Copyright notice: For details, see the following file:
 http://Phi.Lho.free.fr/softwares/PhiLhoSoft/PhiLhoSoftLicence.txt
 This program is distributed under the zlib/libpng license.
 Copyright (c) 2008 Philippe Lhoste / PhiLhoSoft
 */
//~ import com.sun.image.codec.jpeg.*;
import javax.imageio.*;
import javax.imageio.stream.*;
import java.awt.image.BufferedImage;
import guicomponents.*;
String currentFormat = "png";
//String fileName = "anonymous_user_Sussman_Prejza_Culver_City_USA";
String fileName = "anonymous_artist";

PGraphics bg;
float bgMultiplier = 3; //how much smaller than full size is the bg?

float x = 245; //(full size 490, 355)
float y = 220;
float angle1 = 0.0;
float segLength = 8; //size of dotted line pieces
int dotSize = 8; //how big dotted line dots are 
int gap = 0;
float xAvg = 245; //holds last mouse position
float yAvg = 220; //holds last mouse position
float x2 = 245; //holds last mouse position, converted for BG rotation
float y2 = 220; //holds last mouse position, converted for BG rotation
float tempAngle = 0; //used for mouse position calcs
float angleBGadjusted = 0; //used for mouse position calcs
float tempDist = 0; //used for mouse position calcs
float xRotated, yRotated;
float bgR = 7;
float bgG = 35;
float bgB = 45;
float bgTempR = bgR;
float bgTempG = bgG;
float bgTempB = bgB;
int BGwhite = 1;
int timeOfDay = 0;
int timeOfDayTemp = 0;
float timeOfDayCounter = 0;

float angleBG = 0;
float angleBGDelta = 0;
int rotationCount = 0;
int rotated180 = 0;
boolean rotationTrigger = false;

int colorTrigger = 0;

int navBarHeight = 19; //height of the area at the bottom of screen with buttons and text
PFont font;
int drawingState = 0; //check to see if we're drawing or viewing or uploading 0,1,2

float[] posX = {
  xAvg, xAvg, xAvg, xAvg}; //holder for historical X values
float[] posY = {
  yAvg, yAvg, yAvg, yAvg}; //holder for historical Y values

int mouseAvg = 20; //controls how fast the arrow catches up with your mouse cursor (used in averaging)

// Loading a shape when using setup() and draw()
PShape arrow;
PShape e;
PShape t;
PShape r;
PShape sp;

PinWheel pinWheels[] = new PinWheel[58];
int[] xA = {
  727, 258, 734, 521, 153, 448, 687, 629, 370, 320, 287, 75, 357, 588, 627, 508, 252, 476, 403, 144, 170, 662, 533, 521, 623, 783, 282, 168, 303, 560, 526, 101, 313, 507, 432, 584, 666, 325, 285, 412, 162, 324, 219, 87, 673, 126, 444, 583, 463, 483, 593, 687, 345, 485, 245, 538, 567, 302, 617, 371};
int[] yA = {
  573, 327, 264, 367, 451, 513, 406, 129, 788, 288, 84, 347, 144, 306, 484, 371, 594, 164, 652, 339, 157, 553, 393, 322, 357, 434, 620, 188, 227, 313, 623, 605, 602, 84, 435, 165, 352, 158, 727, 264, 314, 200, 625, 257, 385, 489, 264, 227, 313, 261, 347, 192, 386, 742, 497, 448, 585, 356, 201, 379};
int[] xB = {
  74, 425, 617, 548, 447, 753, 281, 656, 189, 415, 683, 680, 767, 391, 354, 840, 323, 527, 135, 353, 323, 117, 308, 282, 693, 256, 274, 711, 272, 736, 234, 360, 550, 418, 185, 238, 526, 708, 366, 504, 558, 494, 290, 599, 516, 755, 291, 462, 524, 357, 467, 580, 132, 417, 532, 587, 488, 549, 647, 96};
int[] yB = {
  333, 103, 317, 642, 670, 545, 601, 400, 306, 253, 276, 230, 442, 132, 499, 416, 644, 558, 283, 792, 397, 527, 453, 152, 612, 200, 728, 482, 648, 395, 111, 121, 133, 787, 668, 477, 319, 663, 425, 83, 444, 316, 527, 493, 390, 341, 551, 85, 525, 717, 542, 355, 202, 448, 735, 304, 129, 389, 196, 559};
int[] xC = {
  350, 500, 714, 569, 127, 254, 369, 476, 656, 37, 531, 183, 761, 415, 121, 473, 601, 153, 584, 781, 682, 708, 419, 142, 656, 455, 736, 109, 330, 311, 720, 626, 125, 714, 430, 342, 269, 678, 633, 473, 434, 562, 725, 437, 742, 508, 242, 368, 457, 553, 543, 269, 189, 403, 47, 421, 597, 247, 377, 485};
int[] yC = {
  65, 309, 213, 426, 628, 473, 327, 519, 622, 360, 93, 637, 415, 789, 359, 773, 326, 190, 601, 501, 578, 662, 171, 554, 206, 422, 507, 285, 769, 652, 410, 259, 666, 598, 295, 238, 172, 274, 692, 184, 597, 479, 312, 661, 283, 614, 439, 640, 343, 559, 690, 331, 532, 614, 499, 487, 453, 705, 429, 606};
int layoutPicker = 0;

int bgwidth = 845;
int bgheight = 845;

GTextField txf1, txf2, txf3, txf4;
GButton btnCopy12, btnCopy21;
GLabel lblLine0, lblLine1, lblLine2, lblLine3, lblLine4, lblLine5;
GPanel p;
int timer = 0;
int timeLimit = 4000;
int startTime = -2000;
int fader = 0;
int arrowChoice = 3;

void setup(){
  size(490, 355); //490,340 was 600,500
  smooth(); 

  t = loadShape("triangle2.svg");
  r = loadShape("rectangle2.svg");
  e = loadShape("ellipse2.svg");
  
  switch(arrowChoice){
    case 0:
    arrow = loadShape("arrow.svg");
    break;
    case 1:
    arrow = loadShape("arrow1.svg");
    break;
    case 2:
    arrow = loadShape("arrow2.svg");
    break;
    case 3:
    arrow = loadShape("arrow3.svg");
    break;
    case 4:
    arrow = loadShape("arrow4.svg");
    break;
    case 5:
    arrow = loadShape("arrow5.svg");
    break;
    case 6:
    arrow = loadShape("arrow6.svg");
    break;
    case 7:
    arrow = loadShape("arrow7.svg");
    break;
    case 8:
    arrow = loadShape("arrow8.svg");
    break;
  }
  sp = loadShape("sp.svg");
  shapeMode(CENTER); //draws shape from center, not upper left corner

  // choose layout from 3 sets
  layoutPicker = round(random(2));
  // create new pinWheels
  for (int i=0; i<pinWheels.length; i++) {
    switch(layoutPicker) {
    case 0:
      pinWheels[i] = new PinWheel(xA[i],yA[i],random(2),random(TWO_PI),random(2), random(.75), random(7,12)); //Horiz pos, Vert pos, 0-2 shape selector, rotation, color (0-1.5), scale, number of petals
      break;
    case 1:
      pinWheels[i] = new PinWheel(xB[i],yB[i],random(2),random(TWO_PI),random(2), random(.75), random(7,12)); //Horiz pos, Vert pos, 0-2 shape selector, rotation, color (0-1.5), scale, number of petals
      break;
    case 2:
      pinWheels[i] = new PinWheel(xC[i],yC[i],random(2),random(TWO_PI),random(2), random(.75), random(7,12)); //Horiz pos, Vert pos, 0-2 shape selector, rotation, color (0-1.5), scale, number of petals
      break;
    }
  }

  bg = createGraphics(round(bgheight/bgMultiplier), round(bgheight/bgMultiplier), P2D); //P3D and P2D seem to work, JAVA2D and OPENGL don't (was (845, 845, P2D))
  bg.beginDraw();
  //bg.background(bgR,bgG,bgB,0);
  //bg.background(207,100,100,0);
  bg.background(64,39,39,0);
  bg.endDraw();

  cursor(CROSS); //cursor(HAND); another option
  frameRate(20);

  font = loadFont("Verdana-10.vlw"); //load type for navigation

  GComponent.globalColor = GCScheme.getColor(this,  GCScheme.GREY_SCHEME);
  GComponent.globalFont = GFont.getFont(this, "Verdana", 14);

  lblLine0 = new GLabel(this, "before you click upload, please sign your drawing", 80, 60, 378, 0);
  lblLine0.setBorder(1);
  lblLine0.setOpaque(true);
  lblLine0.setFont("Verdana", 12);

  lblLine1 = new GLabel(this, "your name", 80, 100, 320, 0);
  lblLine1.setBorder(0);
  lblLine1.setOpaque(false);
  lblLine1.setFont("Verdana", 12);
  txf1 = new GTextField(this, "anonymous artist", 80,120,320,0);

  lblLine2 = new GLabel(this, "add your company here", 80, 150, 320, 0);
  lblLine2.setBorder(0);
  lblLine2.setOpaque(false);
  lblLine2.setFont("Verdana", 12);
  txf2 = new GTextField(this, "",  80,170,320,0);

  lblLine3 = new GLabel(this, "the city you are in", 80, 200, 140, 0);
  lblLine3.setBorder(0);
  lblLine3.setOpaque(false);
  lblLine3.setFont("Verdana", 12);
  txf3 = new GTextField(this, "",  80,220, 140,0);

  lblLine4 = new GLabel(this, "your country", 260, 200, 140, 0);
  lblLine4.setBorder(0);
  lblLine4.setOpaque(false);
  lblLine4.setFont("Verdana", 12);
  txf4 = new GTextField(this, "USA",  260,220,140,0);
  
  lblLine5 = new GLabel(this, "please fill in as much or as little as you like, but don't try any funny characters here   (like / or ? or * or !) _thanks", 80, 220, 380, 80);
  lblLine5.setBorder(0);
  lblLine5.setOpaque(false);
  lblLine5.setFont("Verdana", 10);

  // Create a button
  // (this, buttton text, x, y, width, height)
  btnCopy12 = new GButton(this, "Return to Drawing", 80,20,140,20);
  btnCopy21 = new GButton(this, "Save and Upload", 260,20,140,20);

  p = new GPanel(this, "                         click here when you finish drawing                       ", 0, height, width, height);
  p.setAlpha(180);
  p.add(btnCopy12);
  p.add(btnCopy21);
  p.add(txf1);
  p.add(txf2);
  p.add(txf3);
  p.add(txf4);
  p.add(lblLine0);
  p.add(lblLine1);
  p.add(lblLine2);
  p.add(lblLine3);
  p.add(lblLine4);
  p.add(lblLine5);
}

void draw(){
  if(drawingState == 0){ //Do the drawing app! See end of draw for the "else"

    if(colorTrigger == 0){
      if(mouseX < width/2 && mouseX != 0){
        println("neg");
        colorTrigger = 1;
      }
      if(mouseX > width/2){
        println("pos");
        colorTrigger = 2;
      }
    }

    background(bgR,bgG,bgB);
    //background(0);

    //  x2 = mouseX; //just for testing with no averaging
    //  y2 = mouseY; //just for testing with no averaging

    if(mouseX != 0 && mouseY != 0 && mouseX < width && mouseY < (height-navBarHeight)){
      xAvg = (mouseX+(mouseAvg-1)*xAvg)/mouseAvg; // mouse position averaged
      yAvg = (mouseY+(mouseAvg-1)*yAvg)/mouseAvg; // mouse position averaged
      x2 = xAvg;
      y2 = yAvg;
    }

    //----------------------------------------------------------------------------------------------------//
    //........................Should the BG draw a the next dot in the trail?.............................//
    //----------------------------------------------------------------------------------------------------//
    if(dist(posX[0],posY[0],x2,y2)>(segLength+gap)) {
      //calculate the angle that the arrow should point
      float dx = x2 - posX[0];
      float dy = y2 - posY[0];
      angle1 = atan2(dy, dx);  
      posX[0] = posX[0] + (cos(angle1) * segLength);
      posY[0] = posY[0] + (sin(angle1) * segLength);

      //Shift Array Values Down
      for (int i = 3; i > 0; i--) {   
        posX[i] = posX[i-1]; //shift points down array
        posY[i] = posY[i-1]; //shift points down array
      }

      //Draw the Background
      BGcolorChange();
      //Trail Color  //Pink Fill - half transparent
      trail(posX[posX.length-1], posY[posY.length-1], 207,100,100,10); //Calls the Background function sends x,y pos and color in RGB A
    }

    //Dumb duplicate to draw 2 dots per frame
    if(dist(posX[0],posY[0],x2,y2)>(segLength+gap)) {
      //calculate the angle that the arrow should point
      float dx = x2 - posX[0];
      float dy = y2 - posY[0];
      angle1 = atan2(dy, dx);  
      posX[0] = posX[0] + (cos(angle1) * segLength);
      posY[0] = posY[0] + (sin(angle1) * segLength);

      //Shift Array Values Down
      for (int i = 3; i > 0; i--) {   
        posX[i] = posX[i-1]; //shift points down array
        posY[i] = posY[i-1]; //shift points down array
      }

      //Draw the Background
      //   BGcolorChange();
      //Trail Color  //Pink Fill - half transparent
      trail(posX[posX.length-1], posY[posY.length-1], 207,100,100,64); //Calls the Background function sends x,y pos and color in RGB A
    }
    //----------------------------------------------------------------------------------------------------// 
    //.......................................Draw Background..............................................//
    //----------------------------------------------------------------------------------------------------//

    updateBG(); //draw the BG

      pinWheelDrawing(); //calls the pinWheelDrawing

      //----------------------------------------------------------------------------------------------------// 
    //....................................Rotate the Background...........................................//
    //----------------------------------------------------------------------------------------------------//


    if ( abs(mouseX-xAvg) > 10 || abs(mouseY-yAvg) > 10) { //is the mouse moving quickly?
      //angleBGDelta = (posX[0]-width/2)/50000*((posY[0]+50)/height); //angle adjusted up/down by horiz position and reduced by fraction of vert location
        angleBGDelta = (posX[0]-width/2)/20000*((posY[0]+50)/(height-navBarHeight)); //angle adjusted up/down by horiz position and reduced by fraction of vert location
    }
    else{
      angleBGDelta = angleBGDelta*.9; //slow down the 
    }
    angleBG = angleBG + angleBGDelta;

    if(angleBG>TWO_PI && rotated180==1){
      angleBG=0;
      if(rotated180==1){
        rotated180=0;
        rotationTrigger=true;
        println("over 360");
        println("angle: " + angleBG);
      }
    }
    if(angleBG<0){
      angleBG=TWO_PI;
      println("angle: " + angleBG);
      if(rotated180==1){
        rotated180=0;
        rotationTrigger=true;
        println("under 0");
        println("angle: " + angleBG);
      }
    }

    if(angleBG>(PI-.01) && angleBG<(PI+.01)){
      rotated180=1;
      rotationTrigger=false;
      println("half turn");
      println("angle: " + angleBG);
    }
    //println("angle: " + angleBG);
    //  angleBG = 0; //for testing only! 
    //----------------------------------------------------------------------------------------------------// 
    //....................................Draw the Arrow...........................................//
    //----------------------------------------------------------------------------------------------------//

    arrow (x2, y2, angle1); //Draw arrow using the Foreground function

    //----------------------------------------------------------------------------------------------------// 
    //...................Calculate the mouse position and translate to rotated BG.........................//
    //----------------------------------------------------------------------------------------------------//

    tempAngle = atan((y2-(height-navBarHeight))/(x2-width/2)); //angle of line from bottom center to x1,y1 based on tan(angleTemp)=y1/x1

    if(tempAngle<0){
      tempAngle = PI/2+tempAngle; //makes values go from 0 to 1/2 Pi
    }
    else{
      tempAngle = tempAngle-PI/2; //makes values go from -1/2 Pi to 0
    }

    angleBGadjusted = tempAngle+angleBG+PI/2; //adjusts value to match BG with adjustments

    tempDist = dist(x2, y2, width/2,(height-navBarHeight));
    xRotated = cos(PI-angleBGadjusted)*tempDist;
    yRotated = sin(PI-angleBGadjusted)*tempDist;

    //Translate xRotated to center of bg
    xRotated = bgwidth/2 + xRotated;
    yRotated = bgheight/2 - yRotated;

    //----------------------------------------------------------------------------------------------------// 
    //.....................................Draw the Navigation/Buttons....................................//
    //----------------------------------------------------------------------------------------------------//

    fill(255);
    if(mouseY>(height-navBarHeight)){
      fill(200);
    }

    // Draw the zoomed out image before and after UI Call
    if((millis()-startTime)<timeLimit){
      //image(imgBgImage,0,0);
    }
    else{
      startTime=0;
    }

  }
  else{ //the drawing session is paused, let's review the image

      //----------------------------------------------------------------------------------------------------// 
    //.................................Display the zoomed out image.......................................//
    //----------------------------------------------------------------------------------------------------//


    if(drawingState == 1){ //the drawing session is paused, but not over
      //calls the scaled down view and uploads the file

      drawScaledDownImage();

      loadUI();

    }
    else{ //the drawing session is over, now we're uploading

      //----------------------------------------------------------------------------------------------------// 
      //.................................Display the zoomed out image.......................................//
      //----------------------------------------------------------------------------------------------------//
      drawScaledDownImage();
     // delay(1000);

      println("I'm uploading!");
      uploader();
      delay(1000);
      link("http://www.sussmanprejza.com/ar/card/gallery/");
      //drawingState = 0;
      noLoop();   
    } 
  }
  if(p.hasFocus()){
    //println("the Panel has focus");
    //println(p.getEventType());
    //p.setText("Click Here to Return to Drawing");
    if(p.getEventType()==513 || p.getEventType()==514 || p.getEventType()==0){
      //p.setText("Click here when you finish drawing");
      //p.setXY(0, height);
      drawingState = 1;
      startTime = millis();
    }
  }
}

// End OF DRAW 

//----------------------------------------------------------------------------------------------------// 
//...................................other function calls.............................................//
//----------------------------------------------------------------------------------------------------//
void trail(float x, float y, int r, int g, int b, int a) { //the Background function
  //Draw the Background
  bg.beginDraw();

  bg.fill(r, g, b, a);
  bg.noStroke();

  bg.pushMatrix();
  bg.scale(1/bgMultiplier);
  //bg.smooth(); 

  bg.translate(bgwidth/2, bgheight/2); //move drawing to recenter the rotation point
  //bg.translate(100,100); //move drawing to recenter the rotation point
  bg.rotate(angleBG);  //rotate (conversion from deg to rad)
  bg.translate(-1*width/2, -1*(height-navBarHeight)); //move drawing back
  //bg.scale(1.5);
  //bg.ellipse(x,y, dotSize, dotSize);

  bg.stroke(r, g, b, a);
  bg.point(x,y);

  bg.popMatrix(); //reset the matrix

    bg.endDraw();

}

//the Background function
void pinWheelDrawing() { //the Background function
  //Draw the Background
  pushMatrix();
  translate(width/2, (height-navBarHeight)); //move drawing to recenter the rotation point
  rotate(-1*angleBG);
  //scale(.5); //Shrinks whole pinwheel part
  translate(-1*bgwidth/2, -1*bgheight/2); //move drawing back

  fill(255, 128);
  noStroke();

  for (int i=0; i<pinWheels.length;i++) {
    pinWheels[i].update();
  }
  popMatrix(); //reset the matrix
}

//the Foreground function
void arrow(float x, float y, float a) { //the Foreground function
  pushMatrix();
  translate(x, y);
  rotate(a + PI/2);
  //shape(arrow, -14, -25);
  arrow.disableStyle(); //removes SVG style and lets sketch override
  fill(128,0,0,230);
  switch(arrowChoice){
    case 0:
    //scale(1);
    break;
    case 1:
    //scale(1);
    break;
    case 2:
    scale(1.2);
    break;
    case 3:
    scale(1.3);
    noFill();
    stroke(128,0,0,230);
    break;
    case 4:
    scale(1.2);
    break;
    case 5:
    scale(1.6);
    break;
    case 6:
    scale(1.3);
    break;
    case 7:
    scale(1.2);
    break;
    case 8:
    scale(1.5);
    break;
  }
  shape(arrow, 0,0);
  popMatrix();
}
//----------------------------------------------------------------------------------------------------// 
//.........................................Display BG.................................................//
//----------------------------------------------------------------------------------------------------//
void updateBG() {
  //draw the image with transformations
  pushMatrix(); 
  translate(width/2, (height-navBarHeight)); //move drawing to recenter the rotation point
  rotate(-1*angleBG);  //rotate (conversion from deg to rad)
  scale(bgMultiplier);
  translate(-1*bg.width/2, -1*bg.height/2); //move drawing back

  image(bg, 0, 0); //draw the image
  popMatrix(); //reset the matrix
}

/*
//Uploader //Redraws the image scaled down, posts it online, and then goes to the gallery
 void mousePressed() {
 if(mouseY>(height-navBarHeight)){
 drawingState=1;
 }   
 }
 */
//----------------------------------------------------------------------------------------------------// 
//.......................................Uploader Call................................................//
//----------------------------------------------------------------------------------------------------//
void uploader (){
  //NEW UPLOADER CODE FROM PhiLoh
  DataUpload du = new DataUpload();
  boolean bOK = false;
  // Upload the currently displayed image with a fixed name, and the chosen format
  if (currentFormat.equals("png"))
  {
    //bOK = du.UploadImage("snapshot." + currentFormat, (BufferedImage) g.image);
    //bOK = du.UploadImage(fileName + currentFormat, (BufferedImage) g.image); //testing long file names
    //shouldn't have to do this, fileName not getting updated fast enough?
    bOK = du.UploadImage(txf1.getText() + "_" + txf2.getText() + "_" + txf3.getText() + "_" + txf4.getText() + "." + currentFormat, (BufferedImage) g.image); 
  }
  else
  {
    // We need a new buffered image without the alpha channel
    BufferedImage imageNoAlpha = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
    loadPixels();
    imageNoAlpha.setRGB(0, 0, width, height, g.pixels, 0, width);
    bOK = du.UploadImage("snapshot." + currentFormat, imageNoAlpha);
  }
  if (!bOK)
    return; // Some problem on Java side. Do nothing

  // Get the answer of the PHP script
  int rc = du.GetResponseCode();
  String feedback = du.GetServerFeedback();
  println("----- " + rc + " -----\n" + feedback + "---------------");

  // Extract the URL of the image from the PHP feedback
  // I use the hard way, the script could just answer the right URL...
  String[] m = match(feedback, "<img src='([^']+)'");
  if (m != null)  // Found!
  {
    println("\n=> " + m[0] + "\n");
    // Open in a popup window
    //link(m[0], "UploadedImage");
  }
}
//----------------------------------------------------------------------------------------------------// 
//.....................................BG Color Controls..............................................//
//----------------------------------------------------------------------------------------------------//
void BGcolorChange() {
  if(rotationTrigger==true){
    //Red
    bgR = 46;
    bgG = 9;
    bgB = 19;  
  }
  else{
    //Blue
    bgR = 7;
    bgG = 35;
    bgB = 45;
  }
}

void loadUI(){
  if((millis()-startTime)<timeLimit){
    if(fader<=220){
      fader=fader+4;
      //p.setAlpha(fader);
      //p.setVisible(false);
      p.setAlpha(0);
      btnCopy12.setVisible(false);
      btnCopy21.setVisible(false);
      txf1.setVisible(false);
      txf2.setVisible(false);
      txf3.setVisible(false);
      txf4.setVisible(false);
      lblLine0.setVisible(false);
      lblLine1.setVisible(false);
      lblLine2.setVisible(false);
      lblLine3.setVisible(false);
      lblLine4.setVisible(false);
      lblLine5.setVisible(false);
    }
    else{

      btnCopy12.setVisible(true);
      btnCopy21.setVisible(true);
      txf1.setVisible(true);
      txf2.setVisible(true);
      txf3.setVisible(true);
      txf4.setVisible(true);
      lblLine0.setVisible(true);
      lblLine1.setVisible(true);
      lblLine2.setVisible(true);
      lblLine3.setVisible(true);
      lblLine4.setVisible(true);
      lblLine5.setVisible(true);

      fader=0;
      p.setAlpha(220);
      startTime=0;
    }
  }
  //image(imgBgImage,0,0);

}

void drawScaledDownImage(){
  //draw a fresh bg
      background(bgR, bgG, bgB);

      //draw a scaled down pinwheel
      pushMatrix();
      //translate(width/2, height/2); //move drawing to recenter the rotation point
      //translate(-1*bgwidth/2, -1*bgheight/2); //move drawing back
      scale(.4); //Shrinks whole pinwheel part (should be .4 when I get the new layouts)
      translate(220, 0); //move drawing to recenter the rotation point
      //translate(-1*bgwidth/2, -1*bgheight/2); //move drawing back

      fill(255, 128);
      noStroke();
      for (int i=0; i<pinWheels.length;i++) {
        pinWheels[i].update();
      }
      popMatrix(); //reset the matrix

        //draw logo watermak/bug
      shape(sp, width-20, height-35);

      //REPLACE WITH A VIEW OF THE FINAL DRAWING AND OPTION OF CONTINUING DRAWING OR UPLOADING??    
      //println("image scaled down!");
    }
//----------------------------------------------------------------------------------------------------// 
//.....................................UI Button Presses..............................................//
//----------------------------------------------------------------------------------------------------//
void handleButtonEvents(GButton button){
  if(button == btnCopy12 && button.eventType == GButton.CLICKED){
    //txf2.setText(txf1.getText());
    p.setCollapsed(true);
    //p.setText("Click Here to Return to Drawing");
    p.setXY(0, height);
    drawingState = 0;
    startTime = millis();
    //p.setText("Click here when you finish drawing");
  }
  else if(button == btnCopy21 && button.eventType == GButton.CLICKED)
  {
    //uploader ();
      //print(txf1.getText());
      //print(txf2.getText());
      //print(txf3.getText());
      //print(txf4.getText());
      String fileName = txf1.getText() + "_" + txf2.getText() + "_" + txf3.getText() + "_" + txf4.getText();
      println(fileName);
      drawingState = 2;
  }
}