<!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="text/html;charset=utf-8"/>
        <title>rMPD</title>
        <!--<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>-->
        <link rel="stylesheet" type="text/css" href="display.css"/>
    </head>

    <body>
        <h1>MPD Web</h1>
        <% if $hasAlbumArt %>
            <img src="stream.rb?<%=$hasAlbumArt.url_encode%>"
            width="<%=$config[:albumArtWidth]%>"
            alt="Cover" id="coverArt" />
        <% end %>
        
        <!-- Control -->
        <div id="control">
            <h2>Control</h2>
            <!-- Previous Button -->
            <% if $current.to_i > 0 %>
            <a href="previous.rb">
                <img src="img/control_start_blue.png" alt="Previous"
                width="16" height="16" />
            </a>
            <% else %>
                <img src="img/control_start.png" alt="Previous"
                width="16" height="16" />
            <% end %>
            <!-- Play/Pause Button -->
            <a href="pause.rb">
            <% if $playing %>
                <img src="img/control_pause_blue.png" alt="Pause"
                width="16" height="16" />
            <% else %>
                <img src="img/control_play_blue.png" alt="Play"
                width="16" height="16" />
            <% end %>
            </a>
            <!-- Stop Button -->
            <% if $stopped %>
               <img src="img/control_stop.png" alt="Stopped"
               width="16" height="16" />
            <% else %>
                <a href="stop.rb">
                    <img src="img/control_stop_blue.png" alt="Stop"
                    width="16" height="16" />
                </a>
            <% end %>
            <!-- Next Button -->
            <% if $current.to_i < ($playlist.length - 1) %>
            <a href="next.rb">
                <img src="img/control_end_blue.png" alt="Next"
                width="16" height="16" />
            </a>
            <% else %>
                <img src="img/control_end.png" alt="Next"
                width="16" height="16" />
            </a>
            <% end %>
            <!-- Loop Button -->
            <a href="toggleLoop.rb">
            <% if $repeat %>
                <img src="img/control_repeat_blue.png" alt="Loop on"
                width="16" height="16" />
            <% else %>
                <img src="img/control_repeat.png" alt="Loop off"
                width="16" height="16" />
            <% end %>
            </a>
        </div>
        <!-- Volume Control -->
        <div>
        <h2>Volume</h2>
        <% v = $config[:volumeInc] 
        while (v <= 100) %>
            <a href="setVolume.rb?<%= v %>">
            <% if $mpd.volume < v %>
                <img src="img/volumeOff.png" width="24" height="12"
                alt="<%= v %>%" />
            <% else %>
                <img src="img/volumeOn.png" width="24" height="12"
                alt="<%= v %>%" />
            <% end %>
            </a>
        <% v += $config[:volumeInc]
        end %>
        </div>
        
        <!-- Playlist viewer -->
        <div id="playlist">
            <h2>Playlist</h2>
            <table>
                <tr>
                <% $config[:plHeaders].each do |title| %>
                    <th><%= title %></th>
                <% end %>
                </tr>
                
                <% $playlist.each do |s| %>
                <tr<%= 
                (s['pos'].to_i == $current) ? ' class="nowplaying"' : ''  %>>
                    <% $config[:plContent].each do |col| %>
                    <% if col == 'title' %>
                    <td><a href="play.rb?<%= s['pos'] %>">
                        <%= s['title'] %>
                    </a></td>
                    <% elsif col == 'tools' %>
                        <td><%= playlist_item_tool s['pos'], $playlist %></td>
                    <% else %>
                    <td><%= s[col] %></td>
                    <% end %>
                    <% end %>
                </tr>
                <% end %>
            </table>
            <!-- Current song progress -->
            <div class="progressBarOuter">
                <div class="progressBarInner"
                        style="width: <%= $pbSongWidth %>%;">
                </div>
                <div class="progressBarOverlay">
                    <strong><%= $time[0].to_s_dtime %></strong>
                    of
                    <strong><%= $time[1].to_s_dtime %></strong>
                    in song
                </div>
            </div>
            <!-- Current playlist progress -->
            <div class="progressBarOuter">
                <div class="progressBarInner"
                        style="width: <%= $pbPlayingWidth %>%;">
                </div>

                <div class="progressBarOverlay">
                    <strong><%= $remaining_length.to_s_dtime %></strong>
                    of
                    <strong><%= $total_length.to_s_dtime %></strong>
                    in playlist
                </div>
            </div>

            <a href="browse.rb?">Browse Music</a>,
            <a href="search.rb">Search Music</a>,
            <a href="playlists.rb">Playlists</a>
        </div>
        
        <div id="tools">
            <h2>Tools</h2>
            <ul>
            <% $tools.each do |tool| %>
            <li>
                <a href="Tools/<%=tool%>">
                    <%= tool.split('.')[0].gsub(/_/,' ') %>
                </a>
            </li>
            <% end %>
            </ul>
        </div>
    </body>
</html>
