/**
			 * Custom button state handler for enabling/disabling button state. 
			 * Called when the carousel has determined that the previous button
			 * state should be changed.
			 * Specified to the carousel as the configuration
			 * parameter: prevButtonStateHandler
			 **/
			var handlePrevButtonState = function(type, args) {
			
				var enabling = args[0];
				var leftImage = args[1];
				if(enabling) {
					leftImage.src = "/images/left-enabled.gif";	
				} else {
					leftImage.src = "/images/left-disabled.gif";	
				}
				
			};
			
			/**
			 * Custom button state handler for enabling/disabling button state. 
			 * Called when the carousel has determined that the next button
			 * state should be changed.
			 * Specified to the carousel as the configuration
			 * parameter: nextButtonStateHandler
			 **/
			var handleNextButtonState = function(type, args) {
			
				var enabling = args[0];
				var rightImage = args[1];
				
				if(enabling) {
					rightImage.src = "/images/right-enabled.gif";
				} else {
					rightImage.src = "/images/right-disabled.gif";
				}
				
			};
			
			
			/**
			 * You must create the carousel after the page is loaded since it is
			 * dependent on an HTML element (in this case 'mycarousel'.) See the
			 * HTML code below.
			 **/
			var carousel; // for ease of debugging; globals generally not a good idea
			var pageLoad = function() 
			{
				carousel = new YAHOO.extension.Carousel("mycarousel", 
					{
						numVisible:        4,
						animationSpeed:    0.15,
						scrollInc:         3,
						navMargin:         40,
						prevElement:     "prev-arrow",
						nextElement:     "next-arrow",
						size:              10,
						prevButtonStateHandler:   handlePrevButtonState,
						nextButtonStateHandler:   handleNextButtonState
					}
				);
			
			};
			
			YAHOO.util.Event.addListener(window, 'load', pageLoad);