//-class UIset Start-////////////////////////////////

class UIset{
  float x; 
  float y; 
  float uiw; 
  float uih;

  boolean isSaved;
  boolean isUncheck;

  int unCheckCase;
  // test input text
  INputTextfield testf;

  //initiate  Button object
  Button refresh_b, save_b, cancel_b, continue_b; 
  //color
  ColorSelectUI csu;

  // shape
  ShapeControlPannel span;

  // personal info
  UserInfo u_info;

  // TITLE
  Textbox title;
  Textbox error;
  String errorCase;

  UIset(float x_, float y_){
    x = x_;
    y = y_;

    //title
    String guiTitle = "Audience survey panel";
    title = new Textbox(guiTitle, x+10, y+8, 300, 40, 14, font_meta24);

    error = new Textbox("uncheck", x+10, y+8, 450, 40, 14, font_meta14);

    // declare button 
    refresh_b = new Button("REFRESH", x + 551, y + 322, 58, 20,10, 1,1,font_meta11 );
    cancel_b = new Button("CANCEL", x + 551 + 70, y + 322, 58, 20,10, 1,1,font_meta11);
    save_b = new Button("SAVE", x + 551 + 140, y + 322, 58, 20,10, 1,1,font_meta11);
    continue_b = new Button("CONTINUE", x + 380 -29, y + 250, 58, 20,10, 1,1,font_meta11);

    // csu
    csu = new ColorSelectUI(x+10,y+50,200);

    // shape
    span = new ShapeControlPannel(x+230,y+50,300,300);


    // u_info
    u_info = new UserInfo(x+550, y+50, 200);

    isSaved = false;
    isUncheck = false;
  }

  void display(){

    noStroke();
    fill(0,180);
    rect(x, y, 220, 360);
    fill(0,190);
    rect(x+220, y, 320, 360);
    fill(0,200);
    rect(x+540, y, 220, 360);
    fill(0,220);
    rect(x, y, 760, 40);
    fill(255, 60);
    title.textBox();

    //  button
    refresh_b.display();
    cancel_b.display();
    save_b.display();

    // csu
    fill(255);
    csu.display();

    // u_info
    u_info.display();

    // shape
    span.display();

    // add userinfo;
    // addArray();



    // reset
    if(refresh_b.on == 1 || cancel_b.on == 1){
      reset();
    }

    // checkunfill
    if(save_b.on == 1){
      checkingUnfill();
    }

    // display error
    errorDisplay(unCheckCase);
    if(continue_b.on == 1){
      isUncheck = false;
      //println(isUncheck);
    }
  }

  void setPosition(float xx, float yy){
    x = xx;
    y = yy;
    u_info.setPosition(x, y);
  }

  void addArray(){

    // Question part01-emotion
    emotionArray = splice(emotionArray, csu.askFeel.selectItem, count);
    rv = splice(rv, csu.cset.redbar.rv ,count);
    gv = splice(gv, csu.cset.greenbar.gv ,count);
    bv = splice(bv, csu.cset.bluebar.bv ,count);

    // Question part02-evaluation
    shapeArray_00 = splice(shapeArray_00, span.updateR[0],count);
    shapeArray_01 = splice(shapeArray_01, span.updateR[1],count);
    shapeArray_02 = splice(shapeArray_02, span.updateR[2],count);
    shapeArray_03 = splice(shapeArray_03, span.updateR[3],count);
    shapeArray_04 = splice(shapeArray_04, span.updateR[4],count);
    shapeArray_05 = splice(shapeArray_05, span.updateR[5],count);
    shapeArray_06 = splice(shapeArray_06, span.updateR[6],count);
    shapeArray_07 = splice(shapeArray_07, span.updateR[7],count);
    locationArray = splice(locationArray, span.overallPercentage, count);

    // Question part03-demographic
    genderArray = splice(genderArray, u_info.gender.selectId, count);
    ageArray = splice(ageArray, u_info.age.selectId, count);
    nameArray = splice( nameArray, u_info.input_name.textContents, count);
    commentArray = splice(commentArray, u_info.input_comment.textContents,count);


  }

  void reset(){


    // Question part03-demographic
    u_info.gender.selectId = 0;
    u_info.age.selectId = 0;

    u_info.input_name.textField.textContent = u_info.input_name.textField.textContent.substring(0, 0);
    u_info.input_name.textField2.textContent = u_info.input_name.textField2.textContent.substring(0, 0);
    u_info.input_name.labeltext = "name";
    u_info.input_name.reset = true;

    u_info.input_comment.textField.textContent = u_info.input_comment.textField.textContent.substring(0, 0);
    u_info.input_comment.textField2.textContent = u_info.input_comment.textField2.textContent.substring(0, 0);
    u_info.input_comment.labeltext = "Is it like a ride?";
    u_info.input_comment.reset = true;

    // Question part02-evaluation
    for(int i=0; i< 8 ; i++){
      span.arcShape[i].setSize(2*span.pannelR);
      float degg = radians(360/8);
      span.chandle[i].setPosition(span.cpx+span.pannelR*cos(degg*i),span.cpy+span.pannelR*sin(degg*i));
      span.updateR[i] = span.pannelR;
      span.overallPercentage =0;

    }
    // Question part01-emotion
    csu.askFeel.selectId = 0;

    csu.cset.redbar.incres = 0;
    csu.cset.greenbar.incres = 0;
    csu.cset.bluebar.incres = 0;

  }


  void checkingUnfill(){
    if(csu.askFeel.selectId == 0){
      unCheckCase = 1;
      isUncheck = true;
    }
    if(u_info.gender.selectId == 0){
      unCheckCase = 2;
      isUncheck = true;
    }
    if(u_info.age.selectId == 0){
      unCheckCase = 3;
      isUncheck = true;
    }

    if((csu.cset.redbar.rv+csu.cset.greenbar.gv+csu.cset.bluebar.bv)==0){
      unCheckCase = 4;
      isUncheck = true;
    }

    if(span.overallPercentage == 0){
      unCheckCase = 5;
      isUncheck = true;
    }

    if(u_info.input_comment.labeltext == "Is it like a ride?"){
      unCheckCase = 6;
      isUncheck = true;
    }

    if(u_info.input_name.labeltext == "name"){
      unCheckCase = 7;
      isUncheck = true;
    }



  }

  void errorDisplay(int caseNum_){
    
    noStroke();
    if(isUncheck == true){
      switch(caseNum_){
      case 1:
        errorCase = "You did not select item from the emotion selection, Please select one of them to continue.";
        break;
      case 2:
        errorCase = "You did not mark your gender from the gender selection, Please select one of them to continue.";
        break;
      case 3:
        errorCase = "You did not mark your age group from the age group selection, Please select one of them to continue.";
        break;
      case 4:
        errorCase = "You did not pick the color for your feeling, Please move the color scrollbar to change it.";
        break;
      case 5:
        errorCase = "You did not mark your experience from the question selection, Please mark them to continue.";
        break;
      case 6:
        errorCase = "You did not give your comment, Please give us your opinion to continue..";
        break;
      case 7:
        errorCase = "You did not give your name, Please let us know your name to continue.";
        break;
      }

      fill(0,220);
      rect(x,y,760,360);
      fill(255);
      textFont(font_meta14);
      float ew = textWidth(errorCase);
      text(errorCase, int(x+(760-ew)/2) , int(y+200));
      continue_b.display();
    }
  }
      
}

/////Class UIset end/////////////////////////////////////////////////////







// class UserInfo Begin---> UIset ///////////////////////////////////////
class UserInfo{
  float x, y, w;

  Textbox userT_01, userT_02; 
  Choise age;
  Choise gender;

  // test input text
  INputTextfield input_name, input_comment;

  UserInfo(float x_, float y_, float w_){
    x = x_;
    y = y_;
    w = w_;




    String ut_01 = "Could you leave your general information- Name, Gender, Age Group ? ";
    userT_01 = new Textbox(ut_01, x, y, w, 40, 14, font_meta11);


    //testf
    String name = "name";
    input_name = new INputTextfield(name, x, y+40, 200, 23, 14 ,font_meta12);


    String[] gender_s = {
      "Gender","Female", "male"                             };
    gender = new Choise(gender_s, x+1, y+70, 60, font_meta11);

    String[] age_s = {
      "Age Group", "0-10","11-20", "21-30","31-40","41-50","51-60","61-70","Over 70s"                            };
    age = new Choise(age_s, x+90, y+70, 87, font_meta11);


    String ut_02 = "Does this exhibition remind you of some other place?";
    userT_02 = new Textbox(ut_02, x, y+120, w, 40, 14, font_meta11);

    String comment = "Is it like a ride or a game?";
    input_comment = new INputTextfield(comment, x, y+155, 200, 60, 14 ,font_meta12);

  }




  void display(){
    fill(255);


    // testf
    input_name.display();
    input_comment.display();
    //
    fill(255);
    userT_01.textBox();
    userT_02.textBox();
    age.display();
    gender.display();
  }

  void setPosition(float xx, float yy){
    x = xx;
    y = yy; 
  }

}
// class UserInfo End---> UIset ///////////////////////////////////////




// Class ShapeControlPannel start -----> UIset //////////////////////////////////////////////
class ShapeControlPannel{

  float x, y, w, h;
  int num;
  float chandlew, pannelR, deg, margin ;
  float cpx, cpy, chx, chy;

  // user evaluation
  int[] percentage;
  float[] updateR;

  float[] shapeValue;

  int overallPercentage;
  int sumOfPercentage;

  color centerP; 


  // handle
  Bellipse[] chandle;
  ArcShape[] arcShape;
  Question[] questionB;

  ShapeControlPannel(float x_, float y_, float w_, float h_){
    x = x_;
    y = y_;
    w = w_;
    h = h_;
    num = 8;
    margin = 15;
    pannelR = (w-2*margin)/2;
    cpx = x + pannelR + margin;
    cpy = y + pannelR + margin;
    deg = radians(360/8);
    chandlew = 12;
    overallPercentage = 100;

    centerP = color(0);

    chandle = new Bellipse[num];
    arcShape = new ArcShape[num];
    questionB = new Question[num];

    percentage = new int[num];
    updateR = new float[num];
    shapeValue = new float[num];

    for(int i= 0; i<num ; i++){
      percentage[i] = 100; 
      chx = pannelR*cos(deg*i);
      chy = pannelR*sin(deg*i);

      chandle[i] = new Bellipse(cpx + chx, cpy + chy, chandlew, chandlew, 1);

      arcShape[i] = new ArcShape(cpx, cpy, 2*pannelR, 70,i );

      questionB[i] = new Question(chandle[i].x, chandle[i].y-chandlew, 200, 10, i);

      color borderChandle = color(255,120);
      chandle[i].setColor_b(borderChandle);
      chandle[i].setColor_r(arcShape[i].arcFill);

      updateR[i] = pannelR;

    }



  }

  void update(){

    // update handle position start---
    for(int i=0; i<num ; i++){
      if(chandle[i].isOver && chandle[i].isPressed ){
        chandle[i].isLocked = true;

      }

      if(!mousePressed ){
        chandle[i].isLocked = false;

      }  

      if(chandle[i].isLocked ){

        // overall percentage 
        overallPerc();

        //println(i);
        float minR = ((2*pannelR)-(((2*pannelR+30)/6)*4))/2;//(pannelR)-(((pannelR+30)/6)*5);
        float maxR = pannelR;
        float distance = dist(cpx,cpy,mouseX,mouseY);
        updateR[i] = constrain(distance, minR, maxR);
        float updateX = cpx + updateR[i]*cos(deg*i);
        float updateY = cpy + updateR[i]*sin(deg*i);

        // the value of user evaluation and overall percentage
        percentage[i] = round(((updateR[i]-minR)/(maxR-minR))*100);



        // update handle position
        chandle[i].setPosition(updateX, updateY);
        // update ArcSahpe
        arcShape[i].setSize(2*updateR[i]) ;

        //
        shapeValue = splice(shapeValue,2*updateR[i],i);
      //  println(shapeValue[0]);

        if(dist(chandle[i].x, chandle[i].y, mouseX, mouseY) > minR){
          chandle[i].isLocked = false;

        }
      }

    }
    // update handle position end---




  }


  void display(){

    update();

    // pannel display st------
    stroke(255,80);
    line(x, y, x+w, y+h);
    line(x+w/2, y, x+w/2, y+h);
    line(x, y+h, x+w, y);
    line(x, y+h/2, x+w, y+h/2);



    noStroke();
    fill(0,150);
    rect(x, y, w, h);
    for(int i=0; i<6; i++){
      float inR = (2*pannelR)-(((2*pannelR+30)/6)*i);
      fill(255,10*(i+1));
      ellipse(cpx, cpy, inR, inR);
      fill(centerP,180);
      stroke(0,60);
      float centerR = (2*pannelR)-(((2*pannelR+30)/6)*4);
      ellipse(cpx, cpy, centerR, centerR);
    }


    for(int i=0; i<num ; i++){
      float temx = pannelR*cos(deg*i);
      float temy = pannelR*sin(deg*i);

      noStroke();
      fill(255,30);
      ellipse( cpx + temx, cpy + temy, chandlew, chandlew);
    }

    // pannel display end------

    // handle display & arc
    for(int i=0; i<num ; i++){
      // arcShape
      pushMatrix();
      translate(cpx,cpy);
      rotate(deg*i);
      arcShape[i].display();
      popMatrix();

      // handle
      chandle[i].display();


    }


    // question
    for(int i=0; i<num ; i++){
      if(chandle[i].isOver && !chandle[i].isPressed){
        questionB[i].tboxFill = arcShape[i].arcFill;
        questionB[i].display();
      }
      else if(chandle[i].isLocked){
        String ss = "Your given point is :" + percentage[i];
        float tw = textWidth(ss);
        fill(255);
        text(ss, int(chandle[i].x-tw/2), int(chandle[i].y-10));
      }
    }

  }

  // overall percentage
  int overallPerc(){
    sumOfPercentage = percentage[0] + percentage[1]+ percentage[2]+ percentage[3]+ percentage[4]+ percentage[5]+ percentage[6]+ percentage[7];
    overallPercentage = round(sumOfPercentage/num);


    return overallPercentage;
  }




}
// Class ShapeControlPannel end ////////////////////////////////////////////////




// class Question begin --> class ShapeControlPannel ////////////////////////////////////
class Question{
  float x, y, w, h;
  float cx, cy, updatetx, updatety;
  float margin;

  int caseNum;
  String qtext;
  color tboxFill;
  // Textbox
  Textbox tBox;

  Question(float x_, float y_, float w_, float margin_, int caseNum_){
    x = x_;
    y = y_;
    w = w_;
    caseNum = caseNum_;
    margin = margin_;

    switch(caseNum){
    case 0:
      qtext = "Do you think things are moving fast or slow?  ";
      break;
    case 1:
      qtext = "How do the images make you feel?  ";
      break;
    case 2:
      qtext = "Can you concentrate on what is happening ?  ";
      break;
    case 3:
      qtext = "Do you like sharing the space with others?  ";
      break;
    case 4:
      qtext = "Was the exhibition what you expected or was it very different? ";
      break;
    case 5:
      qtext = "Did you learn something new and or see something new ? ";
      break;
    case 6:
      qtext = "Do you see and hear more than you feel? ";
      break;
    case 7:
      qtext = "Do you feel confident or nervous when moving around the space?";
      break;
      
      // "Moving", "Image","Concentrating","Sharing","Expecting","Learning","see/hear","The space"      };
    }

    tBox = new Textbox(qtext, x, y, w-10, w, 13, font_meta12);

  }

  void display(){

    float newW = w;
    float newH = tBox.getTh()+2*margin;
    if(caseNum >0 && caseNum < 4){
      // arrow up
      updatety = y + tBox.getTh()+margin;
      updatetx = x - w/2 + margin;
      noStroke();
      fill(tboxFill);
      triangle(updatetx+(newW/2)-20, updatety-margin, updatetx+(newW/2)-10, updatety-margin-10, updatetx+(newW/2), updatety-margin);
    }
    else{
      // arrow down
      updatety = y - tBox.getTh()-(margin+7);
      updatetx = x - w/2 + margin;
      noStroke();
      fill(tboxFill);
      triangle(updatetx+(newW/2)-20, y-10 , updatetx+(newW/2)-10, y+3, updatetx+(newW/2), y-10);
    }


    noStroke();
    fill(tboxFill);
    rect(updatetx-margin, updatety-margin, newW+margin/2, newH);


    tBox.setPosition( updatetx, updatety );
    fill(255);
    tBox.textBox();
  }

}
// class QUestion end ///////////////////////////////////////////////////////////////////



/// class UserArc begin /////////////////////////////////////////////////////////////////
class UserDeatilArc{

  float x, y, w, h, deg;
  int id;

  ArcShape[] userArc_item;
  int itemNum;
  int al;
  int b;

  float sSize;
  float roundArc;
  float[] temS;

  Textbox[] itemTitle;
  String[] itemTitle_string = {
    "Moving", "Image","Concentrating","Sharing","Expecting","Learning","see/hear","The space"     };

  UserDeatilArc(float x_, float y_, float w_, float h_, float sSize_,int b_,int al_,int id_){
    x = x_;
    y = y_;
    w = w_;
    h = h_;
    id = id_;
    b = b_; //boundary
    al =al_; // alpha of arc
    sSize = sSize_;

    itemNum = 8;
    temS = new float[itemNum];

    deg = radians(360/8);


    //sValue = shapeArray_f[id];
    userArc_item = new ArcShape[itemNum];
    itemTitle = new Textbox[itemNum];

    float[] temSS = {
      shapeArray_00[id], shapeArray_01[id], shapeArray_02[id], shapeArray_03[id], shapeArray_04[id], shapeArray_05[id], shapeArray_06[id], shapeArray_07[id]     };


    for(int i =0 ; i< itemNum; i++){
      userArc_item[i] = new ArcShape(x, y, temSS[i]*0.5, al,i);
      itemTitle[i] = new Textbox(itemTitle_string[i], x , y, 100,12,12,font_meta10);
      temS[i] = temSS[i];
    }

    roundArc = (max(temS)*sSize)+10;


  }





  void display(){

    
    
    
    for(int i=0; i<8 ; i++){
        float deg = radians(360/8);
        pushMatrix();
        translate(x, y);
        rotate(deg*i); 
        stroke(255,160);
        line(-(roundArc/2+10), 0, roundArc/2+10, 0);
        ellipse(-(roundArc/2+10), 0, 5, 5);
        ellipse(roundArc/2+10, 0, 5, 5);
        popMatrix();
      }
      
    
    if(b == 1){
      int bnum = 45;
      noStroke();
      
      fill(0,135);
      smooth();
      ellipse(x, y, roundArc+130, roundArc+130);
      
      fill(255,900);
      ellipse(x, y, roundArc-2, roundArc-2);
    }
    
    
    

    for(int i=0; i<itemNum ; i++){

      // arcShape
      pushMatrix();
      translate(x,y);
      rotate(deg*i);
      noStroke();
      userArc_item[i].display();
      userArc_item[i].growSize(temS[i]*sSize);
      popMatrix();

    }


    textFont(font_meta14,14);
      String mx = commentArray[id];
      int mxw = int(textWidth(mx));
      noStroke();
      fill(60);
     // text(mx, x-mxw/2 ,y-roundArc/2-40);
      
      
      
      // name
      String an = nameArray[id];
      fill(255);
      noStroke();
      textFont(font_meta11);
      float temtextn_x = textWidth(an)/2; 
      text(an,int(nodef[id].x2-temtextn_x),int(nodef[id].y2+20));
      
      
      // emotion
      String a = emotionArray[id];
       fill(255);//fill(rv[id], gv[id], bv[id]);
      textFont(font_meta11);
      float temtext_x = textWidth(a)/2; 
      text(a,int(nodef[id].x2-temtext_x),int(nodef[id].y2 + 35));

      
      fill(rv[id], gv[id], bv[id]);
      ellipse(x, y, 15,15);

  }



    

  void update(float xx, float yy){
    x = xx;
    y = yy;
  }

  void textDisplay(){
    for(int i=0; i<itemNum ; i++){
      fill(userArc_item[i].arcFill); 

      if(i==0 ){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if(i==7){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2+15)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if( i==1){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2+15)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if( i==3){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if( i==4){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if( i==5){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if(i==2){
        itemTitle[i].setPosition(x+(roundArc/2)*cos(deg*i)-(itemTitle[i].getLength()/2), y+(roundArc/2+15)*sin(deg*i));  
        itemTitle[i].textBox();
      }
      if(i==6){
        itemTitle[i].setPosition(x+(roundArc/2)*cos(deg*i)-(itemTitle[i].getLength()/2), y+(roundArc/2+15)*sin(deg*i)-10);
        itemTitle[i].textBox();
      }
    }
  }



  void reset(){
    for(int i=0; i<itemNum ; i++){
        userArc_item[i].w = 0;
        userArc_item[i].h = 0;
        b = 0;
   
    }
  }

}
/// class UserDeatilArc end ///////////////////////////////////////////////////////////////////



/// class UserArc begin /////////////////////////////////////////////////////////////////
class UserArc{

  float x, y, w, h, deg;
  int id;

  ArcShape[] userArc_item;
  int itemNum;
  int al;
  int b;

  float sSize;
  float roundArc;
  float[] temS;

  Textbox[] itemTitle;
  String[] itemTitle_string = {
    "Moving", "Interesting","Concentrating","Sharing","Expecting","Learning","Feeling","Confidencing"      };

  UserArc(float x_, float y_, float w_, float h_, float sSize_,int b_,int al_,int id_){
    x = x_;
    y = y_;
    w = w_;
    h = h_;
    id = id_;
    b = b_; //boundary
    al =al_; // alpha of arc
    sSize = sSize_;

    itemNum = 8;
    temS = new float[itemNum];

    deg = radians(360/8);


    //sValue = shapeArray_f[id];
    userArc_item = new ArcShape[itemNum];
    itemTitle = new Textbox[itemNum];

    float[] temSS = {
      shapeArray_00[id], shapeArray_01[id], shapeArray_02[id], shapeArray_03[id], shapeArray_04[id], shapeArray_05[id], shapeArray_06[id], shapeArray_07[id]     };


    for(int i =0 ; i< itemNum; i++){
      userArc_item[i] = new ArcShape(x, y, w, al,i);
      itemTitle[i] = new Textbox(itemTitle_string[i], x , y, 100,12,12,font_meta10);
      temS[i] = temSS[i];
    }

    roundArc = (max(temS)*sSize)+10;


  }





  void display(){

    if(b == 1){
      int bnum = 45;
      noStroke();
      fill(255);
      ellipse(x, y, roundArc-2, roundArc-2);
      
      
      
    }

    for(int i=0; i<itemNum ; i++){

      // arcShape
      pushMatrix();
      translate(x,y);
      rotate(deg*i);
      noStroke();
      userArc_item[i].display();
      userArc_item[i].growSize(temS[i]*sSize);
      popMatrix();

    }


  }

  void update(float xx, float yy){
    x = xx;
    y = yy;
  }

  void textDisplay(){
    for(int i=0; i<itemNum ; i++){
      fill(userArc_item[i].arcFill); 

      if(i==0 ){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if(i==7){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2+15)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if( i==1){
        itemTitle[i].setPosition(x+(roundArc/2+20)*cos(deg*i), y+(roundArc/2+15)*sin(deg*i)-itemTitle[i].getTh()/2);
        itemTitle[i].textBox();
      }
      
      if( i==3){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if( i==4){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if( i==5){
        itemTitle[i].setPosition(x+(roundArc/2+15)*cos(deg*i)-(itemTitle[i].getLength()), y+(roundArc/2+20)*sin(deg*i)-itemTitle[i].getTh()/2);  
        itemTitle[i].textBox();
      }
      if(i==2){
        itemTitle[i].setPosition(x+(roundArc/2)*cos(deg*i)-(itemTitle[i].getLength()/2), y+(roundArc/2+15)*sin(deg*i));  
        itemTitle[i].textBox();
      }
      if(i==6){
        itemTitle[i].setPosition(x+(roundArc/2)*cos(deg*i)-(itemTitle[i].getLength()/2), y+(roundArc/2+15)*sin(deg*i)-10);
        itemTitle[i].textBox();
      }
    }
  }



  void reset(){
    for(int i=0; i<itemNum ; i++){
        userArc_item[i].w = 0;
        userArc_item[i].h = 0;
        b = 0;
   
    }
  }

}
/// class UserArc end ///////////////////////////////////////////////////////////////////


// Class ArcShape start --> Class ShapeControlPannel ///////////////////////////////////////////////////////
class ArcShape{
  float x, y, w, h, sto, sta; 
  color arcFill;
  int alphaN;


  ArcShape(float x_, float y_, float w_, int alphaN_,int i_){
    x = x_;
    y = y_;
    w = w_;
    h = w;
    alphaN = alphaN_;


    switch(i_){
    case 0:
      arcFill = color(230,172,80);
      break;
    case 1:
      arcFill = color(178,86,61);
      break;
    case 2:
      arcFill = color(255,87,202);
      break;        
    case 3:
      arcFill = color(106,51,178);
      break;
    case 4:
      arcFill = color(73,102,216);
      break;
    case 5:
      arcFill = color(63,199,130);
      break;
    case 6:
      arcFill = color(126,210,73);
      break;
    case 7:
      arcFill = color(160,149,46);
      break;  
    }

  }

  void display(){
    noStroke();
    fill(arcFill, alphaN);
    float degg = radians(360/16);
    float start = TWO_PI-degg;
    float stop = degg;

    sto = start;
    sta = stop;

    arc(0, 0, w, h, start, stop);

  }

  void setSize(float x){
    h = w = x;
  }

  void growSize(float x){

    float targetX = x;
    float increas = 0.3;
    if(w < targetX){
      w += (targetX-w)*increas;
      h += (targetX-h)*increas;
    }

    if(w == targetX){
      h = w = x;
    }




  }



}

// Class ArcShape end ///////////////////////////////////////////////////////





///Class ColorSelectUI start ---> UIset//////////////////////////////////////////////
class ColorSelectUI{

  // start locaton, width
  float x,y,w,h;
  //
  float cx,cy;

  // comment pannel
  Choise askFeel;
  String ss[]={
    "Emotion","Excited", "Relaxed", "Inquisitive", "Nervous", "Unsure",  "Invigorated"             };

  // colorpannedl
  Colorpannel cset;

  // textBox
  Textbox tb_01,tb_02;
  Textbox tb_03;


  ColorSelectUI(float x_, float y_, float w_){
    x = x_;
    y = y_;
    w = w_;

    // textBox ask feel
    String s_tb_01 = "Just before entering the exhibition how do you feel?";
    tb_01 = new Textbox(s_tb_01, x , y, w,40,14,font_meta11);
    //println(tb_01.getTh());
    String s_tb_02 = "Today, it was ";
    tb_02 = new Textbox(s_tb_02, x , y+43, w,20,14,font_meta14);


    // comment pannel_Choise class
    askFeel = new Choise(ss, x+tb_02.getLength()+8, y+40, w-(tb_02.getLength()+32), font_meta11);

    // textBox ask color
    String s_tb_03 = "If you express your feelings with a color, What kind of color could be matched with your feeling?";
    tb_03 = new Textbox(s_tb_03, x , askFeel.y+askFeel.sellh+30, w, 60,14,font_meta11);



    // color pannel _ cset
    cset = new Colorpannel(x, askFeel.y + askFeel.sellh+tb_03.h+25, w, 25);

  } 

  void display(){
    //textBox
    fill(255);
    tb_01.textBox();
    tb_02.textBox();
    tb_03.textBox();

    // color
    cset.display();

    //askFeel display
    askFeel.display();
    //println(askFeel.selectItem);

  }



}
///Class ColorSelectUI end /////////////////////////////////////////



// color pannel --> ColorSelectUI////////////////////////////////////////////

class Colorpannel{
  float x, y, w, h;

  Scrollbar redbar;
  Scrollbar greenbar;
  Scrollbar bluebar;

  color pickedColor;
  Textbox tb_04;


  Colorpannel(float xx, float yy, float ww, float hh){

    x = xx;
    y = yy;
    w = ww;
    h = hh;


    // color handle
    redbar = new Scrollbar ( w, 10);
    greenbar = new Scrollbar (w, 10);
    bluebar = new Scrollbar (w, 10);

    String s_tb_04 = "Move the scrollbars left and right to change the represented color.";
    tb_04 = new Textbox(s_tb_04, x , y+45, w, 60,12,font_meta10);

  }

  void display(){

    //selected colored rectangle
    pickedColor = color(redbar.rv, greenbar.gv, bluebar.bv);
    uset.span.centerP = pickedColor;
    noStroke();

    fill(255,120); 
    rect(x, y, w, 35);
    fill(pickedColor);
    rect(x+1, y+1, w-2, 33);

    // mesage
    int tav = redbar.rv + greenbar.gv + bluebar.bv;
    //println(tav);
    if(tav > 0  && tav < 380){
      fill(255);
    }
    else{
      fill(0);
    }

    String st = "You selected this colour.";
    textFont(font_meta11,11);

    float sl = (w-textWidth(st))/2;
    float sh = textAscent();
    float ss = textDescent();
    float th = (sh+ss);
    text(st,int(x+sl),int(y+2*th));


    fill(255,160);
    tb_04.textBox();

    redbar.display(x, y+75, 1);
    greenbar.display(x, y+100, 2);
    bluebar.display(x, y+125, 3);

  }



}

//-------------------------------------------------------------class colorpannel end


/////// Scrollbar --> Colorpannel ////////////////////////////////////////////////////
class Scrollbar{
  float tx, y, h, w;
  float shx, shy, shh, shw,ratio,maxi;
  float incres;
  boolean over;
  boolean locked;
  color pointC ;
  color overC = color(255);
  color handlec = color(188,202,211);
  color normalc = color(188,202,211);
  color pressed = color(255);


  int rv;
  int gv;
  int bv;

  Scrollbar(float ww, float hh){
    h = hh;
    w = ww;
    over = false;
    incres =0;
    locked = false;

    rv = 0;
    gv = 0;
    bv = 0;
  } 

  void display(float x, float y, int nn){
    update();
    over();
    noStroke();
    pointC = color (rv,gv,bv);

    tx = x;
    shx = tx+incres;
    shy = y;
    shw = w/20;
    ratio=(w+110)/255;
    for(int i =0; i<w; i++){
      switch(nn){
      case 1:
        fill(i*ratio, 0, 0);
        rect(x+i, y+4 , 1, 12); 
        rv = floor(255-((maxi-incres)*(255/maxi)));
        break;

      case 2:
        fill( 0,i*ratio, 0);
        rect(x+i, y+4 , 1, 12);
        gv = floor(255-((maxi-incres)*(255/maxi))); 
        break;

      case 3:
        fill(0, 0, i*ratio);
        rect(x+i, y+4 , 1, 12);
        bv = floor(255-((maxi-incres)*(255/maxi))); 
        break;
      }   
    }
    fill(handlec);
    rect(shx,shy,shw,20); 




  }



  void update(){
    if(mousePressed && over){
      locked = true;
    }
    if(!mousePressed){
      locked = false;
    }

    if(over || locked){
      handlec = pressed;
    }
    else{
      handlec = normalc;
    }

    if(locked){
      maxi=w-shw;
      incres =constrain(mouseX-tx-5, 0, w-shw);
      //shp.shapeC = pointC ;
    }



  }

  void over(){
    if(overSh()){
      over = true;
    }
    else{
      over = false;
    }
  }

  boolean overSh(){
    if(mouseX >= shx && mouseX <= shx+shw && mouseY >= shy && mouseY <= shy+20){
      return true;
    }
    else{
      return false;
    }
  }

}