<?php

require 'header.php';

$queues = Queue::getList();
//$autoqueues = Queue::getList(AUTOQUEUES);

?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0, width=device-width, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="128x128" href="img/ic_MobileHA.png" />
<link rel="icon" sizes="196x196" href="img/ic_MobileHA_hires.png" />
<link rel="apple-touch-icon" sizes="76x76" href="img/ic_MobileHA_ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="img/ic_MobileHA_iphone.png" />
<link rel="apple-touch-icon" sizes="152x152" href="img/ic_MobileHA_ipad-retina.png" />
<link rel="manifest" href="/manifest.json" />
<link rel='stylesheet' href='jquery-ui-1.11.2/jquery-ui.min.css' />
<link rel='stylesheet' href='minimal.css' media='screen' />
<link rel='stylesheet' href='tf201.css' media='screen and (width: 800px) and (orientation: portrait)' />
<link rel='stylesheet' href='tf201.css' media='screen and (width: 768px) and (orientation: portrait)' />
<link rel='stylesheet' href='mobile640.css' media='screen and (device-aspect-ratio: 40/71) and (orientation: portrait)' />
<link rel='stylesheet' href='desktop.css' media='screen and (min-width: 1300px) and (orientation: landscape)' />
<script type='text/javascript' src='jquery-1.11.1.min.js'></script>
<script type='text/javascript' src='jquery-ui-1.11.2/jquery-ui.min.js'></script>
<script type='text/javascript' src='jquery.touchSwipe.min.js'></script>
<script type='text/javascript' src='minimal.js'></script>
<title>Mobile Home Audio</title>
</head>
<body>
<div id='mainbody' class='mainbody'>
  <div id='tabs'>
    <ul>
      <li><a href='#playing'>Playing</a></li>
      <li><a href='#control'>Control</a></li>
      <li><a href='#history'>History</a></li>
      <li><a id='queuetab' href='#jukebox'>Jukebox</a></li>
      <li><a href='#search'>Search</a></li>
      <li><a href='#lists'>Lists</a></li>
    </ul>
    <div id='playing'>
      <div id='playing_contents' class='playing_contents'></div>
      <div id='playing_buttons' class='playing_contents'>
        <p><input type='button' class='skipsong_btn' id='skipsong_playing_btn' value='Skip Song'></p>
        <p><input type='button' id='mute_playing_btn' value='Mute'></p>
      </div>
    </div>
    <div id='control'>
      <div class='volume_slider_container'>
        <p><input type='button' class='vol_btn' value='Min' id='min_btn'> Volume <input type='button' class='vol_btn' value='Max' id='max_btn'></p>
      </div>
      <div class='volume_slider'>
        <div id='volume_slider'></div>
      </div>
      <p><input type='button' id='mute_btn' value='Mute'></p>
      <p><input type='button' class='skipsong_btn' id='skipsong_btn' value='Skip Song'></p>
      <p><input type='button' id='dropsong_btn' value='Drop Song'></p>
      <p><input type='button' id='emptyjukebox_btn' value='Empty Jukebox'></p>
      <p><input type='button' id='christmas_btn' value='Christmas: Inactive' class='christmas_btn'>
      <select id='christmas_freq' class='christmas_freq'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
      </select>
      </p>
      <hr class='songlist'>
      <p>Active Queue:</p>
      <div class='category_container'>
        <div class='category_sel'>
          <select id='queue_sel' class='queue_select'>
          <option value='0'>-- All Songs --</option>
          </select>
        </div>
        <div class='category_go'>
           <input type='button' id='category_go_btn' class='category_go_btn' value='Go'>
        </div>
      </div>
      <hr class='songlist'>
      <p><input type='button' id='surpriseme_btn' value='Surprise Me'></p>
      <p><select id='surpriseme_sel' class='surpriseme_sel'>
      <option value='0'>-- All Songs --</option>
      </select></p>
    </div>
    <div id='history'>
      <div id='history_contents' class='history_contents'></div>
    </div>
    <div id='jukebox'>
      <div id='jukebox_contents' class='queue_contents'></div>
      <div id='customq_contents' class='queue_contents'></div>
    </div>
    <div id='search'>
      <div id='search_input' class='search_input'>
        <input type='button' name='clearsearch_btn' id='clearsearch_btn' value='Clear' class='clear_search_btn'>
        <input id='searchbox' class='searchtext' type='text' placeholder='Search for...'>
      </div>
      <div id='search_contents' class='search_contents'></div>
    </div>
    <div id='lists'>
      <div id='lists_contents' class='lists_contents'>
        <p>Queue Songs To:</p>
        <p><select id='queuetarget_sel' class='surpriseme_sel'>
        <option value='0'>Jukebox</option>
        </select></p>
        <p>Create Playlist:</p>
        <p>
          <input id='newqueue_input' class='searchtext' style='width: 70%;' type='text' placeholder='Playlist Name'>
          <input type='button' id='newqueue_btn' class='newqueue_btn' value='Create'>
        </p>
        <hr class='songlist'>
      </div>
    </div>
  </div>
</div>
</body>
</html>
