// I want the image to stay within the circle and for the image to go away when the mouse is no longer on the dot. thanks for your help

/*images

1. heart - http://files-cdn.formspring.me/photos/20120805/n501ee108a6887.png

2. brain - http://www.made4ll.com/wp-content/uploads/a-human-brain-ke-agungan-allahku.jpg

3. pelvis - http://www.inds.co.uk/anatomy/anatomy_images/Male_Skeletal_Pelvis_Large.jpg

4. skull - http://images.halloweencostumes.com/deluxe-realistic-skull-zoom.jpg

5. scapula - http://behance.vo.llnwd.net/profiles4/112622/projects/6148633/472713a41c9aba0606d8bfabc02c613a.jpg

6. leg - http://jwi.charite.de/fileadmin/user_upload/microsites/m_cc09/jwi/Forschung/Muskuloskeletale_Biomechanik/Muskuloskeletales_Modell_Treppesteigen.jpg

7. spine - http://www.leckchiro.co.uk/images/SpineImagebig.jpg

8. feet - http://www.pandorasparlor.com/images/skeletal-foot-1.jpg

9. arm - http://www.anatomy-resources.com/human-anatomy/images/sh381-ab.jpg

10. knee - http://spie.org/Images/Graphics/Newsroom/Imported/1018/1018_fig1.jpg

 

*/

PImage background;

 

PImage [] parts;

 

PImage img; 

float x,y;  //diam;

 

float diam[];

 

int [] leftright = {375, 352, 352, 352, 330, 400, 350, 280, 130, 305};

 

int [] updown =    {155, 17, 330, 30, 145, 380, 240, 665, 150, 470};

 

float [] d = {6.75, 1.94, 2.31, 1.69, 1.714, 3.75, 2.4, 1, 6,3};

 

String [] partz = {"heart", "brain","pelvis", "skull", "scapula", "leg", "spine", "feet",

                    "arm", "knee"};   

                     

//String [] locations = {"\n  middle", "\n  top","\n mid", "\n abive", "\n high", "\n lower", "\n middl", "\n low", "\n left", "\n below"};//

                    

                     

                  

void setup(){

  size (700, 700);

  smooth();

  diam = new float [10];

 

 img = loadImage("body1.png");

 parts = new PImage[10];

  

 imageMode(CENTER);

 textAlign(CENTER, CENTER);

  for(int i = 0; i < leftright.length; i++){

        

    parts[i] = loadImage(i + ".png");

    

     

  }

   

   

}

 

void draw(){

  prepWindow();

  titleText();

  drawCircle();

  expandCircle();

}

void prepWindow(){

 background (img);

}

void titleText(){

  textAlign(LEFT);

  fill(10, 120);

  text("PARTS OF THE HUMAN BODY", width/22.5 + 2, height/10);

  fill(255);

  text("PARTS OF THE HUMAN BODY", width/22.5, height/10);

}

   

void drawCircle(){

  for(int i = 0; i < leftright.length; i++){

   // float x = map(i, 0, leftright.length, 10, 890);

   //float y = map(0, i, updown.length, 10, 590);

    float x = map(leftright[i], max(leftright), min(leftright), 10, 690);  //fix this

    float y = map(updown[i], max(updown), min(updown), 10, 590);

    noStroke();

    fill(200, 90);

    ellipse(leftright[i], updown[i], diam[i], diam[i]);

     

  }}

   

  void expandCircle(){

    for(int i = 0; i < leftright.length; i++){

      float x = map(leftright[i], max(leftright), min(leftright), 10, 690); // fixxxxx!!!!!!

      float y = map(updown[i], max(updown), min(updown), 10, 590);

    if(dist(mouseX, mouseY, leftright[i], updown[i]) <= 10){

      diam[i] = diam[i] + 2;

    

   // tint(255, 220);

      

   image(parts[i], leftright[i], updown[i], diam[i], diam[i]);

      

    //

      

      if(y > 700){

    fill(0);} else{fill(10, 180);}

  

    textAlign(LEFT, LEFT);

    

    text(" " + partz [i] + " ", leftright[i], updown[i]);

    

    //fill(20, 180); String supdown = nf(0, updown[i]); text(" " + locations [i] + " ", leftright[i], updown[i]);}else{diam[i] = diam[i] - 4;//

  }

  if(diam[i] > 100){ //if diam is greater than d then diam = d

    diam[i] =  100;

  }

  if(diam[i] < 12){

    diam[i] = 12;

  }

  }

}