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

Carousel.prototype = {
   init: function(id, cfg) {
      var config = {
			numVisible:        2,
			animationSpeed:    0.15,
			scrollInc:         1,
			navMargin:         20,
			size:              8,
         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) {
		var enabling = args[0];
		var leftImage = args[1];
		if(enabling) {
			leftImage.src = "fontes/carousel/carousel/images/left-enabled.gif";	
		} else {
			leftImage.src = "fontes/carousel/carousel/images/left-disabled.gif";	
		}
   },

   handleNextButtonState: function(type, args) {
		var enabling = args[0];
		var rightImage = args[1];

		if(enabling) {
			rightImage.src = "fontes/carousel/carousel/images/right-enabled.gif";
		} else {
			rightImage.src = "fontes/carousel/carousel/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, carousel2;

var pageLoad = function() 
{
	carousel = new Carousel("mycarousel", 
		{ prevElement:"prev-arrow", nextElement:"next-arrow" });
	carousel2 = new Carousel("mycarousel2", 
		{ prevElement:"prev-arrow2", nextElement:"next-arrow2", size:9, numVisible:2, scrollInc:3, revealAmount:20 });

};

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