XMLElement xml;
int weatherNum;
int xcounter;
float ellipseX = 0;
float xpos = width/2;
float ypos = height/2;
float mph;
float h;
ArrayList kites;
color bg;
float mousex = mouseX;
float mousey = mouseY;
float x;
String time;
String place;
String direction;
String speed;
Boolean xmlLoading;

//Kite variables
color strokecolor = color(40,0,90);
float circOpac = 200;
float bgOpac = 255;
float circSize;

void setup() {
  frameRate(20);
  size(500, 500);
  smooth();
  noCursor();
  
  colorMode(HSB, 255);
  bg = color(234,14,30);
  
  /* set the font. Still not confident this has succeeded */
  textFont(createFont("KozGoPro-Medium", 11));

  kites = new ArrayList();
  kites.add(new kite(0,0, " ",1,1));
  
  xmlLoading = true;

}

/* receive data as a string from PhP, and convert to XML */
void parseXML (String xml){
  
  //convert var data (a String from PhP) to xml
  XMLElement data = new XMLElement(xml);
  
  //place data's children into an array weather[]
  XMLElement[] weather = data.getChildren();
  
  //extract relevant XML data and pass to global String variables
  XMLElement observation = weather[9];
  time = observation.getContent();

  XMLElement thePlace = weather[5];
  place = thePlace.getContent();

  XMLElement theSpeed = weather[19];
  speed = theSpeed.getContent();
  mph = parseFloat(speed);

  XMLElement theDirection = weather[17];
  direction = theDirection.getContent();
  
  xmlLoading = false;
  
}

void draw() {
  
  //check to see if XML has loaded before drawing circles
  //if not, try again.
  if (xmlLoading) { text("Loading... if no result, refresh browser", width/2, height/2); 
                     }
  
  else {
  
  background(bg);
  noStroke();

  fill(255); 
  textSize(10); 
  textAlign(LEFT);
  text(time,10,20);

  text("windspeed " + speed + " MPH" + " " + direction, 10, 35);
  text(place, 10, 50);
  x = map(mph, 0, 60, 0, 6);  //this controls the speed
  h = map(x, 0, 6, 170, 240);   //controls the color: in HSB land, 170 = blue and 240 = red
  float s = map(mph, 0, 60, 0, 100);

  //West wind
  if(direction.equals("West")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX+xpos,mouseY, "W", random(2,3), random(mousey-.5,mousey+.5)));     
    }
    else{
      kites.add(new kite((width/2)+xpos,height/2, "W", random(2,3), random(-.5,.5)));    
    }
    if(xpos  > mousex + random(1,5)){ 
      xpos = mousex; 
    }
    else{ 
      xpos = xpos +x; 
    }
  }

  //East wind
  else if(direction.equals("East")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX-xpos,mouseY, "E", random(-3,-2), random(mousey-.5,mousey+.5)));     
    }
    else{
      kites.add(new kite((width/2)-xpos,height/2, "E", random(-3,-2), random(-.5,.5)));    
    }
    if(xpos  > mousex + random(1,5)){ 
      xpos = mousex; 
    }
    else{ 
      xpos = xpos +x; 
    }
  }

  //South wind
  else if(direction.equals("South")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX,mouseY-ypos, "S", random(mousex-.5,mousex+.5), random(-3,-2)));     
    }
    else{
      kites.add(new kite(height/2,(height/2)-ypos, "S", random(-.5,.5), random(-3,-2)));    
    }
    if(ypos  < mousey - random(1,5)){ 
      ypos = mousey; 
    }
    else{ 
      ypos = ypos - x; 
    }
  }

  //North wind
  else if(direction.equals("North")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX,mouseY+ypos, "N", random(mousex-.5,mousex+.5), random(2,3)));     
    }
    else{
      kites.add(new kite(height/2,(height/2)+ypos, "N", random(-.5,.5), random(2,3)));    
    }
    if(ypos  > mousey + random(1,5)){ 
      ypos = mousey; 
    }
    else{ 
      ypos = ypos + x; 
    }
  }  

  //NorthEast wind
  else if(direction.equals("Northeast")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX-xpos,mouseY+ypos, "NE", random(mousex -2, mousex-3), random(2,3)));     
    }
    else{
      kites.add(new kite((width/2)-xpos,(height/2)+ypos, "NE", random(-2, -3), random(2,3)));    
    }
    if(ypos  > mousey + random(1,5)){ 
      ypos = mousey; 
      xpos = mousex; 
    }
    else{ 
      ypos = ypos + x; 
      xpos = xpos + x; 
    }
  }  

  //NorthWest wind
  else if(direction.equals("Northwest")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX+xpos,mouseY+ypos, "NE", random(mousex+2,mousex+3), random(2,3)));     
    }
    else{
      kites.add(new kite((width/2)+xpos,(height/2)+ypos, "NE", random(2,3), random(2,3)));    
    }
    if(ypos  > mousey + random(1,5)){ 
      ypos = mousey; 
      xpos = mousex; 
    }
    else{ 
      ypos = ypos + x; 
      xpos = xpos + x; 
    }
  }    

  //SouthEast wind
  else if(direction.equals("Southeast")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX-xpos,mouseY-ypos, "NE", random(mousex-3, mousex-2), random(-2,-3)));     
    }
    else{
      kites.add(new kite((width/2)-xpos,(height/2)-ypos, "NE", random(-3, -2), random(-2,-3)));    
    }
    if(ypos  < mousey - random(1,5)){ 
      ypos = mousey; 
      xpos = mousex; 
    }
    else{ 
      ypos = ypos - x; 
      xpos = xpos - x; 
    }
  } 

  //SouthWest wind
  else if(direction.equals("Southwest")){ 
    if(mouseX>0 || mouseY > 0){
      kites.add(new kite(mouseX+xpos,mouseY-ypos, "SW", random(mousex+2, mousex+3), random(-2,-3)));     
    }
    else{
      kites.add(new kite((width/2)+xpos,(height/2)-ypos, "SW", random(2, 3), random(-2,-3)));    
    }
    if(xpos > mousex + random(1,5)){ 
      ypos = mousey; 
      xpos = mousex; 
    }
    else{ 
      ypos = ypos - x; 
      xpos = xpos + x; 
    }
  }   

  //unrecognized direction
  else {
    kites.add(new kite(width/2,height/2, "?",random(-1,2),random(-1,2)));
    textAlign(CENTER);
    text("NO DATA",width/2, height/2);  
  }

  for (int i = kites.size()-1; i >= 0; i--) {
    kite boo = (kite)kites.get(i);
    boo.update();
    if (boo.isFinished()) {
      kites.remove(i);
    }
  } 
  }
  
  //end of Draw
}

//KITE class
class kite{
  float circSize = 2;
  float circOpac = 100;
  float bgOpac = 100;
  float xpos;
  float ypos;
  float upwards; 
  float sideways;
  String windDirec;

  kite(float x, float y, String d, float s, float u){
    xpos = x;
    ypos = y;
    windDirec = d;
    sideways = s;
    upwards = u;
  }

  void update(){
    color filler = color(h,80,255);
    color strokecolor = color(h,40,250);
        
    fill(filler, bgOpac);
    ellipse(xpos,ypos,circSize, circSize);
   
    circSize = circSize + (x/2);
    xpos = xpos + sideways;
    ypos = ypos + upwards;
    
    if(circOpac > 0){
      bgOpac = bgOpac * .95;
    }
   
  }

  boolean isFinished (){
    if (bgOpac < 1){
      return true;
    }
    else{
      return false;
    } 


  }
}