var main_canvas;
var width_slider;
var height_slider;
var alpha_slider;

var sel_mode;

var canvasWidth = 960;
var canvasHeight = 500;

var savedValues = null;

var initialDrawMode = "exhibition";
var curDrawMode;

var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

var soloCurLetter = "1";
var soloPrevObj = null;
var soloIsAnimating = false;
var soloNumAnimationFrames = 10;
var soloCurAnimationFrame = 0;

var chosenLetters = ["P", "A", "P", "E", "R"];
var chosenPrevObjs = ["P", "A", "P", "E", "R"];
var chosenIsAnimating = [false, false, false, false, false];
var chosenNumAnimationFrames = 10;
var chosenCurAnimationFrame = [0, 0, 0, 0, 0];
var curChosenLetter = 0;

var lastKeyPressedTime;
var secondsUntilSwapMode = 5;
var lastWordSwappedTime;
var isSwappingWords = true;
var secondsPerWord = 8;
var curSwapWord = 0;

var swapWords = [
  "PAPER",
  "TWIST",
  "FAIRY",
  "SHARD",
  "DONUT",
  "CREPE",
  "SKUNK",
  "JUDGE",
  "DRAIN",
  "EXILE",
  "AMAZE",
  "ASTRO",
  "HEART",
  "QUEST",
  "RIVER",
  "BRAIN",
  "PLUCK"
]

function preload () {
  if (savedValues == null) {
    savedValues = loadJSON('alphabet.json');
  }
}

function setup () {
  main_canvas = createCanvas(canvasWidth, canvasHeight);

  angleMode(DEGREES);

  var now = millis();
  lastKeyPressedTime = now;
  lastWordSwappedTime = now - 1000 * (secondsPerWord - 1);

  width_slider = createSlider(1, 100, 23);
  height_slider = createSlider(-30, 30, 7);
  alpha_slider = createSlider(0, 400, 400);

  sel_mode = createSelect();
  sel_mode.option("alphabet");  
  sel_mode.option("solo"); 
  sel_mode.option("exhibition") 
  sel_mode.changed(modeChangedEvent);
  sel_mode.value(initialDrawMode);
  curDrawMode = initialDrawMode;

  button = createButton('show data');
  button.mousePressed(buttonPressedEvent);

  main_canvas.parent('canvasContainer');
  width_slider.parent('slider15Container');
  height_slider.parent('slider16Container');
  alpha_slider.parent('slider23Container');

  sel_mode.parent('modeContainer');
  button.parent('buttonContainer');
}

function buttonPressedEvent() {
  var obj = sliderToDataObject();
  json = JSON.stringify(obj, null, 2);
  console.log(json);
}

function modeChangedEvent() {
  curDrawMode = sel_mode.value();
}

var colorFront = [220, 187, 255];
var colorBack = [87, 82, 97];
var rotY = 0.0;
var wd = 10;
var xOffset = 16;
var yOffset = 3;
var a = 400;

function draw () {
  background(colorBack);
  a = alpha_slider.value();
  xOffset = width_slider.value();
  yOffset = height_slider.value();

  var o = 40
  var w2 = width - 2 * o
  var h2 = height - 2 * o
  var cur_index = 0;
  var hw = (w2 / 9.0) / 2.0;
  var hh = (h2 / 4.0) / 2.0;

  if (curDrawMode == "exhibition") {
    now = millis();
    if(!isSwappingWords && lastKeyPressedTime + 1000 * secondsUntilSwapMode < now) {
      isSwappingWords = true;
    }

    if(isSwappingWords) {
      if(lastWordSwappedTime + 1000 * secondsPerWord < now) {
        lastWordSwappedTime = now;
        curSwapWord = (curSwapWord + 1) % swapWords.length;
        for(var i=0; i<5; i++) {
          var c = swapWords[curSwapWord][i];
          swapExhibitLetter(i, c, i*15);
        }
      }
    }
  }

  if (curDrawMode == "alphabet") {
    for(var j=0; j<4; j++) {
      for(var i=0; i<9; i++) {
        var cur_letter = letters[cur_index];
        var obj = savedValues[cur_letter];
        drawFromObject(o + hw + i * w2/9.0, o - 50 + hh + j * h2/4.0, 0.40, obj)
        cur_index = cur_index + 1;
      }
    }
  }
  else if (curDrawMode == "solo") {

    if(soloIsAnimating && soloCurAnimationFrame >= (soloNumAnimationFrames*7)) {
      soloIsAnimating = false;
    }

    if(soloIsAnimating) {
      soloCurAnimationFrame = soloCurAnimationFrame + 1;
    }
    var obj = savedValues[soloCurLetter];
    if (soloCurAnimationFrame <= 10) {
      obj = computeCurrentSoloChar(7, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 10) {
        soloPrevObj = obj;
      }
    } 
    if (soloCurAnimationFrame <= 20 && soloCurAnimationFrame > 10) {
      obj = computeCurrentSoloChar(6, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 20) {
        soloPrevObj = obj;
      }
    }
    if (soloCurAnimationFrame <= 30 && soloCurAnimationFrame > 20) {
      obj = computeCurrentSoloChar(5, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 30) {
        soloPrevObj = obj;
      }
    }
    if (soloCurAnimationFrame <= 40 && soloCurAnimationFrame > 30) {
      obj = computeCurrentSoloChar(4, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 40) {
        soloPrevObj = obj;
      }
    }
    if (soloCurAnimationFrame <= 50 && soloCurAnimationFrame > 40) {
      obj = computeCurrentSoloChar(3, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 50) {
        soloPrevObj = obj;
      }
    }
    if (soloCurAnimationFrame <= 60 && soloCurAnimationFrame > 50) {
      obj = computeCurrentSoloChar(2, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
      if (soloCurAnimationFrame <= 60) {
        soloPrevObj = obj;
      }
    }
    if (soloCurAnimationFrame < 70 && soloCurAnimationFrame > 60) {
      obj = computeCurrentSoloChar(1, soloCurAnimationFrame%10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
    }
    if (soloCurAnimationFrame >= 69) {
      obj = computeCurrentSoloChar(1, 10);
      drawFromObject(o + w2/2.0, o + h2/3.0, 1.0, obj);
    }
  } 
  else if (curDrawMode == "exhibition") {
    for(var i=0; i<5; i++) {

      if(chosenIsAnimating[i] && chosenCurAnimationFrame[i] >= (chosenNumAnimationFrames*7)) {
        chosenIsAnimating[i] = false;
      }

      if(chosenIsAnimating[i]) {
        chosenCurAnimationFrame[i] = chosenCurAnimationFrame[i] + 1;
      }

      var obj = savedValues[curChosenLetter];
      if (chosenCurAnimationFrame[i] <= 10) {
        obj = computeCurrentChosenChar(7, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      } 
      if (chosenCurAnimationFrame[i] <= 20 && chosenCurAnimationFrame[i] > 10) {
        obj = computeCurrentChosenChar(6, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      }
      if (chosenCurAnimationFrame[i] <= 30 && chosenCurAnimationFrame[i] > 20) {
        obj = computeCurrentChosenChar(5, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      }
      if (chosenCurAnimationFrame[i] <= 40 && chosenCurAnimationFrame[i] > 30) {
        obj = computeCurrentChosenChar(4, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      }
      if (chosenCurAnimationFrame[i] <= 50 && chosenCurAnimationFrame[i] > 40) {
        obj = computeCurrentChosenChar(3, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      }
      if (chosenCurAnimationFrame[i] <= 60 && chosenCurAnimationFrame[i] > 50) {
        obj = computeCurrentChosenChar(2, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
        chosenPrevObjs[i] = obj;
      }
      if (chosenCurAnimationFrame[i] < 70 && chosenCurAnimationFrame[i] > 60) {
        obj = computeCurrentChosenChar(1, chosenCurAnimationFrame[i]%10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
      }
      if (chosenCurAnimationFrame[i] >= 69) {
        obj = computeCurrentChosenChar(1, 10, i);
        drawFromObject(o + w2/12.0 + i*w2/5.0, o + h2/3.0, 1.0, obj);
      }
    }
  }

}

function drawFromObject (xPosition, yPosition, sz, obj) {
  push();
  translate(xPosition, yPosition);
  scale(sz, sz);
  
  var highlight = color(255,200,200,a);
  var shadow = color(220, 120, 120, a);
  stroke(red(shadow)-30, green(shadow)-30, blue(shadow)-30);
  col1 = lerpColor(highlight, shadow, obj["box1"]["color"]);
  col2 = lerpColor(highlight, shadow, obj["box2"]["color"]);
  col3 = lerpColor(highlight, shadow, obj["box3"]["color"]);
  col4 = lerpColor(highlight, shadow, obj["box4"]["color"]);
  col5 = lerpColor(highlight, shadow, obj["box5"]["color"]);
  col6 = lerpColor(highlight, shadow, obj["box6"]["color"]);

  drawPart(obj["box1"]["xpos"], obj["box1"]["ypos"], obj["box2"]["xpos"], obj["box2"]["ypos"], col1, xOffset, yOffset);
  drawPart(obj["box2"]["xpos"], obj["box2"]["ypos"], obj["box3"]["xpos"], obj["box3"]["ypos"], col2, xOffset, yOffset);
  drawPart(obj["box3"]["xpos"], obj["box3"]["ypos"], obj["box4"]["xpos"], obj["box4"]["ypos"], col3, xOffset, yOffset);
  drawPart(obj["box4"]["xpos"], obj["box4"]["ypos"], obj["box5"]["xpos"], obj["box5"]["ypos"], col4, xOffset, yOffset);
  drawPart(obj["box5"]["xpos"], obj["box5"]["ypos"], obj["box6"]["xpos"], obj["box6"]["ypos"], col5, xOffset, yOffset);
  drawPart(obj["box6"]["xpos"], obj["box6"]["ypos"], obj["box7"]["xpos"], obj["box7"]["ypos"], col6, xOffset, yOffset);
  pop();
}

function drawPart (xval1, yval1, xval2, yval2, col, xDiff, yDiff) {
  push();
  beginShape(QUADS);
  fill(col);
  vertex(xval1 - xDiff, yval1 - yDiff);
  vertex(xval2 - xDiff, yval2 - yDiff);
  vertex(xval2 + xDiff, yval2 + yDiff);
  vertex(xval1 + xDiff, yval1 + yDiff);
  endShape();
  pop();
}

function swapExhibitLetter(n, c, frameDelay) {
  chosenPrevObjs[n] = computeCurrentChosenChar(0, 0, n);
  chosenLetters[n] = c;
  chosenIsAnimating[n] = true;
  chosenCurAnimationFrame[n] = 0 - frameDelay;
}

function computeCurrentChosenChar(partIndex, frameNum, n) {
  var obj;
  var indexes = [1,2,3,4,5,6,7];
  var movingPart = partIndex;
  indexes.splice(partIndex-1, 1);

  if (chosenIsAnimating[n]) {
    if(chosenCurAnimationFrame[n] < 0) {
      obj = chosenPrevObjs[n];
    } else {
      nextObj = savedValues[chosenLetters[n]];

      obj = {};
      for (var i = 0; i < 6; i++) {
        if (indexes[i] != 7) {
          obj["box"+indexes[i]] = {};
          obj["box"+indexes[i]]["xpos"] = chosenPrevObjs[n]["box"+indexes[i]]["xpos"];
          obj["box"+indexes[i]]["ypos"] = chosenPrevObjs[n]["box"+indexes[i]]["ypos"];
          obj["box"+indexes[i]]["color"] = chosenPrevObjs[n]["box"+indexes[i]]["color"];
        } else {
          obj["box"+indexes[i]] = {};
          obj["box"+indexes[i]]["xpos"] = chosenPrevObjs[n]["box"+indexes[i]]["xpos"];
          obj["box"+indexes[i]]["ypos"] = chosenPrevObjs[n]["box"+indexes[i]]["ypos"];
        }
      }

      if (indexes[i] != 7) {
        obj["box"+movingPart] = {};
        obj["box"+movingPart]["xpos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]);
        obj["box"+movingPart]["ypos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]);
        obj["box"+movingPart]["color"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["color"], nextObj["box"+movingPart]["color"]);
      } else {
        obj["box"+movingPart] = {};
        obj["box"+movingPart]["xpos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]);
        obj["box"+movingPart]["ypos"] = map(frameNum, 0, chosenNumAnimationFrames, chosenPrevObjs[n]["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]);
      }
    }
  }
  else {
    obj = savedValues[chosenLetters[n]];
  }
  return obj;
}

function computeCurrentSoloChar(partIndex, frameNum) {
  var obj;
  var indexes = [1,2,3,4,5,6,7];
  var movingPart = partIndex;
  indexes.splice(partIndex-1, 1);

  if (soloIsAnimating) {
    nextObj = savedValues[soloCurLetter];
    obj = {};
    for (var i = 0; i < 6; i++) {
      if (indexes[i] != 7) {
        obj["box"+indexes[i]] = {};
        obj["box"+indexes[i]]["xpos"] = soloPrevObj["box"+indexes[i]]["xpos"];
        obj["box"+indexes[i]]["ypos"] = soloPrevObj["box"+indexes[i]]["ypos"];
        obj["box"+indexes[i]]["color"] = soloPrevObj["box"+indexes[i]]["color"];
      } else {
        obj["box"+indexes[i]] = {};
        obj["box"+indexes[i]]["xpos"] = soloPrevObj["box"+indexes[i]]["xpos"];
        obj["box"+indexes[i]]["ypos"] = soloPrevObj["box"+indexes[i]]["ypos"];
      }
    }

    if (indexes[i] != 7) {
      obj["box"+movingPart] = {};
      obj["box"+movingPart]["xpos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]);
      obj["box"+movingPart]["ypos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]);
      obj["box"+movingPart]["color"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["color"], nextObj["box"+movingPart]["color"]);
    } else {
      obj["box"+movingPart] = {};
      obj["box"+movingPart]["xpos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["xpos"], nextObj["box"+movingPart]["xpos"]);
      obj["box"+movingPart]["ypos"] = map(frameNum, 0, soloNumAnimationFrames, soloPrevObj["box"+movingPart]["ypos"], nextObj["box"+movingPart]["ypos"]);
    }
  }
  else {
    obj = savedValues[soloCurLetter];
  }
  return obj;
}

function keyTyped() {
  if (key == '!') {
    saveBlocksImages();
  }
  else if (key == '@') {
    saveBlocksImages(true);
  }
  else {
    lastKeyPressedTime = millis();
    if(isSwappingWords) {
      isSwappingWords = false;
    }
    upper_key = key.toUpperCase();
    if (upper_key in savedValues) {
      if(curDrawMode == "solo") {
        soloPrevObj = savedValues[soloCurLetter];
        soloCurLetter = upper_key;
        soloIsAnimating = true;
        soloCurAnimationFrame = 0;        
      }
      else if(curDrawMode == "exhibition") {
        if (!chosenIsAnimating[curChosenLetter]) {
          swapExhibitLetter(curChosenLetter, upper_key, 0);
          curChosenLetter = (curChosenLetter + 1) % 5; 
        }        
      }
    }
  }
}