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

$(document).ready(function () {
        upform = document.getElementById("fileupload")
        uplabel = document.getElementById("filelabel")
        upline = document.getElementById("formline")
        upbtn = document.getElementById("upload")
        $("#fileselect").change(function() {
            uplabel.textContent = this.files[0].name + " (Klick zum Ändern)"
            changeFile ()
          });
        if (upbtn != null) {upbtn.addEventListener ("click", ButtonPress)}
        $(window).scroll(function () {
            var height1 = $("#eins").height ();
            var height2 = $("#zwei").height ();
            var screenheight = $("body").height();
            var pos = $(this).scrollTop ();
            if (stage == 1 && pos-(screenheight/4.5) >= height2) { moveBlobs ("225vh", "31vw", 2)}
            else if (stage == 2 && pos-(screenheight/1.9) < height2 ) { moveBlobs ("105vh", "55vw", 1)}
            else if (stage == 0 && pos+(screenheight/1.5) >= height1){ moveBlobs ("105vh", "55vw", 1)}
            else if ((stage == 1 && pos < height1-(screenheight/2))) { 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,
            'right': r,
            'animation': '',});
        $("#green").css ({ 'animation': 'appear 0.4s -0.075s ease-in' })
        $("#blue").css ({ 'animation': 'appear 0.4s 0s ease-in' })
        $("#red").css ({ 'animation': 'appear 0.4s 0.15s ease-in' })
        stage = to;
    }, (dur*1000)-10)

    setTimeout (function () {
        $("#green").css ({ 'animation': '' })
        $("#blue").css ({ 'animation': '' })
        $("#red").css ({ 'animation': '' })
        stage = to;
    }, (dur*2000)-1)
} 

function changeFile (){
    $("#filelabel").css ({
        'font-family': 'League Spartan',
        'font-size': '2.5vw'
    })
    $("#upload").css ({
        'color': 'inherit',
        'cursor': 'pointer'
    })
    upbtn.removeAttribute("disabled")
}

function ButtonPress () {
    upbtn.setAttribute ('disabled', 'disabled')
    document.body.style.cursor = "progress"
    $("#fileupload").css ({
        'cursor': 'not-allowed',
        'animation': 'text-in-out 1s'
    })    
    $("#formline").css ({
        'animation': 'border-out 1s'
    })
    $("#upload").css ({
        'cursor': 'not-allowed',
    })
    setTimeout (function () {
        uplabel.setAttribute('hidden', 'hidden')
        upline.setAttribute('hidden', 'hidden')
        upbtn.value = "Verarbeite..."
        $('#upload').css ({'padding-top': '3vw'})
    }, 500)
    setTimeout (function() {
        $("#fileupload").css ({
            'animation': 'border-in-out 2s infinite'
        })
    }, 1000)
    setTimeout (function () {
        textLoop (0)
    }, 200)
}

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