var instruction;
var hit_effect;
var line;
var button_clear;
var menu = new Array;
var strip = new Array;
var menu_total = 26;
var menu_x = 8;
var menu_y = 610;
var menu_width = 57;
var menu_height = 115;
var strip_counter = 0;
var word_y = 210;

var inital_sound = false;
var sound_placement;
var sound_trash;

function init() {
  canvasInUse = true;
  document.getElementById('game_container').style.display = "inline";
  document.getElementById('loading_div').style.display = "none";
  setInteractiveParameters();
  set_data();

  sound_placement = new Howl({
    src: ['/page/' + page + '/sound/sound_placement.mp3', '/page/' + page + '/sound/sound_placement.ogg', '/page/' + page + '/sound/sound_placement.wav']
  });
  sound_trash = new Howl({
    src: ['/page/' + page + '/sound/sound_trash.mp3', '/page/' + page + '/sound/sound_trash.ogg', '/page/' + page + '/sound/sound_trash.wav']
  });

  instruction = new MovieClip(document.getElementById('instruction').cloneNode(true));
  instruction.x = 390;
  instruction.y = 40;
  instruction.transform();
  instruction.text = instruction.instance.querySelector(".instruction");
  instruction.text.textContent = "Build your word here."
  stage.appendChild(instruction.instance);

  button_clear = new MovieClip(document.getElementById('button_clear').cloneNode(true));
  button_clear.x = 730;
  button_clear.y = 400;
  button_clear.transform();
  stage.appendChild(button_clear.instance);

  line = new MovieClip(document.getElementById('line1').cloneNode(true));
  line.x = 0;
  line.y = 330;
  line.transform();
  stage.appendChild(line.instance);

  set_menu();

  hit_effect = new MovieClip(document.getElementById('hit_effect').cloneNode(true));
  hit_effect.frame_total = 6;
  hit_effect.frames = new Array;
  for (var m = 1; m <= hit_effect.frame_total; m++) {
    hit_effect.frames[m] = hit_effect.instance.querySelector("#frame" + m);
  }
  hit_effect.smoke = [1, 2, 3, 4, 5, 6];
  hit_effect.playFrames([6]);
  stage.appendChild(hit_effect.instance);

  add_pointer_listeners();
}

function set_menu() {
  let holder_x = menu_x + 20;
  let holder_y = menu_y;
  let counter = 0;
  for (var i = 1; i <= menu_total; i++) {
    if (counter > 12) {
      counter = 0;
      holder_x = menu_x;
      holder_y = menu_y + menu_height;
    }
    if (counter >= 1) {
      holder_x = 6 + menu[i - 1].x + menu[i - 1].text_width;
    }
    counter++;
    menu_item(i, holder_x, holder_y);
  }

  menu_item(27, 390, 450);
}

function menu_item(id, x, y) {
  menu[id] = new MovieClip(document.getElementById('strip' + id).cloneNode(true));
  menu[id].instance.setAttribute("data-id", id);
  menu[id].text = menu[id].instance.querySelector(".number");
  stage.appendChild(menu[id].instance);
  menu[id].x = x;
  menu[id].y = y;
  menu[id].transform();
  if (id < 27) {
    menu[id].details = menu[id].text.getBBox();
    menu[id].text_width = Math.floor(menu[id].details.width);
  }
}

function strip_item(type, x, y) {
  strip_counter++;
  strip[strip_counter] = new MovieClip(document.getElementById('strip' + type).cloneNode(true));
  strip[strip_counter].active = true;
  strip[strip_counter].x = x;
  strip[strip_counter].y = y;
  strip[strip_counter].transform();
  strip[strip_counter].id = strip_counter;
  strip[strip_counter].instance.setAttribute("data-id", strip_counter);
  if (type != 27) {
    strip[strip_counter].text = strip[strip_counter].instance.querySelector(".number");
  }
  strip[strip_counter].dragFront = true;
  strip[strip_counter].dragMoveHandler = function () {}
  strip[strip_counter].dragStopHandler = function () {
    if (this.y < line.y) {
      sound_placement.play();
      this.y = word_y;
      this.transform();
    } else {
      strip_remove(this.id, this.x, this.y);
    }
    sort_strips();
  }
  strip[strip_counter].instance.addEventListener("pointerdown", strip_handler);
  stage.appendChild(strip[strip_counter].instance);
  if (type != 27) {
    strip[strip_counter].details = strip[strip_counter].text.getBBox();
    strip[strip_counter].text_width = strip[strip_counter].details.width;
  } else {
    strip[strip_counter].text_width = 30;
  }
  return strip[strip_counter];
}

function sort_strips() {
  let total_width = 0;
  let word_start_x;
  for (var i = 1; i <= strip_counter; i++) {
    if (strip[i].active) {
      total_width += strip[i].text_width;
    }
  }
  word_start_x = (780 - total_width) / 2;
  var list = strip.slice();
  list.shift();
  list.sort(compare_strips);
  for (var i = 0; i < list.length; i++) {
    if (list[i].active) {
      list[i].x = word_start_x;
      word_start_x += list[i].text_width;
      list[i].transform();
    }
  }
}

function compare_strips(a, b) {
  if (a.x < b.x)
    return -1;
  if (a.x > b.x)
    return 1;
  return 0;
}

function strip_remove(id, x, y) {
  sound_trash.play();
  strip[id].active = false;
  strip[id].instance.setAttribute("display", "none");
  hit_effect.x = x;
  hit_effect.y = y;
  hit_effect.transform();
  hit_effect.playFrames(hit_effect.smoke);
}

function menu_handler(event) {
  event.preventDefault();
  if (event.isPrimary) {
    if (!inital_sound) {
      inital_sound = true;
      sound_placement.play();
    }
    dragElement = strip_item(this.getAttribute("data-id"), menu[this.getAttribute("data-id")].x, menu[this.getAttribute("data-id")].y);
    dragPointerStart(event);
  }
}

function strip_handler(event) {
  event.preventDefault();
  if (event.isPrimary) {
    dragElement = strip[this.getAttribute("data-id")];
    dragPointerStart(event);
  }
}

function clear_handler(event) {
  event.preventDefault();
  if (event.isPrimary) {
    clear_activity()
  }
}

function clear_activity() {
  for (var i = 1; i <= strip_counter; i++) {
    stage.removeChild(strip[i].instance);
  }
  strip_counter = 0;
  strip = new Array;
}

function set_data() {}

function add_pointer_listeners() {
  button_clear.instance.addEventListener("pointerdown", clear_handler, false);
  for (var i = 1; i <= menu_total + 1; i++) {
    menu[i].instance.addEventListener("pointerdown", menu_handler, false);
  }
}