/**
 * Image preload class
 */
ImagePreload = {
	images: {},
	preload: function (image_url, callback) {
		if (ImagePreload.images[image_url]) {
			callback(ImagePreload.images[image_url]);
		} else {
			ImagePreload.images[image_url] = new Image();
			ImagePreload.images[image_url].src = image_url;

			var interval = null;
			var image = image_url;
			var preload_callback = callback;
			
			interval = setInterval(function () {
				if (ImagePreload.images[image].complete)
				{
					clearInterval(interval);
					if (preload_callback)
						preload_callback(ImagePreload.images[image]);
				}
			}, 100);
		}
	}
};
$(document).unload(function () {
	for(var i=0,j=ImagePreload.images.length; i<j; i++)
		ImagePreload.images[i] = null;
});

/**
 * Lightbox class
 * Used to show images/image groups in a popup-like window
 */
Lightbox_html = '<div class="lightbox popup-3" id="lightbox">' + 
				'<table width="100%"><tr><td class="lt"><!-- --></td><td class="t"><!-- --></td><td class="rt"><!-- --></td></tr>' + 
				'<tr><td class="l"><!-- --></td><td class="c">' + 
					'<div class="image">' +
						'<div id="lightbox-loading" class="loading"><!-- --></div>' +  
						'<img id="lightbox-image" src="/img/px.gif" alt="" />' +
					'</div>' +
					'<div id="lightbox-description" class="description"></div>' +  
					'<div class="clearInner">' + 
						'<a class="previous" href="#previous" id="lightbox-previous"></a>' +
						'<a class="close" href="#close" id="lightbox-close"></a>' +
						'<a class="next" href="#next" id="lightbox-next"></a>' +
					'</div>' + 
				'</td><td class="r"><!-- --></td></tr>' + 
				'<tr><td class="lb"><!-- --></td><td class="b"><!-- --></td><td class="rb"><!-- --></td></tr></table>' + 
				'</div>';

Lightbox = {
	/* Image groups, each group consists of an array of object where each has 'image' and 'description' keys */
	groups: {},
	/* Locale settings */
	locale: {
			previous: 'Previous',
			next: 'Next',
			close: 'Close'
		},
	/* HTML id attributes, CSS settings */
	html_css: {
		lightbox: '#lightbox',
		image: '#lightbox-image',
		description: '#lightbox-description',
		previous: '#lightbox-previous',
		close: '#lightbox-close',
		next: '#lightbox-next',
		container: 'body',
		loading: '#lightbox-loading',
		
		image_padding_sides: 62
	},
	/* Current lightbox properties */
	current: {
		group_id: null,
		image_index: 0,
		image_count: 0,
		initialized: false
	},
	/* Open lightbox */
	open: function (group_id, image_index)
	{
		var was_visible = false;
		
		if (!Lightbox.current.initialized)
		{
			$('body').prepend(Lightbox_html);
			
			$(Lightbox.html_css.next).html(Lightbox.locale.next);
			$(Lightbox.html_css.previous).html(Lightbox.locale.previous);
			$(Lightbox.html_css.close).html(Lightbox.locale.close);
			
			var _group_id = group_id;
			var _image_index = image_index;
			
			$(Lightbox.html_css.close).click(function () {
				Lightbox.close();
			});
			$(Lightbox.html_css.next).click(function () {
				if (Lightbox.current.image_index < Lightbox.current.image_count - 1)
				{
					Lightbox.open(Lightbox.current.group_id, Lightbox.current.image_index+1);
				}
			});
			$(Lightbox.html_css.previous).click(function () {
				if (Lightbox.current.image_index > 0)
				{
					Lightbox.open(Lightbox.current.group_id, Lightbox.current.image_index-1);
				}
			});
			
			Lightbox.current.initialized = true;
		}
		
		if (!Lightbox.groups[group_id]) return;
		if (!image_index || !Lightbox.groups[group_id].images[image_index])
			image_index = 0;
			
		if (Lightbox.current.group_id !== null)
		{
			was_visible = true;
		}
		
		Lightbox.current.group_id = group_id;
		Lightbox.current.image_index = image_index;
		Lightbox.current.image_count = Lightbox.groups[group_id].image_count;
		
		$(Lightbox.html_css.previous).css('visibility', (image_index > 0 ? 'visible' : 'hidden'));
		$(Lightbox.html_css.next).css('visibility', (image_index < Lightbox.current.image_count - 1 ? 'visible' : 'hidden'));
		
		$(Lightbox.html_css.loading).show();
		
		ImagePreload.preload(Lightbox.groups[group_id].images[image_index].image, function (image) {
			var w = image.width;
			var h = image.height;
			
			$(Lightbox.html_css.loading).hide().css('marginTop', Math.round(h/2) + 'px');
			
			var lightbox_w = image.width + Lightbox.html_css.image_padding_sides;
			var lightbox_w_half = Math.round(lightbox_w / 2);
			var screenheight_half = Math.round((window.innerHeight ? window.innerHeight : document.documentElement.clientHeight) / 2);
			
			var scrollpos = document.body.scrollTop;
			if (scrollpos == 0)
			{
			    if (window.pageYOffset)
			        scrollpos = window.pageYOffset;
			    else
			        scrollpos = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
			}
			
			if (was_visible)
			{
				$(Lightbox.html_css.description).slideUp('fast', function () {
					$(this).html(Lightbox.groups[group_id].images[image_index].description)
						   .slideDown('fast');
				});

				$(Lightbox.html_css.lightbox).animate({marginLeft: - lightbox_w_half + 'px', width: lightbox_w + 'px'}, function () {
					$(Lightbox.html_css.image).attr('src', image.src);
				});
			}
			else
			{
				var img_h = ($(Lightbox.html_css.image)[0].height > 1 ? 0 : image.height);
				var vertical_pos = screenheight_half - Math.round(($(Lightbox.html_css.lightbox).height() + img_h) / 2) + scrollpos;

				$(Lightbox.html_css.description).html(Lightbox.groups[group_id].images[image_index].description);
				$(Lightbox.html_css.image).attr('src', image.src);
				$(Lightbox.html_css.lightbox).css({top: vertical_pos + 'px', left: '50%', marginLeft: - lightbox_w_half + 'px', width: lightbox_w + 'px'})
												   .slideDown('fast');
			}
		});
	},
	/* Close lightbox */
	close: function ()
	{
		if (Lightbox.current.group_id !== null)
		{
			Lightbox.current.group_id = null;
			Lightbox.current.image_index = null;
			Lightbox.current.count = null;
			
			$(Lightbox.html_css.lightbox).slideUp('fast');
		}
	},
	/* Class constructor */
	init: function ()
	{
		$('a[rel~="lightbox"]').each(function () {
			var group = $(this).attr('rel');
			
			
			
			var target = $(this).attr('href');
			var description = '<p>' + $(this).attr('title') + '</p>';
			var image_index = null;
			//Image index contains [imageurl -> index in the list] 
			if (!Lightbox.groups[group]) Lightbox.groups[group] = {images: [], image_index: {}, image_count: 0};
			
			if (Lightbox.groups[group].image_index[target] === undefined)
			{
				Lightbox.groups[group].images[Lightbox.groups[group].image_count] = {'image': target, 'description': description};
				Lightbox.groups[group].image_index[target] = Lightbox.groups[group].image_count;
				Lightbox.groups[group].image_count++;
			}
			
			this.lightbox_group = group;
			this.lightbox_image = Lightbox.groups[group].image_index[target];
			
			$(this).click(function () {
				Lightbox.open(this.lightbox_group, this.lightbox_image);
				return false;
			});
		});
	}
};

$(window).bind('load', function () {
	Lightbox.init();
});