{% extends "layout.html" %}

{% block title %}Dota Noobs - Friends{% endblock %}

{% block content %}
<div class="uk-grid">
    <div class="uk-width-1-1 uk-text-center botpad">
        <h2 class="uk-container-center">The Legend Himself: Pyrion Flax</h2>
        <img src="{{ url_for('static', filename='img/pyrion.png') }}">
        <p>Pyrion is a pretty cool guy. He loves shane, and we love him. Check out some of his awesome work:</p>
        <div class="uk-grid">
            <div class="uk-width-1-3"><h3><a href="http://www.youtube.com/user/tedhimself">YouTube</a></h3><img src="{{ url_for('static', filename='img/pyrion-youtube.jpg') }}"></div>
            <div class="uk-width-1-3"><h3><a href="http://www.twitch.tv/pyrionflax">Twitch.tv</a></h3><img src="{{ url_for('static', filename='img/pyrion-twitch.png') }}"></div>
            <div class="uk-width-1-3"><h3><a href="http://www.facebook.com/pyrion.flax">FaceBook</a></h3><img src="{{ url_for('static', filename='img/pyrion-facebook.jpg') }}"></div>
        </div>
    </div>
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-center uk-panel botpad">
        <h2>Internet Friendlies:</h2>
        <p>DotA related websites worth the occasional visit. We know they are no DotaNoobs, but we set a pretty high quality standard.</p>
        <ul>
            <li><a href="http://www.reddit.com/r/DotA2/">Reddit's r/dota2</a></li>
            <li><a href="http://www.dotainsight.com">DotaInsight Podcast</a></li>
            <li><a href="http://dotabuff.com">DotaBuff</a></li>
            <li><a href="http://teamliquid.net/dota2/">Team Liquid Dota2</a></li>
            <li><a href="http://www.purgegamers.com">Purge Gamers</a></li>
    </div>
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-text-center uk-panel">
        <h2>Streams We Like</h2>
        <ul id="streams-online">
        </ul>
        <hr id="stream-divider" class="uk-article-divider" style="display:none;" />
        <ul id="streams-offline">
        </ul>
    </div>
</div>
{% endblock %}

{% block pagescripts %}
<script>
$(document).ready(function() {
	// Add the streams
	var stream_url = "https://api.twitch.tv/kraken/streams/";
	var channels = ["sheevergaming", "purgegamers", "synderen", "luminousinverse", "lddota"]
	for (var idx in channels) {
		$.getJSON(stream_url+channels[idx]+"?callback=?", function(data) {
			if (data.stream) {
				$('#streams-online').append("<article class='uk-article' id='" + data.stream.channel.name + "'>");
				var jquery_selector = '#'+data.stream.channel.name;
                                $(jquery_selector).append("<a href='"+data.stream.channel.url+"'><h4>" + data.stream.channel.display_name + "</h4></a>")
				var span_text = "<p class='uk-article-meta'>";
				span_text = span_text + "Playing: " + data.stream.game  + "<br />";
				span_text = span_text + "Viewers: " + data.stream.viewers + "<br />";
				span_text = span_text + "</p>";
				$(jquery_selector).append(span_text);
				$(jquery_selector).append("<img src='" + data.stream.preview.medium + "' class='' />")
				$('#streams-online').append("</article>");
                                $('#stream-divider').show();
			} else {
				$.getJSON(data._links.channel+"?callback=?", function(data) {
					$('#streams-offline').append("<article class='uk-article' id='" + data.name + "'>");
                                        $('#'+data.name).append("<a href='"+data.url+"'><h4>" + data.display_name + "</h4></a>");
					$('#'+data.name).append("<img src='" + data.logo + "' style='float: right;' width='62' height='62' /><br />");
					$('#'+data.name).append("<p class='uk-article-meta'><strong>Offline</strong></p>");
					$('#streams-offline').append("</div>");
				});
			}
		});
        }
});
</script>
{% endblock %}