/r/DotA2 Twitch Stream List

var logocss = {'float': 'left', 'display': 'inline', 'width': '32px', 'height': '32px'};
var pcss = {'padding-left': '13px', 'display': 'inline'};
var licss = {'padding': '2px 7px 6px 13px', 'display': 'none', 'overflow': 'hidden', 'height': '40px'};
var base = $('<ul id="base">');
var streams = {};

function streamElement(s) {
    var elem = $('<li id="' + s._id + '" class="twitch"> ').css(licss),
        wrapper = $('<p>').appendTo(elem),
        container = $('<a>').css({'height': '62px'}).attr({'target': '_blank', 'href': s.channel.url}).appendTo(wrapper);
    if (s.channel.logo === null)
        s.channel.logo = "http://static-cdn.jtvnw.net/jtv_user_pictures/xarth/404_user_300x300.png";
    $('<img>').attr('src', s.channel.logo).css(logocss).appendTo(container).load(function () {
        elem.slideDown(1000);
    });
    $('<p>' + s.channel.display_name + '<small style="color:#888"> (' + s.viewers + ' Viewers) </small></p>').css(pcss).appendTo(container);
    $('<br><p><small style="line-height: 20px">' + s.channel.status + '</small></p>').css(pcss).appendTo(container);
    return elem;
}

function refreshStreams() {
    $.getJSON("https://api.twitch.tv/kraken/streams?game=Dota%202&limit=10", function (data) {
        $.each(streams, function (k, v) {
            this.marked = true;
            this.updated = false;
        });
        $(data.streams).each(function () {
            this.marked = false;
            this.newstream = false;
            if (streams[this._id]) {
                if (streams[this._id].viewers !== this.viewers)
                    this.updated = true;
            } else {
                this.newstream = true;
            }
            streams[this._id] = this;
        });
        $.each(streams, function (k, stream) {
            if (stream.marked) {
                //console.log(stream.channel.name + " deleted");
                delete streams[k];
                $('#' + k).slideUp(1000, function () {
                    this.remove();
                });
            } else if (stream.updated) {
                //console.log(stream.channel.name + " (" + k + ") updated");
                if ($('#' + k).length) {
                    $(".twitch").each(function () {
                        if (parseInt($(this).find('small')[0].innerText.slice(2, -10), 10) < stream.viewers) {
                            if ($('#' + k).attr('id') === $(this).prev().attr('id') || $('#' + k).attr('id') === $(this).attr('id')) {
                                $('#' + k).replaceWith(streamElement(stream).show());
                                return false;
                            } else {
                                $('#' + k).slideUp(1000, function () {
                                    this.remove();
                                });
                                $(this).before(streamElement(stream));
                                return false;
                            }
                        }
                    });
                }
            } else if (stream.newstream) {
                var placed = false;
                if ($(".twitch").length) {
                    $(".twitch").each(function () {
                        if (parseInt($(this).find('small')[0].innerText.slice(2, -10), 10) < stream.viewers) {
                            $(this).before(streamElement(stream));
                            placed = true;
                            return false;
                        }
                    });
                }
                if (placed)
                    return true;
                base.append(streamElement(stream));
            } else {
                //console.log(stream.channel.name + " unchanged");
                //this should never happen
            }
        });
        setTimeout(refreshStreams, 15000);
    });
}

$(function () {
    $.ajaxSetup({
    // Disable caching of AJAX responses
        cache: false
    });
    var listelem = $('<li>').appendTo(base),
        head = $('<p>').appendTo(listelem);
    head.html("Live Streams");
    $('div.md p:eq(5)').after(base);
    refreshStreams();
});