var displayed_pictures = 0;
var last_picture_name  = null;

var thumbnail_width  = 0;
var thumbnail_height = 0;

var thumbnails_from  = 1;
var thumbnails_to    = 1;

var displayed_thumbnails = 0;

var thumbnails_info = {};

is_updating = false;

$(document).ready(function()
	{
	if (!window.displayed_thumbnails) displayed_thumbnails = 0;
	if (!window.min_thumbnails) min_thumbnails = 0;

	thumbnails_to = displayed_thumbnails;

	$('a.thumbnail-link').click(thumbnail_click);

	var first_thumbnail = $('a.thumbnail-link:first img')
	thumbnail_width  = first_thumbnail.width()  + (1 + 5 + 3)*2 - 1;
	thumbnail_height = first_thumbnail.height() + (1 + 5 + 3)*2 - 1;

	if (displayed_thumbnails < min_thumbnails && displayed_thumbnails < total_pictures)
		{
		append_thumbnails(min_thumbnails - displayed_thumbnails);
		}

	$('#thumbnails-wrapper').scroll(function()
		{
		update_thumbnails();
		update_status();
		}
	);

	$(window).resize(function()
		{
		update_thumbnails();
		update_status();
		}
	);

	setTimeout("update_new_thumbnails();", 120*1000);

	get_thumbnails_info();
	}
);

get_thumbnails_info = function()
	{
	var names = [];

	$('a.thumbnail-link').each(function()
		{
		name = $(this).attr('id').substring("thumbnail-".length);

		if (!(thumbnails_info[name]))
			{
			names.push(name);
			}
		}
	);

	$.post(url('json/all/thumbnails-info'), {'names[]': names}, receive_thumbnails_info, 'json');
	}

receive_thumbnails_info = function(data)
	{
	for (name in data)
		{
		thumbnails_info[name] = data[name];
		}
	}

update_thumbnails = function()
	{
	if (!is_updating && displayed_thumbnails < total_pictures)
		{
		var height = $('#thumbnails-wrapper').height();
		var total_height = $('#thumbnails').height();
		var scroll_height = $('#thumbnails-wrapper').scrollTop();
		var bottom = height + scroll_height;

		if (height < total_height && displayed_thumbnails < total_pictures)
			{
			is_updating = true;
			append_thumbnails(thumbnails_increment);
			}
		else if (total_height - bottom < load_next_thumbnails_distance)
			{
			is_updating = true;
			append_thumbnails(thumbnails_increment);
			}
		}
	}

update_new_thumbnails = function()
	{
	if (!is_updating)
		{
		is_updating = true;

		$.getJSON(url('json/' + visited_user + '/thumbnails/newer/than/' + top_thumbnail_id), {}, function(data)
			{
			for (id in data)
				{
				thumbnails_info[data[id].name] = data[id];

				thumbnail_html = thumbnail_code(data[id].name, data[id].login);
				$('#thumbnails').prepend(thumbnail_html);
				displayed_thumbnails++;
				top_thumbnail_id = id;
				update_status();
				}

			is_updating = false;

			setTimeout("update_new_thumbnails();", 120*1000);
			}
		);
		}
	}

append_thumbnails = function(nb)
	{
	$.getJSON(url('json/' + visited_user + '/thumbnails/from/' + bottom_thumbnail_id + '/for/' + nb), {}, function(data)
		{
		for (id in data)
			{
			thumbnails_info[data[id].name] = data[id];

			thumbnail_html = thumbnail_code(data[id].name, data[id].login);
			thumbnails_append(thumbnail_html);
			displayed_thumbnails++;
			bottom_thumbnail_id = id;
			update_status();
			}

		if (displayed_thumbnails && $('#thumbnails-wrapper').height() > $('#thumbnails').height() && displayed_thumbnails < total_pictures)
			{
			append_thumbnails(thumbnails_increment);
			}

		is_updating = false;
		}
	);
	}

thumbnail_code = function(image_name, user_login)
	{
	var info = thumbnails_info[image_name];

	if (info)
		{
		href = url('~' + user_login + '/' + image_name);
		src = info['thumbnail-src'];
		html = '<a id="thumbnail-' + image_name + '" class="thumbnail-link" href="' + href + '"><img class="thumbnail-' + user_login + '" height="75" width="75" alt="' + info.link + '" title="' + info.title + '" src="' + src + '"/></a>';

		element = $(html);
		element.click(thumbnail_click);

		return element;
		}
	else
		{
		return $('');
		}
	}

thumbnails_append = function(html)
	{
	$('#thumbnails').append(html);
	}

thumbnail_click = function()
	{
	name = $(this).attr('id').substring("thumbnail-".length);
	login = $(this).find('img').attr('class').substring("thumbnail-".length);

	if (name != last_picture_name)
		{
		last_picture_name = name;
		var image = thumbnails_info[name];

		if (image)
			{
			image['login'] = login;
			viewer_prepend(medium_image_code(image));
			displayed_pictures++;
			update_status();
			}
		}

	return false;
	}

medium_image_code = function(image)
	{
	var link_code = "";
	if (image.title && image.link)
		{
		link_code =
'	<p class="medium-external-link">' +
'		<a target="_blank" href="' + image.link + '">' +
			image.title +
'		</a>' +
'	</p>';
		}
	else if (image.title && !image.link)
		{
		link_code = '<p class="medium-external-link">' + image.title + '</p>';
		}
	else if (!image.title && image.link)
		{
		link_code =
'	<p class="medium-external-link">' +
'		<a target="_blank" href="' + image.link + '">' +
			image.link +
'		</a>' +
'	</p>';
		}

	var delete_code = "";
	if (image.login == logged_user)
		{
		delete_code = '<a href="' + url('delete/' + image.login + '/' + image.name) + '" title="delete" class="permalink">x</a>';
		}

	html = 
'	<div class="image-big" id="image-' + image.name + '">' +
'		<a href="' + url('~' + image.login + '/' + image.name) + '" title="permalink" class="permalink">■</a>' +
'		<a class="medium-link" href="' + url('pictures/' + image.name) + '" target="_blank">' +
'			<img alt="' + image.link + '" title="' + image.title + '" src="' + image['medium-src'] + '"/>' +
'		</a>' +
		delete_code +
		link_code +
'	</div>';

	return html;
	}

url = function(path)
	{
	var server = 'sauf.ca';

	return 'http://' + server + '/' + path;
	}

viewer_prepend = function(html)
	{
	if ($('#register-form'))
		{
		$('#register-form').remove();
		}

	//$('#viewer').prepend($(html).hide().fadeIn('slow'));
	var node = $(html);
	node.hide();
	$('#viewer').prepend(node);
	node.slideDown('slow');
	}

viewer_reset = function()
	{
	$('#viewer').html("");
	displayed_pictures = 0;
	}

update_status = function()
	{
	if (displayed_pictures > 0)
		{
		reset_link = $('<a href="" id="viewer-reset-link">[reset]</a>');
		reset_link.click(function()
			{
			viewer_reset();
			$('#viewer-status').html('');
			return false;
			}
		);

		if (displayed_pictures == 1)
			{
			$('#viewer-status').html('<em>1</em> picture displayed ');
			}
		else
			{
			$('#viewer-status').html('<em>' + displayed_pictures + '</em> pictures displayed ');
			}

		$('#viewer-status').append(reset_link);
		}

	if (displayed_thumbnails > 0)
		{
		var height = $('#thumbnails-wrapper').height() - 20;
		var total_height = $('#thumbnails').height() - 20 - 20;
		var scroll_height = $('#thumbnails-wrapper').scrollTop();

		if (height > total_height)
			{
			thumbnails_from = 1;
			thumbnails_top  = total_pictures;
			}
		else
			{
			var cols = Math.floor($('#thumbnails').width()/thumbnail_width);
			var hidden_rows_top = Math.floor(scroll_height/thumbnail_height);
			var shown_rows = Math.floor(height/thumbnail_height);

			thumbnails_from = hidden_rows_top * cols + 1;
			thumbnails_to   = Math.min(total_pictures, thumbnails_from + shown_rows * cols - 1);
			}

		thumbnails_status = thumbnails_from + '→' + thumbnails_to + ' of ' + total_pictures + ' pictures';
		$('#thumbnails-status').html(thumbnails_status);
		}
	}