// ==========================================================
//  購物後遊戲跳窗
// ==========================================================
;(function($) {
    $('body').on('click', '.game-model-closer', function(e) {
        if(e.currentTarget === e.target) {
            $('.game-model').fadeOut(400)
        }
    })
})($)
// ==========================================================
//  抽紅包跳窗
// ==========================================================
;(function(jQuery, $, window, document) {
	var resArray,
		playFlag = false
	function startGame(){
        if(playFlag){
            return false
        }else{
            playFlag = true
        }

        $.ajax({
            url: Project_Country + '/game/scratch/data/ajax_get_gift-p.php',
            dataType: 'json',
            async: false,
            method: 'POST',
            data: {
                Act_Game_ID: $("#Act_Game_ID").val()
            }
        }).done(function(res) {
          //console.log(res)
          //res.path桌機圖, res.path_m手機圖
          resArray = res
          switch(res.status){
            case "OK":

              if($(window).width()> 767){
                $(".scratch-canva").css('background-image', 'url("'+res.path+'")');
              }else{
                $(".scratch-canva").css('background-image', 'url("'+res.path_m+'")');
              }

              if(res.DataLayer){
                  eval(res.DataLayer)
              }

              break;

            case "TODAY_PLAYED":
              cannotPlay()
              alert('今天已玩過遊戲了');
              $(".scratch-canva").css('background-image', 'url("/game/scratch/images/gift/played.png")');
              $(".game-model-closer").trigger("click");

              break;

            case "ACT_PLAYED":
              cannotPlay()
              alert('已參加過該活動');

              $(".game-model-closer").trigger("click");
              location.href = "/";

              break;

            case "WAIT_FOR_ORDER":
              cannotPlay()
              alert('已參加過該活動，待結帳後取得下一次遊戲資格');

              $(".game-model-closer").trigger("click");
              window.location = res.url;
              break;

            case "MEMBER_NOT_LOGIN":
              cannotPlay()
              alert('須登入會員才可遊戲');
              window.location = res.url;

              break;
            case "ORDER_NOT_FULL":
              cannotPlay()
              alert('訂單金額不符合遊戲條件');

              $(".game-model-closer").trigger("click");
              break;
            case "GAME_OVER":
            case "ERROR":
              cannotPlay()
              alert('遊戲已結束');

              $(".game-model-closer").trigger("click");
              location.href = "/";

              break;


          }
        }).fail(function(x, y, z) {
            //console.log(x)
            //console.log(y)
            //console.log(z)
        })
	}

    let modelStep = 0
    function cannotPlay(){
      $(document).off("mousedown mousemove mouseup touchstart touchmove touchend")
    }
    $(window).on("load resize", function(){
      $(document).off("mousedown mousemove mouseup touchstart touchmove touchend")
      var canva = $(".scratch-canva")
      let container = $(".scratch-main")
      var ctx = canva[0].getContext("2d")
      var canvaOffset = {
            "offsetX":canva.offset().left,
            "offsetY":canva.offset().top
          }
      var drawwing = false
      //不設定固定寬高會有問題
      if($(window).width()> 767){
        container.height(container.width() * 0.6)
        canva.prop("height", Math.round(container.height()))
        canva.prop("width", Math.round(container.width()))
      }else{
        container.height(container.width() * 1.6)
        canva.prop("height", Math.round(container.height()))
        canva.prop("width", Math.round(container.width()))
      }

      if($(window).width()> 767){
        ctx.drawImage($(".scratch-cover")[0],0,0,canva.width(),canva.height())
      }else{
        ctx.drawImage($(".scratch-cover-m")[0],0,0,canva.width(),canva.height())
      }
      ctx.globalCompositeOperation = "destination-out"
      ctx.lineWidth = ($(window).width()> 767)?"50":"60"
      ctx.lineCap = "round"
      ctx.beginPath()


      $(document).on("mousedown.canva touchstart.canva", ".scratch-main", function(){
      		if($(".scratch-tutorial").css('display') != 'none'){
      			startGame();
      		}
          $(".scratch-tutorial").fadeOut();
      })

      $(document).on("mousedown.canva", ".scratch-canva", function(e){
        drawwing = true
        ctx.beginPath()
        ctx.moveTo(e.offsetX, e.offsetY)
      })
      $(document).on("mousemove.canva", ".scratch-canva", function(e){
        if(drawwing){
          ctx.lineTo(e.offsetX, e.offsetY)
          ctx.stroke()
        }
      })

      $(document).on("mouseup.canva", ".scratch-canva", function(e){
        drawwing = false
        checkCanvaScratched(ctx,canva,resArray)
      })

      $(document).on("touchstart.canva", ".scratch-canva", function(e){
        drawwing = true
        ctx.moveTo(e.originalEvent.touches[0].pageX - canvaOffset.offsetX, e.originalEvent.touches[0].pageY - canvaOffset.offsetY)
      })
      $(document).on("touchmove.canva", ".scratch-canva", function(e){
        if(drawwing){
          ctx.lineTo(e.originalEvent.touches[0].pageX - canvaOffset.offsetX, e.originalEvent.touches[0].pageY - canvaOffset.offsetY)
          ctx.stroke()
        }
      })
      $(document).on("touchend.canva", ".scratch-canva", function(e){
        drawwing = false
        checkCanvaScratched(ctx,canva,resArray)
      })
    })

    $('body').on('click', '.game-model-closer', function(e) {
        modelStep = 0
        modelCheck(modelStep)

        $(this).parents('.gmodel-wrapper').remove()
    })
})(jQuery, $, window, document)


function checkCanvaScratched(ctx,canva,resArray){
  let imageData = ctx.getImageData(0,0,canva.width(),canva.height()).data
  let conter = 0
  for(let i = 0; i < imageData.length; i++){
    if(imageData[i] == 0){
      conter++
    }
  }
  //檢查被刮除的量大於45%執行
  if(conter >= imageData.length * 0.45){
    if(resArray.status == "TODAY_PLAYED"){
      resArray.url = "/member-shopgold/"
      resArray.path = "/game/scratch/images/gift/played.png"
    }
    $('body').append(
      `<div class="gmodel-wrapper">
        <div class="gmodel-content">
          <button class="game-model-closer" type="button"></button>
          <div class="gmodel-body">
            <!-- 800*800 -->
            <img class="gift-picture" src="${($(window).width() > 767)?resArray.path:resArray.path_m}" alt="">
            <a class="gift-link-left" href="/"></a>
            <a class="gift-link-right" href="${resArray.url}"></a>
          </div>
        </div>
      </div>`
    )
  }
}

function modelCheck(step) {
  if(step) {
    $('body, #game-wrapper').addClass('theme-stock')
  } else {
    $('body, #game-wrapper').removeClass('theme-stock')
  }
}