var Carousel = function(carouselElementID, carouselCfg) {
 		this.init(carouselElementID, carouselCfg);
};

Carousel.prototype = {
   init: function(id, cfg) {
      var config = {
			numVisible:			4,
			animationSpeed:		0.4,
			scrollInc:			4,
			navMargin:			0,
			size:				4,
			wrap:				true,
			revealAmount:		0,
         prevButtonStateHandler: this.handlePrevButtonState,
         nextButtonStateHandler: this.handleNextButtonState
      };

      for (var key in cfg) {
         if (!cfg.hasOwnProperty(key)) { continue; }
         config[key] = cfg[key];
      }

      this.carousel = new YAHOO.extension.Carousel(id, config);

   },

   handlePrevButtonState: function(type, args) {},

   handleNextButtonState: function(type, args) {}
   
};


/**
 * 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 carousel1, carousel2, carousel3, carousel4;

var pageLoad = function() 
{

	carousel1 = new Carousel("carousel1", 
		{ prevElement:"carousel1_previous", nextElement:"carousel1_next", size:12 });
	
	carousel2 = new Carousel("carousel2", 
		{ prevElement:"carousel2_previous", nextElement:"carousel2_next", size:12 });
		
	carousel3 = new Carousel("carousel3", 
		{ prevElement:"carousel3_previous", nextElement:"carousel3_next", size:12 });
		
	carousel4 = new Carousel("carousel4", 
		{ prevElement:"carousel4_previous", nextElement:"carousel4_next", size:12 });

};

YAHOO.util.Event.addListener(window, 'load', pageLoad);