$(document).ready(function () {
	var clientID= "vtocnftvokbaaj2xtecg5mn92tmln8";
	var channels = "elmillor,freecodecamp,faker,arteezy,imaqtpie";

	$('#live_stream').click(function() {
		$('#live_channels').html("");

		$.ajax({
			headers: {
		    	'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8',
		    },
		    url: "https://api.twitch.tv/kraken/streams?channel="+channels+"&client_id="+clientID,
		    type: "GET",
		    dataType: "jsonp",
		}).done(update).fail(handleErr);
	});
	
	$('#top_games').click(function() {
		$('#best_games').html("");

		$.ajax({
			headers: {
		    	'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8',
		    },
		    url: "https://api.twitch.tv/kraken/games/top?limit=10&client_id="+clientID+"&api_version=5",
		    type: "GET",
		    dataType: "jsonp",
		}).done(top_games).fail(handleErr);
	});

	$.ajax({
		headers: {
	    	'Client-ID':'vtocnftvokbaaj2xtecg5mn92tmln8',
	    },
	    url: "https://api.twitch.tv/kraken/users/?login="+channels+"&client_id="+clientID+"&api_version=5",
	    type: "GET",
	    dataType: "jsonp",
	}).done(allChannels).fail(handleErr);
});

function update(response) {

	if (response._total > 0) {
		$.each(response.streams, function(i,item) {
			var iconStyle = "height: 40px; width: 40px;";
			
			var channel = item.channel.name;
			var logo = item.channel.logo;
			var gameName =  "Playing: "+item.game;
			var watching = " Now watching: "+item.viewers;
			var channelUrl = "https://www.twitch.tv/";

			var ul = $('<ul></ul>').addClass("demo-list-three mdl-list");
			var li = $('<li></li>').addClass("mdl-list__item mdl-list__item--three-line").appendTo($(ul));
			var sp_primary = $('<span></span>').addClass("mdl-list__item-primary-content").appendTo($(li));
			var icon = $('<i></i>').addClass("mdl-list__item-avatar").appendTo($(sp_primary));
			var imgIcon = $('<img style="'+iconStyle+'" src='+logo+'>').appendTo($(icon));
			var name = $('<span></span>').html(channel).appendTo($(sp_primary));
			var game = $('<span></span>').addClass("mdl-list__item-text-body").html(gameName+watching).appendTo(sp_primary);
			var sp_secondary = $('<span></span>').addClass("mdl-list__item-secondary-content").appendTo($(li));
			var a = $('<a href="'+channelUrl+item.channel.name+'"></a>').addClass("mdl-list__item-secondary-action").appendTo($(sp_secondary));
			var i = $('<i>link</i>').addClass("material-icons").appendTo($(a));

			$('#live_channels').append($(ul));
		});
	}
	else {
		var h2 = $('<h2></h2>').html("No channels in live... :(").addClass("text-center amaranth");
		$('#live_channels').append($(h2));
	}
}

function allChannels(response) {
	var bio_content = "";
	var iconStyle = "height: 40px; width: 40px;";
	var channelUrl = "https://www.twitch.tv/";

	$.each(response.users, function(i,item) {
		if (item.bio == null) {
			bio_content = "Bio in blank";
		}
		else {
			bio_content = item.bio;
		}

		var name = item.name;

		var ul = $('<ul></ul>').addClass("demo-list-three mdl-list");
		var li = $('<li></li>').addClass("mdl-list__item mdl-list__item--three-line").appendTo($(ul));
		var sp_primary = $('<span></span>').addClass("mdl-list__item-primary-content").appendTo($(li));
		var icon = $('<i></i>').addClass("mdl-list__item-avatar").appendTo($(sp_primary));
		var imgIcon = $('<img style="'+iconStyle+'" src='+item.logo+'>').appendTo($(icon));
		var name = $('<span></span>').html(name).appendTo($(sp_primary));
		var bio = $('<span></span>').addClass("mdl-list__item-text-body").html(bio_content).appendTo(sp_primary);
		var sp_secondary = $('<span></span>').addClass("mdl-list__item-secondary-content").appendTo($(li));
		var a = $('<a href="'+channelUrl+item.name+'"></a>').addClass("mdl-list__item-secondary-action").appendTo($(sp_secondary));
		var i = $('<i>link</i>').addClass("material-icons").appendTo($(a));

		$('#all_channels').append($(ul));
	});
}

function top_games(response) {
	var linkGame = "https://www.twitch.tv/directory/game/";

	$.each(response.top, function (i, item) {
		
		var logo = item.game.box.large;
		var gameName = item.game.name;
		var cleanLink = convert_links(gameName);

		var divCell =  $('<div></div>').addClass("mdl-cell mdl-cell--4-col");
		var demoCard = $('<div></div>').addClass("demo-card-square mdl-card mdl-shadow--2dp top-space").appendTo($(divCell));

		var cardTitle = $('<div></div>').addClass("mdl-card__title mdl-card--expand").css({
			"background":"url("+logo+")no-repeat",
			"background-size": "cover"
		}).appendTo($(demoCard));

		var topPos = $('<h2></h2>').addClass("mdl-card__title-text").html("Top #"+(i+1)).appendTo($(cardTitle));
		var cardSupp = $('<div>'+gameName+'</div>').addClass("mdl-card__supporting-text font-bold").appendTo($(demoCard));
		var cardAction = $('<div></div>').addClass("mdl-card__actions mdl-card--border").appendTo($(demoCard));
		var link = $('<a href='+linkGame+cleanLink+' target=_blank >See streams</a>').addClass("mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect").appendTo($(cardAction));

		$('#best_games').append($(divCell));
	});
}

function handleErr(jqxhr, textStatus, err) {
  console.log("Request Failed: " + textStatus + ", " + err);
}

function convert_links(link) {
	var newLink = link.replace(/\s/g, "%20");
	return newLink;
}