---
---
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Symbolon</title>
        <style>
            div#holder {
                overflow: auto;
                height: 320px;
            }

            div.card {
                float: left;
                margin-right: 1em;
            }

            p {
                text-align: center;
                border-bottom: 1px solid black;
            }

            img {
                border: 0 none;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <select>
                <option value="">Mind / All</option>
                <option value="aries">Kos / Aries</option>
                <option value="taurus">Bika / Taurus</option>
                <option value="gemini">Ikrek / Gemini</option>
                <option value="cancer">Rák / Cancer</option>
                <option value="leo">Oroszlán / Leo</option>
                <option value="virgo">Szűz / Virgo</option>
                <option value="libra">Mérleg / Libra</option>
                <option value="scorpio">Skorpió / Scorpio</option>
                <option value="sagittarius">Nyilas / Sagittarius</option>
                <option value="capricorn">Bak / Capricorn</option>
                <option value="aquarius">Vízöntő / Aquarius</option>
                <option value="pisces">Halak / Pisces</option>
            </select>

            <select>
                <option value="">Mind / All</option>
                <option value="aries">Kos / Aries</option>
                <option value="taurus">Bika / Taurus</option>
                <option value="gemini">Ikrek / Gemini</option>
                <option value="cancer">Rák / Cancer</option>
                <option value="leo">Oroszlán / Leo</option>
                <option value="virgo">Szűz / Virgo</option>
                <option value="libra">Mérleg / Libra</option>
                <option value="scorpio">Skorpió / Scorpio</option>
                <option value="sagittarius">Nyilas / Sagittarius</option>
                <option value="capricorn">Bak / Capricorn</option>
                <option value="aquarius">Vízöntő / Aquarius</option>
                <option value="pisces">Halak / Pisces</option>
            </select>

            <button type="button" class="btn" data-toggle="modal" data-target="#draw-one-modal" id="draw">Húzz egyet!</button>

            <hr>

            <div id="holder">
{% assign list = site.data.symbolon | sort:'number'%}
{% for s in list %}
{%     assign image = '0' | append: s.number %}
{% comment %}
Using image|slice:-2,2 would be much easier here. However, it seems the
slice filer is not working for some time now…
{% endcomment %}
{%     assign len = image | size %}
{%     if len == 3 %}
{%         assign image = '' | append: s.number %}
{%     endif %}
                <div class="card{% for sign in s.signs %} {{sign}}{% endfor %}">
                    <a id="card_{{image}}" rel="group" href="images/{{image}}.jpg">
                        <img src="images/{{image}}.jpg" alt="{{s.name}}">
                    </a>
                    <p class="cim">{{s.number}}. {{s.name}}</p>
                </div>
{% endfor %}
            </div>
        </div>

        <div class="modal fade" id="draw-one-modal" tabindex="-1" role="dialog" aria-labelledby="draw-one-title">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="draw-one-title">Draw One</h4>
                    </div>

                    <div class="modal-body" id="draw-one-body">
                        Body!
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $('select').change(function () {
                var classes = new Array();
                var single_card = false;

                $('select').each(function (i, e) {
                    sign = $(e).val();

                    if (sign != '') {
                        classes.push($(e).val());
                    }
                });

                if (classes.length == 2 && (classes[0] == classes[1])) {
                    single_card = true;
                }

                classes = classes.filter(function (e, i, arr) {
                    return arr.lastIndexOf(e) === i;
                });

                selector = '';

                $.map(classes, function (e) {
                    selector += '.' + e;
                });

                if (single_card) {
                    selector = '.' + classes[0] + '[class="card ' + classes[0] + '"]';
                }

                $('div.card').show();

                if (selector != '') {
                    $('div.card').not(selector).hide();
                }
            });

            function resize_holder() {
                var winheight = $(window).height();
                var holdertop = $('#holder').position().top;

                $('#holder').height(winheight - holdertop - 10);
            }

            $(document).ready(function () {
                resize_holder();
            });

            $(window).resize(function () {
                resize_holder();
            });

            $('#draw-one-modal').on('show.bs.modal', function(e) {
                count = $('div.card').length;

                draw_num = Math.floor(Math.random() * count) + 1;
                num_str  = (draw_num < 10) ? '0' + draw_num : draw_num;

                $('#draw-one-body').html('');
            });
        </script>
    </body>
</html>
