$(document).ready(function() {


	$(".folio_block").each(function() {
	
		//Set Default State of each portfolio piece
		$(this).find(".paging").show();
		$(this).find(".paging a:first").addClass("active");
		
		//Inject <span> for Tool tip
		$(this).find(".image_reel a").append("<span></span>");
		$(this).find(".image_reel span").css({"opacity" : "0"});
													
		//Get size of images, how many there are, then determin the size of the image reel. Bytter rundt på height og width
		var windowWidth = $(this).find(".image_reel span").width();
		var imageSum = $(this).find(".image_reel img").size();
		var imageReelWidth = windowWidth * imageSum;
		
		//Adjust the image reel to its new size
		$(this).find(".image_reel").css({'width' : imageReelWidth});
	
	});	

	//Hover Effect for Tooltip
	$(".image_reel a").hover(function() {
		$(this).find("span").stop().animate({ opacity: 0.7}, 200 ).show();
	}, function() {
		$(this).find("span").stop().animate({ opacity: 0}, 200 );
	});

	//Pagin events
	$(".paging a").click(function() {
	
		var triggerID = $(this).attr("rel") - 1;
		var imgWidth = $(this).parent().parent().find("img").width();
		var image_reelPosition = triggerID * imgWidth;
		
		//Ignore if Active
		if ( $(this).hasClass("active")) { 
			//Do Nothing
		}
		else {
			//Set active paging
			$(this).parent().parent().find(".paging a").removeClass("active");
			$(this).addClass("active");

			//image_reel Image
			$(this).parent().parent().find(".image_reel").animate({ 
				left: -image_reelPosition
			}, 300 );
		}
		return false;
	});

});