<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">

   <head>

      <meta http-equiv="Content-Type" content="Type=text/html; charset=utf-8" /> 

      <title>Guitar Song Book</title>

      <script type="text/javascript" src="../js_css/jquery.js"></script>
      <script type="text/javascript" src="../js_css/playbook.js?<?php echo time(); ?>"></script>
      <script type="text/javascript" src="../js_css/core.js"></script>
      <link type="text/css" rel="stylesheet" href="../js_css/core.css" />
      <link rel="stylesheet" type="text/css" href="../js_css/playbook.css" />
      <link rel="stylesheet" href="../js_css/css/font-awesome.min.css">

      <!--[if gte IE 9]>
         <style type="text/css">
            .gradient { filter: none; }
         </style>
      <![endif]-->

   </head>

   <body spellcheck="false">

      <div id="toolbar_left" class="toolbar gradient work_area">
         <a href="#" id="by_artist" title="Sort by artist" class="fa fa-3x">&#xf007;</a>
         <a href="#" id="do_playlist" title="Custom playlist" class="fa fa-3x">&#xf0ca;</a>
         <a href="#" id="by_song" title="Sort by song" class="fa fa-3x">&#xf0db;</a>
         <a href="#" id="by_genre" title="Sort by genre" class="fa fa-3x">&#xf06e;</a>
         <a href="#" id="do_filter" title="Filter artists or genres" class="last fa fa-3x">&#xf0b0;</a>
      </div>

      <div id="toolbar_center" class="toolbar gradient song_area">
         <div id="song_controls">
            <a href="#" id="locker" class="fa fa-3x" title="Lock song input">&#xf09c;</a>
            <a href="#" id="play" class="fa fa-2x" title="Play the song (auto lock)">&#xf04b;</a>
         </div>
         <div id="song_info">
            <span id="song_name"></span>
            <span id="artist_name"></span>
         </div>
      </div>

      <div id="toolbar_right" class="toolbar gradient">
         <input type="hidden" id="duration" value="0">
         <input type="hidden" id="song_key" value="0">
         <a href="#" id="keyup" title="Key up" class="fa fa-3x">&#xf077;</a>
         <a href="#" id="keydn" title="Key down" class="fa fa-3x">&#xf078;</a>
         <div>
            <span id="clock" class="fa fa-2x">&#xf017;</span>
            <span id="dursize">0:00</span>
            <a href="#" id="tminus" data-time="-10" title="Shorter duration" class="fa fa-2x">&#xf146;</a>
            <a href="#" id="tplus"  data-time="10"  title="Longer duration"  class="fa fa-2x">&#xf0fe;</a>
         </div>
      </div>

      <div id="list_by_artist" class="by_artist work_list work_area">
         <div id="LB_Title" class="container_title">
            BY ARTIST...
            <div class="button_container">
               <a href="#" id="pb_get_artist" data-todo="1" class="fa fa-check-circle tt" data-tip="Get artist songs."></a>
            </div>
         </div>
         <div id="LetterBox"></div>
         <div id="lc_ArtistList"></div>
      </div>

      <div id="artist_songlist" class="work_list work_area">
         <div id="AS_Title" class="container_title">
            ARTIST SONGS...
            <div class="button_container">
               <a href="#" id="pb_filter_songs" data-todo="0" class="fa fa-filter tt" data-tip="Toggle filter/artist window."></a>
            </div>
         </div>
         <div class="content_box" id="sb_SongItems"></div>
         <div id="YTVideo">
         </div>
      </div>

      <div id="create_playlist" class="work_list do_playlist work_area">
         <div id="LB_Title" class="container_title">
            GET PLAYLIST...
            <div class="button_container">
               <a href="#" id="pb_get_playlist" data-todo="1" class="fa fa-check-circle tt" data-tip="Set playlist."></a>
            </div>
         </div>
         <div class="content_box" id="playlist_items">
         </div>
      </div>

      <div id="playlist_songlist" class="work_list work_area">
         <div id="PL_Title" class="container_title">
            PLAYLIST SONGS...
            <div class="button_container">
               <a href="#" id="pb_filter_playlists" data-todo="0" class="fa fa-filter tt" data-tip="Toggle filter/playlist window."></a>
            </div>
         </div>
         <div class="content_box" id="pl_SongItems"></div>
      </div>

      <div id="list_by_song" class="work_list by_song work_area">All songs<br /><em>(not available yet)</em></div>
      <div id="list_by_genre" class="work_list by_genre work_area">GENRE<br /><em>(not available yet)</em></div>
      <div id="create_filter" class="work_list do_filter work_area">FILTER<br /><em>(not available yet)</em></div>

      <div id="song" class="song_area">
         <input type="hidden" id="song_key">
         <pre class="pjesma" spellcheck="false"></pre>
      </div>

      <div id="curtain"></div>

      <div id="separator" class="drag"></div>

   </body>

</html>