Staff page with image

{% set avaliablePositions = [] %}

{% block content %}
<div id="content">
        <div class="container">
            <div class="row">
                <div class="panel-default panel-6">
                    <div class="panel-body">
                        <!-- Set all positions for Staffs. -->
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: 'action=sit&direction=4&head_direction=4&gesture=sml', left: '406px',  top: '89px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: 'action=sit&direction=4&head_direction=4&gesture=sml', left: '565px',  top: '162px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: 'action=sit', left: '114px',  top: '231px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: '', left: '374px',  top: '289px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: 'action=sit', left: '189px',  top: '189px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: 'action=sit', left: '245px',  top: '166px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: '', left: '467px',  top: '243px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: '', left: '274px',  top: '276px' }]) %}
                        {% set avaliablePositions = avaliablePositions|merge([{ avatarConfig: '', left: '180px',  top: '323px' }]) %}

                        <!-- Room background image. -->
                        <div style="background: url({{ url.skin }}/assets/images/pages/staffs.png); width: 706px; height: 468px ">

                            <!-- 'About' is set to hidden when the page loads, but when a Staff is clicked, 'About' is set to visible. See more at openAbout function.  -->
                            <div id="openAbout" style="visibility: hidden; background: #fff; position: absolute; border: 1px solid #e7e7e7; padding: 5px; width: 280px; box-shadow: 1px 1px 2px #e5e5e5">
                                <p id="aboutFigure" style="margin: 0; font-size: 14px">
                                </p>
                                <p id="aboutUsername" style="margin: 0; font-size: 14px"></p>
                                <p id="aboutOnline" style="margin: 0; font-size: 14px"></p>
                                <br>
                                <p id="aboutMotto" style="margin: 0; font-size: 14px"></p>
                            </div>

                        <!-- Getting all ranks avaliables -->
                        {% for rank in ranks %}

                            <!-- Setting the current loop index for ranks -->
                            {% set rankLoop = loop.index0 %}

                            <!-- Getting all users in current rank -->
                            {% for staff in rank.users %}

                            <!-- Setting the current loop index for staffs -->
                            {% set staffLoop = loop.index0 %}
                                <div class="avatar-image" onclick="openAbout('{{ staff.username }}', '{{ staff.online }}', '{{ staff.look }}', '{{ staff.motto }}')" style='cursor: pointer;background:url({{ setting.avatar_image_url }}?figure={{ staff.look }}&size=b&{{ avaliablePositions[rankLoop+staffLoop].avatarConfig }}) center 3px no-repeat; margin-left:{{ avaliablePositions[rankLoop+staffLoop].left }}; margin-top: {{ avaliablePositions[rankLoop+staffLoop].top }}; position: absolute'></div>
                            {% endfor %}
                        {% endfor %}
                    </div>
                    </div>
                </div>

                <script>
                    //openAbout function is where the 'magic' happens
                    function openAbout(name, online, look, motto)
                    {
                        //Check if the clicked staff is online, then set the image for the status
                        var onlineImg = "habbo_offline_big.gif";
                        if(online == '1')
                            onlineImg = "habbo_online_anim_big.gif";

                        document.getElementById("openAbout").style.visibility = "visible"; //Set the div openAbout visible
                        document.getElementById("aboutUsername").innerHTML = "<b>Username: </b>" + name; //Set the current name
                        document.getElementById("aboutOnline").innerHTML = "<img src='{{ url.skin }}/assets/images/" + onlineImg + "'>"; //Set the current status
                        document.getElementById("aboutMotto").innerHTML = "<b>Motto: </b>" + motto; //Set the current motto
                        document.getElementById("aboutFigure").innerHTML = "<div style='width: 64px; height: 120px; cursor: pointer;background:url({{ setting.avatar_image_url }}?figure="+ look +"&size=b&&direction=4&head_direction=4) center 3px no-repeat; float: right;'></div>";//Set the current look

                    }
                </script>
            <div class="clear"></div>
        </div>
    </div>
{% endblock %}