let lastImage = null;

$(document).ready(function() {
	poll();
	setInterval(poll, UPDATE_EVERY_SECONDS * 1000);
});

function poll() {
	// Polls last photos from gallery service
	$.ajax({
		url: `${BASEURL}/api/gallery_item/read.php`,
		headers: {
			"Authentication": TOKEN
		},
		crossDomain: true
	}).then(function(data){
		let image = data.records[0];
		if (!lastImage || lastImage.id != image.id) {
			lastImage = image;
			preloadImage(urlFromImageObj(lastImage), function(event) {
				const imgDiv = $("#feed #image");
				let preloadedUrl = event.target.src;
				imgDiv.animate(
					{
						opacity: 0.0
					},
					500,
					"swing",
					function() {
						showImage(preloadedUrl);
						imgDiv.animate(
							{
								opacity: 1.0
							},
							500,
							"swing");
						}
				);
			});
		}
	});
}

function urlFromImageObj(image) {
	return LOW_RES_PROJECTOR ?
		`${BASEURL}${image.imageThumbUrl}` :
		`${BASEURL}${image.imageUrl}`;
}

/**
 * Preloads the image and executes callback
 * @param {string} url
 * @param {function} callback
 */
function preloadImage(url, callback) {
	var img=new Image();
	img.src=url;
	img.onload = callback;
}

/**
 * Replaces image and user name in div.
 * No animation is performed here.
 * @param {image} image json object as returned by the gallery service
 */
function showImage(imageUrl) {
	$("#feed #image").css("background-image", `url(${imageUrl})`);
	if (urlFromImageObj(lastImage) != imageUrl) {
		// Connection hiccup? Hide user badge
		$('#userbadge').hide()
		return;
	}

	// Show user badge
	$('#userbadge').show()
	$('#userbadge .name').text(`${lastImage.author.name} ${lastImage.author.surname}`);
	if (lastImage.author.picture)
		$('#userbadge .avatar').attr('src', `${BASEURL}/user-pictures/${lastImage.author.picture}`)
	else
		$('#userbadge .avatar').attr('src', 'user-placeholder.png');
}