//在浏览器console中执行
function load_geetest_img(slices){
    return new Promise((resolve, reject)=>{
        var img = new Image();
        img.crossOrigin = "Anonymous";
        img.onload = ()=>{resolve(img)};
        img.src = slices[0].style.backgroundImage.slice(4, -1);
    });
}

var restore_image = function(img, slices){
    // 在canvas中画出图片
    var canvas = document.createElement("canvas");
    // canvas.setAttribute("id", "crack_geetest");
    var context = canvas.getContext('2d');
    var upper_offset = 0;
    var down_offset = 0;
    for(var background_image of slices){
        var x = Math.abs(parseInt(background_image.style.backgroundPositionX.slice(0,-2)));
        var y = parseInt(background_image.style.backgroundPositionY.slice(0,-2));
        if(y == -58){
            // 上部分 Image
            context.drawImage(img, x, 58, 10, 58, upper_offset, 0, 10, 58);
            upper_offset += 10;
        }else{
            // 下部分 Image
            context.drawImage(img, x, 0, 10, 58, down_offset, 58, 10, 58);
            down_offset += 10;
        }
    }
    return canvas;
}


var take_background_image = function(){
    var slices1 = document.querySelectorAll(".gt_cut_bg_slice");//缺一块的
    var slices2 = document.querySelectorAll(".gt_cut_fullbg_slice");//完整的
    return Promise.all([
        load_geetest_img(slices1),
        load_geetest_img(slices2)
    ])
    .then((imgs)=>{
        return [restore_image(imgs[0], slices1), restore_image(imgs[1], slices2)]
    });
}


var is_similar = function(img1, img2, w, h){
    var pixel1 = img1.getContext('2d').getImageData(w, h, 1, 1).data;
    var pixel2 = img2.getContext('2d').getImageData(w, h, 1, 1).data;
    for (var i=0;i < 3; i++){
        if (Math.abs(pixel1[i] - pixel2[i]) >= 50){
            return false;
        }
    }
    return true;
}

var loc_diff = function(img1, img2){
    console.log(`loc_diff: ${img1.width}, ${img1.height}`);
    for(var i = 0; i < img1.width; i++){
        for(var j = 0; j < img1.height; j++){
            if(!is_similar(img1, img2, i, j)){
                return i;
            }
        }
    }
    return null;
}

var get_track = function(offset){
    var ret = [];
    var x = Math.floor(Math.random()*3)+1;
    var off = 0;
    while(offset - x >= 5){
        off += x;
        ret.push(off);
        offset -= x;
        x = Math.floor(Math.random()*3)+1;
    }
    for(var i = 0; i < offset; i++){
        off += 1;
        ret.push(off);
    }
    return ret;
}

var get_start_position = function(){
    var knob = document.querySelector(".gt_slider_knob");
    var rect = knob.getBoundingClientRect();
    return [rect.left + rect.width/2, rect.top + rect.height/2];
}

window.crack_finished = false;
function crack_events(){
    return take_background_image().then((canvases)=>{
        var [img1, img2] = canvases;
        var offset = loc_diff(img1, img2);
        var track = get_track(offset - 5);
        console.log("track", track);
        var position = get_start_position();
        var mousedown = ["mousedown", position[0], position[1]];
        var mousemove = track.map((e)=>{return ["mousemove", position[0] + e, position[1]]});
        var mouseup = ["mouseup", position[0] + track[track.length-1], position[1]];
        mousemove.unshift(mousedown);
        mousemove.push(mouseup);
        return mousemove;
    });
}

function mouse_event(type, x, y){
    console.log(`trigger ${type} on ${x}, ${y}`)
    var knob = document.querySelector(".gt_slider_knob")
    var event = document.createEvent('MouseEvent');
    event.initMouseEvent(type, true, false, window, 0, 0, 0, x, y/*坐标*/,false, false, false, false, 0, null);
    knob.dispatchEvent(event);
}

function dispatch_events(events){
    if (events.length === 0){
        window.crack_finished = true;
        return null;
    }
    var [type, x, y] = events.shift();
    var rand = (Math.random(40)+10)/100;

    mouse_event(type, x, y);
    return new Promise((resolve, reject)=>{
        setTimeout(
            ()=>{
                dispatch_events(events)
            }, rand
        );
    });
}
crack_events().then((events)=>{
    console.log("events", events);
    return dispatch_events(events);
}).catch((e)=>{console.log("Exception", e)});