{% extends 'ecbc-base.html' %}
{% block content %}
    <canvas id="canvas" width=1200px height=1200px
            style="position: absolute; width: 800px;left:0; right:0;margin-left:auto;margin-right:auto; margin-top: -58px">
    </canvas>
    <a href="/login/?user_type=national">
        <div class="rounded-image-btn-national-small">
            <div class="rounded-image-btn-text">
                <h4>NATIONAL</h4>
            </div>
        </div>
    </a>
    <a href="/login/?user_type=municipal">
        <div class="rounded-image-btn-ulb-small">
            <div class="rounded-image-btn-text">
                <h4>MUNICIPALITY</h4>
            </div>
        </div>
    </a>
    <a href="/login/?user_type=building">
        <div class="rounded-image-btn-bo-small">
            <div class="rounded-image-btn-text">
                <h4>BUILDING</h4>
            </div>
        </div>
    </a>
{% endblock %}
{% block script %}
    <script src="/static/js/jparticle.jquery.js"></script>
    <script>
        let Canvas = document.getElementById("canvas");
        let ctx = Canvas.getContext("2d");
        let currentAngle = 0;
        let oldTime = getTime();
        let startAngle = (2 * Math.PI);
        let endAngle = (Math.PI * 1.75);

        function getTime() {
            return (new Date()).getTime();
        }

        let raf = window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame;

        function Update() {
            let newTime = getTime(),
                diff = newTime - oldTime;
            oldTime = newTime;
            //Clears
            ctx.clearRect(0, 0, Canvas.width, Canvas.height);
            render_circle(40, 20, "#225022", 0.0005, 15, diff);
            render_circle(80, 20, "#346934", 0.00025, 30, diff);
            render_circle(120, 20, "#428242", 0.0002, 45, diff);
            render_circle(160, 20, "#499b49", 0.00015, 60, diff);
            render_circle(200, 20, "#53b453", 0.0001, 75, diff);
            render_circle(240, 20, "#57cd57", 0.00005, 90, diff);
            render_circle(280, 20, "#5be65b", 0.00004, 105, diff);
            render_circle(320, 20, "#61ff61", 0.00003, 120, diff);
            raf(Update);
        }

        function render_circle(radius, width, color, rate, offset, diff) {
            //Drawing
            ctx.beginPath();
            ctx.arc(Canvas.width / 2, Canvas.height / 2, radius, startAngle + currentAngle + offset, endAngle + currentAngle + offset, false);
            ctx.strokeStyle = color;
            ctx.lineWidth = width;
            ctx.stroke();
            currentAngle += diff * rate;
            currentAngle %= 2 * Math.PI;
        }

        raf(Update);
        $(document).ready(function () {
            {% if not disable_ptr %}
                $("body").jParticle({
                    color: 'black',
                    background: 'white',
                    height: '720'
                });
            {% endif %}
        });
    </script>
{% endblock %}