var THUMB_WIDTH = 71;
	var IMG_ADDITIONAL_WIDTH = 7; // margin-right
	var EXTRA_WIDTH_RIGHT = 407;
	
	var selectedIndex = 0;
	var thumbOffset = 0;
	var imageOffsets = new Array();
	var numImages;
	
	$(document).ready(function(){
		
		var imgListItems = $(".images-clip li.img");
		var imagesToLoad = $(imgListItems).size() * 2;
		var counter = 1;
		
		$(imgListItems).each(function(){
		    
			var li = $(this);
			
			var img = new Image();
			$(img).load(function(){
				$(li).append(img);
				if(--imagesToLoad == 0) {
					initImages();
				}
			}).attr("src", "/images/look/images/image" + counter + ".jpg");
			
			var img2 = new Image();
			$(img2).load(function(){
				$(li).append(img2);
				if(--imagesToLoad == 0) { initImages(); }
			}).attr("src", "/images/look/blurred/b-image" + counter + ".jpg").addClass("blurred");
			
			counter++;
		});
		
		$(".thumbs .left").click(function(){
			if(selectedIndex > 0) {
			    goToImage(selectedIndex-1);
			}
		});
		
		$(".thumbs .right").click(function(){
			if(selectedIndex < numImages-1) {
			    goToImage(selectedIndex+1);
			}
		});
		
		$(".thumbs li").click(function() {
			var img = $(this).children("img").attr("class");
			goToImage(parseInt(img.substring(4,img.length)));
		});
		
		$(".images-clip li[class]").click(function() {
			var img = $(this).attr("class");
			goToImage(parseInt(img.substring(4,img.length)));
		});
		
	});
	
	function animateMarginLeft(selector, value, speed) {
		$(selector).animate({
			marginLeft: value + "px"
		}, speed);
	}

	function goToImage(index) {
		
		//check if this image is already selected
		if(selectedIndex == index) return;
		
		selectedIndex = index;
		var img = "img-"+index;
		
		$(".thumbs li.selected").removeClass("selected");
		$(".thumbs li:has(img."+img+")").addClass("selected");
		
		//check for selected thumb off right side
		if(selectedIndex*THUMB_WIDTH >= $(".thumbs-clip").width() - thumbOffset) {
			thumbOffset = $(".thumbs-clip").width() - (selectedIndex+1)*THUMB_WIDTH;
			animateMarginLeft(".thumbs-clip ul", thumbOffset, 250);
		}
		
		//check for selected thumb off left side
		if(selectedIndex*THUMB_WIDTH + thumbOffset < 0) {
			thumbOffset = selectedIndex * THUMB_WIDTH * -1;
			animateMarginLeft(".thumbs-clip ul", thumbOffset, 250);
		}
		
		animateMarginLeft(".images-clip ul", imageOffsets[selectedIndex], 500);
		$(".images-clip .blurred:hidden").fadeIn("slow"); // blur old image
		$("." + img + " .blurred").fadeOut("slow"); // unblur new image
	}
	
	function initImages() {
		var totalWidth = 0;
		var counter = 0;
		$(".images-clip li.img").each(function(){
			imageOffsets[counter] = Math.ceil((800 - $(this).width()) / 2) - totalWidth;
			totalWidth += $(this).width() + IMG_ADDITIONAL_WIDTH;
			$(this).removeClass("img");
			$(this).addClass("img-"+counter);
			counter++;
		});
        numImages = counter;
		imageOffsets[0] = 0; // make first image flush left
		totalWidth += EXTRA_WIDTH_RIGHT;
		$(".images-clip ul").attr("style", "width: " + totalWidth + "px; margin-left: " + imageOffsets[0] + "px;");
		
		//hide loading and show images
		$(".images-clip .img-0 .blurred").hide();
		$(".images-clip .loading").fadeOut("slow");
	}