<!DOCTYPE HTML>

<html>

   <head>

      <script type="text/javascript" src="../js_css/jquery.js"></script>
      <script type="text/javascript" src="../js_css/songs_browser.js?<?php echo time(); ?>"></script>
      <script type="text/javascript" src="../js_css/core.js?<?php echo time(); ?>"></script>

      <link type="text/css" rel="stylesheet" href="../js_css/css/font-awesome.min.css">
      <link type="text/css" rel="stylesheet" href="../js_css/core.css?<?php echo time(); ?>" />
      <link type="text/css" rel="stylesheet" href="../js_css/songs_browser.css?<?php echo time(); ?>" />

   </head>

   <body>
      
      <div id="sb_SongList" class="container ltupbt">
         <div class="container_title">
            FILTERED SONGS
            <div class="button_container">
               <a href="#" id="sb_edit_song"    data-todo="1" class="fa fa-pencil tt"      data-tip="Edit song artist/name."></a>
               <a href="#" id="sb_new_song"     data-todo="2" class="fa fa-plus-circle tt" data-tip="Add new song."></a>
               <a href="#" id="sb_filter_songs" data-todo="0" class="fa fa-filter tt"      data-tip="Toggle filter/song window."></a>
            </div>
         </div>
         <div class="content_box" id="sb_SongItems">
            <div>Use filters on the right side to get songs...</div>
         </div>
      </div>

      <div id="sb_Song" class="container rtupbt">
         <div class="container_title">
            SONG
            <div class="button_container">
               <input type="xhidden" id="song_key">
               <input type="hidden" id="duration">
               <a href="#" id="sb_key_up" class="fa fa-chevron-up tt" data-tip="Key up."></a>
               <a href="#" id="sb_key_down" class="fa fa-chevron-down tt" data-tip="Key down."></a>
               <a href="#" id="sb_edit_song_data" class="fa fa-pencil tt" data-tip="Edit song."></a>
            </div>
         </div>
         <div class="content_box" id="sb_SongBody"></div>
      </div>

      <div id="sb_PasteSong" class="container ltupbt">
         <div class="container_title">
            SONG EDITOR
            <div class="button_container">
               <a href="#" id="sb_paste_save"   data-todo="1" class="fa fa-check-circle tt" data-tip="Save song."></a>
               <a href="#" id="sb_paste_cancel" data-todo="2" class="fa fa-times-circle tt" data-tip="Cancel editing."></a>
            </div>
         </div>
         <textarea class="content_box" wrap="off" id="sb_PasteBox"></textarea>
      </div>

      <div id="sb_AddEdit" class="container ltupbt">
         <div class="container_title"></div>
         <div class="content_box" id="sb_SongControls">
            <dl>
               <dt>Artist name:</dt>
               <dd>
                  <span id="Artist_Field" data-artist="">Choose from list below...</span>
               </dd>
               <dt>Song name:</dt>
               <dd>
                  <input type="text" id="Song_Field" data-song=""><br />
                  <br class="purgatory" />
                  <span class="message"></span>
                  <div class="button_container">
                     <a href="#" id="sb_save_song"   data-todo="1" class="fa fa-check-circle tt" data-tip="Save song."></a>
                     <a href="#" id="sb_cancel_song" data-todo="2" class="fa fa-times-circle tt" data-tip="Cancel."></a>
                  </div>
                  <br class="purgatory" />
               </dd>
            <dl>
            <div id="sb_ArtistList"></div>
         </div>
      </div>

      <div id="sb_SongFilter" class="container rtupbt">
         <div class="container_title">
            FILTER SONG LIST
         </div>
         <div class="content_box" id="sb_Filters">
            <div id="tabulator_headers">
               <ul class="tabhead">
                  <li><a class="active" href="#fartist">By Artist</a></li>
                  <li><a class="" href="#fgroup">By Group</a></li>
                  <li><a class="" href="#fgenre">By Genre</a></li>
                  <br clas="purgatory" />
               </ul>
            </div>
            <div class="contentbox" id="fartist">
               <div id="LetterBox"></div>
               <div id="lc_ArtistList"></div>
            </div>
            <div class="contentbox" id="fgroup">
            </div>
            <div class="contentbox" id="fgenre">
            </div>
         </div>
      </div>
      <!-- <pre id="temp" style="position: fixed; bottom: 0px; right: 0px; width: 800px; height: 300px; background-color: gainsboro; border: solid 1px gray;"></pre> -->
   </body>

</html>