$j(function()
{
	var carousels = $j('.carousel');
	
	var lists = carousels.find('> ul');
	
	carousels.css('height', '200px');
	
	lists.hide();
	
	setTimeout(function()
	{
		// Due bugs in browsers using percentages, we need to specify a fixed width to the carousel container.
		// I do not know a way to fix this using CSS, so we will be using a little bit JavaScript to fix the problem.
		// It is not a good idea to force people to set the width using CSS, because designers will forget this.
		carousels.each(function()
		{
			var carousel = $j(this);
			
			var container = $j(this).parents(':not(span):first');
			
			var width = container.width();
			
			carousel.data('item_width', Math.floor(width / 3) - 3);
			
			container.width(width);
		})
		.startWaiting();
		
		setTimeout(function()
		{
			carousels.stopWaiting();
			
			lists.show();
			
			if ($j.browser.msie && $j.browser.version.substring(0, 1) <= 6)
			{
				carousels.addClass('staticCarousel');
			}
			else
			{
				carousels.jcarousel(
				{
					auto: 2,
					wrap: 'last',
					visible: 3,
					animation: 2000
				});
			}
			
			carousels.each(function()
			{
				var carousel = $j(this);
				
				var images = carousel.find('ul img');
				
				var totalHeight = 0;
				
				var length = images.length;
				
				var items = carousel.find('.jcarousel-item').add(images).width(carousel.data('item_width'));
				
				images.each(function()
				{
					var height = $j(this).height();
					
					if (height > 5)
					{
						totalHeight += height;
					}
					else
					{
						--length;
					}
				});
				
				var avarageHeight = Math.floor(totalHeight / length);
				
				items.add(carousel).height(avarageHeight);
			});
		},
		1500);
	},
	500);
});

/*
function repeat(str, n)
{
	return new Array(n + 1).join(str);
}

$j('.carousel').each(function()
{
	var $container = $j(this);
	console.log($container, 'container');
	
	var $slider = $container.find('> ul');
	console.log($slider, 'slider');
	
	var $wrapper = $j('<div class="wrapperCarousel"></div>').css('overflow', 'hidden');
	$slider.wrap($wrapper);
	console.log($wrapper, 'wrapper');
	
	var $items = $slider.find('> li');
	console.log($items, 'items');
	
	var $single = $items.filter(':first');
	console.log($single, 'single');
	
	// outerWidth: width + padding (doesn't include margin)
			singleWidth = $single.outerWidth(), 
console.log(singleWidth);
			console.log($wrapper.innerWidth());
			// NOTE: doesn't include padding or border
	visible = Math.ceil($wrapper.innerWidth() / singleWidth), 
	currentPage = 1,
	pages = Math.ceil($items.length / visible);
	console.log(visible);
	console.log($items.length);
	console.log(visible - ($items.length % visible));
	// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
	if (($items.length % visible) != 0) {
	    $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
	    $items = $slider.find('> li');
	}

	// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
	$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
	$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
	$items = $slider.find('> li'); // reselect

	// 3. Set the left position to the first 'real' item
	$wrapper.scrollLeft(singleWidth * visible);

	// 4. paging function
	function gotoPage(page) {
	    var dir = page < currentPage ? -1 : 1,
	        n = Math.abs(currentPage - page),
	        left = singleWidth * dir * visible * n;
	    
	    $wrapper.filter(':not(:animated)').animate({
	        scrollLeft : '+=' + left
	    }, 500, function () {
	        if (page == 0) {
	            $wrapper.scrollLeft(singleWidth * visible * pages);
	            page = pages;
	        } else if (page > pages) {
	            $wrapper.scrollLeft(singleWidth * visible);
	            // reset back to start position
	            page = 1;
	        } 

	        currentPage = page;
	    });                
	    
	    return false;
	}

	$wrapper.after('<a class="arrow back">&lt;</a><a class="arrow forward">&gt;</a>');

	// 5. Bind to the forward and back buttons
	$('a.back', this).click(function () {
	    return gotoPage(currentPage - 1);                
	});

	$('a.forward', this).click(function () {
	    return gotoPage(currentPage + 1);
	});

	// create a public interface to move to a specific page
	$(this).bind('goto', function (event, page) {
	    gotoPage(page);
	});

	
	var width = container.width();
	
	container.width(width);
});
*/