//the number of items to sort
const ITEMS = 20;

//variables to control the delays
const DELAY_RESTART = 5000;
const DELAY_STEP = 1000;

//the list of items to be sorted
let list = new Array(ITEMS);
let operation_count = 0;

//the list of how many times a number occured
let count = [];

//define each individual element
let min = Math.min(list);
let max = Math.max(list);


//let operation_count_box = document.getElementById('operations');

let canvas_org = document.getElementById('originalList');
let context_org = canvas_org.getContext('2d');
let canvas_org_update_bg = true;
let canvas_org_update_bar = true;
/*
let canvas_count = document.getElementById('countList');
let canvas_count_update_bg = true;
let canvas_count_update_bar = true;
let context_count = canvas_count.getContext('2d');

let canvas_sort = document.getElementById('sortedList');
let canvas_sort_update_bg = true;
let canvas_sort_update_bar = true;
let context_sort = canvas_sort.getContext('2d');
*/
let sort_started = false;
let sort_finished = false;



function setupCanvas() {
    // Setup event listeners for load and window resize.
  window.addEventListener('load', canvasResize);
  window.addEventListener('resize', canvasResize);
}

function canvasResize() {
  canvas_org.width = window.innerWidth;
  canvas_org.height = window.innerHeight;
  canvas_org_update_bg = true;
  canvas_org_update_bar = true;
/*
  canvas_count.width = window.innerWidth;
  canvas_count.height = window.innerHeight/5;
  canvas_count_update_bg = true;
  canvas_count_update_bar = true;
  
  canvas_sort.width = window.innerWidth;
  canvas_sort.height = window.innerHeight/5;
  canvas_sort_update_bg = true;
  canvas_sort_update_bar = true;
*/
}

//not currently drawing bars
function drawBars(canvas, context){
  let length = list.length;
  let barWidth = canvas.width / length;
  let barScale = canvas.height / max;

  for (let i = 0; i < ITEMS; i++) {
    let x = i * barWidth;
    let h = list[i] * barScale;
    let y = canvas.height - h;

    context.save();
    if (i == temp)
      context.fillStyle = 'white';
    else
      context.fillStyle = 'orange';
    context.fillRect(x+1, y, barWidth-2, h);
    context.restore();
  }
}

// Draws the black background.
function drawBackground(canvas, context){
  // Save context to stack.
  context.save();
  context.fillStyle = 'black';
  context.fillRect(0, 0, canvas.width, canvas.height);
  // Pops most recently saved canvas state off stack.
  context.restore();

  context.fillStyle = 'grey';
  context.font = "30px Ariel";
  context.fillText("Counting Sort", + ITEMS + "numbers", 30, 25);
}






let state = 0;
let temp = min;
let temp2 = 0;

function countingSort(){
  
  if(state == 0){
    if(temp <= max){
      count[temp] = 0;
      temp++;
    }
    if(temp > max){
      state = 1;
      temp = 0;
    }
  canvas_org_update_bg = true;
  canvas_org_update_bar = true;
  return;
  }
  
  if(state == 1){
    if(temp < list.length){
      count[list[temp]]++;
      temp++;
    }
    if(temp == list.length){
      state = 2;
      temp = min;
    }
  canvas_count_update_bg = true;
  canvas_count_update_bar = true;
  return;
  }

  if(state == 2){
    if(temp <= max){
      if(count[temp] > 0){
	list[temp2] = temp;
	temp2++;
	count[temp]--;
      }
      temp++;
    }      
    if(temp > max){
      state = 0;
      temp = min;
      temp2 = 0;
      sort_finished = true;
    }
  canvas_sort_update_bg = true;
  canvas_sort_update_bar = true;
  return;
  }
}







//initializes the list to ITEMS length
function initList(){
  for(let i=0; i<ITEMS; i++){
    list[i] = Math.round(Math.random() * 100);
  }
  operation_count = 0;
//  operation_count_box.innerHTML = "0";
}

// block_loop is briefly enabled when sorting has finished
let block_loop = false;
function step() {
  if (!block_loop) {
    // If background needs updated, redraw background.
    if (canvas_org_update_bg) {
      canvas_org_update_bg = false;
      drawBackground(canvas_org, context_org);
      console.log("here");
    }
/*
    if (canvas_count_update_bg) {
      canvas_count_update_bg = false;
      drawBackground(canvas_count, context_count);
    }
    if (canvas_sort_update_bg) {
      canvas_sort_update_bg = false;
      drawBackground(canvas_sort, context_sort);
    }
*/
    // If bars need updated, replot.
    if (canvas_org_update_bar) {
      canvas_org_update_bar = false;
      drawBars(canvas_org, context_org);
      console.log("here2");
    }
/*
    if (canvas_count_update_bar) {
      canvas_count_update_bar = false;
      drawBars(canvas_count, context_count);
    }
    if (canvas_sort_update_bar) {
      canvas_sort_update_bar = false;
      drawBars(canvas_sort, context_sort);
    }
*/

    // Starts the sort if it isn't looping already.
    if (!sort_started){
      console.log("here3");
      countingSort();
    }

    // Checks if sort has completed. Briefly blocks loop
    if (sort_finished) {
      console.log("here4");
      block_loop = true;
      setTimeout(function() {
        initList();
        sort_started = false;
        sort_finished = false;
        block_loop = false;
      }, DELAY_RESTART);
    }
  }
}

function setup() {
  initList();
}


// Main function which runs the setup and holds the main loop
(function main() {
  // Setup the canvas and list.
  setup();
  (function mainLoop() {
    step();
    // requestAnimationFrame calls mainLoop infinitely
    requestAnimationFrame(mainLoop);
  })();
})();