var ajaxInitCardUrl = "../ajaxGetMyRedPacket";
var ajaxScratchCardUrl = "../ajaxGetRedPacket";
var $scratchMask = $("#J_scratch_mask");
var $resultWrap = $("#J_scratch_result");
var $resultAward = $("#J_result_award");
var $canvas = $("#J_canvas");
var $redPacketInfo = $("#J_redpacket_info");
var context, canvasW, canvasH, canvas;
var isFingerOn = false;

function setup() {
    bindScratchCard();
}

function bindScratchCard() {
    $scratchMask.on("click", function(){
        $scratchMask.hide();
    });

    if (!$canvas.length) {
        return;
    }

    canvas = document.getElementById("J_canvas");
    context = canvas.getContext('2d');
    canvasW = $canvas.parent().width();
    canvasH = $canvas.parent().height();

    buildCard();
}

function buildCard() {
    initCanvasLayout();
    bindDrawCanvas();
    buildCanvasContent();
    bindCanvasEvent();
}

function initCanvasLayout() {
    $canvas.attr("width", canvasW).attr("height", canvasH).css("background-color", "transparent");
}

function buildCanvasContent() {
    // var image = new Image();
    // image.crossOrigin = "anonymous";
    // image.src = "../bg1.jpg";
    // context.beginPath();
    // image.onload = function() {
    //     context.drawImage(image, 0, 0, canvasW, canvasH);
    //     context.closePath();
    // }
}

function bindDrawCanvas() {
    context.beginPath();
    context.fillStyle = "#CDCBCC";
    context.fillRect(0, 0, canvasW, canvasH);
    context.closePath();
}

function bindCanvasEvent() {
    canvas.addEventListener('touchstart', touchStart, false);
    canvas.addEventListener('touchmove', touchMove, false);
    canvas.addEventListener('touchend', touchEnd, false);
}

function touchStart(ev) {
    ev.preventDefault();

    var touch = ev.touches[0];
    isFingerOn = true;
}

function touchMove(ev) {
    ev.preventDefault();

    var touch = ev.touches[0];
    var canvasPosition = $canvas.offset();
    var canvasLeft = canvasPosition.left;
    var canvasTop = canvasPosition.top;
    var startX = (touch.pageX - canvasLeft);
    var startY = (touch.pageY - canvasTop);

    if (isFingerOn) {
        drawArc(startX, startY, 20);
    }
}

function touchEnd(ev) {
    var num = 0;
    var data = context.getImageData(0, 0, canvasW, canvasH);
    isFingerOn = false;
    for (var i = 0; i < data.data.length; i++) {
        if (data.data[i] == 0) {
            num++;
        };
    };

    if (num >= data.data.length * 0.15) {
        context.fillRect(0, 0, canvasW, canvasH);
        $resultWrap.css("z-index", "4");
        $redPacketInfo.css('display', 'block');
    };
}

function drawArc(x, y, r) {
    context.globalCompositeOperation = "destination-out";
    context.beginPath();
    context.arc(x, y, r, 0, Math.PI * 2);
    canvas.offsetHeight;
    context.fillStyle = "#000";
    context.fill();
    context.closePath();
}