$(document).ready(function() {
	$('.color').each(function() {
		var total = $('.color').length;
		$(this).css('width', 570 / total + 'px');
	});
	$('.filmstrip').each(function() {
		var visibleWidth = $(this).find('.thumbnails').width();
		var totalWidth = 0;
		$(this).find('.list').children().each(function() {
			totalWidth += $(this).outerWidth()+3;
		});
		$(this).find('.list').width(totalWidth-3);
		$(this).find('.arrow_right').click(function() {
			var el = $(this).parent().find('.list');
			var totalWidth = el.width();
			var visibleWidth = $(this).parent().find('.thumbnails').width();
			var left = el.css('left').replace(/px/g, '')*-1;
			var right = totalWidth-visibleWidth-left;
			var newleft = left;
			if (right > 0)
				if (right > visibleWidth) newleft  = left+visibleWidth;
				else newleft = left+right;
			el.animate({ left: -1*newleft }, 1000);
		});
		$(this).find('.arrow_left').click(function() {
			var el = $(this).parent().find('.list');
			var totalWidth = el.width();
			var visibleWidth = $(this).parent().find('.thumbnails').width();
			var left = el.css('left').replace(/px/g, '')*-1;
			var newleft = left;
			if (left > 0)
				if (left > visibleWidth) newleft = left-visibleWidth;
				else newleft = 0;
			el.animate({ left: -1*newleft }, 1000);
		});
		$(this).find('.small_img').click(function() {
			var smallimage = $(this);
			var bigimage = $(this).parent().parent().parent().parent().parent().find('.big_image');
			bigimage.animate({ opacity: 0 }, 500, function() { bigimage.attr('src', smallimage.attr('href')); });
			bigimage.animate({ opacity: 1 }, 500);
		});
	});
});