var stage = 0
var a = ["..", ".", "", ".", "..", "..."]

$(document).ready(function () {
        up = document.getElementById("upload")
        if (up != null) {up.addEventListener ("click", ButtonPress)}
        var height1 = $("#eins").height ();
        var height2 = $("#zwei").height ();
        if (height1 < 300) {height1 += 550};
        console.log (height1, height2);
        $(window).scroll(function () {
            var pos = $(this).scrollTop ();
            if (stage ==1 && pos-200 >= height2) { moveBlobs (2050, 600, 2)}
            else if (stage == 2 && pos < height2 ) { moveBlobs (1000, 1000, 1)}
            else if (stage == 0 && pos+600 >= height1){ moveBlobs (1000, 1000, 1)}
            else if ((stage == 1 && pos < height1-450)) { moveBlobs (0,0,0) }
        })
    }
)

function moveBlobs (t, r, to) {
    var dur = 0.4
    if (stage < to) {
        $("#blobs").css ({
            'animation': 'move-down-' + to +' ease-out '+dur+ 's'
        })
        $("#green").css ({
            'animation': 'green-move-down-'+ to + ' ease-in '+dur+ 's'
        })
        $("#red").css ({
            'animation': 'red-move-down-'+ to + ' ease-in '+dur+ 's'
        })
        $("#blue").css ({
            'animation': 'blue-move-down-'+ to + ' ease-in '+dur+ 's'
        })
    }
    else {
        $("#blobs").css ({
            'animation': 'move-down-' +(to+1)+ ' ease-out '+dur+'s reverse'
        })
        $("#green").css ({
            'animation': 'green-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
        })
        $("#red").css ({
            'animation': 'red-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
        })
        $("#blue").css ({
            'animation': 'blue-move-down-'+ (to+1) + ' ease-in '+dur+ 's reverse'
        })
    }
    setTimeout (function () {
        $("#blobs").css ({
            'top': t + 'px',
            'right': r + 'px',
            'animation': '',});
        $("#green").css ({ 'animation': '' })
        $("#blue").css ({ 'animation': '' })
        $("#red").css ({ 'animation': '' })
        stage = to;
    }, (dur*1000)-1)
} 

function ButtonPress () {
    up.setAttribute ('disabled', 'disabled')
    document.body.style.cursor = "progress"
    $("#upload").css ({
        'cursor': 'not-allowed',
        'animation': 'text-in-out 1s'
    })
    setTimeout (function () {
        up.textContent = "Verarbeite..."
        $("#upload").css ({
            'padding-right': '140px',
            'padding-left': '139px',
            'padding-top': '80px',
            'padding-bottom': '57px',
        })
    }, 500)
    setTimeout (function() {
        $("#upload").css ({
            'animation': 'border-in-out 2s infinite'
        })
    }, 1000)
    setTimeout (function () {
        textLoop (0)
    }, 200)
    
}

function textLoop (i){
    setTimeout (function (){
        up.textContent = "Verarbeite" + a[i]
        if (i<5) { textLoop (++i)}
        else { textLoop (0)}
    }, 2000)
}