<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CyTube</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Calvin 'calzoneman' Montgomery">

    <link href="./assets/css/bootstrap.css" rel="stylesheet">
    <link href="./assets/css/ytsync.css" rel="stylesheet" id="defaultcss">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
    </style>
    <link href="./assets/css/bootstrap-responsive.css" rel="stylesheet">
  </head>

  <body>

    <div class="wrapper">
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="index.html">CyTube</a>
          <div class="">
            <ul class="nav">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="help.html">Help</a></li>
              <li><a href="javascript:void(0)" id="optlink">Options</a></li>
            </ul>
            <div class="navbar-form pull-right" id="loginform">
                <input type="text" id="guestname" placeholder="Name">
                <button class="btn" id="guestlogin">Guest Login</button>
                <button class="btn" id="login">Login/Register</button>
            </div>
            <div class="navbar-form pull-right" id="logoutform" style="display: none;">
                <span id="welcome"></span>
                <button class="btn" id="logout">Logout</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
        <div class="row-fluid" id="motdrow">
            <div class="well span12">
                <p id="motd"></p>
            </div>
            <div class="span12" id="drinkbar">
                <h1 id="drinkcount"></h1>
            </div>
        </div>
        <div class="row" id="main" style="margin-top: 20px;">
            <div class="span5" id="chatdiv">
                <p id="usercount"></p>
                <div id="userlist">
                </div>
                <div id="messagebuffer">
                </div>
                <input type="text" id="chatline" class="span5">
            </div>
            <div class="span7" id="videodiv">
                <p id="currenttitle">Currently Playing: </p>
                <div id="ytapiplayer">
                </div>
            </div>
        </div>
        <div class="row" id="queuerow">
            <div class="span5">
                <div class="row-fluid">
                    <div class="span12" id="pollcontainer">
                    </div>
                    <div class="span7" style="margin-left: 0;">
                        <input type="text" id="library_query" class="input-block-level" placeholder="Search Query">
                    </div>
                    <div class="span5 btn-group">
                        <button class="btn" id="library_search">Library</button>
                        <button class="btn" id="youtube_search">YouTube</button>
                    </div>
                    <div class="span12" style="margin-left: 0;">
                        <ul id="library" class="videolist">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="span7" id="queuediv">
                <div class="row-fluid" id="qclear">
                    <div class="span12"></div>
                </div>
                <div id="playlist_controls"style="display: none;">
                    <div class="row-fluid">
                        <div class="span8">
                            <input type="text" id="mediaurl" class="input-block-level" placeholder="Media URL">
                        </div>
                        <div class="span4 btn-group">
                            <button class="btn" id="queue_next">Next</button>
                            <button class="btn" id="queue_end">End</button>
                        </div>
                    </div>
                </div>
                <button class="btn btn-block" id="voteskip">Voteskip</button>
                <div class="row-fluid">
                    <ul id="queue" class="span12 videolist">
                    </ul>
                    <div class="span12 well well-small" id="plmeta">
                        <span id="plcount"></span>
                        <span id="pllength"></span>
                        <div class="clear: both;"></div>
                    </div>
                    <button class="btn btn-danger btn-block" id="qlockbtn" style="display:none;">Unlock Queue</button>
                    <div class="span12 btn-group" style="margin: 0">
                        <button class="btn" id="getplaylist" style="width: 100%">Get Playlist URLs</button>
                        <button class="btn" id="clearplaylist" style="width: 33%; display: none;">Clear Playlist</button>
                        <button class="btn" id="shuffleplaylist" style="width: 33%; display: none;">Shuffle Playlist</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="display: none;" id="modnav">
            <div class="span12" id="modtabs">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="javascript:void(0)" id="show_chancontrols">Channel Controls</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="show_banlist">Ban List</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="show_loginlog">Connection Log</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="show_motdeditor">MOTD</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="show_filtereditor">Chat Filters</a>
                    </li>
                    <li>
                        <a href="javascript:void(0)" id="show_acl">Channel Ranks</a>
                    </li>
                    <li style="display: none">
                        <a href="javascript:void(0)" id="drop_channel">Unregister Channel</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row modonly" style="display: none" id="chancontrols">
            <div class="span12">
                <form action="javascript:void(0)">
                    <fieldset>
                        <div class="span5">
                            <label>When the queue is open:</label>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_qopen_allow_qnext">
                                Allow anyone to Queue Next
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_qopen_allow_move">
                                Allow anyone to move videos
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_qopen_allow_delete">
                                Allow anyone to delete videos
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_qopen_allow_playnext">
                                Allow anyone to jump to a video
                            </label>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_qopen_temp">
                                Videos added by guests are temporary
                            </label>
                        </div>
                        <div class="span5">
                            <label>Page Title
                                <input type="text" id="opt_pagetitle" placeholder="Sync" class="pull-right">
                            </label>
                            <br>
                            <label>Custom CSS
                                <input type="text" id="opt_customcss" class="pull-right">
                            </label>
                            <br>
                            <label>Custom JS<sup class="text-warning">BETA</sup>
                                <input type="text" id="opt_customjs" class="pull-right">
                            </label>
                            <br>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_allow_voteskip">
                                Allow voteskip
                            </label>
                            <br>
                            <label>Voteskip Ratio
                                <input type="text" id="opt_voteskip_ratio" class="pull-right">
                            </label>
                            <br>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_chat_antiflood">
                                Prevent chat flood
                            </label>
                            <br>
                            <label class="checkbox">
                                <input type="checkbox" id="opt_show_public">
                                Show channel publicly
                            </label>
                        </div>

                        <div class="span10">
                            <button class="btn btn-primary" id="opt_submit">Save</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
        <div class="row modonly" id="banlist" style="display: none;">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th></th>
                        <th>IP</th>
                        <th>Name</th>
                        <th>Banned By</th>
                    </thead>
                </table>
            </div>
        </div>
        <div class="row modonly" id="loginlog" style="display: none;">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th></th>
                        <th>IP</th>
                        <th>Names</th>
                    </thead>
                </table>
            </div>
        </div>
        <div class="row modonly" id="motdeditor" style="display: none;">
            <div class="span12">
                <textarea rows="10" id="motdtext"></textarea>
                <button class="btn btn-primary" id="updatemotd">Update</button>
            </div>
        </div>
        <div class="row modonly" id="filtereditor" style="display: none;">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th></th>
                        <th>Name</th>
                        <th>Regex</th>
                        <th>Flags</th>
                        <th>Replacement</th>
                        <th>Active</th>
                    </thead>
                </table>
            </div>
            <div class="span12">
                <p>Multiple filters can be added at once below.  They should contain 3-4 fields separated by whitespace: (name) regex flags replacement.<br>If any field contains whitespace, it must be escaped by a backslash, for example "what\ a\ story\ mark"</p>
                <textarea rows="10" class="input-block-level" id="multifiltereditor"></textarea>
                <button class="btn btn-primary" id="multifilter">Update Multiple</button>
            </div>
        </div>
        <div class="row modonly" id="channelranks" style="display: none;">
            <div class="span12">
                <table class="table table-striped">
                    <thead>
                        <th>Name</th>
                        <th>Rank</th>
                        <th>Control</th>
                    </thead>
                </table>
            </div>
        </div>
    </div> <!-- /container -->
    <div class="push"></div>
    <div id="sitefooter">
    </div>
    </div>
    <div id="footer">
        <p class="muted">
        CyTube Software Copyright &copy; 2013 Calvin Montgomery&nbsp;&middot;&nbsp;Available for free on <a href="http://github.com/calzoneman/sync">GitHub</a>&nbsp;&middot;
        <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=5Y7PUVVGVSEWG&lc=US&item_name=CyTube&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted">Donate</a>
        </p>

    </div>

    <!-- APIs -->
    <script src="http://api.dmcdn.net/all.js"></script>
    <script src="http://jwpsrv.com/library/QouFCLBMEeKC+CIACpYGxA.js"></script>
    <script src="./assets/js/sc.js"></script>
    <script src="./assets/js/froogaloop.min.js"></script>
    <script src="./assets/js/swf.js"></script>
    <!-- Third party -->
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/js/bootstrap.js"></script>
    <script src="./assets/js/bootstrap-transition.js"></script>
    <script src="./assets/js/bootstrap-modal.js"></script>
    <script src="./socket.io/socket.io.js"></script>
    <!-- My Javascript -->
    <script src="./assets/js/functions.js"></script>
    <script src="./assets/js/callbacks.js"></script>
    <script src="./assets/js/iourl.js"></script>
    <script src="./assets/js/media.js"></script>
    <script src="./assets/js/client.js"></script>

  </body>
</html>