let canvas;
let backgroundObj;

let animateFlag = false;
let swingFlag = false;


 $(function () {
    canvas = this.__canvas = new fabric.Canvas('canvas');
    canvas.setWidth( parseInt( $('.play_view').css('width').replace("px","") ) );
    canvas.setHeight( parseInt( $('.play_view').css('height').replace("px","") ) );
    
 });


  async function addObject(objectUrl, pos, size, scale, id=""){

    return new Promise( function( resolve, reject ){
        try{
            fabric.Image.fromURL(objectUrl, function(img) {
                    var leftcenter= canvas.width/2
                    var halfleft = img.width /2; 
                    let left = 0;
                    // console.log(pos);
                    // console.log(pos.left == "center");
                    // if(pos.left == "center"){
                    //     halfleft = 0;
                    //     left = leftcenter - halfleft;
                    // }else if(pos.left.includes("ratio")){
                    //   let ratio = parseFloat( pos.left.split("|")[1] );
                    //   left = (canvas.width * ratio );
                    //   console.log(`(${canvas.width} * ${ratio}) - ${halfleft}`);
                    //   if(left < 0){
                    //     left = 0;
                    //   }
                    //   console.log(left);
                    // }else{
                    //     left = pos.left;
                    // }
                    pos = calculatePos(pos, img);
                    // console.log("after :: ", pos);

                    img1 = img.set({ left: pos.left, top: pos.top , width: size.width, height: size.height,
                        id : id,
                        scaleX : scale,
                        scaleY : scale ,
                        originX : "center",
                        originY : "center"
                    });
                    //canvas.setActiveObject(img1);
                    canvas.add(img1) ;
                    img1.selectable  = false;
                    //obj = img1; 
                    // console.log(img1);
                    canvas.renderAll();

                    resolve(img);
                });
        } catch(error){
            reject(error);
        }
    });
 }

 function calculatePos(pos, img){
    var leftcenter= canvas.width/2
    var topcenter= canvas.height/2
    var halfleft = img.width /2; 
    var halftop = img.height /2; 
    let left  = 0;
    let top = 0;
    // console.log(pos);

    if(pos.left == "center"){
      halfleft = 0;
      left = leftcenter - halfleft;
    }else if(typeof(pos.left) == "string"){
      if(pos.left.includes("ratio")){
        let ratio = parseFloat( pos.left.split("|")[1] );
        left = (canvas.width * ratio ) ;
        // console.log(`(${canvas.width} * ${ratio}) - `);
        if(left < 0){
          left = 0;
        }
      }

    }else{
        left = pos.left;
    }

    if(pos.top == "center"){
      halftop = 0;
      top = topcenter - halftop;
    }else if( typeof(pos.top) == "string"){
      if(pos.top.includes("ratio")){
        let ratio = parseFloat( pos.top.split("|")[1] );
        top = (canvas.height * ratio );
        // console.log(`(${canvas.height} * ${ratio}) `);
        if(top < 0){
          top = 0;
        }
      }
    }else{
      top = pos.top;
    }
    pos.top = top;
    pos.left = left;

    return pos;
 }
 
 var regex = /[^0-9]/g;	
 let ratio = 1.57;


function animateSwing(height){
  if(swingFlag){

    let objects = canvas.getObjects();
    let ele = getDefaultObjectFromCanvas();

    let copy_hight = height;
    if(animateFlag){
      copy_hight = copy_hight * -1;
    }
    ele.animate({'top': ele.top-copy_hight,} , {
      duration: 2000,
      onChange: canvas.renderAll.bind(canvas),
      onComplete: function() {
        console.log('onchan');
        animateFlag = !animateFlag;
        animateSwing(height);
      },
      //easing: fabric.util.ease['easeInQuart'],
    });
  }
}

function applyImgFilter(object, f) {
  object.filters[0] = f
  object.applyFilters();
  canvas.renderAll.bind(canvas);
}

function backgroundChange(src, duration){
  let beforeSrc = canvas.backgroundImage.getSrc();
  let rect = new fabric.Rect({
    id : 'overlay',
    left : 0,
    top : 0,
    width : canvas.width,
    height : canvas.height,
    fill : `black`,
    opacity : 0
  });

  canvas.add(rect);
  canvas.renderAll.bind(canvas);
  rect.animate({opacity : 1},{
    duration : duration/4,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
      setBackground(src);
      rect.animate({opacity : 0},{
        duration : duration/4,
        onChange: canvas.renderAll.bind(canvas),
        onComplete: function() {
          rect.set('fill','white');
          canvas.renderAll();
          rect.animate({opacity : 1},{
            duration : duration/4,
            onChange: canvas.renderAll.bind(canvas),
            onComplete: function() {
              setBackground(beforeSrc);
              rect.animate({opacity : 0},{
                duration : duration/4,
                onChange: canvas.renderAll.bind(canvas),
                onComplete: function() {

                },
              });
            },
          });
        },
      });
    },
  });
  
}

function getDefaultObjectFromCanvas(){
  let ele = "";
  let objects = canvas.getObjects();
  for(let i=0; i < objects.length; i++){
    // console.log(`${objects[i].id} == defaultObject`);
    if(objects[i].id =="defaultObject"){
      console.log("find!");
      ele = objects[i];
    }   
  }
  canvas.bringToFront(ele);
  return ele;
}

function animateLeft(pos, duration){
  let ele = getDefaultObjectFromCanvas();
  let cal_pos = calculatePos(pos, "");
  ele.animate({'left': pos.left,  'top' : (pos.top)} , {
    duration: duration,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
    
    },
  });
}

function animateDown(downValue, duration){
  let ele = getDefaultObjectFromCanvas();
  let cal_pos = calculatePos({left :0, top: downValue}, "");

  ele.animate({  'top' : (ele.top) + cal_pos.top } , {
    duration: duration,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
    
    },
    easing : fabric.util.ease['easeInOutBack']
  });
}

function animateOut(duration){
  let ele = getDefaultObjectFromCanvas();
  ele.animate({'left': canvas.width,  'top' : 0} , {
    duration: duration,
    onChange: canvas.renderAll.bind(canvas),
    onComplete: function() {
    },
  });
}


function setBackground(src){
    canvas.setBackgroundImage(src, function() {
      // console.log(src);
        let img = canvas.backgroundImage;
        img.originX = 'left';
        img.originY = 'top';
        img.scaleX = canvas.getWidth() / img.width;
        img.scaleY = canvas.getHeight() / img.height;
        backgroundObj = img;
        canvas.renderAll();
      });
}

  function initBackground(){
      canvas.setBackgroundImage(null);
      canvas.setBackgroundColor('');
      canvas.renderAll();
  }

  function addSprite(objectUrl, pos, spriteOpt, id=""){

    fabric.Sprite.fromURL(objectUrl, function(sprite){
          let cal_pos = calculatePos(pos, sprite);
          console.log("id ", id);
          sprite.id = id;
          sprite.left = cal_pos.left;
          sprite.top = cal_pos.top;

          console.log(spriteOpt);

          canvas.add(sprite);
          setTimeout(function() {
            sprite.width = spriteOpt.width;
            sprite.height = spriteOpt.height;


            console.log("sprite::", sprite);

            sprite.set('dirty', true);
            sprite.play();
          }, 100);
    }, {
        id : id,
        left : pos.left,
        top :  pos.top,
        spriteOption : spriteOpt,
    });
    
    canvas.renderAll();

    (function render() {
        canvas.renderAll();
        fabric.util.requestAnimFrame(render);
      })();
  }



    // canvas.setBackgroundImage('./img/background.png', canvas.renderAll.bind(canvas), {
    // // Needed to position backgroundImage at 0/0
    //     originX: 'middle',
    //     originY: 'middle',
    //     scaleX : canvas.width /2,
    //     scaleY : canvas.height /2
    // });

    // setBackground();
    // resizeCanvas();

    //fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
    //fabric.Object.prototype.transparentCorners = false;
  
    // for (var i = 0, len = 5; i < len; i++) {
    //   for (var j = 0, jlen = 5; j < jlen; j++) {
    //     fabric.Sprite.fromURL('/assets/sprite.png', createSprite(i, j));
    //   }
    // }
  
    // function createSprite(i, j) {
    //   return function(sprite) {
    //     sprite.set({
    //       left: i * 100 + 50,
    //       top: j * 100 + 50,
    //       angle: fabric.util.getRandomInt(-30, 30)
    //     });
    //     canvas.add(sprite);
    //     setTimeout(function() {
    //       sprite.set('dirty', true);
    //       sprite.play();
    //     }, fabric.util.getRandomInt(1, 10) * 100);
    //   };
    // }
  
    // (function render() {
    //   canvas.renderAll();
    //   fabric.util.requestAnimFrame(render);
    // })();


  //  function resizeCanvas(isFull) {
//     let width = parseInt($(".play_view").css("height").replace("px",""));
//     let height = parseInt($(".play_view").css("width").replace("px",""));
//     canvas.setHeight( width);
//     canvas.setWidth( height);
//     //canvas.setDimensions(width, height);
//     console.log(`width :${parseInt($(".play_view").css("height").replace("px",""))} / height : ${parseInt($(".play_view").css("width").replace("px",""))}`);
//     setBackground();

//     resizeAllObject(isFull);
    
//     canvas.renderAll();
//   }

//   function resizeAllObject(isFull){
//     let objectArr = canvas.getObjects();
//     if(isFull){
//         for(let i=0; i<objectArr.length; i++){
//             canvas.getObjects()[i].left = canvas.getObjects()[i].left * ratio;
//             canvas.getObjects()[i].top = canvas.getObjects()[i].top * ratio;
//             canvas.getObjects()[i].scaleX = canvas.getObjects()[i].scaleX * ratio;
//             canvas.getObjects()[i].scaleY = canvas.getObjects()[i].scaleY * ratio;
//         }
//     }else{
//         for(let i=0; i<objectArr.length; i++){
//             canvas.getObjects()[i].left = canvas.getObjects()[i].left / ratio;
//             canvas.getObjects()[i].top = canvas.getObjects()[i].top / ratio;
//             canvas.getObjects()[i].scaleX = canvas.getObjects()[i].scaleX / ratio;
//             canvas.getObjects()[i].scaleY = canvas.getObjects()[i].scaleY / ratio;
//         }
//     }
//   }