var current_line = 300; 
var lines = [300, 180, 1040, 180, 1120, 480, 700, 180, 600, 180, 210, 180, 630, 1120, 260, 180];
var r = 30; 
var start_height = 300; 
var speed = 10;
var top_screen;
var bottom_screen;

function canDraw(y1, y2) {
    if (y2 < top_screen || y1 > bottom_screen) return false;
    else return true;
}

function verticalLine(x, y1, y2, ctx, canvas_h) {
    if (current_line >= y1 && canvas_h >= start_height) {
        if (canDraw(y1, y2)) ctx.moveTo(x, y1);
        if (current_line > y2){
            if (canDraw(y1, y2)) ctx.lineTo(x, y2);
        }
        else if(current_line < y2){
            if (canDraw(y1, y2)) ctx.lineTo(x, current_line);
            if (canvas_h > current_line){
                current_line+=speed;
                setTimeout("draw()", 5);
            }
            else if (canvas_h < current_line){
                current_line-=speed;
                setTimeout("draw()", 5);
            }
        }
        else{
            ctx.lineTo(x, y2);
            if (canvas_h < current_line){
                current_line-=speed;
            }
        }
    }
}
function circularArc(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
    if (typeID == 1) {
        if (current_line >= y){ 
            if (current_line > y+r){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
            }
            else if (current_line < y+r){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI-Math.asin((Math.min(current_line,y+r)-y) / r), true);
                if (canvas_h > current_line){
                    current_line+=speed;
                    setTimeout("draw()", 5);
                }
                else if (canvas_h < current_line && lines[lineID] == x){
                    current_line-=speed;
                    setTimeout("draw(), 5");
                }
            }
            else{
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
                if (canvas_h < current_line && lines[lineID] == x){
                    current_line-=speed;
                }
            }
        }
    }
    else if (typeID == 2) {
        if (current_line >= y-r && lines[lineID] == x){ 
            if (current_line > y){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
            }
            else if (current_line < y){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI*1.5+Math.acos((y-current_line)/r), false);
                if (canvas_h > current_line){
                    current_line+=speed;
                    setTimeout("draw()", 5);
                }
                else if (canvas_h < current_line){
                    current_line-=speed;
                    setTimeout("draw()", 5);
                }
            }
            else{
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
                if (canvas_h < current_line){
                    current_line-=speed;
                }
            }
        }
    }
    else if (typeID == 3) {
        if (current_line >= y){ 
            if (current_line > y+r){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
            }
            else if (current_line < y+r){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.asin((current_line-y)/r), false);
                if (canvas_h > current_line){
                    current_line+=speed;
                    setTimeout("draw()", 5);
                }
                else if (canvas_h < current_line){
                    current_line-=speed;
                    setTimeout("draw()", 5);
                }
            }
            else{
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
                if (canvas_h < current_line && lines[lineID] == x){
                    current_line-=speed;
                }
            }
        }
    }
    else if (typeID == 4) {
        if (current_line >= y-r && lines[lineID] == x){ 
            if (current_line > y){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
            }
            else if (current_line < y){
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI + Math.asin((y-current_line)/r), true);
                if (canvas_h > current_line){
                    current_line+=speed;
                    setTimeout("draw()", 5);
                }
                else if (canvas_h < current_line){
                    current_line-=speed;
                    setTimeout("draw()", 5);
                }
            }
            else{
                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
                if (canvas_h < current_line){
                    current_line-=speed;
                }
            }
        }
    }
}
function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
    if (typeID == 1) { 
        if (current_line >= y && canvas_h >= y){ 
            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
            if (lines[lineID] < x2){
                lines[lineID] += 10;
            }
            if (lines[lineID] < x2){
                setTimeout("draw()", 120);
            }
        }
        if (canvas_h < y && lines[lineID] > x1 && current_line == y){
            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
            if (lines[lineID] > x1){
                lines[lineID] -= 10;
            }
            if (lines[lineID] > x1){
                setTimeout("draw()", 80);
            }
        }
    }
    else if (typeID == 2) { 
        if (current_line >= y && canvas_h >= y){ 
            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
            if (lines[lineID] > x2){
                lines[lineID] -= 10;
            }
            if (lines[lineID] > x2){
                setTimeout("draw()", 120);
            }
        }
        if (canvas_h < y && lines[lineID] < x1 && current_line == y){
            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
            if (lines[lineID] < x1){
                lines[lineID] += 10;
            }
            if (lines[lineID] < x1){
                setTimeout("draw()", 80);
            }
        }
    }
}
function draw(){
    /** @type {HTMLCanvasElement} */
    let scrTop = document.documentElement.scrollTop;
    var canvas = document.getElementById("roadmap")
    canvas.width = 1300;
    canvas.height = 4500;
    let cvs_h = canvas.getBoundingClientRect().top + scrTop;
    let cur_h = document.documentElement.clientHeight / 1.8 + scrTop;
    top_screen = Math.floor(-canvas.getBoundingClientRect().top);
    bottom_screen = Math.floor(document.documentElement.clientHeight + scrTop - cvs_h);
    let canvas_h = Math.floor(cur_h - cvs_h);
    if (canvas_h % 10 == 9) {
        canvas_h -= 9;
    }
    if (canvas_h % 10 == 8) {
        canvas_h -= 8;
    }
    if (canvas_h % 10 == 7) {
        canvas_h -= 7;
    }
    if (canvas_h % 10 == 6) {
        canvas_h -= 6;
    }
    if (canvas_h % 10 == 5) {
        canvas_h -= 5;
    }
    if (canvas_h % 10 == 4) {
        canvas_h -= 4;
    }
    if (canvas_h % 10 == 3) {
        canvas_h -= 3;
    }
    if (canvas_h % 10 == 2) {
        canvas_h -= 2;
    }
    if (canvas_h % 10 == 1) {
        canvas_h -= 1;
    }

    if(!canvas.getContext) return;
    var ctx = canvas.getContext("2d");
    var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
    gradient.addColorStop(0, "#185A4F");
    gradient.addColorStop(0.36, "#185A4F");
    gradient.addColorStop(0.373, "#05BE85");
    gradient.addColorStop(0.381, "#05BE85");
    gradient.addColorStop(0.387, "#05BE85");
    gradient.addColorStop(0.38, "#05BE85");
    gradient.addColorStop(0.41, "#185A4F");
    gradient.addColorStop(0.53534, "#185A4F");
    gradient.addColorStop(0.57648, "#62D881");
    gradient.addColorStop(0.63287, "#62D881");
    gradient.addColorStop(0.68127, "#185A4F")
    gradient.addColorStop(1,"#185A4F");
    ctx.strokeStyle = gradient;
    // ctx.shadowColor = "#00508A";
    // ctx.shadowBlur = 20;
    ctx.lineWidth = 17;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.beginPath();
    // console.log(current_line, canvas_h);

    if (canvas_h < start_height){
        current_line = start_height;
    }

    
    var centerX = canvas.width / 2;  
    verticalLine(centerX, 200, 4500, ctx, canvas_h);

    circularArc(centerX - 30, 1600, ctx, canvas_h, 3, 0);

    horizontalLine(centerX - 30, centerX - 400, 1630, ctx, canvas_h, 2, 0);
    
    circularArc(centerX + 30, 2400, ctx, canvas_h, 1, 1);
    horizontalLine(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 1);
    
    circularArc(centerX - 30, 3200, ctx, canvas_h, 3, 2);
    horizontalLine(centerX - 30, centerX - 400, 3230, ctx, canvas_h, 2, 2);
    
    circularArc(centerX + 30, 4000, ctx, canvas_h, 1, 3);
    horizontalLine(centerX + 30, centerX + 400, 4030, ctx, canvas_h, 1, 3);
  
    ctx.stroke()
    canvas.style.backgroundColor="transparent";
}
draw();
window.addEventListener('scroll', draw);