pictcode

define(['block_data', 'image_manager', 'sprite_drawer', 'block_manager', 'block_drawer', 'utility', 'tag_selector'], function(blockData, imageManager, spriteDrawer, blockManager,blockDrawer , utility, tagSelector){

  var canvas;

  var canvasContext;

  var dt = 20;//ミリ秒

  var timer;

  var dummy = {};

  var initialDummy = {size:125, position:{x:0, y:0}, scale:1.0, angle:0, opacity:1.0, mirrored:false};

  var aspectRatio;

  var ACTION_TYPE = {

    ROTATE_RIGHT : 0,

    ROTATE_LEFT : 1,

    ZOOM : 2,

    OPACITY : 3,

  };

  var BRANCH_TYPE = {

    EQUAL : 0,

    LARGER: 1,

    SMALLER: 2,

    EQLARGER: 3,

    EQSMALLER: 4,

  };

  var CALC_TYPE = {

    ADD : 0,

    SUBSTRACT: 1,

    MULTIPLICATE: 2,

    DIVIDE: 3,

    REST: 4,

  };

  var successiveFuncBlock = null;

  var successiveIntervalTime = 1000;

  var successiveIntervalTimer;

  function initialize(cvs, cvsCtx){

    initialDummy.image = imageManager.images.preview_001;

    canvas = cvs;

    canvasContext = cvsCtx;

    canvasContext.fillStyle = '#4682b4';

    aspectRatio = spriteDrawer.editorInnerSize.height/spriteDrawer.editorInnerSize.width;

    initializeDummy();

    initializePreview();

  }

  function startPreview(targetBlock){

    successiveFuncBlock = null;

    doPreview(targetBlock);

  }

  function doPreview(targetBlock){

    stopPreview();

    initializeDummy();

    switch(targetBlock.name){

      case "start_function":

      startFunction(targetBlock);

      break;

      case "return_function":

      returnFunction(targetBlock);

      break;

      case "fork":

      fork(targetBlock);

      break;

      case "move":

      move(targetBlock);

      break;

      case "rotate_right":

      action(targetBlock, ACTION_TYPE.ROTATE_RIGHT);

      break;

      case "rotate_left":

      action(targetBlock, ACTION_TYPE.ROTATE_LEFT);

      break;

      case "zoom":

      action(targetBlock, ACTION_TYPE.ZOOM);

      break;

      case "opacity":

      action(targetBlock, ACTION_TYPE.OPACITY);

      break;

      case "self_duplicate":

      selfDuplicate(targetBlock);

      break;

      case "self_kill":

      selfKill(targetBlock);

      break;

      case "mirror":

      mirror(targetBlock);

      break;

      case "gravity":

      gravity(targetBlock);

      break;

      case "branch_equal":

      branch(targetBlock, BRANCH_TYPE.EQUAL);

      break;

      case "branch_larger":

      branch(targetBlock, BRANCH_TYPE.LARGER);

      break;

      case "branch_smaller":

      branch(targetBlock, BRANCH_TYPE.SMALLER);

      break;

      case "branch_eqlarger":

      branch(targetBlock, BRANCH_TYPE.EQLARGER);

      break;

      case "branch_eqsmaller":

      branch(targetBlock, BRANCH_TYPE.EQSMALLER);

      break;

      case "var_scalar":

      scalar(targetBlock);

      break;

      case "var_add":

      variable(targetBlock, CALC_TYPE.ADD);

      break;

      case "var_substract":

      variable(targetBlock, CALC_TYPE.SUBSTRACT);

      break;

      case "var_multiplicate":

      variable(targetBlock, CALC_TYPE.MULTIPLICATE);

      break;

      case "var_divide":

      variable(targetBlock, CALC_TYPE.DIVIDE);

      break;

      case "var_rest":

      variable(targetBlock, CALC_TYPE.REST);

      break;

      case "var_substitute":

      substitute(targetBlock);

      break;

      case "set_timer":

      setTimer(targetBlock);

      break;

      case "wait":

      wait(targetBlock);

      break;

      case "start_app":

      startApp(targetBlock);

      break;

      case "finish_app":

      finishApp(targetBlock);

      break;

      case "tap_enable":

      tapEnable(targetBlock);

      break;

      case "swipe_enable":

      swipeEnable(targetBlock);

      break;

      case "func_on_tag":

      funcOnTag(targetBlock);

      break;

      case "duplicate":

      duplicate(targetBlock);

      break;

      case "display":

      display(targetBlock);

      break;

      case "play_sound":

      playSound(targetBlock);

      break;

      default:

      initializePreview();

      break;

    }

  }

  function stopPreview(){

    if (timer) {

      clearInterval(timer);

    };

    if (successiveIntervalTimer) {

      clearTimeout(successiveIntervalTimer);

    };

  }

  function initializePreview(){

    var cvDummySize = canvas.height*0.25;

    var cvGbRatio = cvDummySize / dummy.size;

    drawDummy(cvDummySize, cvGbRatio);

  }

  function initializeDummy(){

    dummy.image = initialDummy.image;

    dummy.size = initialDummy.size;

    dummy.position = {x:initialDummy.position.x, y:initialDummy.position.y};

    dummy.scale = initialDummy.scale;

    dummy.angle = initialDummy.angle;

    dummy.opacity = initialDummy.opacity;

    dummy.mirrored = initialDummy.mirrored;

    dummy.speed = 0;

  }

  function drawDummy(cvDummySize, cvGbRatio, isTwined){

    var cvDummyLeft = canvas.width/2 - cvDummySize/2 + dummy.position.x*cvGbRatio;

    var cvDummyTop = canvas.height/2 - cvDummySize/2 - dummy.position.y*cvGbRatio;

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    canvasContext.fillRect(0, 0, canvas.width, canvas.height);

    var cvBgSize = {width:spriteDrawer.editorInnerSize.width*cvGbRatio*1.1, height:spriteDrawer.editorInnerSize.height*cvGbRatio*1.1};

    canvasContext.drawImage(imageManager.images.preview_002, canvas.width/2-cvBgSize.width/2, canvas.height/2-cvBgSize.height/2, cvBgSize.width, cvBgSize.height);

    canvasContext.save();

    canvasContext.lineWidth = 10;

    canvasContext.strokeStyle = "#8b4513";

    canvasContext.strokeRect(0, 0, canvas.width, canvas.height);

    canvasContext.translate(canvas.width/2, canvas.height/2);

    canvasContext.rotate(dummy.angle);

    if (dummy.mirrored) {

      canvasContext.transform(-1, 0, 0, 1, 0, 0);

    };

    canvasContext.translate(-canvas.width/2, -canvas.height/2);

    canvasContext.globalAlpha = dummy.opacity;

    canvasContext.drawImage(dummy.image, cvDummyLeft, cvDummyTop, cvDummySize, cvDummySize);

    if (isTwined) {

      var twinedLeft = canvas.width/2 - cvDummySize/2 - dummy.position.x*cvGbRatio;

      canvasContext.drawImage(dummy.image, twinedLeft, cvDummyTop, cvDummySize, cvDummySize);

    };

    canvasContext.restore();

  }

  function drawEmpty(){

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    canvasContext.fillRect(0, 0, canvas.width, canvas.height);

    canvasContext.drawImage(imageManager.images.preview_002, 0, 0, canvas.width, canvas.height);

    canvasContext.save();

    canvasContext.lineWidth = 10;

    canvasContext.strokeStyle = "#8b4513";

    canvasContext.strokeRect(0, 0, canvas.width, canvas.height);

    canvasContext.restore();

  }

  function drawText(text, x, y, size, color){

    canvasContext.save();

    canvasContext.textAlign = "center";

    canvasContext.textBaseline = "middle";

    // var metrics = canvasContext.measureText(text);

    // var fotSize = Math.floor(size/metrics.width*14);

    // var maxFontSize = canvas.width*0.15;

    // if (fotSize > maxFontSize) {

    //   fotSize = maxFontSize;

    // };

    var fontSize = size;

    canvasContext.font = "bold "+ fontSize + "px " + "sans-serif";

    canvasContext.fillStyle = color;

    canvasContext.fillText(text, x, y-size*0.21, canvas.width*0.9);

    canvasContext.restore();

  }

  function goNextBlock(block){

    if (timer) {

      clearInterval(timer);

    };

    if (!successiveFuncBlock) {return};

    if (!block.bottomLinks) {

      doPreview(successiveFuncBlock);

      return;

    };

    var nextLink = null;

    for(var i=block.bottomLinks.length-1; i>=0; i--){

      nextLink = block.bottomLinks[i].id;

    }

    if (!nextLink) {

      doPreview(successiveFuncBlock);

      return;

    };

    var nextBlock = blockManager.findBlock(nextLink);

    if (nextBlock) {

      doPreview(nextBlock);

      return;

    }else{

      doPreview(successiveFuncBlock);

      return;

    };

  }

  function startFunction(block){

    drawEmpty();

    var v1 = blockManager.getValue(block.value1);

    v1 = utility.numberToLargeAlphabet(v1);

    var funcSize =  {width:canvas.width*0.4, height:canvas.width*0.4*0.327};

    canvasContext.drawImage(imageManager.images.blk_function_001, canvas.width/2-funcSize.width/2, canvas.height*0.5-funcSize.height/2, funcSize.width, funcSize.height);

    drawText(v1, canvas.width*0.626, canvas.height*0.5, canvas.width*0.05, "black");

    successiveFuncBlock = block;

    successiveIntervalTimer = setTimeout(function () {

      if (!block.bottomLinks[0].id) {

        return;

      };

      var nextBlock = blockManager.findBlock(block.bottomLinks[0].id);

      if (nextBlock) {

        doPreview(nextBlock);

      };

    }, successiveIntervalTime);

  }

  function returnFunction(block){

    drawEmpty();

    var v1 = blockManager.getValue(block.value1);

    v1 = utility.numberToLargeAlphabet(v1);

    var funcSize =  {width:canvas.width*0.4, height:canvas.width*0.4*0.327};

    canvasContext.drawImage(imageManager.images.blk_function_001, canvas.width/2-funcSize.width/2, canvas.height*0.6-funcSize.height/2, funcSize.width, funcSize.height);

    drawText(v1, canvas.width*0.626, canvas.height*0.6, canvas.width*0.05, "black");

    var arrowSize = canvas.width*0.14;

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width/2-arrowSize/2, canvas.height*0.35-arrowSize/2, arrowSize, arrowSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          doPreview(successiveFuncBlock);

        };

      }, successiveIntervalTime);

    };

  }

  function fork(block){

    drawEmpty();

    var forkSize =  {width:canvas.width*0.9, height:canvas.width*0.9*0.113};

    canvasContext.drawImage(imageManager.images.blk_function_003, canvas.width/2-forkSize.width/2, canvas.height/2-forkSize.height/2, forkSize.width, forkSize.height);

    var arrowSize = canvas.width*0.1;

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width*0.185-arrowSize/2, canvas.height*0.35-arrowSize/2, arrowSize, arrowSize);

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width*0.185-arrowSize/2, canvas.height*0.63-arrowSize/2, arrowSize, arrowSize);

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width*0.778-arrowSize/2, canvas.height*0.63-arrowSize/2, arrowSize, arrowSize)

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };

  }

  function move(block){

    var duration = blockManager.getValue(block.value1) * 1000;

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    dummy.position = {x:-block.value2.value.x/2, y:-block.value2.value.y/2};

    var gbDummySize = dummy.size;

    var gbDistance;

    var cvsDistance;

    if (Math.abs(block.value2.value.x) > Math.abs(block.value2.value.y)) {

      gbDistance = Math.abs(block.value2.value.x);

      cvsDistance = canvas.width;

    }else{

      gbDistance = Math.abs(block.value2.value.y);

      cvsDistance = canvas.height;

    };

    var cvDummySize = cvsDistance * gbDummySize / (gbDummySize+gbDistance);

    var cvDistance = cvsDistance * gbDistance / (gbDummySize+gbDistance);

    var cvGbRatio = cvDummySize / gbDummySize;

    var gbd = {dx:block.value2.value.x, dy:block.value2.value.y};

    if (duration > 0) {

      gbd = {dx:gbd.dx*dt/duration, dy:gbd.dy*dt/duration};

    }

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime == 500) {

          dummy.position.x = -block.value2.value.x/2;

          dummy.position.y = -block.value2.value.y/2;

          drawDummy(cvDummySize, cvGbRatio, false);

        }else if (intervalTime >= 1200) {

          isInterval = false;

          passedTime = 0;

          if (block.value1.isRandom) {

            duration = utility.getRandomDecimal(block.value1.value.min, block.value1.value.max)*1000;

            gbd = {dx:block.value2.value.x, dy:block.value2.value.y};

            if (duration > 0) {

              gbd = {dx:gbd.dx*dt/duration, dy:gbd.dy*dt/duration};

            }

          };

        };

        return;

      };

      dummy.position.x += gbd.dx;

      dummy.position.y += gbd.dy;

      passedTime += dt;

      drawDummy(cvDummySize, cvGbRatio, false);

      if(passedTime >= duration){

        if (successiveFuncBlock) {

          goNextBlock(block);

        }else{

          isInterval = true;

          intervalTime = 0;

        };

      };

    } , dt);

}

  //

  function action(block, actionType){

    var duration = blockManager.getValue(block.value1) * 1000;

    var degree = blockManager.getValue(block.value2);

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var ds = getIncrement(duration, degree, actionType);

    var cvDummySize;

    switch(actionType){

      case ACTION_TYPE.ROTATE_RIGHT:

      cvDummySize = canvas.height*0.45;

      break;

      case ACTION_TYPE.ROTATE_LEFT:

      cvDummySize = canvas.height*0.45;

      break;

      case ACTION_TYPE.ZOOM:

      cvDummySize = canvas.height*0.25;

      break;

      case ACTION_TYPE.OPACITY:

      cvDummySize = canvas.height*0.45;

      break;

    }

    if (!ds || !cvDummySize) {return;};

    var cvGbRatio = cvDummySize / dummy.size;

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime == 500) {

          initializeDummy();

          drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

        }else if (intervalTime >= 1200) {

          isInterval = false;

          passedTime = 0;

          var isRandom = false;

          if (block.value1.isRandom) {

            isRandom = true;

            duration = blockManager.getValue(block.value1) * 1000;

          }

          if (block.value2.isRandom) {

            isRandom = true;

            degree = blockManager.getValue(block.value2);

          }

          if (isRandom) {

            ds = getIncrement(duration, degree, actionType);

          };

        };

        return;

      };

      switch(actionType){

        case ACTION_TYPE.ROTATE_RIGHT:

        case ACTION_TYPE.ROTATE_LEFT:

        dummy.angle += ds;

        break;

        case ACTION_TYPE.ZOOM:

        dummy.scale += ds;

        break;

        case ACTION_TYPE.OPACITY:

        dummy.opacity += ds;

        break;

      }

      passedTime += dt;

      drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

      if(passedTime >= duration){

        if (successiveFuncBlock) {

          goNextBlock(block);

        }else{

          isInterval = true;

          intervalTime = 0;

        };

      }

    } ,dt);

} 

  //

  function getIncrement(duration, degree, actionType){

    var ds;

    switch(actionType){

      case ACTION_TYPE.ROTATE_RIGHT:

      if (duration > 0) {

        ds = (degree*Math.PI/180 - dummy.angle) * dt / duration;

      }else{

        ds = degree*Math.PI/180 - dummy.angle;

      };

      break;

      case ACTION_TYPE.ROTATE_LEFT:

      if (duration > 0) {

        ds = -(degree*Math.PI/180 - dummy.angle) * dt / duration;

      }else{

        ds = -(degree*Math.PI/180 - dummy.angle);

      };

      break;

      case ACTION_TYPE.ZOOM:

      if (duration > 0) {

        ds = (degree - dummy.scale) * dt / duration;

      }else{

        ds = (degree - dummy.scale);

      };

      break;

      case ACTION_TYPE.OPACITY:

      if (duration > 0) {

        ds = (degree - dummy.opacity) * dt / duration;

      }else{

        ds = degree - dummy.opacity;

      };

      break;

    }

    return ds;

  }

  function selfDuplicate(block){

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = 500;

    var cvDummySize=  canvas.height*0.45;

    var ds = cvDummySize*0.28 * dt / duration;

    var cvGbRatio = cvDummySize / dummy.size;

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime == 1000) {

          drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

        }else if (intervalTime >= 1700) {

          isInterval = false;

          passedTime = 0;

        };

        return;

      };

      dummy.position.x += ds;

      passedTime += dt;

      drawDummy(cvDummySize*dummy.scale, cvGbRatio, true);

      if(passedTime >= duration){

        if (successiveFuncBlock) {

          goNextBlock(block);

        }else{

          initializeDummy();

          isInterval = true;

          intervalTime = 0;

        };

      }

    } , dt);

  } 

  //

  function selfKill(block){

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = 1700;

    var cvDummySize=  canvas.height*0.45;

    var cvGbRatio = cvDummySize / dummy.size;

    drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime >= duration) {

          if (successiveFuncBlock) {

            goNextBlock(block);

          }else{

            isInterval = false;

            passedTime = 0;

            initializeDummy();

            drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

          };

        };

        return;

      };

      passedTime += dt;

      if(passedTime >= duration){

        isInterval = true;

        intervalTime = 0;

        dummy.opacity = 0;

        drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

        return;

      }

    } , dt);

  } 

  function mirror(block){

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = 1200;

    var cvDummySize=  canvas.height*0.45;

    var cvGbRatio = cvDummySize / dummy.size;

    drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime >= duration) {

          if (successiveFuncBlock) {

            goNextBlock(block);

          }else{

            isInterval = false;

            passedTime = 0;

            initializeDummy();

            drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

          };

        };

        return;

      };

      passedTime += dt;

      if(passedTime >= duration){

        isInterval = true;

        intervalTime = 0;

        dummy.mirrored = true;

        drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

        return;

      }

    } , dt);

  } 

  //

  function gravity(block){

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = 1400;

    var speed = 0;

    var dsp = 0.4;

    var cvDummySize=  canvas.height*0.2;

    var cvGbRatio = cvDummySize / dummy.size;

    dummy.position.y = dummy.size*1.5;

    if (!block.value1.value) {

      drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

      return;

    };

    drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime >= duration) {

          isInterval = false;

          passedTime = 0.0;

          dummy.speed = 0;

          dummy.position.y = dummy.size*1.5;

          drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

        };

        return;

      };

      passedTime += dt;

      dummy.speed += dsp;

      dummy.position.y -= dummy.speed;

      drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

      if(passedTime >= duration){

        if (successiveFuncBlock) {

          goNextBlock(block);

        }else{

          isInterval = true;

          intervalTime = 0;

          return;

        };

      }

    } , dt);

  }

  function branch(block, branchType){

    drawEmpty();

    var v1 = blockManager.getValue(block.value1)*1;

    var v2 = blockManager.getValue(block.value2)*1;

    drawText(v1, canvas.width*0.25, canvas.height/2, canvas.width*0.12, "black");

    drawText(v2, canvas.width*0.75, canvas.height/2, canvas.width*0.12, "black");

    var flag = false;

    var sign;

    switch(branchType){

      case BRANCH_TYPE.EQUAL:

      sign = "=";

      if (v1 == v2) {

        flag = true;

      };

      break;

      case BRANCH_TYPE.LARGER:

      sign = ">";

      if (v1 > v2) {

        flag = true;

      };

      break;

      case BRANCH_TYPE.SMALLER:

      sign = "<";

      if (v1 < v2) {

        flag = true;

      };

      break;

      case BRANCH_TYPE.EQLARGER:

      sign = "≧";

      if (v1 >= v2) {

        flag = true;

      };

      break;

      case BRANCH_TYPE.EQSMALLER:

      sign = "≦";

      if (v1 <= v2) {

        flag = true;

      };

      break;

    }

    drawText(sign, canvas.width/2, canvas.height/2, canvas.width*0.14, "black");

    var tfImage;

    if (flag) {

      tfImage = imageManager.images.icon_blk_016

    }else{

      tfImage = imageManager.images.icon_blk_017

    };

    var tfImageSize = canvas.width*0.2;

    canvasContext.drawImage(tfImage, canvas.width/2-tfImageSize/2, canvas.height*0.7, tfImageSize, tfImageSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };

  }

  function scalar(block){

    drawEmpty();

    var v2 = blockManager.getValue(block.value2)*1;

    drawText(v2, canvas.width/2, canvas.height/2, canvas.width*0.15, "black");

  }

  function variable(block, branchType){

    drawEmpty();

    var v1 = blockManager.getValue(block.value1)*1;

    var v2 = blockManager.getValue(block.value2)*1;

    var sign;

    var result = 0;

    switch(branchType){

      case BRANCH_TYPE.EQUAL:

      sign = "+";

      result = v1 + v2;

      break;

      case BRANCH_TYPE.LARGER:

      sign = "-";

      result = v1 - v2;

      break;

      case BRANCH_TYPE.SMALLER:

      sign = "×";

      result = v1 * v2;

      break;

      case BRANCH_TYPE.EQLARGER:

      sign = "÷";

      result = v1 / v2;

      break;

      case BRANCH_TYPE.EQSMALLER:

      sign = "%";

      result = v1 % v2;

      break;

    }

    result = result.toFixed(1);

    drawText(v1 + " " + sign + " " + v2 + " → " + result, canvas.width*0.5, canvas.height*0.5, canvas.width*0.1, "black");

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };    

  }

  function substitute(block){

    drawEmpty();

    var v1 = blockManager.getValue(block.value1)*1;

    var v2 = blockManager.getValue(block.value2)*1;

    drawText(v1 + " → " + v2, canvas.width*0.5, canvas.height*0.5, canvas.width*0.1, "black");

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };    

  }

  function setTimer(block){

    var v1 = blockManager.getValue(block.value1);

    var v2 = blockManager.getValue(block.value2);

    v2 = utility.numberToLargeAlphabet(v2);

    function initializeSetTimer(){

      drawEmpty();

      canvasContext.save();

      canvasContext.globalAlpha = 0.5;

      var imageSize = canvas.width*0.5;

      canvasContext.drawImage(imageManager.images.icon_blk_024, canvas.width/2-imageSize/2, canvas.height*0.35-imageSize/2, imageSize, imageSize);

      canvasContext.restore();

      var funcSize =  {width:canvas.width*0.4, height:canvas.width*0.4*0.327};

      canvasContext.drawImage(imageManager.images.blk_function_001, canvas.width/2-funcSize.width/2, canvas.height*0.6-funcSize.height/2, funcSize.width, funcSize.height);

      drawText(v2, canvas.width*0.626, canvas.height*0.6, canvas.width*0.05, "black");

    }

    initializeSetTimer();

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = v1/2*1000;

    var arrowSize = canvas.width*0.16;

    // canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width/2-arrowSize/2, canvas.height*0.8-arrowSize/2, arrowSize, arrowSize);

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime >= duration) {

          if (successiveFuncBlock) {

            goNextBlock(block);

          }else{

            isInterval = false;

            passedTime = 0;

            initializeSetTimer();

          };

        };

        return;

      };

      passedTime += dt;

      if(passedTime >= duration){

        isInterval = true;

        intervalTime = 0;

        canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width/2-arrowSize/2, canvas.height*0.8-arrowSize/2, arrowSize, arrowSize);

        return;

      }

    } , dt);

  }

  function wait(block){

    drawEmpty();

    canvasContext.save();

    canvasContext.globalAlpha = 0.5;

    var imageSize = canvas.width*0.5;

    canvasContext.drawImage(imageManager.images.icon_blk_024, canvas.width/2-imageSize/2, canvas.height/2-imageSize/2, imageSize, imageSize);

    canvasContext.restore();

    var v1 = blockManager.getValue(block.value1);

    drawText(v1, canvas.width*0.5, canvas.height*0.52, canvas.width*0.1, "black");

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };  

  }

  function startApp(block){

    drawEmpty();

    var imageSize = canvas.width*0.4;

    canvasContext.drawImage(imageManager.images.ui_002, canvas.width/2-imageSize/2, canvas.height*0.45-imageSize/2, imageSize, imageSize);

    var arrowSize = canvas.width*0.16;

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width/2-arrowSize/2, canvas.height*0.8-arrowSize/2, arrowSize, arrowSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };  

  }

  function finishApp(block){

    drawEmpty();

    var imageSize = canvas.width*0.4;

    canvasContext.drawImage(imageManager.images.btn_play_002, canvas.width/2-imageSize/2, canvas.height/2-imageSize*0.406/2, imageSize, imageSize*0.406);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };  

  }

  function tapEnable(block){

    drawEmpty();

    var imageSize = canvas.width*0.4;

    canvasContext.drawImage(imageManager.images.icon_blk_026, canvas.width/2-imageSize/2, canvas.height*0.45-imageSize/2, imageSize, imageSize);

    var tfImage;

    if (blockManager.getValue(block.value1)) {

      tfImage = imageManager.images.icon_blk_016

    }else{

      tfImage = imageManager.images.icon_blk_017

    };

    var tfImageSize = canvas.width*0.2;

    canvasContext.drawImage(tfImage, canvas.width/2-tfImageSize/2, canvas.height*0.7, tfImageSize, tfImageSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };  

  }

  function swipeEnable(block){

    drawEmpty();

    var imageSize = canvas.width*0.4;

    canvasContext.drawImage(imageManager.images.icon_blk_026, canvas.width/2-imageSize/2, canvas.height*0.45-imageSize/2, imageSize, imageSize);

    var tfImage;

    if (blockManager.getValue(block.value1)) {

      tfImage = imageManager.images.icon_blk_016

    }else{

      tfImage = imageManager.images.icon_blk_017

    };

    var tfImageSize = canvas.width*0.2;

    canvasContext.drawImage(tfImage, canvas.width/2-tfImageSize/2, canvas.height*0.7, tfImageSize, tfImageSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };      

  }

  function funcOnTag(block){

    drawEmpty();

    var cvDummySize=  canvas.height*0.4;

    var cvGbRatio = cvDummySize / dummy.size;

    dummy.position.y = 80;

    drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

    var v1 = blockManager.getValue(block.value1);

    blockDrawer.drawCircleFilledText(v1, canvas.width*0.5, canvas.height*0.25, canvas.width*0.1, canvas.width*0.5, canvas.height*0.25, canvas.width*0.075, canvasContext, tagSelector.tagColors[v1]);

    var v2 = blockManager.getValue(block.value2);

    v2 = utility.numberToLargeAlphabet(v2);

    var funcSize =  {width:canvas.width*0.4, height:canvas.width*0.4*0.327};

    canvasContext.drawImage(imageManager.images.blk_function_001, canvas.width/2-funcSize.width/2, canvas.height*0.85-funcSize.height/2, funcSize.width, funcSize.height);

    drawText(v2, canvas.width*0.626, canvas.height*0.85, canvas.width*0.05, "black");

    var arrowSize = canvas.width*0.14;

    canvasContext.drawImage(imageManager.images.input_vector_002, canvas.width/2-arrowSize/2, canvas.height*0.55-arrowSize/2, arrowSize, arrowSize);

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };  

  }

  function duplicate(block){

    dummy.image = imageManager.images.icon_blk_023;

    var passedTime = 0;

    var isInterval = false;

    var intervalTime = 0;

    var duration = 250;

    var cvDummySize=  canvas.height*0.45;

    var ds = cvDummySize*0.28 * dt / duration;

    var cvGbRatio = cvDummySize / dummy.size;

    timer = setInterval(function(){

      if (isInterval) {

        intervalTime += dt;

        if (intervalTime == 1000) {

          if (successiveFuncBlock) {

            goNextBlock(block);

          }else{

            drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

          };          

        }else if (intervalTime >= 1700) {        

          isInterval = false;

          passedTime = 0;

        };

        return;

      };

      dummy.position.x += ds;

      passedTime += dt;

      if(passedTime >= duration){

        initializeDummy();

        dummy.image = imageManager.images.icon_blk_023;

        isInterval = true;

        intervalTime = 0;

        return;

      }

      drawDummy(cvDummySize*dummy.scale, cvGbRatio, true);

    } , dt);

  }

  function display(block){

    var cvDummySize=  canvas.height*0.4;

    var cvGbRatio = cvDummySize / dummy.size;

    drawDummy(cvDummySize*dummy.scale, cvGbRatio, false);

    var v1 = blockManager.getValue(block.value1);

    blockDrawer.drawCircleFilledText(v1, canvas.width*0.5, canvas.height*0.7, canvas.width*0.1, canvas.width*0.5, canvas.height*0.7, canvas.width*0.075, canvasContext, tagSelector.tagColors[v1]);

    var v2 = blockManager.getValue(block.value2);

    v2 = Math.floor(v2);

    drawText(v2, canvas.width*0.5, canvas.height*0.55, canvas.width*0.15, "gray");

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };      

  }

  function playSound(block){

    drawEmpty();

    if (successiveFuncBlock) {

      successiveIntervalTimer = setTimeout(function () {

        if (successiveFuncBlock) {

          goNextBlock(block);

        };

      }, successiveIntervalTime);

    };    

  }

  return {

    initialize:initialize,

    startPreview:startPreview,

    stopPreview:stopPreview,

  };

});