pictcode

define(['block_data', 'modal_manager', 'image_manager'], function(blockData, modalManager, imageManager){

  var afterSelectAction;  

  var categoryContainer = document.createElement('div');

  function initialize(aSAction){

    afterSelectAction = aSAction;

    //Category

    var iconWidth = "128";

    var iconHeight = "56";

    var categories = blockData.categories;

    _.each( categories, function(category){ 

      var image = imageManager.images[category.iconImageKey];

      image.width = iconWidth;

      image.height = iconHeight;

      var button = document.createElement('button');

      button.id = category.name;

      button.className = 'block_category_button';

      button.style.margin = "5px";

      button.appendChild(image);

      categoryContainer.appendChild(button);

      // categoryContainer.innerHTML += "  ";

    });

  }

  $(document).on("click","#add_block", function(event) {

    //Modalの設定

    var modalWidth = document.documentElement.clientHeight * 0.75;

    $("#modal_coding_block").css({width:modalWidth*1.2, height:modalWidth, top:-modalWidth});

    $("#modal_coding_block_container")[0].appendChild(categoryContainer);

    modalManager.showDownModal($("#modal_coding_block"), didClose);

  });

  $(document).on("click",".block_category_button", function(event) {

    var id = event.currentTarget.id;

    var bodyContainter = document.createElement('div');

    var sizeRatio = 54;

    var categorizedBlocks = blockData.getCategorizedBlocks(id);

    _.each( categorizedBlocks, function(block){

      var image = imageManager.images[block.imageKey];

      image.width = block.size.width * sizeRatio;

      image.height = block.size.height * sizeRatio;

      var button = document.createElement('button');

      button.id = block.name;

      button.className = 'block_button';

      button.appendChild(image);

      bodyContainter.appendChild(button);

    });

    $("#modal_coding_block_container").html("");

    $("#modal_coding_block_container")[0].appendChild(bodyContainter);

    modalManager.addBackButton($("#modal_coding_block"), backToTop);

  });

  $(document).on("click",".block_button", function(event) {

    var id = event.currentTarget.id;

    afterSelectAction(id);

    modalManager.closeUpModal($("#modal_coding_block"));

    $("#modal_coding_block_container").html("");

  });

  //Modalのバックボタンをタップ時

  function backToTop(){

    modalManager.removeBackButton();

    $("#modal_coding_block_container").html("");

    $("#modal_coding_block_container")[0].appendChild(categoryContainer);

  }

  //モーダルを閉じた後

  function didClose(){

    $("#modal_coding_block_container").html("");

  }

  return {

    initialize:initialize,

  };

});