var current_gal = "#img-gallery";
var img;
$(function () {
	//$('body').append('<p id="img-name"></p>');
	$('#thumbnails p:first').show();
	
	$('#gallery a').click(function (e) {
		e.preventDefault();
		
		displayImg($(this).attr('href'));
	});
	
	$('#gallery-nav a').click(function (e) {
		e.preventDefault();
		
		var id = $($(this).attr('href'));
		current_gal = $(this).attr('href');
		$('h3 span').text($(this).text());
		$('#thumbnails p').hide();
		$(id).fadeIn('slow');
	});
	
	displayImg = function (path)
	{
		
		//$('#img-name').text(path);
		$('#next,#previous').unbind();
		
		img = new Image();
		img.id = 'the-image';
		img.src = path;
		
		if ($('#img-container').length > 0)
		{
			$('#img-container a').unbind();
			$('#img-container').append('<p id="loading">Loading...</p>');
			$('#img-container div, #img-container span#img').remove();
			$('#img-container').animate({
				marginLeft: '-200px',
				width: '400px',
				height: '200px',
				top: '200px'
			}, 300, function () {
				
			});
			
		}
		else
		{
			$('#container').append('<div id="overlay"><span></span></div>');
			$('#container').append('<div id="img-container" style="display:none; "><p><a href="#"><img src="/images/x.png"></a></p><p id="loading">Loading...</p></div>');
			$('#img-container').css({
				top: '200px',
				marginLeft: '-200px',
				width: '400px',
				height: '200px'
			}).fadeIn();
		}
		
		if (img.complete)
			renderImg();
		else
			img.onload = renderImg;
	};
	
	renderImg = function ()
	{
		$('#img-container #loading').remove();
		$('#img-container').animate({
			marginTop : 0,
			top: '40%',
			position: 'absolute',
			marginLeft : -img.width / 2,
			width: img.width,
			height: img.height + 50}, 300,
			function() {
				//$(img).css('display', 'none');
				$('#img-container').append('<span style="display:none" id="img"></span>');
				$('#img-container #img').append(img);
				
				$('#img-container span#img').fadeIn('fast');
				$('#img-container').append('<div id="next"><span><a href="#">Next &gt;</a></span></div>')
				$('#img-container').append('<div id="previous"><span><a href="#">&lt; Previous</a></span></div>')
				
				$('#next a').click(function (e) {
					e.preventDefault();

					var src = $('#the-image').attr('src');
					var a = $('a[href='+src+']');
					var list = $(a).parent().find('a');
					var id = $(current_gal + ' a').index(a);
				
					id++;

					if (id >= list.length) { id = 0; }

					displayImg($(list[id]).attr('href'));
				});
				
				$('#previous a').click(function(e) {
					e.preventDefault();
					var src = $('#the-image').attr('src');
					var a = $('a[href='+src+']');
					var list = $(a).parent().find('a');
					var id = $(current_gal + ' a').index(a);

					id--;

					if (id < 0) { id = list.length - 1; }

					displayImg($(list[id]).attr('href'));
				});



				$('#img-container a, #overlay').click(function (e) {
					e.preventDefault();

					$('#img-container').fadeOut('fast', function () {
						$('#img-container').remove();
					});


					$('#overlay').remove();
				});
			});
	}
	
});