var animationTime = 800;
var shortAnimationTime = 300;
var viewerWidth  = null;
var viewerHeight = null;

$(document).ready(function() {
	// Highlight active links
	var documentPath  = window.location.href;
	var documentSplit = documentPath.split('?');
	var documentArgs  = '?'+documentSplit[documentSplit.length - 1];
	$('#nav a, .subnav a').each(function() {
		if($(this).attr('href') == documentArgs) {
			$(this).addClass('active');
		}
	});

	// Load the images
	viewerWidth  = $('#viewer').width();
	viewerHeight = $('#viewer').height();

	if(galleryImages && galleryImages.length > 0)
	{
		var currentImage = $(new Image());
		currentImage.attr('src', galleryImages[0]);
		currentImage.attr('id', 'big-image-0');
		currentImage.load(function() {
			$('#viewer').append(this);
			$(this).data('defaultWidth',  $(this).width());
			$(this).data('defaultHeight', $(this).height());
			$('#image-0').addClass('loaded').click();

			loadImage(1);
		}).error(function() {
			loadImage(1);
		});

		// Resizing
		$(window).resize(function() {
			var i = parseInt($('#viewer img:visible').attr('id').substring(10));
			imagePosition(i);
		});
	}

	// Reset last scrolling
	$('#gallery div').scrollLeft(0);

	$('#gallery li').click(function() {
		if($(this).is('.loaded') && !$(this).is('.active'))
		{
			var i = parseInt($(this).attr('id').substring(6));
			
			imagePosition(i);
			
			$('#gallery li').removeClass('active');
			$(this).addClass('active');
			$('#viewer img:visible').fadeOut(animationTime);
			$('#big-image-'+i).fadeIn(animationTime);
		}
	}).hover(function() {
		if($(this).is('.loaded'))
		{
			$(this).animate({opacity: 1.0}, shortAnimationTime);
		}
	}, function() {
		if($(this).is('.loaded'))
		{
			$(this).animate({opacity: 0.8}, shortAnimationTime);
		}
	});
});

$(window).load(function() {
	var width = 0;

	$('#gallery li').each(function() {
		width += $(this).width();
		width += parseInt($(this).css('margin-left').match(/[0-9]+/));
		width += parseInt($(this).css('margin-right').match(/[0-9]+/));
		width += parseInt($(this).css('border-left-width').match(/[0-9]+/));
		width += parseInt($(this).css('border-right-width').match(/[0-9]+/));
	});

	$('#gallery ul').css('width', width);

	$('#gallery ul').scroll('#gallery-left', '#gallery-right');
});

function loadImage(i)
{
	// Check whether the image exists
	if(galleryImages[i])
	{
		var loaderImage = $(new Image());
		loaderImage.attr('src', galleryImages[i]);
		loaderImage.attr('id', 'big-image-'+i);
		loaderImage.load(function() {
			$('#viewer').append(this);
			$(this).data('defaultWidth',  $(this).width());
			$(this).data('defaultHeight', $(this).height());
			$('#image-'+i).addClass('loaded');

			loadImage(i+1);
		}).error(function() {
			loadImage(i+1);
		});
	}
	// All images were loaded
	else
	{

		$('#viewer img').click(function() {
			var i = parseInt($('#viewer img:visible').attr('id').substring(10));
			$('#image-'+(i+1)).click();
		});
	}
}

function imagePosition(i)
{
	var image  = $('#big-image-'+i);

	var windowWidth = $(window).width() - 120;
	var imageDefaultWidth  = image.data('defaultWidth');
	var imageDefaultHeight = image.data('defaultHeight');

	var ratio = imageDefaultWidth / imageDefaultHeight;
	var newWidth;

	if(windowWidth > imageDefaultWidth)
	{
		newWidth = imageDefaultWidth;
	}
	else if(windowWidth < viewerWidth)
	{
		newWidth = viewerWidth;
	}
	else
	{
		newWidth = windowWidth;
	}

	var newHeight = newWidth / ratio;

	if(newHeight > viewerHeight)
	{
		image.height(newHeight);
	}
	else
	{
		image.width(newWidth);
	}

	image.css('left', (viewerWidth  - image.width())  / 2);
	image.css('top',  (viewerHeight - image.height()) / 2);
}