<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="symbolon.css">
    </head>
    <body>
        <div id="selector">
            <select id="selector-1">
                <option value="">Mind</option>
                <option value="aries">Kos</option>
                <option value="taurus">Bika</option>
                <option value="gemini">Ikrek</option>
                <option value="cancer">Rák</option>
                <option value="leo">Oroszlán</option>
                <option value="virgo">Szűz</option>
                <option value="libra">Mérleg</option>
                <option value="scorpio">Skorpió</option>
                <option value="sagittraius">Nyilas</option>
                <option value="capricorn">Bak</option>
                <option value="aquarius">Vízöntő</option>
                <option value="pisces">Halak</option>
            </select>
            <select id="selector-2">
                <option value="">Mind</option>
                <option value="aries">Kos</option>
                <option value="taurus">Bika</option>
                <option value="gemini">Ikrek</option>
                <option value="cancer">Rák</option>
                <option value="leo">Oroszlán</option>
                <option value="virgo">Szűz</option>
                <option value="libra">Mérleg</option>
                <option value="scorpio">Skorpió</option>
                <option value="sagittraius">Nyilas</option>
                <option value="capricorn">Bak</option>
                <option value="aquarius">Vízöntő</option>
                <option value="pisces">Halak</option>
            </select>
            <button id="draw-one">Húzz egyet!</button>
            <button id="draw-three">Húzz hármat!</button>
            <hr>
        </div>
        <div id="cards"></div>
        <div id="one-card" class="lightbox">
            <div class="close-button">&times;</div>
            <div class="content">
                <h2 class="card-title"></h2>
                <div class="image">
                    <img src="" alt="">
                </div>
                <div class="description">
                    <h3>Kulcsszavak</h3>
                    <div class="keywords"></div>
                </div>
                <div class="description">
                    <h3>Jegyek és bolygók</h3>
                    <div class="planets-signs"></div>
                </div>
                <div class="description">
                    <h3>A probléma</h3>
                    <div class="problem"></div>
                </div>
                <div class="description">
                    <h3>Az út</h3>
                    <div class="road"></div>
                </div>
                <div class="description">
                    <h3>A megoldás</h3>
                    <div class="goal"></div>
                </div>
            </div>
        </div>
        <div id="three-cards" class="lightbox">
            <div class="close-button">&times;</div>
            <div id="card-1" class="drawn content">
                <h2 class="card-title"></h2>
                <div class="image">
                    <img src="" alt="">
                </div>
                <div class="description">
                    <h3>Kulcsszavak</h3>
                    <div class="keywords"></div>
                </div>
                <div class="description">
                    <h3>Jegyek és bolygók</h3>
                    <div class="planets-signs"></div>
                </div>
                <div class="description">
                    <h3>A probléma</h3>
                    <div class="problem"></div>
                </div>
            </div>
            <div id="card-2" class="drawn content">
                <h2 class="card-title"></h2>
                <div class="image">
                    <img src="" alt="">
                </div>
                <div class="description">
                    <h3>Kulcsszavak</h3>
                    <div class="keywords"></div>
                </div>
                <div class="description">
                    <h3>Jegyek és bolygók</h3>
                    <div class="planets-signs"></div>
                </div>
                <div class="description">
                    <h3>Az út</h3>
                    <div class="road"></div>
                </div>
            </div>
            <div id="card-3" class="drawn content">
                <h2 class="card-title"></h2>
                <div class="image">
                    <img src="" alt="">
                </div>
                <div class="description">
                    <h3>Kulcsszavak</h3>
                    <div class="keywords"></div>
                </div>
                <div class="description">
                    <h3>Jegyek és bolygók</h3>
                    <div class="planets-signs"></div>
                </div>
                <div class="description">
                    <h3>A megoldás</h3>
                    <div class="goal"></div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <script>
         var cards_div = document.getElementById('cards');
         var one_div = document.getElementById('one-card');
         var three_div = document.getElementById('three-cards');
         var card_count = 0;
         var cardData = [];

         function image_name(number, small) {
             var name = String('00' + number).slice(-2) + '.jpg';

             return (small ? 'small/' : 'images/') + name;
         }

         function update_card(id, cardNum, type) {
             var main_div;
             var card = cardData[cardNum];

             if (id === null) {
                 one_div.style.display = 'block';
                 three_div.style.display = 'none';
                 main_div = one_div;
             } else if ((id === 1) || (id === 2) || (id === 3)) {
                 one_div.style.display = 'none';
                 three_div.style.display = 'block';
                 main_div = document.getElementById('card-' + id);
             }

             var title_header = main_div.getElementsByClassName('card-title')[0];
             title_header.textContent = card.name;

             var image = main_div.querySelectorAll('.image > img')[0];
             image.src = image_name(card.number);

             var keywords_div = main_div.getElementsByClassName('keywords')[0];
             keywords_div.textContent = card.keywords.join(', ');

             var planets_div = main_div.getElementsByClassName('planets-signs')[0];
             planets_div.innerHTML = '';
             console.log(planets_div);

             for (var idx = 0; idx < card.signs.length; idx++) {
                 var img = document.createElement('img');
                 img.src = 'signs/' + card.signs[idx] + '.svg';
                 img.title = img.alt = card.signs[idx];
                 img.classList.add('sign');
                 planets_div.appendChild(img);
             }

             planets_div.appendChild(document.createElement('br'));

             for (var idx = 0; idx < card.planets.length; idx++) {
                 var img = document.createElement('img');
                 img.src = 'planets/' + card.planets[idx] + '.svg';
                 img.title = img.alt = card.planets[idx];
                 img.classList.add('planet');
                 planets_div.appendChild(img);
             }

             if ((type === 'all') || (type === 'problem')) {
                 var problem_div = main_div.getElementsByClassName('problem')[0];
                 problem_div.textContent = card.problem;
             }

             if ((type === 'all') || (type === 'road')) {
                 var road_div = main_div.getElementsByClassName('road')[0];
                 road_div.textContent = card.road;
             }

             if ((type === 'all') || (type === 'goal')) {
                 var goal_div = main_div.getElementsByClassName('goal')[0];
                 goal_div.textContent = card.goal;
             }
         }

         var xhr = new XMLHttpRequest();
         xhr.responseType = 'json';
         xhr.onload = function(e) {
             cardData = e.target.response.sort(function(a, b) {return a.number - b.number;});

             card_count = cardData.length;

             for (var idx = 0; idx < cardData.length; idx++) {
                 var card = cardData[idx];

                 var img = document.createElement('img');
                 img.src = image_name(card.number, true);
                 img.title = img.alt = card.name;
                 img.dataset['num'] = card.number;

                 for (var num = 0; num < card.signs.length; num++) {
                     img.classList.add(card.signs[num]);
                 }

                 if (card.signs.length == 1) {
                     img.classList.add('big-arcana');
                 }

                 cards_div.appendChild(img);
                 img.onclick = function(evt) {
                     var cardNum = evt.target.dataset['num'] - 1;
                     evt.stopPropagation();
                     update_card(null, cardNum, 'all');
                 }
             }
         }

         xhr.open('GET', 'symbolon.json');
         xhr.send();

         var lightboxes = document.getElementsByClassName('lightbox');
         for (var idx = 0; idx < lightboxes.length; idx++) {
             lightboxes[idx].onclick = function(evt) {evt.stopPropagation();};
         }

         document.onclick = function() {
             one_div.style.display = 'none';
             three_div.style.display = 'none';
         }

         var close_buttons = document.querySelectorAll('.close-button');
         for (var idx = 0; idx < close_buttons.length; idx++) {
             var close_button = close_buttons[idx];

             close_button.onclick = function() {
                 one_div.style.display = 'none';
                 three_div.style.display = 'none';
             }
         }

         var one_button = document.getElementById('draw-one');
         one_button.onclick = function(evt) {
             var number = Math.round(Math.random() * card_count);

             evt.stopPropagation();
             update_card(null, number, 'all');
         }

         var three_button = document.getElementById('draw-three');
         three_button.onclick = function(evt) {
             var numbers = [];

             evt.stopPropagation();

             while (true) {
                 if (numbers.length === 3) {
                     break;
                 }

                 var num = Math.round(Math.random() * card_count);

                 if (numbers.indexOf(num) === -1) {
                     numbers.push(num);
                 }
             }

             update_card(1, numbers[0], 'problem');
             update_card(2, numbers[1], 'road');
             update_card(3, numbers[2], 'goal');
         }

         var selects = document.querySelectorAll('select');
         for (var idx = 0; idx < selects.length; idx++) {
             var select = selects[idx];

             select.onchange = function() {
                 var classes = [];
                 var selector = '';

                 selects.forEach(function(select) {
                     var sign = select.value;

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

                 if ((classes.length == 2) && (classes[0] == classes[1])) {
                     classes = ['big-arcana', classes[0]];
                 }

                 // Show all cards first
                 cards_div.querySelectorAll('img')
                          .forEach(function(image) {
                              image.style.display = 'inline';
                          });
                 if (classes.length == 1) {
                     cards_div.querySelectorAll('img:not(.' + classes[0] + ')')
                              .forEach(function(image) {
                                  image.style.display = 'none';
                              });
                 } else if (classes.length == 2) {
                     cards_div.querySelectorAll('img')
                              .forEach(function(image) {
                                  if (!classes.reduce(
                                      function(show_this, cls) {
                                          return show_this && image.classList.contains(cls);
                                      },
                                      true)) {
                                      image.style.display = 'none';
                                  }
                              });
                 }
             }
         }
        </script>
    </body>
</html>