var colors = {
    red: '#ff0000',
    skyblue: '#99d9ea',
    deepblue: '#6ecaf6',
    darkbrown: '#7a4315',
    brown: '#905721',
    forestgreen: '#257a15',
    green: '#1db500',
    lime: '#00ff00',
    black: '#000000',
    white: '#ffffff',
    gray: '#808080',
    crimson: '#cb0000',
    lightgray: '#959595',
}

var settings = {
    canvas: {
        height: 200,
        width: 400,
    },
    windows: {
        color: colors.skyblue
    },
    bricks: {
        height: 13,
        width: 20,
    },
    grass: {
        minHeight: 5,
        maxHeight: 11,
        angle: 30,
        density: 2
    }
}

var canvas = document.createElement('canvas');
canvas.setAttribute('height', settings.canvas.height);
canvas.setAttribute('width', settings.canvas.width);
canvas.style.padding = '300px';
document.body.appendChild(canvas);

function rand(min, max) { // Generate random int between min and max
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function rad(deg) {
    return (deg / 180) * Math.PI
}

function deg(rad) {
    return rad / Math.PI * 180
}

function transformY(y, height) {
    return (settings.canvas.height - y) - (height || 0)
}

function fill(x, y, width, height, color) {
    y = transformY(y, height)
    var c2d = canvas.getContext("2d");
    c2d.fillStyle = color || colors.black;
    c2d.beginPath();
    c2d.fillRect(x, y, width, height);
}

function rect(x, y, width, height, color) {
    y = transformY(y, height)
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.strokeStyle = color || colors.black;
    c2d.rect(x, y, width, height);
    c2d.stroke();
}

function strokePath(color, lines) {
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.strokeStyle = color || colors.black;
    c2d.moveTo(lines[0][0], transformY(lines[0][1]));
    for (var i in lines) {
        if (i == 0) continue;
        c2d.lineTo(lines[i][0], transformY(lines[i][1]));
    }
    c2d.stroke();
}

function fillPath(color, lines) {
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.fillStyle = color || colors.black;
    c2d.moveTo(lines[0][0], transformY(lines[0][1]));
    for (var i in lines) {
        if (i == 0) continue;
        c2d.lineTo(lines[i][0], transformY(lines[i][1]));
    }
    c2d.fill();
}

function fillCircle(x, y, r, color) {
    y = transformY(y)
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.fillStyle = color || colors.black;
    c2d.arc(x, y, r, 0, rad(360));
    c2d.fill();
}

function strokeCircle(x, y, r, color) {
    y = transformY(y)
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.fillStyle = color || colors.black;
    c2d.arc(x, y, r, 0, rad(360));
    c2d.stroke();
}

function grass(x, y, length, angle) {
    y = transformY(y)
    var c2d = canvas.getContext("2d");
    c2d.beginPath();
    c2d.strokeStyle = colors.forestgreen;
    c2d.moveTo(x, y);
    c2d.lineTo(x - Math.sin(angle) * length, y - Math.cos(angle) * length);
    c2d.stroke();
}

fill(0, 0, 400, 200, colors.deepblue); // Background

rect(50, 5, 300, 100); // Body

fill(40, 2, 320, 3, colors.gray); // Foundation
rect(0, 0, 400, 2, colors.green); // Grass

// Bricks
for (var y = 5; y < 160; y += settings.bricks.height) {
    var offset = (((y - 5) / settings.bricks.height) % 2) // Will be 1 for odds and 0 for evens
                    * (settings.bricks.width / 2); // Offset every other row

    var newHeight = Math.min(settings.bricks.height, Math.max(160 - y, 0));

    for (var x = 50 - offset; x < 350; x += settings.bricks.width) {
        var brickColor = '#' + Number(rand(60, 120)).toString(16) + '0000'; // Random darkish red
        var startX = Math.max(x, 50); // Take care of the overhang on left
        var newWidth = startX != x ? settings.bricks.width / 2 : startX + settings.bricks.width > 350 ? startX + settings.bricks.width - 350 : settings.bricks.width; // take care of the differently sized bricks

        fill(startX, y, newWidth, newHeight, brickColor); // Brick Fill
        rect(startX, y, newWidth, newHeight); // Brick Outline
    }
}

/* START ROOF TOP */
    var distance = ((50 - 200) ^ 2 + (100 - 160) ^ 2) ^ (1 / 2);
    var theta = Math.atan(-150 / -60) + Math.PI * 1.5;

    var points = [
        [200, 160],
        [(distance + 5) * Math.cos(theta) + 200, (distance + 5) * Math.sin(theta) + 160],
    ];

    points.push([10 * Math.cos(rad(68)) + points[1][0], 10 * Math.sin(rad(68)) + points[1][1]]);
    points.push([10 * Math.cos(rad(90)) + points[0][0], 10 * Math.sin(rad(90)) + points[0][1]]);
    points.push([50 - (points[2][0] - 350), points[2][1]]);
    points.push([50 - (points[1][0] - 350), points[1][1]]);

    var mask = [
        points[2],
        [settings.canvas.width, points[2][1]],
        [settings.canvas.width, settings.canvas.height],
        [0, settings.canvas.height],
        [0, points[4][1]],
        points[4],
        points[3],
        [(distance - 60) * Math.cos(theta) + points[3][0], (distance - 60) * Math.sin(theta) + points[3][1]]
    ];

    // CHIMNEY so much math
    mask.push([mask[7][0], mask[7][1] + 20]);
    mask.push([mask[8][0] - 5, mask[8][1]]);
    mask.push([mask[9][0], mask[9][1] + 5]);
    mask.push([mask[10][0] + 30, mask[10][1]]);
    mask.push([mask[11][0], mask[11][1] - 5]);
    mask.push([mask[12][0] - 5, mask[12][1]]);

    var maskDistance = (20 / Math.cos(rad(90) - (theta - rad(270))));

    mask.push([(distance - 60 + maskDistance) * Math.cos(theta) + points[3][0], (distance - 60 + maskDistance) * Math.sin(theta) + points[3][1]]);

    // Roof mask
    fillPath(colors.deepblue, mask);

    // Outline chimney (1)
    strokePath(colors.black, [
        mask[7], mask[8], mask[13], mask[14], mask[7]
    ]);

    // Outline chimney (2)
    strokePath(colors.black, [
        mask[9], mask[10], mask[11], mask[12], mask[9]
    ]);

    // Smoke
    fillCircle(320-2, 160-3, 2, colors.lightgray);
    fillCircle(320, 160, 4, colors.lightgray);
    fillCircle(320+4, 160+5, 7, colors.lightgray);
    fillCircle(320+1, 160+13, 9, colors.lightgray);
    fillCircle(320-3, 160+24, 15, colors.lightgray);

    fillPath(colors.darkbrown, points);
/* FINISH ROOF TOP */

fill(182, 5, 36, 50, colors.darkbrown); // Door
rect(182, 5, 36, 50, colors.brown); // Door Outline

// Windows
for (var _o = 0; _o < 2; _o++) {
    var offset = _o - 1 + _o % 2; // Loop will go -1, 1 instead of 0, 1
    var position = 200 - offset * 90 - 23;

    fill(position, 20, 46, 50, settings.windows.color); // Fill

    fill(position, 23, 6, 47, colors.crimson); // Right curtain
    fill(position + 40, 23, 6, 47, colors.crimson); // Left curtain

    fillPath(colors.crimson, [[position, 60], [position + 23, 70], [position, 70]]); // Right curtain top
    fillPath(colors.crimson, [[position + 46, 60], [position + 23, 70], [position + 46, 70]]); // Left curtain top

    fill(position - 5, 14, 56, 5, colors.gray); // Ledge under window

    for (var x = 0; x < 2; x++) {
        for (var y = 0; y < 2; y++) {
            rect(position + 23*x, 20 + 25*y, 23, 25, colors.black); // Frame
        }
    }
}

// Grass
for (var x = rand(5 / settings.grass.density, 10 / settings.grass.density); x < settings.canvas.width; x += rand(5 / settings.grass.density, 10 / settings.grass.density)) {
    grass(x, 2, rand(settings.grass.minHeight, settings.grass.maxHeight), rad(rand(-settings.grass.angle, settings.grass.angle))); // Grass blade
}

// Top Window
fillCircle(200, 115, 20, settings.windows.color);
strokeCircle(200, 115, 20, colors.black);
strokePath(colors.black, [[200, 135], [200, 95]]); // Window frame
strokePath(colors.black, [[180, 115], [220, 115]]); // Window frame