jQuery(function ($) {
	var carouselWidth, // Calculated carousel width, for IE9, which needs the width tweaking.
		currentCarouselWidth, // Existing carousel width.
		carouselItemWidth, // The width of a carousel item.
		carouselItemMarginWidth, // The sum of the widths of the margins of carousel items.
		carouselImageWidth, // The width of an image in the carousel.
		carouselImageBorderWidth, // And the combined widths of its left and right borders.
		itemCount = SYMPLECTIC.plugins.jCarousel.itemCount,
		visibleItemCount = SYMPLECTIC.plugins.jCarousel.visibleItemCount;

	if (itemCount > visibleItemCount) {
		$("#carousel-list").jcarousel({
			scroll: visibleItemCount,
			visible: visibleItemCount,
			size: itemCount,
			buttonNextHTML: "<a href='javascript:;'></a>",
			buttonPrevHTML: "<a href='javascript:;'></a>",
			wrap: "last"
		});
	} else {
		$("#carousel-list").jcarousel({
			scroll: visibleItemCount,
			visible: visibleItemCount,
			size: itemCount,
			buttonNextHTML: "",
			buttonPrevHTML: "",
			wrap: "last"
		});
	}

	// Need to resize carousel for IE 9. Resizing doesn't affect behaviour for other browsers.
	// ... indeed we do (ALG 09/01/12), but this isn't enough of a resize:
	// carousel_width = Math.ceil($("#carousel-list").width() * 600 / 596);
	// Also, magic numbers are not very helpful...

	// Note that at 09/01/12, the IE9 width problem is only evident if using IE9 with compatibility 
	// mode switched off.

	// Let's pick up the current width.  We'll never want the carousel to get narrower.
	currentCarouselWidth = $('#carousel-list').width();

	// Now to calculate our expected required size.
	// We're going to cheat and use our knowledge about element sizes, margin widths etc. to work this out.
	// It would be better to derive the values from the page itself, but at this point the item widths aren't
	// adequately set, as far as I can tell.
	carouselItemWidth = 105; // Item width is 105px. Inline style, probably dynamically set.
	carouselImageWidth = 103; // Image width is 103px.  Explicitly set on the <img> tag - not a style.
	carouselImageBorderWidth = 6; // Image border is 3px wide.  Set in the content.css stylesheet.
	// We happen to know that there are no margins on the image, and that the surrounding <a> has no
	// padding, borders or margins.  We also happen to know that there's no padding, and no border, on
	// the carousel item (an <li>).

	// Weirdly, the image width plus its borders tends to exceed the width of the surrounding <li>.
	// This may be responsible for the original problem.
	if ((carouselImageWidth + carouselImageBorderWidth) > carouselItemWidth) {
		carouselItemWidth = carouselImageWidth + carouselImageBorderWidth;
	}

	// Next up, we have a width defined in em in content.css.  We need a safe way to convert that
	// to px.  Here it is, mostly courtesy of 
	// http://chrissilich.com/blog/convert-em-size-to-pixels-with-jquery/ :
	function emToPx(input) {
		var emSize = Math.ceil(parseFloat($("body").css("font-size")));
		return (emSize * input);
	}

	// We know that the carousel item has a right margin, though no left one, and that it's defined
	// in content.css as 1.9em.
	carouselItemMarginWidth = emToPx(1.9);

	carouselWidth = itemCount * (carouselItemWidth + carouselItemMarginWidth);

	if (carouselWidth > currentCarouselWidth) {
		// Press on and change the width, as it's too narrow at present.
		$("#carousel-list").width(carouselWidth);
		// Tested on numbers of items from 0 to 10.  09/01/12.  Tested on IE9 with and without
		// compatibility mode, FF and Chrome.
	}
});