{% extends 'layouts/main.html' %}

{% block content %}
<h1>Hello World!</h1>
<h3>{{ utc_dt }}</h3>

<button id="test">
    Drück nicht!
</button>

<script>
    document.getElementById('test').addEventListener('click', function () {
        alert('Du hast mich gedrückt!');
    });
</script>

<table class="table" id="js-datatable">
    <thead>
    <tr>
        <th>Prediction</th>
        <th>Integer</th>
        <th>Percentage</th>
        <th>Currency</th>
        <th>Formatted Float</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>N/A</td>
        <td>1110</td>
        <td>200%</td>
        <td>$1000</td>
        <td>1,000.5</td>
    </tr>
    <tr>
        <td class="heatmap-stable">Yellow</td>
        <td>777</td>
        <td>1199%</td>
        <td>$101</td>
        <td>9,900</td>
    </tr>
    <tr>
        <td class="heatmap-positive">Green</td>
        <td>1000</td>
        <td>201%</td>
        <td>$201</td>
        <td>2,001.1</td>
    </tr>
    <tr>
        <td class="heatmap-negative">Red</td>
        <td>999</td>
        <td>200%</td>
        <td>$2890</td>
        <td>2,000.2</td>
    </tr>
    </tbody>
</table>

<script>
    function clean_formatted_data(str) {
        return parseFloat(str.replace(/([%,$,\,])+/g, ''));
    }

    function col_to_array(tbl_col, target) {
        // Returns column `n` (zero indexed) in table id `target` as an array

        var colArray = $('#' + target + ' td:nth-child(' + tbl_col + ')').map(function () {
            return clean_formatted_data($(this).text());
        }).get();

        return colArray;
    }

    //------ new schtuff ------------------------//

    function get_pos_of_max(col_data) {
        return $.inArray(Math.max.apply(Math, col_data), col_data)
    }

    function generate_opacities(col_data, max) {
        var opacity_array = [];
        var increment = max / (col_data.length);

        for (i = col_data.length; i >= 1; i--) {
            opacity_array.push(i * increment / 100);
        }

        return opacity_array;
    }


    function process_col_best_performing(tbl_col, target) {
        var col_data = col_to_array(tbl_col, target);
        var opacity_array = generate_opacities(col_data, 50);
        var row_count = col_data.length;

        for (var i = 1; i <= row_count; i++) {
            $('#' + target + ' tr:nth-child(' + (get_pos_of_max(col_data) + 1) + ') td:nth-child(' + tbl_col + ')').css('background', 'rgba(0,0,255,' + opacity_array[0] + ')');
            col_data[get_pos_of_max(col_data)] = null;
            opacity_array.splice(0, 1);

        }
    }

    process_col_best_performing(2, 'js-datatable');
    process_col_best_performing(3, 'js-datatable');
    process_col_best_performing(4, 'js-datatable');
    process_col_best_performing(5, 'js-datatable');
</script>


{% endblock %}