function story_component_grid_load() {
  for (key in dataStory) {
    var dataObject = dataStory[key];

    if (dataObject["objectType"] == "grid") {
      //group
      var object = new Konva.Group({
        id: key,
        x: parseInt(dataObject["x"]),
        y: parseInt(dataObject["y"]),
        data: dataObject,
        targetted: 0,
      });
      grpStory.add(object);

      //rects
      gridWidth = parseInt(dataObject["width"]);
      gridHeight = parseInt(dataObject["height"]);
      gridRows = parseInt(dataObject["rows"]);
      gridCols = parseInt(dataObject["cols"]);

      boxWidth = gridWidth / gridCols;
      boxHeight = gridHeight / gridRows;

      i = 0;
      for (let row = 1; row < gridRows + 1; row++) {
        for (let col = 1; col < gridCols + 1; col++) {
          i++;
          x = (col - 1) * boxWidth;
          y = (row - 1) * boxHeight;

          //rect
          var boxRect = new Konva.Rect({
            id: "gridBox" + i,
            x: x,
            y: y,
            width: boxWidth,
            height: boxHeight,
            fill: dataObject["fill"],
            stroke: dataObject["stroke"],
            strokeWidth: parseInt(dataObject["strokeWidth"]),
          });
          object.add(boxRect);

          //toplam kutu sayisini objeye yaziyoruz
          object.setAttr("boxTotal", i);

          boxRect.on("pointerdown ", function () {
            story_component_grid_click(this);
          });

          //text
          //text editörde ekleniyor, debug amacli playerda acilabilir
          /*
          fontSize = boxWidth / 3;
          var text = new Konva.Text({
            fontSize: fontSize,
            x: x,
            y: y + (boxHeight - (fontSize - 5)) / 2,
            width: boxWidth,
            fill: dataObject["stroke"],
            fontStyle: "bold",
            fontFamily: "Trebuchet MS, sans-serif",
            align: "center",
            text: i,
          });
          object.add(text);
		  */
        }
      }
    }
  }
}

function story_component_grid_click(e) {
  story_check_unlock = true;

  object = e.getParent();
  dataObject = object.getAttr("data");

  rect = e;
  if (e.getAttr("targetted")) {
    e.setAttr("targetted", 0);
    rect.fill(dataObject["fill"]);
    rect.stroke(dataObject["stroke"]);
  } else {
    e.setAttr("targetted", 1);
    rect.fill(dataObject["activeFill"]);
    rect.stroke(dataObject["activeStroke"]);
  }
}

function story_component_grid_checker(obj, trueFalse) {
  var imageSrc = new Image();
  imageSrc.onload = function () {
    var checker = new Konva.Image({
      id: "checker",
      x: parseInt(obj.getAttr("data")["checkerX"]),
      y: parseInt(obj.getAttr("data")["checkerY"]),
      width: parseInt(obj.getAttr("data")["checkerWidth"]),
      height: parseInt(obj.getAttr("data")["checkerHeight"]),
      image: imageSrc,
    });
    obj.add(checker);
  };

  if (trueFalse) {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerCorrect"];
  } else {
    imageSrc.src = stagePath + obj.getAttr("data")["checkerWrong"];
  }
}

function story_component_grid_check() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "grid") {
      obj.listening(false);

      storyTotalObject++;

      $totalCorrect = 0;
      for (let i = 1; i < parseInt(obj.getAttr("boxTotal")) + 1; i++) {
        rect = obj.findOne("#gridBox" + i);
        targetted = rect.getAttr("targetted");

        if (targetted) {
          //boyanmis
          if (obj.getAttr("data")["target"].includes(i)) {
            //boyanmis ve target listesinde var
            //dogru
            $totalCorrect++;
          } else {
            //boyanmis ama target listesinde yok
            //yanlis
          }
        } else {
          //boyanmamis
          if (obj.getAttr("data")["target"].includes(i)) {
            //boyanmamis ve target listesinde var
            //yanlis
          } else {
            //boyanmamis ve target listesinde de yok
            //dogru
            $totalCorrect++;
          }
        }
      }

      if ($totalCorrect >= parseInt(obj.getAttr("boxTotal"))) {
        //tümü dogru
        //objeyi dogru isaretliyoruz
        //dogru
        storyTotalCorrect++;
        story_component_colorbox_checker(obj, true);
        obj.setAttr("success", true);
      } else {
        //yanlislar var
        //objeyi yanlis isaretliyoruz
        story_component_colorbox_checker(obj, false);
        obj.setAttr("success", false);
      }
    }
  }
}

function story_component_grid_solve() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "grid") {
      obj.listening(false);

      //tüm kutulari boyanmamisa resetliyoruz
      for (let i = 1; i < parseInt(obj.getAttr("boxTotal")) + 1; i++) {
        rect = obj.findOne("#gridBox" + i);

        rect.fill(dataObject["fill"]);
        rect.stroke(dataObject["stroke"]);
      }

      //target deki kutulari boyanmis yapiyoruz
      obj.getAttr("data")["target"].forEach(story_component_grid_solve_each);
      function story_component_grid_solve_each(item, index, arr) {
        key = arr[index];
        rect = obj.findOne("#gridBox" + key);
        rect.fill(obj.getAttr("data")["activeFill"]);
        rect.stroke(obj.getAttr("data")["activeStroke"]);
      }

      checker = obj.findOne("#checker");
      if (checker) {
        checker.destroy();
      }
    }
  }
}

function story_component_grid_reset() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "grid") {
      obj.setAttr("success", null);
      obj.listening(true);

      for (let i = 1; i < parseInt(obj.getAttr("boxTotal")) + 1; i++) {
        rect = obj.findOne("#gridBox" + i);
        rect.setAttr("targetted", 0);
        rect.fill(dataObject["fill"]);
        rect.stroke(dataObject["stroke"]);
      }

      checker = obj.findOne("#checker");
      if (checker) {
        checker.destroy();
      }
    }
  }
}
