Spotlight & Preview - Carousel

Illustrates how to spotlight the middle item in the carousel. Several techniques illustrated:

• Highlight the middle item by switching between a style class 'non-spotlight' (all other visible items have this class) with the style class 'spotlight')
• To accomplish the offset start (so that item 1 starts in the middle) set scrollBeforeAmount to 2 and scrollAfterAmount to 2. This will allow scrolling between -1 and 17, yet loads only happen from 1 to 15 (size). Also the firstVisible is set to -1.
• The slight bounce is accomplished by setting the animationMethod to YAHOO.util.Easing.backBoth.
• carousel.addItem() now allows a third parameter: itemClass that we initially set to 'non-spotlight'
• When the user hits next or previous we turn off the spotlight (switching classes) for the previous middle (which is actually the previous firstVisible -- carousel.priorFirstVisible) and highlight the new one
• Clicking on an image in the carousel will scroll to the item and show it in the preview.

The full configuration for this carousel is:

	carousel = new YAHOO.extension.Carousel("dhtml-carousel", 
		{
			numVisible:         5,
			animationSpeed:     0.6,
			animationMethod:    YAHOO.util.Easing.backBoth,
			scrollInc:          1,
			navMargin:          40,
			scrollBeforeAmount: 2,
			firstVisible:       -1,
			size:               15,
			scrollAfterAmount:  2,
			prevElement:        "prev-arrow",
			nextElement:        "next-arrow",
			loadInitHandler:    loadInitialItems,
			loadNextHandler:    loadNextItems,
			loadPrevHandler:    loadPrevItems,
			prevButtonStateHandler:   handlePrevButtonState,
			nextButtonStateHandler:   handleNextButtonState,
			animationCompleteHandler: completeHandler
		}
	);