<!DOCTYPE HTML>

<html lang="hr">

   <head>

      <title>9A-ZAG</title>

      <!--
       ________  _____            __________  _____    ________ 
      /   __   \/  _  \           \____    / /  _  \  /  _____/ 
      \____    /  /_\  \   ______   /     / /  /_\  \/   \  ___ 
         /    /    |    \ /_____/  /     /_/    |    \    \_\  \
        /____/\____|__  /         /_______ \____|__  /\______  /
                      \/                  \/       \/        \/ 
      -->

      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

      <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

      <style>

         body { font-family: Roboto; }

         * { box-sizing: border-box; }

        #Artists { position: fixed; top: 20px ; left: 20px; bottom: 20px; width: 50%; overflow: auto; }
        #Songs { position: fixed; top: 20px; right: 20px; bottom: 20px; width: calc(50% - 60px); }
        #Songs tr { display: none; }

         table { width: 100%; border-collapse: collapse; border: solid 1px gray; }

         td { border: solid 1px gainsboro; padding: 0; }

         .Letter { background-color: black; color: white; font-weight: bold; font-size: 16px; }
         .Artist { background-color: white; color: orangered; font-weight: bold; font-size: 14px; }
         .Song   { background-color: white; color: gray; font-weight: normal; font-size: 14px; }

         a { text-decoration: none; color: gray; padding: 4px 8px;  display: block; }
         a:hover { color: white; background-color: orangered; }

      </style>

      <script>
          $(document).ready(function() {
              $("#Artists a").click(function(){
                  $("#Songs tr").hide();
                  $("#Songs [data-artist='" + $(this).attr("href") + "']").show();
              });
          });
      </script>

   </head>

   <body>

<?php

   error_reporting(E_ALL);

   include "pdo_connection.php";

   $stmt = $pdo->query('SELECT LEFT(Name, 1) AS FirstLetter, _9a_arist.ID AS ArtistId, Name, _9a_song.ID AS SongId, Title
                               FROM _9a_arist
                         INNER JOIN _9a_song
                                 ON _9a_song.Artist_ID = _9a_arist.ID
                           ORDER BY FirstLetter, Name');

   $artist = "      <div id='Artists'>\n         <table>\n";
   $song   = "      <div id='Songs'>\n         <table>\n";
   $fl     = "";
   $ar     = 0;

   while ($row = $stmt->fetch()) {

      if($fl == "" || $fl != $row["FirstLetter"]) {
         $artist = $artist."            <tr><td class='Letter'>".$row["FirstLetter"]."</td></tr>\n";
         $fl = $row["FirstLetter"];
      }

      if($ar == 0 || $ar != $row["ArtistId"]) {
         $artist = $artist."            <tr><td class='Artist'><a href='#".$row["ArtistId"]."'>".$row["Name"]."</a></td></tr>\n";
         $ar = $row["ArtistId"];
      }

      $song = $song."            <tr data-artist='#".$row["ArtistId"]."'><td class='Song'><a href='#".$row["SongId"]."'>".$row["Title"]."</td></tr>\n";

   }

   $artist = $artist."         </table>\n      </div>\n";
   $song   = $song."         </table>\n      </div>\n";
   echo $artist.$song;      

?>

   </body>

</html>