$(function() {
		
		var current = -1;
		var totalpictures = $('#content img').size();
		var speed 	= 500;
		
		$('#content').show();

		$(window).bind('resize', function() {
				var $picture = $('#wrapper').find('img');
				resize($picture);
		});
	 
		$('#content > img').hover(function () {
				var $this   = $(this);
				$this.stop().animate({'opacity':'1.0'},200);
		},function () {
				var $this   = $(this);
				$this.stop().animate({'opacity':'0.6'},200);
		}).bind('click',function(){
				var $this   = $(this);
				
				$('#loading').show();
				
				$('<img/>').load(function(){
						$('#loading').hide();
						
						if($('#wrapper').find('img').length) return;
						current 	= $this.index();
						var $theImage   = $(this);
						
						resize($theImage);

						$('#wrapper').append($theImage);
						
						$theImage.fadeIn(800);
						
						$('#panel').animate({'height':'100%'},speed,function(){
								
								var title = $this.attr('title');
								if(title != '') 
										$('#description').html(title).show();
								else 
										$('#description').empty().hide();
								
								if(current==0)
										$('#prev').hide();
								else
										$('#prev').fadeIn();
								if(current==parseInt(totalpictures-1))
										$('#next').hide();
								else
										$('#next').fadeIn();

								$('#thumbsWrapper').css({'z-index':'0','height':'0px'});
						});
				}).attr('src', $this.attr('alt'));
		});

		$('#wrapper > img').live('click',function(){
				$this = $(this);
				$('#description').empty().hide();
				
				$('#thumbsWrapper').css('z-index','10')
				.stop()
				.animate({'height':'100%'},speed,function(){
						var $theWrapper = $(this);
						$('#panel').css('height','0px');
						$theWrapper.css('z-index','0');
						$this.remove();
						$('#prev').hide();
						$('#next').hide();
				});
		});

		$('#next').bind('click',function(){
				var $this           = $(this);
				var $nextimage 		= $('#content img:nth-child('+parseInt(current+2)+')');
				navigate($nextimage,'right');
		});
		$('#prev').bind('click',function(){
				var $this           = $(this);
				var $previmage 		= $('#content img:nth-child('+parseInt(current)+')');
				navigate($previmage,'left');
		});

		function navigate($nextimage,dir){
			
				if(dir=='left' && current==0)
						return;
				if(dir=='right' && current==parseInt(totalpictures-1))
						return;
				$('#loading').show();
				$('<img/>').load(function(){
						var $theImage = $(this);
						$('#loading').hide();
						$('#description').empty().fadeOut();
						 
						$('#wrapper img').stop().fadeOut(500,function(){
								var $this = $(this);
	
								$this.remove();
								resize($theImage);
								
								$('#wrapper').append($theImage.show());
								$theImage.stop().fadeIn(800);

								var title = $nextimage.attr('title');
								if(title != ''){
										$('#description').html(title).show();
								}
								else
										$('#description').empty().hide();

								if(current==0)
										$('#prev').hide();
								else
										$('#prev').show();
								if(current==parseInt(totalpictures-1))
										$('#next').hide();
								else
										$('#next').show();
						});
						
						if(dir=='right')
								++current;
						else if(dir=='left')
								--current;
				}).attr('src', $nextimage.attr('alt'));
		}

		function resize($image){
				var windowH      = $(window).height()-100;
				var windowW      = $(window).width()-80;
				var theImage     = new Image();
				theImage.src     = $image.attr("src");
				var imgwidth     = theImage.width;
				var imgheight    = theImage.height;

				if((imgwidth > windowW)||(imgheight > windowH)){
						if(imgwidth > imgheight){
								var newwidth = windowW;
								var ratio = imgwidth / windowW;
								var newheight = imgheight / ratio;
								theImage.height = newheight;
								theImage.width= newwidth;
								if(newheight>windowH){
										var newnewheight = windowH;
										var newratio = newheight/windowH;
										var newnewwidth =newwidth/newratio;
										theImage.width = newnewwidth;
										theImage.height= newnewheight;
								}
						}
						else{
								var newheight = windowH;
								var ratio = imgheight / windowH;
								var newwidth = imgwidth / ratio;
								theImage.height = newheight;
								theImage.width= newwidth;
								if(newwidth>windowW){
										var newnewwidth = windowW;
										var newratio = newwidth/windowW;
										var newnewheight =newheight/newratio;
										theImage.height = newnewheight;
										theImage.width= newnewwidth;
								}
						}
				}
				$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
		}
});