// Background only renders based on the original browser window size when
// starting to load the site. Due to rendering issues, I don't think I
// can do it other wise.

////////////////////
// Script Part #1 //
////////////////////

// If light mode detected, in reality, if nothing is detected lmao
// Dark mode feature was removed lol
// Set up base pattern
var pattern = Trianglify({
    height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
    width: window.innerWidth,
    // Christmas Colours:
    x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
    y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
    //
    // Normal Colours:
    // x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'],
    // y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'],
    //
    // Christmas Colours:
    // x_colors: ['#0F8A5F', '#f9f9f9', '#fffff4', '#fbf7f5', '#CC231E'],
    // y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'],
    //
    variance: 10, // Gives it more style
    seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
    cell_size: 160 // Cell size
});

// REMOVED bc looked ugly
// If dark mode detected
// if (matchMedia('(prefers-color-scheme: dark)').matches) {
//     var pattern = Trianglify({
//         height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
//         width: window.innerWidth,
//         x_colors: ['#040404', '#111111', '#111111', '#111111', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
//         y_colors: ['#f9f1f1', '#111111', '#111111', '#111111', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
//         variance: 10, // Gives it more style
//         seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
//         cell_size: 160 // Cell size
//     });
// }

// // Canvas
// document.body.appendChild(pattern.canvas())

// SVG
document.body.appendChild(pattern.svg());



// // PNG
// var png = document.createElement('img')
// png.src = pattern.png()
// document.body.appendChild(png)

////////////////////
// Script Part #2 //
////////////////////

$('.title-wrapper').css('width', window.innerWidth);
$('.title-wrapper').css('height', window.innerHeight);


var time = 10,
    $paths = $('body').find('svg').find('path'),
    pathCollection = $paths.get(),
    count = $paths.length;

// // Log variable "count"
// console.log(count);

pathCollection.sort(function () {
    return Math.random() * 10 > 5 ? 1 : -1;
});

function showText() {
    var title = $('h1'),
        subtitle = $('h2');

    title.removeClass('hidden');
    setTimeout(function () {
        subtitle.removeClass('hidden');
    }, 500);
}

setTimeout(function () {
    $.each(pathCollection, function (i, el) {
        var $path = $(this);
        setTimeout(function () {

            $path.css('opacity', '1');
        }, time);
        time += 10;

        if (i + 1 === count) {
            setTimeout(function () {
                showText();
            }, 2000);
        }

    });
}, 2000);