{% load static basefilters horillafilters employee_filter i18n %} {% load tz %} {% now "Y-m-d" as current_date %}
{% load accessibility_filters %}
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<div id="mainNav"></div>
<!-- End of Navigation -->
<style>
    .oh-card-dashboard--moveable {
        padding: 0 10px 20px 10px;
    }

    .oh-card-dashboard:not(.tile) {
        cursor: default;
        min-height: 425px;
    }

    .oh-dashboard__movable-cards {
        padding-right: 0;
    }

    .oh-card-dashboard--moveable {
        padding-right: 0;
        padding-bottom: 10px;
    }

    .progress {
        height: 20px;
        width: 110px;
        background-color: lightgrey;
        border: 2px solid #27C20C;
        border-radius: 5px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background-color: #27C20C;
        /* Set your desired progress bar color */
    }

    .progress-text {
        width: 100%;
        text-align: center;
    }

    .oh-modal_close--custom {
        border: none;
        background: none;
        font-size: 1.5rem;
        opacity: 0.7;
        position: absolute;
        top: 25px;
        right: 15px;
    }

    .container-heading {
        font-size: 18px;
        font-weight: bold;
        padding: 10px;
    }

    .oh-kanban-card__title {
        display: block;
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid hsl(8deg 77% 56% / 40%);
        border-radius: 18px;
        margin-right: 10px;
        background-color: hsl(24.23deg 100% 58.24% / 52.94%);
    }

    .announcement_title {
        margin-bottom: 10px;
        padding: 8px;
        margin-right: 10px;
        text-decoration: none;
    }

    .page-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the modal */
        width: 80%; /* Adjust the width of the modal */
        height: 80%; /* Adjust the height of the modal */
        overflow: hidden;
        z-index: 1001;
        background: transparent; /* Ensure background is transparent */
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .blurred-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        filter: blur(5px);
        opacity: 2; /* Adjust opacity level */
        z-index: 1000; /* Ensure it's behind the canvas */
    }

    #c {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; /* Make sure the canvas fills the modal */
        height: 100%;
        z-index: 1000; /* Ensure it's above the blurred background */
        pointer-events: none; /* Ensure clicks pass through to underlying content */
    }

</style>

    <div class="oh-wrapper">

        <!-- back button -->
        <div class="d-none mt-5" id="back_button" style="width: 10%">
            <a href="{% url 'home-page' %}" class="oh-btn oh-btn--secondary oh-btn--shadow ms-3">
                <ion-icon class="me-2 md hydrated" name="arrow-back-outline" role="img"
                    aria-label="arrow-back-outline"></ion-icon>{% trans "Back" %}</a>
        </div>
        <!-- end of back button -->
        <div class="oh-dashboard row" id="dashboard" style="padding-bottom: 3.5rem;">

            {% if is_birthday %}
                <div class="page-wrapper">
                    <div class="blurred-background"></div>
                    <canvas id="c"></canvas>
                </div>
            {% endif %}

            <div class="oh-dashboard__left col-12 col-sm-12 col-md-12 col-lg-9">
                <div class="oh-dashboard__cards row">
                    {% if perms.employee.view_employee %}
                    {% if "recruitment"|app_installed %}
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard--success tile">
                            <a href="{% url 'candidate-view' %}?joining_date={{current_date}}"
                                style="text-decoration: none">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "New Joining Today" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" hx-get="{% url 'joining-today-count' %}" hx-trigger="load">
                                            <div style="height: 67px;"></div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <div class="oh-card-dashboard oh-card-dashboard oh-card-dashboard--warning tile">
                            <a href="{% url 'candidate-view' %}?scheduled_from={{first_day_of_week}}&scheduled_till={{last_day_of_week}}"
                                style="text-decoration: none">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "New Joining This Week" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" hx-get="{% url 'joining-week-count' %}" hx-trigger="load">
                                            <div style="height: 67px;"></div>
                                        </span>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    <div class="col-12 col-sm-12 col-md-6 col-lg-4">
                        <a href="{% url 'employee-view' %}" style="text-decoration: none">
                            <div class="oh-card-dashboard oh-card-dashboard--neutral tile">
                                <div class="oh-card-dashboard__header">
                                    <span class="oh-card-dashboard__title">{% trans "Total Strength" %}</span>
                                </div>
                                <div class="oh-card-dashboard__body">
                                    <div class="oh-card-dashboard__counts">
                                        <span class="oh-card-dashboard__count" hx-get="{% url 'total-employees-count' %}" hx-trigger="load">
                                            <div style="height: 67px;"></div>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endif %}
                    <div class="oh-dashboard__movable-cards row mt-4" id="tileContainer">
                        {% include "dashboard_tile_container.html" %}
                    </div>
                </div>
            </div>
            <div class="oh-dashboard__right col-12 col-sm-12 col-md-12 col-lg-3">
                <div class="oh-dashboard__events" hx-get="{% url 'get-birthday' %}" hx-trigger="load"> </div>
                <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
                    <div style="display: flex;align-items:center;justify-content:space-between;margin-right:20px">
                        <span class="oh-card-dashboard__title">{% trans "Announcements" %}</span>
                        {% if perms.base.add_announcement %}
                        <span>
                            <button id="addAnnouncement" style="display: inline-block;padding: 0px;
                        border-radius: 6px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 50px;
                        height: 28px;" class="oh-btn oh-btn--secondary-outline float-end ms-3"
                                hx-get="{% url 'create-announcement' %}" hx-target="#objectCreateModalTarget"
                                hx-swap="innerHTML" data-toggle="oh-modal-toggle" data-target="#objectCreateModal"
                                title="{% trans 'Create Announcement' %}">
                                <ion-icon name="add-outline" class="m-0"></ion-icon>
                            </button>
                        </span>
                        {% endif %}
                    </div>

                    <hr>

                    <div class="oh-card-dashboard__body" hx-get="{% url 'announcement-list' %}" hx-trigger="load" id="announcementListCard">
                        <div class="animated-background"></div>
                    </div>
                </div>
                {% if "leave"|app_installed %}
                    {% if perms.leave.view_leaverequest or request.user|is_reportingmanager %}
                        <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent mb-3">
                            <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                                <span class="oh-card-dashboard__title">{% trans "On Leave" %}</span>
                            </div>
                            <div class="oh-card-dashboard__body" hx-get="{% url 'employee-leave' %}" hx-trigger="load" style="height:300px; overflow: auto;">
                                <div class="animated-background"></div>
                            </div>
                        </div>
                    {% endif %}
                {% endif %}
                {% if perms.employee.view_employeeworkinformation or request.user|is_reportingmanager %}
                    <div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
                        <div class="oh-card-dashboard__header oh-card-dashboard__header--divider">
                            <span class="oh-card-dashboard__title">{% trans "Employee Work Information" %}</span>
                        </div>
                        <!-- Search bar -->
                        <div class="oh-search-bar mb-3">
                            <input type="text" hx-get="{% url 'emp-workinfo-complete' %}" hx-target="#pending"
                                hx-trigger="keyup  changed dealy:0.3s" id="employeeSearch" name="search"
                                placeholder="Search Employee">
                        </div>
                        <div class="oh-card-dashboard__body" hx-get="{% url 'emp-workinfo-complete' %}" hx-trigger="load">
                            <div class="animated-background"></div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <span class="oh-modal__dialog-title" id="sendMailModalLabel">
                    <h5>{% trans 'Send Mail' %}</h5>
                </span>
                <button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
            </div>
            <div class="oh-modal__dialog-body" id="mail-content"></div>
        </div>
    </div>

    <div class="oh-modal" id="bigModal" role="dialog" aria-labelledby="bigModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <h2 class="oh-modal__dialog-title" id="">
                    {% trans "Details" %}
                </h2>
                <button class="oh-modal__close" aria-label="Close">
                    <ion-icon name="close-outline"></ion-icon>
                </button>
            </div>
            <div class="oh-modal__dialog-body oh-modal__dialog-relative" id="bigModalTarget"></div>
        </div>
    </div>


    <div class="oh-modal" id="editModal" role="dialog" aria-labelledby="editModal" aria-hidden="true">
        <div class="oh-modal__dialog">
            <div class="oh-modal__dialog-header">
                <h2 class="oh-modal__dialog-title" id="editModalLabel">
                    {% trans "Add Asset Report" %}
                </h2>
                <button type="button" class="oh-modal_close--custom"
                    onclick="$('#editModal').removeClass('oh-modal--show');">
                    <ion-icon name="close-outline" role="img" aria-label="close outline"></ion-icon>
                </button>
            </div>
            <div class="oh-modal__dialog-body" id="editModalForm"></div>
        </div>
    </div>

    {% include "announcement_single_view.html" %}


</main>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="{% static 'dashboard/getBirthday.js' %}"></script>
<script src="{% static 'dashboard/employeeChart.js' %}"></script>

{% if "leave"|app_installed %}
<script src="{% static 'dashboard/onLeave.js' %}"></script>
{% endif %}

{% if "leave"|app_installed %}
    <script src="{% static 'dashboard/leaveChart.js' %}"></script>
{% endif %}

{% if "recruitment"|app_installed %}
    {% if perms.recruitment.view_recruitment or request.user|is_stagemanager %}
        <script src="{% static 'dashboard/recruitmentChart.js' %}"></script>
    {% endif %}
{% endif %}

{% if "attendance"|app_installed %}
    {% if perms.attendance.view_attendance or request.user|is_reportingmanager %}
        <script src="{% static 'dashboard/attendanceChart.js' %}"></script>
    {% endif %}
{% endif %}

{% if "onboarding"|app_installed %}
    <!-- onboarding dashboard -->
    <script src="{% static 'dashboard/onboardChart.js' %}"></script>
{% endif %}

{% if "pms"|app_installed %}
    <!-- PMS chart -->
    <script src="{% static 'src/dashboard/pmsChart.js' %}"></script>
{% endif %}

<!-- leave dashboard -->
<script>

    // Function to remove the div after 20 seconds
    function removeBirthdayDiv() {
        const pageWrapper = document.querySelector('.page-wrapper');
        if (pageWrapper) {
            pageWrapper.remove(); // Remove the div
            localStorage.setItem('birthdayShown', 'true'); // Set a flag in localStorage
        }
    }

    // Check localStorage to see if the div has already been shown
    if (!localStorage.getItem('birthdayShown')) {
        // If not shown before, display the div
        setTimeout(removeBirthdayDiv, 12000); // Remove after 12 seconds
    } else {
        // If already shown, remove it immediately (or don't add it at all)
        document.addEventListener("DOMContentLoaded", () => {
            const pageWrapper = document.querySelector('.page-wrapper');
            if (pageWrapper) {
                pageWrapper.remove(); // Remove if already shown
            }
        });
    }

    function setDifference(setA, setB) {
        if (setB.length > setA.length) {
            temp = setA
            setA = setB
            setB = temp
        }
        return [...setA.filter(element => !setB.includes(element))];
    }
    $(document).ready(function () {
        if (localStorage.getItem("tileOrder")) {
            var tileOrder = []
            $.each(
                $(".oh-card-dashboard--moveable"),
                function (indexInArray, valueOfElement) {
                    tileOrder.push($(valueOfElement).attr("id"));
                }
            );
            var storedIds = JSON.parse(localStorage.getItem("tileOrder"))
            var existingElements = $(".oh-card-dashboard--moveable[id]")
            var existingElementsIds = [];
            $.each(existingElements, function (indexInArray, valueOfElement) {
                existingElementsIds.push($(this).attr("id"))
            });
            var newOrderIds = [...storedIds, ...setDifference(storedIds, existingElementsIds)]
            if (storedIds.length != existingElementsIds.length) {
                localStorage.setItem("tileOrder", JSON.stringify(newOrderIds))
            }

        } else {
            localStorage.setItem("tileOrder", JSON.stringify(
                [
                    "notInYetId", "LeaveApprove", "shiftRequestApprove", "WorkTypeRequestApprove", "AttendanceValidate", "OTApprove",
                    "LeaveAllocationApprove", "feedbackAnswer", "assetRequestApprove", "movable8", "pendingHours", "notoutYetId",
                    "movable2", "movable3", "movable4", "movable1", "movable5", "movable6", "movable7", "movable9", "movable10", "movable11"
                ]
            ))
        }
        // localStorage.setItem("tileOrder", JSON.stringify(tileOrder));

        function orderDashboardTile() {
            var orderIds = JSON.parse(localStorage.getItem("tileOrder"));
            const parentContainer = $("#tileContainer");
            if (orderIds != null) {
                const sortedElements = [];

                // Loop through the desired order of IDs
                for (const id of orderIds) {
                    const element = $("#" + id);
                    if (element.length) {
                        sortedElements.push(element);
                    }
                }

                // Clear the parent container
                if (sortedElements.length) {
                    parentContainer.empty();
                }
                // Append the sorted elements to the parent container
                for (const element of sortedElements) {
                    parentContainer.append(element);
                }
            }
        }
        orderDashboardTile();
        $(".oh-card-dashboard--moveable").mouseup(function () {
            var tileOrder = [];
            setTimeout((e) => {
                $.each(
                    $(".oh-card-dashboard--moveable"),
                    function (indexInArray, valueOfElement) {
                        tileOrder.push($(valueOfElement).attr("id"));
                    }
                );
                localStorage.setItem("tileOrder", JSON.stringify(tileOrder));
            }, 10);
        });
    });

    function closeNew(anchorElement) {
        $(anchorElement).parent().find('#newTab').hide();
    }

    var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

    hw = w / 2, // half-width
    hh = h / 2,

    opts = {
        strings: ['HAPPY', 'BIRTHDAY!',"{{request.user.employee_get|escapejs}}"],
        charSize: 60,
        charSpacing: 45,
        lineHeight: 65,
        cx: w / 2,
        cy: h / 2,
        fireworkPrevPoints: 10,
        fireworkBaseLineWidth: 5,
        fireworkAddedLineWidth: 8,
        fireworkSpawnTime: 200,
        fireworkBaseReachTime: 30,
        fireworkAddedReachTime: 30,
        fireworkCircleBaseSize: 20,
        fireworkCircleAddedSize: 10,
        fireworkCircleBaseTime: 30,
        fireworkCircleAddedTime: 30,
        fireworkCircleFadeBaseTime: 10,
        fireworkCircleFadeAddedTime: 5,
        fireworkBaseShards: 20,
        fireworkAddedShards: 5,
        fireworkShardPrevPoints: 3,
        fireworkShardBaseVel: 4,
        fireworkShardAddedVel: 2,
        fireworkShardBaseSize: 10,
        fireworkShardAddedSize: 3,
        gravity: 0.1,
        upFlow: -0.1,
        letterContemplatingWaitTime: 360,
        balloonSpawnTime: 10,
        balloonBaseInflateTime: 10,
        balloonAddedInflateTime: 10,
        balloonBaseSize: 60,
        balloonAddedSize: 20,
        balloonBaseVel: 0.4,
        balloonAddedVel: 0.4,
        balloonBaseRadian: -(Math.PI / 2 - 0.5),
        balloonAddedRadian: -1,
    },
    calc = {
        totalWidth: opts.charSpacing * Math.max(opts.strings[0].length, opts.strings[1].length)
    },

    Tau = Math.PI * 2,
    TauQuarter = Tau / 4,

    letters = [];

ctx.font = opts.charSize + 'px "Lobster"';


function Letter(char, x, y) {
    this.char = char;
    this.x = x;
    this.y = y;

    this.dx = -ctx.measureText(char).width / 2;
    this.dy = +opts.charSize / 2;

    this.fireworkDy = this.y - hh;

    var hue = x / calc.totalWidth * 360;

    this.color = 'hsl(hue,80%,50%)'.replace('hue', hue);
    this.lightAlphaColor = 'hsla(hue,80%,light%,alp)'.replace('hue', hue);
    this.lightColor = 'hsl(hue,80%,light%)'.replace('hue', hue);
    this.alphaColor = 'hsla(hue,80%,50%,alp)'.replace('hue', hue);

    {% comment %} this.color = 'hsl(8, 77%, 56%)'; // Base color
    this.lightAlphaColor = 'hsla(8, 77%, 56%, 0.5)'; // Semi-transparent
    this.lightColor = 'hsla(8, 77%, 56%, 0.8)'; // Slightly transparent
    this.alphaColor = 'hsla(8, 77%, 56%, 0.6)'; // Semi-transparent {% endcomment %}


    this.reset();
}
Letter.prototype.reset = function () {
    this.phase = 'firework';
    this.tick = 0;
    this.spawned = false;
    this.spawningTime = opts.fireworkSpawnTime * Math.random() | 0;
    this.reachTime = opts.fireworkBaseReachTime + opts.fireworkAddedReachTime * Math.random() | 0;
    this.lineWidth = opts.fireworkBaseLineWidth + opts.fireworkAddedLineWidth * Math.random();
    this.prevPoints = [[0, hh, 0]];
}
Letter.prototype.step = function () {
    if (this.phase === 'firework') {
        if (!this.spawned) {
            ++this.tick;
            if (this.tick >= this.spawningTime) {
                this.tick = 0;
                this.spawned = true;
            }
        } else {
            ++this.tick;

            var linearProportion = this.tick / this.reachTime,
                harmonicProportion = Math.sin(linearProportion * TauQuarter),

                x = linearProportion * this.x,
                y = hh + harmonicProportion * this.fireworkDy;

            if (this.prevPoints.length > opts.fireworkPrevPoints)
                this.prevPoints.shift();

            this.prevPoints.push([x, y, linearProportion * this.lineWidth]);

            var lineWidthProportion = 1 / (this.prevPoints.length - 1);

            for (var i = 1; i < this.prevPoints.length; ++i) {
                var point = this.prevPoints[i],
                    point2 = this.prevPoints[i - 1];

                ctx.strokeStyle = this.alphaColor.replace('alp', i / this.prevPoints.length);
                ctx.lineWidth = point[2] * lineWidthProportion * i;
                ctx.beginPath();
                ctx.moveTo(point[0], point[1]);
                ctx.lineTo(point2[0], point2[1]);
                ctx.stroke();
            }

            if (this.tick >= this.reachTime) {
                this.phase = 'contemplate';

                this.circleFinalSize = opts.fireworkCircleBaseSize + opts.fireworkCircleAddedSize * Math.random();
                this.circleCompleteTime = opts.fireworkCircleBaseTime + opts.fireworkCircleAddedTime * Math.random() | 0;
                this.circleCreating = true;
                this.circleFading = false;

                this.circleFadeTime = opts.fireworkCircleFadeBaseTime + opts.fireworkCircleFadeAddedTime * Math.random() | 0;
                this.tick = 0;
                this.tick2 = 0;

                this.shards = [];

                var shardCount = opts.fireworkBaseShards + opts.fireworkAddedShards * Math.random() | 0,
                    angle = Tau / shardCount,
                    cos = Math.cos(angle),
                    sin = Math.sin(angle),

                    x = 1,
                    y = 0;

                for (var i = 0; i < shardCount; ++i) {
                    var x1 = x;
                    x = x * cos - y * sin;
                    y = y * cos + x1 * sin;

                    this.shards.push(new Shard(this.x, this.y, x, y, this.alphaColor));
                }
            }
        }
    } else if (this.phase === 'contemplate') {
        ++this.tick;

        if (this.circleCreating) {
            ++this.tick2;
            var proportion = this.tick2 / this.circleCompleteTime,
                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;

            ctx.beginPath();
            ctx.fillStyle = this.lightAlphaColor.replace('light', 50 + 50 * proportion).replace('alp', proportion);
            ctx.arc(this.x, this.y, harmonic * this.circleFinalSize, 0, Tau);
            ctx.fill();

            if (this.tick2 > this.circleCompleteTime) {
                this.tick2 = 0;
                this.circleCreating = false;
                this.circleFading = true;
            }
        } else if (this.circleFading) {
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            ++this.tick2;
            var proportion = this.tick2 / this.circleFadeTime,
                harmonic = -Math.cos(proportion * Math.PI) / 2 + 0.5;

            ctx.beginPath();
            ctx.fillStyle = this.lightAlphaColor.replace('light', 100).replace('alp', 1 - harmonic);
            ctx.arc(this.x, this.y, this.circleFinalSize, 0, Tau);
            ctx.fill();

            if (this.tick2 >= this.circleFadeTime)
                this.circleFading = false;

        } else {
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);
        }

        for (var i = 0; i < this.shards.length; ++i) {
            this.shards[i].step();

            if (!this.shards[i].alive) {
                this.shards.splice(i, 1);
                --i;
            }
        }

        if (this.tick > opts.letterContemplatingWaitTime) {
            this.phase = 'balloon';

            this.tick = 0;
            this.spawning = true;
            this.spawnTime = opts.balloonSpawnTime * Math.random() | 0;
            this.inflating = false;
            this.inflateTime = opts.balloonBaseInflateTime + opts.balloonAddedInflateTime * Math.random() | 0;
            this.size = opts.balloonBaseSize + opts.balloonAddedSize * Math.random() | 0;

            var rad = opts.balloonBaseRadian + opts.balloonAddedRadian * Math.random(),
                vel = opts.balloonBaseVel + opts.balloonAddedVel * Math.random();

            this.vx = Math.cos(rad) * vel;
            this.vy = Math.sin(rad) * vel;
        }
    } else if (this.phase === 'balloon') {
        ctx.strokeStyle = this.lightColor.replace('light', 80);

        if (this.spawning) {
            ++this.tick;
            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            if (this.tick >= this.spawnTime) {
                this.tick = 0;
                this.spawning = false;
                this.inflating = true;
            }
        } else if (this.inflating) {
            ++this.tick;

            var proportion = this.tick / this.inflateTime,
                x = this.cx = this.x,
                y = this.cy = this.y - this.size * proportion;

            ctx.fillStyle = this.alphaColor.replace('alp', proportion);
            ctx.beginPath();
            generateBalloonPath(x, y, this.size * proportion);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x, this.y);
            ctx.stroke();

            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.x + this.dx, this.y + this.dy);

            if (this.tick >= this.inflateTime) {
                this.tick = 0;
                this.inflating = false;
            }
        } else {
            this.cx += this.vx;
            this.cy += this.vy += opts.upFlow;

            ctx.fillStyle = this.color;
            ctx.beginPath();
            generateBalloonPath(this.cx, this.cy, this.size);
            ctx.fill();

            ctx.beginPath();
            ctx.moveTo(this.cx, this.cy);
            ctx.lineTo(this.cx, this.cy + this.size);
            ctx.stroke();

            ctx.fillStyle = this.lightColor.replace('light', 70);
            ctx.fillText(this.char, this.cx + this.dx, this.cy + this.dy + this.size);

            if (this.cy + this.size < -hh || this.cx < -hw || this.cy > hw)
                this.phase = 'done';
        }
    }
}
function Shard(x, y, vx, vy, color) {
    var vel = opts.fireworkShardBaseVel + opts.fireworkShardAddedVel * Math.random();

    this.vx = vx * vel;
    this.vy = vy * vel;

    this.x = x;
    this.y = y;

    this.prevPoints = [[x, y]];
    this.color = color;

    this.alive = true;

    this.size = opts.fireworkShardBaseSize + opts.fireworkShardAddedSize * Math.random();
}
Shard.prototype.step = function () {
    this.x += this.vx;
    this.y += this.vy += opts.gravity;

    if (this.prevPoints.length > opts.fireworkShardPrevPoints)
        this.prevPoints.shift();

    this.prevPoints.push([this.x, this.y]);

    var lineWidthProportion = this.size / this.prevPoints.length;

    for (var k = 0; k < this.prevPoints.length - 1; ++k) {
        var point = this.prevPoints[k],
            point2 = this.prevPoints[k + 1];

        ctx.strokeStyle = this.color.replace('alp', k / this.prevPoints.length);
        ctx.lineWidth = k * lineWidthProportion;
        ctx.beginPath();
        ctx.moveTo(point[0], point[1]);
        ctx.lineTo(point2[0], point2[1]);
        ctx.stroke();
    }

    if (this.prevPoints[0][1] > hh)
        this.alive = false;
}
function generateBalloonPath(x, y, size) {
    ctx.moveTo(x, y);
    ctx.bezierCurveTo(x - size / 2, y - size / 2,
        x - size / 4, y - size,
        x, y - size);
    ctx.bezierCurveTo(x + size / 4, y - size,
        x + size / 2, y - size / 2,
        x, y);
}

function anim() {
    window.requestAnimationFrame(anim);

    // Clear the canvas for the next frame
    ctx.clearRect(0, 0, w, h);

    ctx.translate(hw, hh);

    var done = true;
    for (var l = 0; l < letters.length; ++l) {
        letters[l].step();
        if (letters[l].phase !== 'done') done = false;
    }

    ctx.translate(-hw, -hh);

    if (done)
        for (var l = 0; l < letters.length; ++l)
            letters[l].reset();
}

for (var i = 0; i < opts.strings.length; ++i) {
    for (var j = 0; j < opts.strings[i].length; ++j) {
        letters.push(new Letter(opts.strings[i][j],
            j * opts.charSpacing + opts.charSpacing / 2 - opts.strings[i].length * opts.charSize / 2,
            i * opts.lineHeight + opts.lineHeight / 2 - opts.strings.length * opts.lineHeight / 2));
    }
}

anim();

window.addEventListener('resize', function () {
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;

    hw = w / 2;
    hh = h / 2;

    ctx.font = opts.charSize + 'px Verdana';
})

</script>
<script src="{% static 'build/js/dashboardDriver.js' %}"></script>

{% if not request.user.driverviewed_set.first or "dashboard" not in request.user.driverviewed_set.first.user_viewed %}
<script>
    runDriver()
</script>
{% endif %}