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

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

      //image:konva
      if (dataObject["image"]) {
        var image;
        var imageSrc = new Image();
        imageSrc.onload = function () {};
        image = new Konva.Image({
          x: parseInt(dataObject["imageX"]),
          y: parseInt(dataObject["imageY"]),
          width: parseInt(dataObject["imageWidth"]),
          height: parseInt(dataObject["imageHeight"]),
          image: imageSrc,
        });
        imageSrc.src = stagePath + dataObject["image"];
        object.add(image);
      }

      if (parseInt(dataObject["hidden"]) == 1) {
        object.hide();
      }

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

function story_component_button_click(e) {
  dataObject = e.getAttr("data");

  //show
  if (dataObject["show"]) {
    story_check_unlock = true;
    if (Array.isArray(dataObject["show"])) {
      //coklu obje
      for (key in dataObject["show"]) {
        objectID = dataObject["show"][key];
        grpStory.findOne("#" + objectID).show();
      }
    } else {
      //tek obje
      objectID = dataObject["show"];
      grpStory.findOne("#" + objectID).show();
    }
  }

  //hide
  if (dataObject["hide"]) {
    story_check_unlock = true;
    if (Array.isArray(dataObject["hide"])) {
      //coklu obje
      for (key in dataObject["hide"]) {
        objectID = dataObject["hide"][key];
        grpStory.findOne("#" + objectID).hide();
      }
    } else {
      //tek obje
      objectID = dataObject["hide"];
      grpStory.findOne("#" + objectID).hide();
    }
  }

  //page
  if (dataObject["page"]) {
    page = parseInt(dataObject["page"]);
    console.log("page" + page);
    pager(page);
  }
}

function story_component_button_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_button_check() {
  var objects = grpStory.getChildren();
  for (key in objects) {
    var obj = objects[key];
    if (obj.getAttr("data") && obj.getAttr("data")["objectType"] == "button") {
      obj.listening(false);

      check = parseInt(obj.getAttr("data")["check"]);
      mustVisible = parseInt(obj.getAttr("data")["mustVisible"]);
      mustHidden = parseInt(obj.getAttr("data")["mustHidden"]);

      if (check == 1) {
        //objec kontrol edilsin istenmis, toplam objelerin sayisini artir
        storyTotalObject++;
      }

      if (check == 1 && mustVisible == 1 && obj.isVisible() == true) {
        //görünür olmasi istenmiş ve görünür
        storyTotalCorrect++;
        story_component_button_checker(obj, true);
        obj.setAttr("success", true);
      }

      if (check == 1 && mustVisible == 1 && obj.isVisible() == false) {
        //görünür olmasi istenmiş ama gizli
        story_component_button_checker(obj, false);
        obj.setAttr("success", false);
      }

      if (check == 1 && mustHidden == 1 && obj.isVisible() == false) {
        //gizli olmasi istenmiş ve gizli
        storyTotalCorrect++;
        story_component_button_checker(obj, true);
        obj.setAttr("success", true);
      }

      if (check == 1 && mustHidden == 1 && obj.isVisible() == true) {
        //gizli olmasi istenmiş ama görünür
        story_component_button_checker(obj, false);
        obj.setAttr("success", false);
      }
    }
  }
}

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

      if (parseInt(obj.getAttr("data")["mustVisible"]) == 1) {
        //görünür olmasi istenmiş
        obj.show();
      }

      if (parseInt(obj.getAttr("data")["mustHidden"]) == 1) {
        //gizli olmasi istenmiş
        obj.hide();
      }

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

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

      if (parseInt(obj.getAttr("data")["hidden"]) == 1) {
        //gizli olmasi istenmiş
        obj.hide();
      } else {
        //görünür olmasi istenmiş
        obj.show();
      }

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