<?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='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' 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' 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 id='led_buttons' <?php if ( !ENABLELEDBUTTONS ) echo "class='hidden'"; ?>>
<p>LED Control:</p>
<p>
<input type='button' id='led_crazy_btn' value='Go Crazy' class='led_btn'>
<input type='button' id='led_christmas_btn' value='Christmas' class='led_btn'>
</p>
<p>
<input type='button' id='led_julyfourth_btn' value='4th of July' class='led_btn'>
<input type='button' id='led_easter_btn' value='Easter' class='led_btn'>
</p>
<p>
<input type='button' id='led_halloween_btn' value='Halloween' class='led_btn'>
<input type='button' id='led_mellow_btn' value='Be Mellow' class='led_btn'>
</p>
<p>
<input type='button' id='led_crazymellow_btn' value='Mellow Random' class='led_btn'>
<input type='button' id='led_disableauto_btn' value='Disable Auto' class='led_btn'>
</p>
<p>
<input type='button' id='led_lightsoff_btn' value='Lights Off' class='led_btn'>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>