<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CyTube Channel Listing</title>
        <link href="assets/css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            #channeldata td, #channeldata th {
                text-align: center;
                vertical-align: middle;
            }

            .loginform {
                margin: 100px auto 20px;
                padding: 19px 29px 29px;
                border-radius: 5px 5px 5px 5px;
                border: 1px solid #dedede;
                max-width: 300px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <form class="form-horizontal loginform" action="javascript:void(0);">
                <div class="control-group">
                    <input id="name" type="text" placeholder="Username" class="input-block-level">
                </div>
                <div class="control-group">
                    <input id="pw" type="password" placeholder="Password" class="input-block-level">
                </div>
                <button id="login" class="btn btn-block">Authenticate</button>
            </form>
        </div>
        <table id="channeldata" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Channel</th>
                    <th>Connected</th>
                    <th>Playing</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script src="assets/js/jquery.js" type="text/javascript"></script>
        <script src="assets/js/iourl.js" type="text/javascript"></script>
        <script type="text/javascript">
            var session = readCookie("sync_session") || "";
            var uname = readCookie("sync_uname") || "";
            var p = "";
            if(uname && session) {
                $.getJSON(IO_URL+"/api/json/login?name="+uname+"&session="+session+"&callback=?", function(data) {
                    if(data.success) {
                        $(".loginform").remove();
                        createCookie("sync_uname", uname, 7);
                        createCookie("sync_session", session, 7);
                        p = "name=" + uname + "&session=" + session;
                        refresh();
                        setInterval(refresh, 5000);
                    }
                });
            }
            var q = "";
            $("#login").click(function() {
                uname =  $("#name").val();
                q = "name=" + $("#name").val() + "&pw=" + $("#pw").val();
                $.getJSON(IO_URL+"/api/json/login?"+q+"&callback=?", function(data) {
                    if(data.success) {
                        $(".loginform").remove();
                        session = data.session;
                        createCookie("sync_uname", uname, 7);
                        createCookie("sync_session", session, 7);
                        p = "name=" + uname + "&session=" + session;
                    }
                });
                
                refresh();
                setInterval(refresh, 5000);
            });

            function refresh() {
                $.getJSON(IO_URL+"/api/json/listloaded?"+p+"&callback=?", function(data) {
                    var host = document.location + "";
                    host = host.substring(0, host.indexOf("/widget.html"));
                    if(data.error) {
                        alert(data.error);
                        return;
                    }
                    $(".loginform").remove();
                    $("#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.usercount || 0).appendTo(tr);
                        $("<td/>").text(d.title || "-").appendTo(tr);
                    }
                });
            }
            function createCookie(name,value,days) {
                if (days) {
                    var date = new Date();
                    date.setTime(date.getTime()+(days*24*60*60*1000));
                    var expires = "; expires="+date.toGMTString();
                }
                else var expires = "";
                document.cookie = name+"="+value+expires+"; path=/";
            }

            function readCookie(name) {
                var nameEQ = name + "=";
                var ca = document.cookie.split(";");
                for(var i=0;i < ca.length;i++) {
                    var c = ca[i];
                    while (c.charAt(0)==" ") c = c.substring(1,c.length);
                    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
                }
                return null;
            }

            function eraseCookie(name) {
                createCookie(name,"",-1);
            }
        </script>
    </body>
</html>