// JavaScript Document
var myCarousel;
window.addEvent('domready', function() {
	myCarousel = new SimpleCarousel($('mainCarousel'), $$('#mainCarousel div.slide'), $$('#mainCarousel a.button'), {
	  rotateAction: 'mouseover', /*lets make the user hover to jump*/
	  startIndex: 0,
	  slideInterval: 5000,
	  transitionDuration: 1400,
	  rotateActionDuration: 400,
	  autoplay: false,
	  onShowSlide: function(){
		/*this layout uses images that change, not classes
		  so we have to add a little more logic here*/
		$$('#mainCarousel div.panel-tabs a.off div').each(function(button, index){
		  button.style.color='#a68a63';
		});
		$$('#mainCarousel div.panel-tabs a.selected div').each(function(button, index){
		  button.style.color='#413121';
		});
		$$('#mainCarousel div.panel-tabs a.off img').each(function(button, index){
		  button.src = button.src.replace('_on', '_off');
		});
		$$('#mainCarousel div.panel-tabs a.selected img').each(function(button, index){
		  button.src = button.src.replace('_off','_on');
		});
	  }
	});
});
window.addEvent('load', function() {
	myCarousel.autoplay();
});