<!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">
    <style>
      body {
        padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
      }
      #channeldata td, #channeldata th {
          text-align: center;
          vertical-align: middle;
      }
    </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>
        </div>
      </div>
    </div>

    <div class="container">
        <div class="row">
            <div id="loggedin" class="span6" style="display: none;">
                <h3 id="welcome"></h3>
            </div>
        </div>
        <div class="row">
            <div class="span8">
                <h3>Loaded Channels</h3>
                <table id="channeldata" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Channel</th>
                            <th>Title</th>
                            <th>Connected</th>
                            <th>Playing</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="span4">
                <h3>Enter Channel</h3>
                <input type="text" id="channel" placeholder="Channel Name">
            </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>

    <!-- 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>

    <!-- Mine -->
    <script src="./assets/js/iourl.js"></script>
    <script type="text/javascript">
        var host = document.location+"";
        host = host.replace("http://", "");
        if(host.indexOf("/") != -1)
            host = host.substring(0, host.indexOf("/"));
        host = "http://" + host;
        setInterval(refresh, 10000);
        refresh();
        function idToURL(data) {
            var entry = "";
            switch(data.type) {
                case "yt":
                    entry = "http://youtube.com/watch?v="+data.id;
                    break;
                case "vi":
                    entry = "http://vimeo.com/"+data.id;
                    break;
                case "dm":
                    entry = "http://dailymotion.com/video/"+data.id;
                    break;
                case "sc":
                    entry = data.id;
                    break;
                case "li":
                    entry = "http://livestream.com/"+data.id;
                    break;
                case "tw":
                    entry = "http://twitch.tv/"+data.id;
                    break;
                case "rt":
                case "jw":
                    entry = data.id;
                    break;
                default:
                    break;
            }
            return entry;
        }
        function refresh() {
            $.getJSON(IO_URL+"/api/json/listloaded?filter=public&callback=?", function(data) {
                $("#channeldata").find("tbody").remove();
                data.sort(function(a, b) {
                    var x = a.usercount;
                    var y = b.usercount;
                    if(x == y) {
                        var c = a.name.toLowerCase();
                        var d = b.name.toLowerCase();
                        return c == d ? 0 : (c < d ? -1 : 1);
                    }
                    return y - x;
                });
                for(var i = 0; i < data.length; i++) {
                    var d = data[i];
                    var tr = $("<tr/>").appendTo($("#channeldata"));
                    var name = $("<td/>").appendTo(tr);
                    $("<a/>").attr("href", host + "/r/" + d.name)
                        .text(d.name)
                        .appendTo(name);
                    $("<td/>").text(d.pagetitle).appendTo(tr);
                    $("<td/>").text(d.usercount || 0).appendTo(tr);
                    var title = $("<td/>").appendTo(tr);
                    if(d.media.id) {
                        $("<a/>").appendTo(title)
                            .text(d.media.title)
                            .attr("href", idToURL(d.media))
                            .attr("target", "_blank");
                    }
                    else {
                        title.text("-");
                    }
                }
            });
        }
        $("#channel").keydown(function(ev) {
            if(ev.keyCode == 13) {
                if(!$("#channel").val().match(/^[a-zA-Z0-9-_]+$/)) {
                    alert("Invalid channel names.  Channel names may contain alphanumeric characters, underscores, and hyphens");
                    return;
                }
                document.location = host + "/r/" + $("#channel").val();
            }
        });
    </script>
    <script type="text/javascript">
        var params = {};
        if(window.location.search) {
            var parameters = window.location.search.substring(1).split("&");
            for(var i = 0; i < parameters.length; i++) {
                var s = parameters[i].split("=");
                if(s.length != 2)
                    continue;
                params[s[0]] = s[1];
            }
        }
        if(params["channel"] && params["channel"].match(/^[a-zA-Z0-9]+$/)) {
            var host = ""+document.location;
            host = host.replace("http://", "");
            host = host.substring(0, host.indexOf("/"));
            document.location = "http://" + host + "/r/" + params["channel"];
        }
    </script>
  </body>
</html>