$(document).ready(function(event) {


	if($('.posti').length > 0){
		var str = $('.posti').html();
		str = str.replace(/piste/ig, ".");
		str = str.replace(/\(ät\)/ig, "@");
		str = str.replace(/\s/g, "");
		$('.posti').html(str);		
	}

	
	$("#navi").hide();
	$("#thumbnails").hide();
	
	var totalpictures = $('#thumbnails img').size();

	var current = 0;
	
	var debug;
	
	resize($('#wrapper img'));
	
	$(window).bind('resize', function() {
		var $picture = $('#wrapper img');
		resize($picture);
	});	
	

	
	$('#prev img').css({ opacity: 0.4 });
	
	$('#prev img, #next img').hover(
	  function () {
		$(this).css({ opacity: 0.4 });
	  }, 
	  function () {
		$(this).css({ opacity: 1 });
	  }
	);
	
	
	$('#thumbnails img:eq(0)').css('border', '2px solid #FF3A68');
	
	$(document).keydown(function(e){
		if (e.keyCode == 37) { 
			var $previmage 		= $('#thumbnails img:eq('+parseInt(current-1)+')');
			navigate($previmage,'left');
		   return false;
		}
		if (e.keyCode == 39) { 
			var $nextimage 		= $('#thumbnails img:eq('+parseInt(current+1)+')');
			navigate($nextimage,'right');
		   return false;
		}
	});	 
	
	/*
	$('#portfolio').click(function() {
		$('#navi').fadeIn(250);
	});*/
				


	$('#navi-hover').hover(function() {
		$('#navi').fadeIn(250);
	});
		
	$("#navi-hover").mouseleave(function (event) { 
		$("#navi").fadeOut(250);
		$("#thumbnails").fadeOut(250);
	});	

	$('#hide-thumbnails').click(function (event){
		event.preventDefault();
		$("#thumbnails").hide();
	});
	
	$('#show-thumbnails').click(function (event){
		event.preventDefault();
		$("#thumbnails").toggle();
	});

	
	
	/*
	when we are viewing a large image,
	if we navigate to the right/left we need to know
	which image is the corresponding neighbour.
	we know the index of the current picture (current),
	so we can easily get to the neighbour:
	 */
	$('#next').bind('click',function(event){
		event.preventDefault();

		var $nextimage 		= $('#thumbnails img:eq('+parseInt(current+1)+')');
		navigate($nextimage,'right');
	});
	$('#prev').bind('click',function(event){
		event.preventDefault();

		var $previmage 		= $('#thumbnails img:eq('+parseInt(current-1)+')');
		navigate($previmage,'left');
	});	

	$('#wrapper').bind('click',function(event){
		var $nextimage 		= $('#thumbnails img:eq('+parseInt(current+1)+')');
		navigate($nextimage,'right');
	});

	$('#thumbnails img').bind('click',function(event){
		event.preventDefault();
		//$("#thumbnails").hide();
		
		$('#navi-hover').unbind('mouseenter mouseleave');	
		$("#thumbnails").fadeOut(250);	
		$("#navi").fadeOut(250);
		//$("#navi").hide();
		var $this = $(this);
		current = $this.attr('data-num');
		
		navigate($this, 'left');
		$('#navi-hover').bind('mouseenter', function() {
			$('#navi').fadeIn(250);
		});
		$('#navi-hover').bind('mouseleave', function() {
			$("#navi").fadeOut(250);
			$("#thumbnails").fadeOut(250);
		});
	});	
	

			
	/*
	given the next or previous image to show,
	and the direction, it loads a new image in the panel.
	 */
	function navigate($nextimage,dir){
		/*
		if we are at the end/beginning
		then there's no next/previous
		 */
		if(dir=='left' && current==-1)
			return;
		if(dir=='right' && current==parseInt(totalpictures))
			return;
		//$('#loading').show();
		$('<img alt="">').load(function(){
			var $theImage = $(this);
			//$('#loading').hide();
			$('#description').empty();

			
			var $this = $('#wrapper img');

			$this.remove();
			resize($theImage);

			$('#wrapper').append($theImage.show());
			//$theImage.stop().fadeIn(800);

			var title = $nextimage.attr('title').replace(new RegExp(" - ", "g" ), "<br>");
			

			
			$('#description').html(title).show();
				
				

			/*
			increase or decrease the current variable
			 */
			if(dir=='right')
				++current;
			else if(dir=='left')
				--current;

			if(current==0){
				
				$('#prev img').unbind('mouseenter mouseleave');
				
				$('#prev img').css({ opacity: 0.4 });

			}else{
				$('#prev img').css({ opacity: 1 });
				
				$("#prev img").hover(
				  function () {
					$(this).css({ opacity: 0.4 });
				  }, 
				  function () {
					$(this).css({ opacity: 1 });
				  }
				);	
			}			
			if(current==parseInt(totalpictures-1)){
				$('#next img').unbind('mouseenter mouseleave');
				$('#next img').css({ opacity: 0.4 });
			}else{
				$('#next img').css({ opacity: 1 });
				$("#next img").hover(
				  function () {
					$(this).css({ opacity: 0.4 });
				  }, 
				  function () {
					$(this).css({ opacity: 1 });
				  }
				);	
			}	
			$('#thumbnails img').css('border', '2px solid #fff');
			
			$nextimage.css('border', '2px solid #FF3A68');
			
			var current_str = (current+1) + "";
			
				// Add leading zero to current below 10
			if (current_str.length == 1)
			{
				current_str = "0" + current_str;
			}	
			$('#current-picture').empty().html(current_str);
		}).attr('src', $nextimage.attr('alt'));
	

	}
	/*
	resizes an image given the window size,
	considering the margin values
	 */
	function resize($image){
		var windowH      = $(window).height()-5;
		var windowW      = $(window).width()-5;
		var theImage     = new Image();
		theImage.src     = $image.attr("src");
		var imgwidth     = theImage.width;
		var imgheight    = theImage.height;
		
		if(windowW < 1000) return;
		
		// Deafult image size
		if(imgwidth == 0) imgwidth = 1600;
		if(imgheight == 0) imgheight = 1200;

		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;
				}
			}
		}
		
		if(theImage.width < 800){
			
		$('#navi-hover').css({'width':(theImage.width-65)+'px'});
		
		$('#thumbnails').css({'width':(theImage.width-65)+'px'});
		
		$('#content').css({'width':(theImage.width-65)+'px'});
		
		$('#main').css({'width':(theImage.width)+'px'});
		
		}
		
		$image.css({'width':theImage.width+'px','height':theImage.height+'px'});
		
		
	}	
		
	});

/*
	$(window).resize(function() {
		var img = $('.main-img');
		resize(img);
	});*/