<html>
    <head>
        <style>
            body { font-family: arial; }
        </style>
        <script type="text/javascript" src="../js_css/jquery.js"></script>
        <script>
            $(document).ready(function() {
                $("a").click(function() {
                    $("#origigi, #novo").empty();
                    var SID =  $(this).attr("href").split("#")[1];
                    $.get("get_data.php", { JOB: "SONG", ID: SID}, function(data) { // console.log(data);
                        var Song = JSON.parse(data);
                        var Chords = JSON.parse(Song.Data[0].Tune);
                        var New = [];
                        
                        for(var i = 0; i < Chords.length; i++) {
                            $("#origigi").append(Chords[i] + "\n");
                            $("#novo").append(Chords[i] + "\n");
                            if(Chords[i][0] == 0 || Chords[i][0] == 3) {
                                New.push([Chords[i][0]]);
                            }
                            if(Chords[i][0] == 1) {
                               for(var j = 1; j < Chords[i].length; j++) {
                                  Chords[i][j][1] = Chords[i][j][1] + 1;
                                  Chords[i][j][2] = Chords[i][j][2] + 1;
                               }
                               New.push(Chords[i]);
                            }
                            if(Chords[i][0] == 2 || Chords[i][0] == 4) {
                                New.push([Chords[i][0], Chords[i][1][0]]);
                            }
                        }
                        var saveMe = "[\n";
                        coma = "";
                        for(var s = 0; s < New.length; s++) {
                            saveMe = saveMe + coma + JSON.stringify(New[s]);
                            coma = ",\n";
                        }
                        saveMe = saveMe + "\n]";
                        console.log(saveMe);
                        $.get("get_data.php", { JOB: "SAVE", ID: SID, Data: saveMe}, function(data) {
                            console.log(data);
                        });
                    });
                });
            });
        </script>
    </head>
<body>
<?php

   error_reporting(E_ALL);
   ini_set('display_errors', 1);

   include_once "pdo_connection.php";
   
   $sql  = "SELECT ID, Title, YTID FROM song";
   $stmt = $GLOBALS["pdo"]->prepare($sql);
   $stmt->execute(array());
/*
   $output = array("Rows" => $stmt->rowCount(), "Songs" => $stmt->fetchAll());

   echo json_encode($output);
  */
  
  echo "<table style='width: 33%;'>";
  
  while ($row = $stmt->fetch()) {
      echo "<tr>";
      echo "<td>".$row['ID']."</td><td><a href='#".$row['ID']."'>".$row['Title']."</a></td>";
      echo "</tr>";
  }
  echo "</table>";
  echo "<textarea id='origigi' style='position: fixed; top: 0; left: 33%; width: 33%; bottom: 0; border-left: solid 1px gray; background-color: gainsboro; overflow:scroll;'></textarea>";
  echo "<pre id='novo' style='position: fixed; top: 0; left: 66%; width: 33%; bottom: 0; border-left: solid 1px gray; overflow:scroll;'></pre>";
?>
</body>
</html>