// first we need to create a stage
const stage = new Konva.Stage({
  container: "container", // id of container <div>
  width: 800,
  height: 500
  }),

  // then create layer
  layer = new Konva.Layer(),
  imageURL = "https://assets.codepen.io/255591/pia23689.jpeg",
  imageObj  = new Image(),
  fogRect = new Konva.Rect({fill: 'black'}),
  group1 = new Konva.Group({}),
  group2 = new Konva.Group({});
      
// this will be the clear version of the image
let image = null,
    clearImage =null,
    spotSize = 80, // size of the spotlight circle
    mousePos = {x: 0, y: 0}; // initial spotlight position

imageObj.crossOrigin = 'anonymous';
imageObj.onload = function(){

  // work out how to make the image looj pleasing
  const widthRatio = stage.width() / imageObj.width,
        heightRatio = stage.height() / imageObj.height,
        scale = (widthRatio  > heightRatio ? heightRatio  : widthRatio)
 
  // standard approach to loading the image
  image = new Konva.Image({
    x: 0,
    y: 0,
    width: imageObj.width * scale,
    height: imageObj.height * scale,
    image: imageObj,
    });
    layer.add(image);  
    image.moveToBottom(); 

    clearImage=image.clone(); // copy of the image before blur applied
    group1.add(clearImage)

    image.cache(); // required for the blur filter
    image.filters([Konva.Filters.Blur]);
    image.blurRadius(20)  
  
    group2.add(fogRect);
    fogRect.size(clearImage.size());
    stage.size(clearImage.size());
 
    mousePos = {x: clearImage.width()/2, y: clearImage.height()/2}; // initial location of spotlight

    go(); // initialise the view
  }
imageObj.src = imageURL;

 
// The simple spotlight clip function 
function setClipFunc1(pos){
  return function (ctx) {
    // Start only one path
    ctx.beginPath();
 
    ctx.arc(pos.x, pos.y, spotSize, 0, Math.PI * 2, false)
    
    ctx.closePath();

  }
}
// The clip function for the cut-out/hole in the foggy overlay
function setClipFunc2(pos){
  return function (ctx) {
    // Start only one path
    ctx.beginPath();
 
    // Draw the first hull: clockwise
    ctx.moveTo(0, 0);
    ctx.lineTo(clearImage.width(), 0);
    ctx.lineTo(clearImage.width(), clearImage.height());
    ctx.lineTo(0, clearImage.height());
    // Closing path, but not starting a new one
    ctx.closePath();
    
    ctx.arc(pos.x, pos.y, spotSize, 0, Math.PI * 2, true)
    
    ctx.closePath();

  }
}

// trigger the update of the clip funcs
stage.on('mousemove', function(){
 moveSpot(stage.getPointerPosition())
})

function moveSpot(pos){
  mousePos = pos;
  let fn1 =  setClipFunc1(mousePos);
  group1.clipFunc(fn1)
  
  let fn2 =  setClipFunc2(mousePos);
  group2.clipFunc(fn2) 
}

// add the groups to the layer
layer.add(group1);
layer.add(group2);

// add the layer to the stage
stage.add(layer);

// draw the image
layer.draw();

 
function go(){

  fogRect.opacity(parseInt($('#shadowDensity').val())/100);
  if (image){
    image.blurRadius(parseInt($('#blurAmount').val()));
  }
  spotSize = parseInt($('#spotSize').val());
  
  moveSpot(mousePos);
}

// Event listener for sliders - refresh parameters when change occurs.
$('input[type=range]').on('mouseup input', function(e){
  go();    
})