var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    //Makes the whole screen filled IM GONNA COMMENT EVERYTHING


    setInterval(repeat, 10)

    canvas.addEventListener("mousedown", doMouseDown, false);
    canvas.addEventListener("mouseup", doMouseUp, false);
    canvas.addEventListener('mousemove', mousemove, false);


    object = new Array(99)
    for (o = 0; o < 99; ++ o){
        object[o] = new Array(10);
    }
    for (oo = 0; oo<99; ++oo){
        for(ooo = 0; ooo<10;++ooo){
            object[oo][ooo] = 0
        }
    }

    var randomcreate = 0
    var whichfill = 0

    option = new Array(5)
    option[0] = window.innerWidth - 245
    option[1] = window.innerWidth - 55
    option[2] = window.innerWidth - 55
    option[3] = window.innerWidth - 220
    option[4] = window.innerWidth - 55
    option[5] = window.innerWidth - 220
    option[6] = window.innerWidth - 220

    var minsize = 0
    var maxsize = 0
    var redsize = 0
    var greensize = 0
    var bluesize = 0
    var windsize = 0

    var holding = -1


    function repeat(){

        minsize = Math.round(((option[0] - window.innerWidth + 245)/190) * 50)
        maxsize = Math.round(((option[1] - window.innerWidth + 245)/190) * 50)

        redsize = Math.round(25 +(((option[2] - window.innerWidth + 245)/190)* 194))
        greensize = Math.round(25 +(((option[3] - window.innerWidth + 245)/190)* 194))
        bluesize = Math.round(25 +(((option[4] - window.innerWidth + 245)/190)* 194))

        windsize = (((option[5] - window.innerWidth + 245)/190) * 1)

        randomcreate = Math.random()
        if (randomcreate < 0.01){
            while (whichfill == 0){
                for (i = 0; i < 99; ++ i){
                    if (object[i][0] == 0){
                        object[i][0] = 1
                        object[i][1] = Math.random() * window.innerWidth
                        object[i][3] = minsize + (Math.random() * (maxsize - minsize))
                        object[i][2] = 0-object[i][3]
                        object[i][4] = redsize + (25 - Math.random() * 50)
                        object[i][5] = greensize + (25 - Math.random() * 50)
                        object[i][6] = bluesize + (25 - Math.random() * 50)
                        whichfill = 1
                        i = 100
                    }
                }

            }
            whichfill = 0
        }

        for (j = 0; j<99; ++j){

            if (object[j][0] == 1){
                context.beginPath();
                context.arc(object[j][1], object[j][2], object[j][3], 0, 2 * Math.PI, false);
                context.fillStyle = 'rgb(' + Math.round(object[j][4]).toString() + ',' + Math.round(object[j][5]).toString() + ',' + Math.round(object[j][6]).toString() + ')';
                context.fill()

                object[j][1] += Math.random()-0.5 + windsize
                object[j][2] += Math.random()  + 1

                if (object[j][2] >= window.innerHeight) {
                    object[j][0] = 0
                }
            }


        }

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 50, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[0], window.innerHeight - 50, 30, 30);
        context.fillStyle = "yellow";
        context.fill();
        //minsize

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 90, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[1], window.innerHeight - 90, 30, 30);
        context.fillStyle = "yellow";
        context.fill();
        //maxsize

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 130, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[2], window.innerHeight - 130, 30, 30);
        context.fillStyle = "red";
        context.fill();
        //redsize

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 170, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[3],  window.innerHeight - 170, 30, 30);
        context.fillStyle = "green";
        context.fill();
        //greensize

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 210, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[4], window.innerHeight - 210, 30, 30);
        context.fillStyle = "blue";
        context.fill();
        //bluesize

        context.beginPath();
        context.rect(window.innerWidth - 245, window.innerHeight - 250, 220, 30);
        context.fillStyle = "#523798";
        context.fill();

        context.beginPath();
        context.rect(option[5], window.innerHeight - 250, 30, 30);
        context.fillStyle = "grey";
        context.fill();
        //windsize
    }
    window.onkeypress = function (e) {
        e = e || window.event;
        if (e.keyCode == '32') {
            repeat()
        }

    };

    function mousemove(e){
        if (holding > -1){
            option[holding] = e.pageX - 15
        }
        if (option[holding]< window.innerWidth - 245){
            option[holding] = window.innerWidth - 245
        }
        if (option[holding]> window.innerWidth - 55){
            option[holding] = window.innerWidth - 55
        }
    }
    function doMouseDown(e){
        for (k = 0; k<6; ++k){
             if (e.pageX > option[k]){
                 if (e.pageX < (option[k] + 30)){
                     if (e.pageY > (window.innerHeight - (50 + 40 * k))){
                         if (e.pageY < (30 + window.innerHeight - (50 + 40 * k))){
                            holding = k
                         }
                     }
                 }
             }
        }
    }
    function doMouseUp(e){
        holding = -1
    }
    //0 is alive or no, 1 or 0
    //1 is x position
    //2 is y position
    //3 is average radius
    //4 is red
    //5 is green
    //6 is blue