$(document).ready( function(){
	
		// Kutistetaan pikkukuvat 
		$(".contentImageArea img:each").css({
			'width':'50px',
			'height':'43px'
		})
		.addClass("tinyPic");
		
		// Dimmataan pikkukuvat hoverilla 
		$("#zone-_main .captionWrap").css({
			'opacity':'0.9'
		});
		$("#zone-_main .captionWrap").hover( function(){
			$(this).animate({
				'opacity':'1'
			}, "fast");
		}, function(){
			$(this).animate({
				'opacity':'0.9'
			}, "fast")
		});				
		
		
		// Vaihdetaan klikistä kuvaa
		$(".content-container").each( function(){
		
			// Haetaan listauksen ensimmäinen kuva isoksi 
			var LargePic = $(this).find(".captionWrap img").attr("src");
			var checkImgLink = $(this).find(".captionWrap").find("a");
			var imgHasLink = $(this).find(".captionWrap").find("a").attr("href");
			var imgHasText = $(this).find(".caption").html();
			
			// Luodaan "katseluikkuna" ja annetaan sorsaksi ensimmäisen kuvan src
			if (LargePic) {
				$(this).prepend('<div class="previewImage"><img class="largePic" src="'+LargePic+'"/></div>');
			}	
			if (imgHasText) {
				$(this).find(".previewImage").append('<p class="previewText></p>');
			}
			
			if (typeof(imgHasLink)!="undefined") {
				$(this).find(".previewImage img").wrap('<a target="_blank" href="'+ imgHasLink +'"></a>');
			}
			
			$(this).find(".tinyPic").click( function(){
		
				// Poistetaan pikkukuvien "kuva on linkki suurennokseen" -linkit ja siirretään ne myöhemmin isoon kuvaan
				var imgLink = $(this).closest("a").attr("href");
				
				// Jatketaan onclick-eventtia
				var NewPicSrc = $(this).attr("src");
				$(this).closest(".content-container").find(".previewImage img").fadeOut("slow", function() {
					$(this).closest(".content-container").find(".previewImage .previewText").html(imgHasText);
					$(this).attr("src", NewPicSrc);
					if (imgLink) {
						$(this).wrap('<a target="_blank" href="'+ imgLink +'"></a>');
						return;
					}	
				})
				.fadeIn("slow");
				return false;
			});
			$(this).append('<hr class="clear" />');
		});
	
	});