CTL Twitch Script

<style>
.online, .offline {
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	width: 10px;
}

.online {
	background: green;

}

.offline {
	background: red;

}
</style>
<body>
<div id="sc2">
<span id="sc2header" style="display: none">StarCraft II Streams:</span><br />
</div>
<div id="otherGame" style="display: none"></div>
<script>

var sc2GameName = "StarCraft II: Heart of the Swarm";

//These are the names that are ALWAYS SHOWN.  Add in the following manner ["Forum Name","Twitch Name", "Race (T/Z/P/R)"]
var alwaysOn = [
["ChoboTeamLeague","ChoboTeamLeague","n"]
, ["Relentless Heroes","rhgamingcom","n"]
, ["All-Inspiriation","allinspiration","n"]
, ["Team UnRivaled","teamunrivaled","n"]
, ["tbham","tbham","z"]
, ["Couchie","couchie14","t"]
];

//These are the names that are NOT ALWAYS SHOWN.
var notAlwaysOn = [

["Roxas","callmeroxas","t"]
, ["Bozz","jonbozz","z"]
, ["Seeker","SeekerSC2","t"]
// !!! Reminder: remember to update StreamersTest as well !!!
];


var string = " ";
var twitch = " ";
var api_key= "seg30bf5k0rbnbq1z8qyb9usxyp5a34";

//Check for streams that should always be shown
for (var q=0; q<alwaysOn.length;q++)
{
	//window.alert(alwaysOn[q][0]+' '+ alwaysOn[q][1]+' '+alwaysOn[q][2]);
    checkStreamCast(alwaysOn[q][0], alwaysOn[q][1], alwaysOn[q][2], true);
	//window.alert(alwaysOn[q][0]+' '+ alwaysOn[q][1]+' '+alwaysOn[q][2]);
}

//Check for streams that will not always be shown.
for (var j=0; j<notAlwaysOn.length;j++)
{
    checkStreamCast(notAlwaysOn[j][0], notAlwaysOn[j][1], notAlwaysOn[j][2], false);
	//	window.alert(alwaysOn[j][0]+' '+ alwaysOn[j][1]+' '+ alwaysOn[j][2]);

}
//Check to see if Twitch stream is live
//ForumID = CTL Forum ID of the streamer
//TwitchID = Twitch ID / Stream name of the streamer
//Shows = True - will always show,    False - only shows if live.

function checkStreamCast(ForumID, TwitchID, Race, Shows)
{
        //api_key = "seg30bf5k0rbnbq1z8qyb9usxyp5a34";

        $.getJSON('https://api.twitch.tv/kraken/streams/' + TwitchID + '?client_id=' + api_key + '&callback=?', function(data) {
           if (data.stream)
		   {
			streamViewers = data['stream']['viewers'];
			streamTitle = htmlEscape(data['stream']['channel']['status']);
			streamGame = data['stream']['channel']['game'];
			twitch = "<a href='http://www.twitch.tv/" + TwitchID +"' target='blank' title='" + streamTitle + "'>" + ForumID + "</a>";
			string = "<span class='online'></span>&nbsp;<img src='http://files.enjin.com/217407/" + Race + ".png'>" + twitch + " <font color='a3a3a3'>(" + streamViewers+ ")</font><br>";
			CreateSpan(ForumID, string, streamGame);
           } else {
				if(Shows){
				//offline do nothing!
				twitch = "<a href='http://www.twitch.tv/" + TwitchID +"' target='blank'>" + ForumID + "</a>";
				string = "<span class='offline'></span>&nbsp;<img src='http://files.enjin.com/217407/" + Race + ".png'>" + twitch + "<br>";
				CreateSpan(ForumID, string, sc2GameName);
				}
           }
        });

}

function CreateSpan(strSpanID, strHTML, strGame)
{
	var spanTag = document.createElement("span");
    spanTag.id = strSpanID;
	spanTag.innerHTML = strHTML
    //document.body.appendChild(spanTag);
        if (sc2GameName.toLowerCase() == (strGame).toLowerCase()) {
	    $('#sc2').append(spanTag);
        } else {
            var gameDivId = '#' + htmlAndSpaceEscape(strGame);
            if ($(gameDivId).length == 0) {
                var gameDiv = document.createElement("div");
                gameDiv.id = htmlAndSpaceEscape(strGame);
                gameDiv.className = 'game';
                gameDiv.appendChild(spanTag);

                $('#otherGame').append(gameDiv);
                $(gameDivId).prepend($('<span />').text(strGame + ":").append("<br />"));
            } else {
                $(gameDivId).append(spanTag);
            }
        }
        if ($('#otherGame .game').length > 0) {
            $('#sc2header').show();
            $('#otherGame').show();
        }
}

function htmlEscape(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/:/g, '')
        .replace(/;/g, '');
}


function htmlAndSpaceEscape(str) {
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/:/g, '')
        .replace(/;/g, '')
        .split(' ').join('');
}

</script>