$(document).ready(function() {
	$.ajax({
		type: "POST",
		url: "/sv_SE/ajax/apiproxy/format/json",
		data: { methodType:"GET", url:"checkins" },
		dataType: "json",
		success: 
		function(json) { 
			var slideInterval = 5000;
			var animationSpeed = 200;
			var counter = 5;
			
			$("#right-column").append("<div id=\"list-spots\" style=\"height:340px;overflow:hidden;\"><div id=\"comments\"></div></div>");
			
			function show(user, height) {
				var html = "<div class=\"list-spot-item\" style=\"height:48px;margin-top:-"+height+"px;\">";
				html += "<div class=\"image\"><a href=\"/users/" + user.userName + "/page/1\"><img src=\"" + user.avatarUrl + "\" alt=\"" + user.firstName + " " + user.lastName + "\" /></a></div>";
				html += "<div class=\"wrapper\"><p class=\"username\" style=\"float:none;\"><a href=\"/users/" + user.userName + "/page/1\">" + user.firstName + " " + user.lastName + "</a></p><p class=\"date\" style=\"display:block;\"> " + user.spotName + "</p></div>";
				html += "</div>";
				
				return html;
			}
			
			$("#comments").prepend(show(json.checkins[0],0));
			$("#comments").prepend(show(json.checkins[1],0));
			$("#comments").prepend(show(json.checkins[2],0));
			$("#comments").prepend(show(json.checkins[3],0));
			$("#comments").prepend(show(json.checkins[4],0));
			//show();
	
			window.setInterval(function() {
				var user = json.checkins[counter];
				counter++;
				if (counter == 20) {
					counter = 0;
				}
				
				var html = show(user, 48);
				
				$("#comments").prepend(html);
				$('#list-spots > #comments > div:first').animate({
					marginTop: 0
				}, animationSpeed, "swing", function() {
					$('#list-spots > #comments > div:last').remove();
				});
				
			}, slideInterval);
		}
	});
	
});