//Intro To Programing - JavaScript
//Make it Rain! Making rain with for loops, if statements, and arrays

var clouds = 24;
var clouds2 = -256;
var numberr = 5;
var xPositions = [200, 84, 280, 22, 358, 189];
var yPositions = [0, -120, -100, 61, 368, 197];
var colors = [color(200,200,1), color(199, 2, 2),  color(2, 147, 199), color(2, 199, 9), color(199, 2, 192), color(255, 213, 0)];
var rainType = [0, 1, 2, 0, 1, 2];

var mouseClicked = function() {
    xPositions.push(mouseX);
    yPositions.push(mouseY);
    colors.push(color(random(1,256), random(1,256), random(1,256)));
    rainType.push(floor(random(0,3)));
};

var city = function (xc,yc) {
    //city
    fill(48, 48, 48);
    rect(xc+15,yc+219,49,100,5);
    fill(71, 71, 71);
    rect(xc+55,yc+249,49,100,5);
    rect(xc+72,yc+268,49,100,5);
    fill(48, 48, 48);
    rect(xc+106,yc+239,35,100,43);
    rect(xc+15,yc+197,18,117,34);
};

var drawWindows = function() {
    //windows loop
    fill(255, 204, 0);// orangeish yellow
    for (var j = 23; j < 37; j++) {
        for (var i = 4; i < 9; i++) {
            ellipse(i*7, j*10, 5, 6);
        }
    }
    fill(255, 255, 255); // white
    for (var j = 26; j < 31; j++) {
        for (var i = 6; i < 9; i++) {
            ellipse(i*12, j*10, 5, 6);
        }
    }
    fill(226, 255, 8); // yellow
    for (var j = 21; j < 31; j++) {
        for (var i = 7; i < 9; i++) {
            ellipse(i*19, j*10, 4, 6);
        }
    }
    fill(255, 255, 255); //white oval
    for (var j = 23; j < 35; j++) {
        for (var i = 8; i < 9; i++) {
            ellipse(i*23, j*11, 36, -1);
        }
    }
    fill(255, 255, 255); //white oval
    for (var j = 23; j < 35; j++) {
        for (var i = 8; i < 9; i++) {
            ellipse(i*33, j*9, 25, -1);
        }
    }
    fill(255, 183, 0); // orange
    for (var j = 23; j < 37; j++) {
        for (var i = 22; i < 26; i++) {
            ellipse(i*13, j*10, 4, 6);
        }
    }

};

var drawForeGround = function() {
    //pond/ground
    fill(28, 112, 0);       //fore ground
    ellipse(28,343,214,100);
    ellipse(182,343,214,100);
    ellipse(325,315,214,100);

    fill(59, 161, 0);
    ellipse(134,372,467,100);
    ellipse(300,399,342,201);

    fill(0, 255, 234);  // water/pond
    ellipse(308,347,98,42);
    ellipse(242,351,112,42);
    ellipse(277,370,114,62);

};

draw = function() {
    background(0, 25, 36);

    //cloud animations
    fill(163, 163, 163);
    ellipse(clouds+111,123,86,47);
    ellipse(clouds+83,129,76,32);
    ellipse(clouds+161,130,103,34);

    fill(163, 163, 163);
    ellipse(clouds2+111,123+60,86,31);
    ellipse(clouds2+83,129+60,76,13);
    ellipse(clouds2+145,130+60,46,19);

    clouds ++;
    clouds2 ++;

    if (clouds === 400) {
        clouds = -230;
    }

    if (clouds2 === 400) {
        clouds2 = -256;
    }

    //placements
    city(1,1);
    city(105,-14);
    city(225,-26);
    drawWindows();
    drawForeGround();

    for (var i = 0; i < xPositions.length; i++) {
        noStroke();
        fill(colors[i]);

        if (rainType[i] === 0) {
            ellipse(xPositions[i], yPositions[i], 4, 31);
        } else if (rainType[i] === 1) {
            image(getImage("cute/Star"), xPositions[i], yPositions[i], 15, 23);
        } else if (rainType[i] === 2) {
            rect(xPositions[i],yPositions[i],1,40);
        }
        yPositions[i] += numberr;

        if (yPositions[i] > 400) {
            yPositions[i] = 0;
            xPositions[i] = random(0,400);
        }
    }

    //cloud (main)
    fill(161, 161, 161);
    ellipse(41,3,220,100);
    ellipse(161,21,247,100);
    ellipse(342,1,234,100);
};