void drawUI()
{
  noStroke();
  fill(32,32,64);
  rect(400,0,200,400);
  drawCurrent();
  drawMouse();
  drawMapScale();
  drawInstructions();
  drawHighlight();
}

void drawCurrent()
{
  char el='E';
  char nl='N';
  int xv=xp;
  int yv=yp;
  fill(220,230,250,180);
  stroke(128,128,255);
  rect(410,10,180,16);
  fill(0);
  if(xp<0)
  {
    el='W';
    xv=-xp;
  }
  if(yp<0)
  {
    nl='S';
    yv=-yv;
  }
  text("Center: ("+xv+""+el+","+yv+""+nl+")",412,23);
}

void drawMouse()
{
  char el='E';
  char nl='N';
  int xv=mx;
  int yv=my;

  fill(220,230,250,180);
  stroke(128,128,255);
  rect(410,30,180,16);
  fill(0);

  if(xv<0)
  {
    el='W';
    xv=-xv;
  }
  if(yv<0)
  {
    nl='S';
    yv=-yv;
  }
  text("Mouse: ("+xv+""+el+","+yv+""+nl+")",412,43);
//  text("Mouse: ("+nfs(mx,3)+","+nfs(my,3)+")",412,43);
}

void drawMapScale()
{
  fill(220,230,250,180);
  stroke(128,128,255);
  rect(410,50,180,16);
  fill(0);
  text("Map size: "+zoom,412,63);
}

void drawInstructions()
{
  fill(220,230,250,180);
  stroke(128,128,255);
  rect(410,320,180,64);
  fill(0);
  text("Instructions:",412,333);
  text("Click mouse to center.",412,349);
  text("Z to zoom in.",412,365);
  text("X to zoom out.",412,381);
}

int topoflist=0;
String hlName="";
int hlID=-1;

void drawHighlight()
{
  fill(220,230,250,180);
  stroke(128,128,255);
  rect(410,70,180,130);
  rect(574,93,15,15);
  rect(574,183,15,15);
  fill(220,230,250,64);
  rect(574,108,15,75);
  fill(220,230,250,180);
  
  sqType[] tmp=tm.alphabetical();
  
  float sb=topoflist*(75.0/tmp.length);
  rect(574,108+sb,15,3);

  
  if(mp)
  {
    if(mouseX>=574 && mouseX<589 && mouseY>=93 && mouseY<108)
    {
//      mp=false;
      if(topoflist>=1)
        topoflist-=1;
    }
    
    if(mouseX>=574 && mouseX<589 && mouseY>=183 && mouseY<198)
    {
//      mp=false;
      if(topoflist<tmp.length-8)
        topoflist+=1;
    }
    
    if(mouseX>=574 && mouseX<589 && mouseY>=108 && mouseY<183)
    {
      topoflist=((mouseY-108)*tmp.length)/75;
    }
  }
  

  if(mouseX>=412 && mouseX<574 && mouseY>93 && mouseY<197)
  {
    int id=(mouseY-93)/13;
    rect(412,94+id*13,160,13);
    if(mp && id+topoflist<tmp.length && id+topoflist>=0)
    {
      hlName=tmp[id+topoflist].name;
      hlID=tmp[id+topoflist].id;
    }
  }
  fill(0);
  text("Highlight: "+hlName,412,83);

  for(int i=0;i<8;i++)
  {
    if(i+topoflist<tmp.length)
    {
      text(tmp[i+topoflist].name,412,106+i*13);
    }
  }
  
  
}