(function() {
    'use strict';
    var canvas = document.getElementById('scratch'),
        context = canvas.getContext('2d');
    // default value
    context.globalCompositeOperation = 'source-over';
  
    // Getting Scratch Container Dimension
    var scratchContainer = $('#scratchBase');
    var scratchInnerWidth = scratchContainer.outerWidth();
    var scratchInnerHeight = scratchContainer.outerHeight();
    var scratchPadding = (scratchContainer.innerWidth() - scratchContainer.width()) /2;
    drawImage();
  
    //----------------------------------------------------------------------------
    // fill rectangle
    function drawImage() {
      $('#scratch').attr({
          'width': scratchInnerWidth +'px',
          'height': scratchInnerHeight +'px'
     })

      context.beginPath();
      context.fillStyle = '#111';
      context.fillRect(0,0,scratchInnerWidth,scratchInnerHeight);
      context.fill();

      var bgImage = $('#scratch').attr('src');

      if (bgImage!=undefined) {
        var background = new Image();
            background.crossOrigin = "anonymous";
            background.src = bgImage;
            background.onload = function() {
            context.drawImage(background,0,0,scratchInnerWidth,scratchInnerHeight);   
        }
      }
      
    }
  
    
    //----------------------------------------------------------------------------
    var isDrag = false;
    function clearArc(x, y) {
        context.globalCompositeOperation = 'destination-out';
        context.beginPath();
        context.arc(x, y, 23, 0, Math.PI * 2, false);
        context.fill();
    }
    canvas.addEventListener('mousedown', function(event) {
        isDrag = true;
        clearArc(event.offsetX, event.offsetY);
        judgeVisible();
    }, false);
    canvas.addEventListener('mousemove', function(event) {
        if (!isDrag) {
            return;
        }
        clearArc(event.offsetX, event.offsetY);
      // console.log(event.offsetX, event.offsetY)
        judgeVisible();
    }, false);
    canvas.addEventListener('mouseup', function(event) {
        isDrag = false;
    }, false);
    canvas.addEventListener('mouseleave', function(event) {
        isDrag = false;
    }, false);
    //----------------------------------------------------------------------------
    canvas.addEventListener("touchstart", (event) => {
        if (event.targetTouches.length !== 1) {
            return;
        }
        event.preventDefault();
        isDrag = true;
        var bcr = event.target.getBoundingClientRect();
        clearArc(event.targetTouches[0].clientX - bcr.x, event.targetTouches[0].clientY - bcr.y);
        judgeVisible();
    }, false);
    canvas.addEventListener("touchmove", (event) => {
        if (!isDrag || event.targetTouches.length !== 1) {
          console.log(event.targetTouches.length)
          return;
        }
    event.preventDefault();
    var bcr = event.target.getBoundingClientRect();
    // console.log(event.targetTouches[0].clientX, event.targetTouches[0].clientY)
    clearArc(event.targetTouches[0].clientX - bcr.x, event.targetTouches[0].clientY - bcr.y);
    judgeVisible();
  }, false);
    canvas.addEventListener("touchend", (event) => {
        isDrag = false;
        console.log(isDrag)
    }, false);
  //---------------------------------------------------------------------------- 
   function judgeVisible() {
        var imageData = context.getImageData(scratchPadding,scratchPadding,parseInt(scratchInnerWidth) - (parseInt(scratchPadding)*2),parseInt(scratchInnerHeight) -(parseInt(scratchPadding)*2)),
            pixels = imageData.data,
            result = {},
            i, len;
        // count alpha values
        for (i = 3, len = pixels.length; i < len; i += 4) {
            result[pixels[i]] || (result[pixels[i]] = 0);
            result[pixels[i]]++;
        }
        document.getElementById('gray-count').innerHTML = result[255];
        document.getElementById('scratchBase').style.setProperty('opacity', '0.6')
         if (document.getElementById('gray-count').innerHTML <= 500 ) {
            $(".modal").modal().show();
            document.getElementById('scratchBase').style.setProperty('z-index', '999')
            document.getElementById('scratchBase').style.setProperty('opacity', '1')
        }
        else if (document.getElementById('gray-count').innerHTML <= 10000 ) {
            document.getElementById('scratchBase').style.setProperty('opacity', '0.9')
        }
        
    }
  
    document.addEventListener('DOMContentLoaded', judgeVisible, false);
  
  }());
  
 $('body').on('click', '[data-bs-dismiss]', function() {
        $(".modal").modal().hide();
 })