var apiUrl = 'http://gdata.youtube.com/feeds/api/users/MisasaToji/uploads'
	+ '?max-results=4&alt=json-in-script&callback=?';

var videos = [];

$(function() {
	$.getJSON(apiUrl, function(data) {
		var feed = data.feed;
		var entries = feed.entry || [];

		var ul = $('#videoList');
		ul.empty();

		var list = [];

		for (var i = 0; i < entries.length; i++) {
			var entry = entries[i];

			var title = entry.title.$t;
			var thumbnail = entry.media$group.media$thumbnail[0].url;
			var player = entry.media$group.media$content[0].url;
			var watch = 'javascript:watchVideo(' + i + '); return false;';
			videos[i] = player;

			ul.append(
				  '<li id="v' + i + '">'
				+ '<a href="' + player + '" onclick="' + watch + '">'
				+ '<img src="' + thumbnail + '" alt="' + title + '"'
				+ ' width="96" height="59" border="0" />'
				+ '</a>'
				+ '<div class="title">'
				+ '<a href="' + player + '" onclick="' + watch + '">'
				+ title
				+ '</a></div>'
				+ '</li>'
			);
		}
	});
});

function watchVideo(n) {
	url = videos[n];

	if (!url) return false;

	url += '?rel=0&autoplay=1&border=0&fs=1';
	$('#screen').html(
		'<object width="290" height="240" type="application/x-shockwave-flash"'
		+ ' data = "' + url + '">'
		+ '<param name="movie" value="' + url + '"></param>'
		+ '<param name="allowFullScreen" value="true"></param>'
		+ '<param name="allowscriptaccess" value="always"></param>'
		+ '<embed src="' + url + '" type="application/x-shockwave-flash"'
			+ ' allowscriptaccess="always" allowfullscreen="true"'
			+ ' width="290" height="240"></embed></object>'
	);

	for (var i = 0; i < videos.length; i++) {
		var li = $('#v' + i);

		if (i == n) {
			li.removeClass().addClass('on');
		}
		else {
			li.removeClass();
		}
	}

	return false;
}

function watchFirst() {
	watchVideo(0);
}