//the power button state is not fully implemented yet, it should act to be the same as skill buttons - tap again to deselect

//the background chart line state is not set up yet, some should be more transparent when the skill button is inactive

//!!!!!!!!!!!!!!!update: shouldn't divide skill states by grad level, should always be driven by data!!!!!!!!!!!!!!!!!!


var skill_num = 5//number of skill strings
var gap = 70;//gap between skill strings
var min_poly = 50;//size of the chart
var poly_num = 4;//number of pentagons
var highlight = null;
var currentPosition = null;

//skill values, 0 - 100
var ideas = 1; //alwas 0 for all K
var images = 1; //always 0 for K-BOY,MOY
var sounds = 1; //alwas 100 for G2  
var letters = 1; //alwas 100 for G2-EOY
var words = 1; //always active

var kb = document.getElementById("k-b");
var ke = document.getElementById("k-e");
var g1m = document.getElementById("g1-m");
var g2b = document.getElementById("g2-b");
var g2e = document.getElementById("g2-e");
var bookMagic = document.getElementById("bookMagic"); 
var inspiration = document.getElementById("inspiration"); 
var mindReader = document.getElementById("mindReader"); 

var skill_ideas = document.getElementsByClassName("skill_ideas");
var skill_images = document.getElementsByClassName("skill_images");
var skill_sounds = document.getElementsByClassName("skill_sounds");
var skill_letters = document.getElementsByClassName("skill_letters");


var skill_length;
var positions;
var skillBtns = [];
var powerType = null;
var powerStroke = null;
var powerFill = null;


//power buttons
bookMagic.onclick = power1;
inspiration.onclick = power2;
mindReader.onclick = power3;

//posibility of growth chart by grade level 
kb.onclick = btnKB;
ke.onclick = btnKE;
g1m.onclick = btnG1M;
g2b.onclick = btnG2B;
g2e.onclick = btnG2E;

function btnKB() {
  ideas = 0; //always 0
  images = 0; //always 0
  sounds = random(50);
  letters = random(50);
  words = random(50);
  inactiveSkill([0,1], 0);
}
function btnKE() {
  ideas = 0; //always 0
  images = random(30, 100);
  sounds = random(30, 100);
  letters = random(30, 100);
  words = random(30, 100);
  inactiveSkill([1], 0);
}
function btnG1M() {
  ideas = random(100); 
  images = random(100);
  sounds = random(100);
  letters = random(100);
  words = random(100);
  inactiveSkill();

}
function btnG2B() {
  ideas = random(50); 
  images = random(50);
  sounds = 100;//always 100
  letters = random(50);
  words = random(50);
  inactiveSkill([2], 1);
}
function btnG2E() {
  ideas = random(100); 
  images = random(100);
  sounds = 100;//always 100
  letters = 100;//always 100
  words = random(100);
  inactiveSkill([2, 3], 1);

}

function setup() {
  createCanvas(windowWidth, windowHeight);
  skill_length = gap * (poly_num - 1) + min_poly;

  for (var i = 0; i < skill_num; i++) {
    push();
    skill_icon(i);
    pop();
  }

}

// function windowResized() {
//   resizeCanvas(windowWidth, windowHeight);
// }

function draw() {
  background(230);
  noFill();
  stroke(170, 203,94);
  strokeWeight(2);
  
  //pentagons
  for (var i = 0; i < poly_num; i++) {
    push();
    polygon(i); 
    pop();
  }
  
  //skill strings
  for (var i = 0; i < skill_num; i++) {
    push();
    skill_line(i);
    pop();
  }
  
  //dynamic teal growth
  push();
  positions = myGrowth(images, ideas, sounds, letters, words);
  pop();
  
  //highlight skill
  if(highlight !== null) {
    powerType = null;
    
    push();
    stroke(125, 166,31);
    strokeWeight(8);
    skill_line(highlight);
    //center dot
    noStroke();
    fill(125, 166,31);
    ellipse(0,0,15,15);
    //skill growth value
    fill(65, 209, 178);
    stroke(255);
    strokeWeight(4);
    skillPoint(highlight, 20);
    pop();
    
  } else {
  }
 
  //need to add deselect
  if (powerType !== null){
    highlight = null;
    powerChart();
   }
 
}

function inactiveSkill(skillIndexes, whichState){
  highlight = null;
  var skillStates = ['inactive', 'full', 'selected']
  for (var i = 0; i < skill_num; i++) {
    for (var j = 0; j < skillStates.length; j++){
      skillBtns[i].removeClass(skillStates[j]);
    }
  }
  for (var i = 0; i < skillIndexes.length; i++) {
    skillBtns[skillIndexes[i]].addClass(skillStates[whichState]);
  }
}

function power1(){
  // bookMagic.addClass('selected');
  powerStroke = color(124, 9,255);
  powerFill = color(218, 186, 255, 125);
  powerType = 0;
}
function power2(){
  powerStroke = color(255, 47,127);
  powerFill = color(255, 207, 223, 125);
  powerType = 1;
}
function power3(){
  powerStroke = color(254, 85,0);
  powerFill = color(255, 201, 150, 125);
  powerType = 2;
}
function powerChart(){
   push();
   stroke(powerStroke);
   strokeWeight(4);
   fill(powerFill);
   polygon(powerType); 
   pop();
}

function skill_icon(r) {
  var angel = TWO_PI / skill_num * r;
  var x = (skill_length + gap/3) * sin(angel) * -1 + width/2;
  var y = (skill_length + gap/3) * cos(angel) * -1 + height/2;
  var skillNameArray = ["images","ideas","sounds","letters","words"]
  var currentButton = createButton(skillNameArray[r]);
  currentButton.position(x, y);
  currentButton.addClass('skills');
  currentButton.mousePressed(selectSkill);
  skillBtns.push(currentButton);
  
  function selectSkill(){
    if (!skillBtns[r].elt.classList.contains('inactive')) {
      if (r == currentPosition) {
        highlight = null;
        currentPosition = null;
        skillBtns[r].removeClass('selected');

      } else {
        highlight = r;
        currentPosition = r;
        skillBtns[r].addClass('selected');
        removeState(r);
      }
    }
  }
}

function removeState(notThisOne) {
  for (var i=0;i<skill_num;i++) {
    if (i != notThisOne) {
      skillBtns[i].removeClass('selected');
    }
  }
}

function skillPoint(skillN, d) {
  var x = positions[skillN][0];
  var y = positions[skillN][1];
  ellipse(x,y,d,d);
}

function myGrowth(g1, g2, g3, g4, g5){
  var angel = TWO_PI / skill_num;
  var gArray = [g1, g2, g3, g4, g5];
  var mgArray = [];
  
  for (i = 0; i < skill_num; i++) {
    mgArray.push(map(gArray[i], 0, 100, 0, skill_length));
  }

  beginShape();
  fill(80, 227, 194, 200);
  stroke(33, 182, 160);
  translate(width*0.5, height*0.5);
  var xyPositions = [];
  for (i = 0; i < skill_num; i++) {
    var x = mgArray[i] * sin(angel * i) * -1;
    var y = mgArray[i] * cos(angel * i) * -1;
    vertex(x, y);
    var mgXY = [x,y];
    xyPositions.push(mgXY);
  }
  endShape(CLOSE);
  return xyPositions;
}
  
function skill_line(r){
  var angel = TWO_PI / skill_num * r;
  var l = skill_length;
  var lx = l * sin(angel) * -1; 
  var ly = l * cos(angel) * -1;
  translate(width/2, height/2);
  line (0,0,lx,ly);
}

function polygon(poly_line) {
//need to seprate each line of the shape for inactive skills
  var x = 0;
  var y = 0;
  var radius = min_poly + gap * poly_line;
  var angle = TWO_PI / skill_num;
  beginShape();
  translate(width*0.5, height*0.5);
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  rotate(HALF_PI * -1);
  endShape(CLOSE);
}