var v_timeOut=Date.parse(new Date());

function imgVer(Config) {
    var el = eval(Config.el);
    var w = Config.width;
    var h = Config.height;

    var PL_Size = 48;
    var padding = 20;
    var MinN_X = padding + PL_Size;
    var MaxN_X = w - padding - PL_Size - PL_Size / 6;
    var MaxN_Y = padding;
    var MinN_Y = h - padding - PL_Size - PL_Size / 6;
    function RandomNum(Min, Max) {
        var Range = Max - Min;
        var Rand = Math.random();
        if (Math.round(Rand * Range) == 0) {
            return Min + 1;
        } else if (Math.round(Rand * Max) == Max) {
            return Max - 1;
        } else {
            var num = Min + Math.round(Rand * Range) - 1;
            return num;
        }
    }

    var imgSrc = "https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10);
    v_timeOut=Date.parse(new Date());
    var X = RandomNum(MinN_X, MaxN_X);
    var Y = RandomNum(MinN_Y, MaxN_Y);
    var left_Num = -X + 10;
    var html = '<div style="position:relative;padding:16px 16px 28px;border:1px solid #ddd;background:#f2ece1;border-radius:16px;">';
    html += '<div style="position:relative;overflow:hidden;width:' + w + 'px;">';
    html += '<div style="position:relative;width:' + w + 'px;height:' + h + 'px;">';
    html += '<img id="scream" src="' + imgSrc + '" style="width:' + w + 'px;height:' + h + 'px;">';
    html += '<canvas id="puzzleBox" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';
    html += '</div>';
    html += '<div id="kuang" class="puzzle-lost-box" style="position:absolute;width:' + w + 'px;height:' + h + 'px;top:0;left:' + left_Num + 'px;z-index:111;">';
    html += '<canvas id="puzzleShadow" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:22;"></canvas>';
    html += '<canvas id="puzzleLost" width="' + w + '" height="' + h + '" style="position:absolute;left:0;top:0;z-index:33;"></canvas>';
    html += '</div>';
    html += '<p class="ver-tips"></p>';
    html += '</div>';
    html += '<div class="re-btn"><a></a></div>';
    html += '</div>';
    html += '<br>';
    html += '<div style="position:relative;width:' + w + 'px;margin:auto;">';
    html += '<div style="border:1px solid #c3c3c3;border-radius:24px;background:#ece4dd;box-shadow:0 1px 1px rgba(12,10,10,0.2) inset;">';
    html += '<p style="font-size:12px;color: #486c80;line-height:28px;margin:0;text-align:right;padding-right:22px;">Slide block to finish the jigsaw..</p>';
    html += '</div>';
    html += '<div class="slider-btn"></div>';
    html += '</div>';
    el.html(html);
    var d = PL_Size / 3;
    var c = document.getElementById("puzzleBox");
    var ctx = c.getContext("2d");
    ctx.globalCompositeOperation = "xor";
    ctx.shadowBlur = 10;
    ctx.shadowColor = "#fff";
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.fillStyle = "rgba(0,0,0,0.7)";
    ctx.beginPath();
    ctx.lineWidth = "1";
    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.moveTo(X, Y);
    ctx.lineTo(X + d, Y);
    ctx.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx.lineTo(X + 3 * d, Y);
    ctx.lineTo(X + 3 * d, Y + d);
    ctx.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx.lineTo(X + 3 * d, Y + 3 * d);
    ctx.lineTo(X, Y + 3 * d);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    var c_l = document.getElementById("puzzleLost");
    var c_s = document.getElementById("puzzleShadow");
    var ctx_l = c_l.getContext("2d");
    var ctx_s = c_s.getContext("2d");
    var img = new Image();
    img.src = imgSrc;
    img.onload = function() {
        ctx_l.drawImage(img, 0, 0, w, h);
    }
    ctx_l.beginPath();
    ctx_l.strokeStyle = "rgba(0,0,0,0)";
    ctx_l.moveTo(X, Y);
    ctx_l.lineTo(X + d, Y);
    ctx_l.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y);
    ctx_l.lineTo(X + 3 * d, Y + d);
    ctx_l.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_l.lineTo(X + 3 * d, Y + 3 * d);
    ctx_l.lineTo(X, Y + 3 * d);
    ctx_l.closePath();
    ctx_l.stroke();
    ctx_l.shadowBlur = 10;
    ctx_l.shadowColor = "black";
    ctx_l.clip();
    ctx_s.beginPath();
    ctx_s.lineWidth = "1";
    ctx_s.strokeStyle = "rgba(0,0,0,0)";
    ctx_s.moveTo(X, Y);
    ctx_s.lineTo(X + d, Y);
    ctx_s.bezierCurveTo(X + d, Y - d, X + 2 * d, Y - d, X + 2 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y);
    ctx_s.lineTo(X + 3 * d, Y + d);
    ctx_s.bezierCurveTo(X + 2 * d, Y + d, X + 2 * d, Y + 2 * d, X + 3 * d, Y + 2 * d);
    ctx_s.lineTo(X + 3 * d, Y + 3 * d);
    ctx_s.lineTo(X, Y + 3 * d);
    ctx_s.closePath();
    ctx_s.stroke();
    ctx_s.shadowBlur = 20;
    ctx_s.shadowColor = "black";
    ctx_s.fill();
    var moveStart = '';
    $(".slider-btn").mousedown(function(e) {
        e = e || window.event;
        $(this).css({
            "background-position": "0 -216px"
        });
        moveStart = e.pageX;
    });

    $(".slider-btn").on("touchstart",function(e) {
        e = e || window.event;
        $(this).css({
            "background-position": "0 -216px"
        });
        moveStart = e.targetTouches[0].pageX;
    });

    onmousemove = function(e) {
        e = e || window.event;
        var moveX = e.pageX;
        var d = moveX - moveStart;
        if (moveStart == '') {} else {
            if (d < 0 || d > (w - padding - PL_Size)) {} else {
                $(".slider-btn").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
                $("#puzzleLost").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
                $("#puzzleShadow").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
            }
        }
    };
//add var for touchend to get location
var touch_pageX;

     $(".slider-btn").on("touchmove", function(e) {
        e = e || window.event;
        var moveX = e.targetTouches[0].pageX;
        touch_pageX=moveX;
        var d = moveX - moveStart;
        if (moveStart == '') {} else {
            if (d < 0 || d > (w - padding - PL_Size)) {} else {
                $(".slider-btn").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
                $("#puzzleLost").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
                $("#puzzleShadow").css({
                    "left": d + 'px',
                    "transition": "inherit"
                });
            }
        }
    });


    onmouseup = function(e) {
        e = e || window.event;
        var moveEnd_X = e.pageX - moveStart;
        var ver_Num = X - 10;
        var deviation = 4;
        var Min_left = ver_Num - deviation;
        var Max_left = ver_Num + deviation;
        if (moveStart == '') {} else {
            if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
                $(".ver-tips").html('<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">Authority Confimed! Only use '+(Date.parse(new Date())-v_timeOut)/1000+'s!</span><span></span>');
                $(".ver-tips").addClass("slider-tips");
                $(".puzzle-lost-box").addClass("hidden");
                $("#puzzleBox").addClass("hidden");
                setTimeout(function() {
                    $(".ver-tips").removeClass("slider-tips");
                    imgVer(Config);easyVer_off();
                },
                2000);

                Config.success();
            } else {
                $(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>');
                $(".ver-tips").addClass("slider-tips");
                setTimeout(function() {
                    $(".ver-tips").removeClass("slider-tips");
                    document.getElementById("scream").src="https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10);
                    imgVer(Config);v_timeOut=Date.parse(new Date());
                },
                2000);

                Config.error();
            }
        }
        setTimeout(function() {
            $(".slider-btn").css({
                "left": '0',
                "transition": "left 0.5s"
            });
            $("#puzzleLost").css({
                "left": '0',
                "transition": "left 0.5s"
            });
            $("#puzzleShadow").css({
                "left": '0',
                "transition": "left 0.5s"
            });
        },
        1000);
        $(".slider-btn").css({
            "background-position": "0 -84px"
        });
        moveStart = '';
        $(".re-btn a").on("click",
        function() {
            imgVer(Config);
        })

    }

    $(".slider-btn").on("touchend", function(e) {
        e = e || window.event;
        var moveEnd_X = touch_pageX - moveStart;
        var ver_Num = X - 10;
        var deviation = 4;
        var Min_left = ver_Num - deviation;
        var Max_left = ver_Num + deviation;
        if (moveStart == '') {} else {
            if (Max_left > moveEnd_X && moveEnd_X > Min_left) {
                $(".ver-tips").html('<i style="background-position:-4px -1207px;"></i><span style="color:#42ca6b;">Authority Confimed! Only use '+(Date.parse(new Date())-v_timeOut)/1000+'s!</span><span></span>');
                $(".ver-tips").addClass("slider-tips");
                $(".puzzle-lost-box").addClass("hidden");
                $("#puzzleBox").addClass("hidden");
                setTimeout(function() {
                    $(".ver-tips").removeClass("slider-tips");
                    imgVer(Config);easyVer_off();
                },
                2000);

                Config.success();
            } else {
                $(".ver-tips").html('<i style="background-position:-4px -1229px;"></i><span style="color:red;">Verification Failure!</span><span style="margin-left:4px;">Please drag block to the right position!</span>');
                $(".ver-tips").addClass("slider-tips");
                setTimeout(function() {
                    $(".ver-tips").removeClass("slider-tips");
                    document.getElementById("scream").src="https://cdn.yimian.ac.cn/easyVer/image.php?df="+Math.floor(Math.random()*10);
                    imgVer(Config);v_timeOut=Date.parse(new Date());
                },
                2000);

                Config.error();
            }
        }
        setTimeout(function() {
            $(".slider-btn").css({
                "left": '0',
                "transition": "left 0.5s"
            });
            $("#puzzleLost").css({
                "left": '0',
                "transition": "left 0.5s"
            });
            $("#puzzleShadow").css({
                "left": '0',
                "transition": "left 0.5s"
            });
        },
        1000);
        $(".slider-btn").css({
            "background-position": "0 -84px"
        });
        moveStart = '';
        $(".re-btn a").on("click",
        function() {
            imgVer(Config);
        })

    });


}
        
  var callBackFunctionName = "";
$(".verBox").html("<div id=\"imgVer\" style=\"display:inline-block;\"></div>");


function easyVer() {

   $(".verBox").css({
        "left": "404px",
        "opacity": "0",
        "z-index":"9999"
    })

    imgVer({
        el: '$("#imgVer")',
        width: '260',
        height: '116',
        success: function() {
            if (callBackFunctionName) eval(callBackFunctionName + "()")
        },
        error: function() {}
    })
}

function easyVer_off() {
    $(".verBox").css({
        "left": "404px",
        "opacity": "0",
        "z-index":"-100"
    })
     $(".verBox").css({
        "left": "0px",
        "opacity": "0"
    })
}
console.log('\n' + ' %c easyVer Vertification Plugin %c https://github.com/hhCandy/easyVer ' + '\n', 'color: #00FFFF; background: #030307; padding:5px 0;', 'background: #4682B4; padding:5px 0;');

function show_easyVer() {
    $(".verBox").css({
        "left": "0",
        "opacity": "1"
    })
}