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

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

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

      object.on("pointerdown ", function () {
        story_component_colorbox_click(this);
      });
    }
  }
}

function story_component_colorbox_click(e) {
  story_check_unlock = true;
  dataObject = e.getAttr("data");
  rect = e.findOne("#rect");
  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_colorbox_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_colorbox_check() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (
      obj.getAttr("data") &&
      obj.getAttr("data")["objectType"] == "colorbox"
    ) {
      obj.listening(false);

      storyTotalObject++;

      if (obj.getAttr("data")["target"] == obj.getAttr("targetted")) {
        //dogru
        storyTotalCorrect++;
        story_component_colorbox_checker(obj, true);
        obj.setAttr("success", true);
      } else {
        //yanlis
        story_component_colorbox_checker(obj, false);
        obj.setAttr("success", false);
      }
    }
  }
}

function story_component_colorbox_solve() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (
      obj.getAttr("data") &&
      obj.getAttr("data")["objectType"] == "colorbox"
    ) {
      obj.listening(false);
      rect = obj.findOne("#rect");

      if (parseInt(obj.getAttr("data")["target"]) == 1) {
        rect.fill(dataObject["activeFill"]);
        rect.stroke(dataObject["activeStroke"]);
      } else {
        rect.fill(dataObject["fill"]);
        rect.stroke(dataObject["stroke"]);
      }

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

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

      rect = obj.findOne("#rect");
      obj.setAttr("targetted", 0);
      rect.fill(dataObject["fill"]);
      rect.stroke(dataObject["stroke"]);

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