var usesPreviousButton = 1;	// 0 for no, 1, for yes
var usesNextButton = 1;		// 0 for no, 1, for yes
var navButtonOnStyle = '#144D95'.toLowerCase(); // nav li a:hover {color: #144D95;}

var opacity_off = 0;
var duration_on = 950;
var duration_off = 950;

// Note that the Previous and Next buttons are li's in the same group of li's as the anchors
// The style changes the color of the anchors, not the li's. So in the code use firstChild. This makes it less generalized.
//--------------------------------------------------------------------
//No more configuration below here, except configuring the carousel
//--------------------------------------------------------------------

var usesPreviousAndNext = usesPreviousButton + usesNextButton;

// Firefox converts #144D95 to rgb(20, 77, 149), but hexToRgb() converts it to rgb(20,77,149), no spaces
// So make a regular expresion out of it, and use search() in the code instead of indexOf()

var navButtonOnStyleRGBRegEx = navButtonOnStyle.hexToRgb();
navButtonOnStyleRGBRegEx = navButtonOnStyleRGBRegEx.replace(/,/gi, ", ?");
navButtonOnStyleRGBRegEx = navButtonOnStyleRGBRegEx.replace(/\(/gi, "\\(");
navButtonOnStyleRGBRegEx = navButtonOnStyleRGBRegEx.replace(/\)/gi, "\\)");
// it's now rgb\(20, ?77, ?149\)

var objCarousels = [];
var theseNavButtons = []; // might or might not be good enough when there are multiple nav groups on the page
var elTheseNavButtons = [];
var aryElThisPrevious = [];
var aryElThisNext = [];
var theseCarouselNavs = [];

// HERE IS THE KEY klass: "carousel0" + i + "_item",

window.addEvent("domready", function() {
	var myString = '';
	var elCarousels = $('col_right').getElements('div.carousel_container');
	theseCarouselNavs = $('carousel_nav').getElements('a');
	//alert(elCarousels.length);
	// This lets you add as many carousels as you want. Note the specific syntax of the ids.
	for (var i=0;i<elCarousels.length;++i) {
		var elThisCarouselContent = $(elCarousels[i]).getElement('div.carousel_content');
		var elThisNavGroup = $(elCarousels[i]).getElement('ul.nav');
	
		elTheseNavButtons[i] = elThisNavGroup.getElementsByTagName('li');
		var elThisPrevious = $(elTheseNavButtons[i][0]).getElementsByTagName('a')[0];
		var elThisNext = $(elTheseNavButtons[i][elTheseNavButtons[i].length-1]).getElementsByTagName('a')[0];
		
		aryElThisPrevious[i] = elThisPrevious;
		aryElThisNext[i] = elThisNext;
		
		theseNavButtons[i] = elTheseNavButtons[i]; // REVISE THIS
		
		// Highlight each carousel's first navigation button.
		elTheseNavButtons[i][usesPreviousButton].firstChild.style.color = navButtonOnStyle;
		
		objCarousels[i] = new iCarousel("carousel0" + i + "_content", {
			idPrevious: "carousel_previous" + i,
			idNext: "carousel_next" + i,
			idToggle: "undefined",
			item: {
				klass: "carousel_item"+i,
				size: 556
			},
			animation: {
				type: "scroll",
				duration: 1500,
				amount: 1
			}
		});
		// Generate these with this script, so it accomodates carousels on different pages, of different lengths
		// Every time the item is clicked, the function is run FROM HERE! A breakpoint demonstrated it to me. That is why the eval is used.
		for (var j=usesPreviousButton;j<elTheseNavButtons[i].length-usesNextButton;++j) {
			eval('$(elTheseNavButtons['+i+']['+j+'].firstChild).addEvent("click", function(event){new Event(event).stop();objCarousels['+i+'].goTo('+(j-usesPreviousButton)+');swapNavButton('+i+', '+j+');});');
		}
		// Pass the carousel number to the functions
		eval('$(aryElThisPrevious['+i+']).addEvent("click", function(event){new Event(event).stop();handlePreviousClick('+i+')});');
		eval('$(aryElThisNext['+i+']).addEvent("click", function(event){new Event(event).stop();handleNextClick('+i+')});');

		/*
		<ul id="carousel_nav">
		<li id="brain"><a class="active" href="#">brain</a></li>
		*/
		eval('$(theseCarouselNavs['+i+']).addEvent("click", function(event){new Event(event).stop();swapCarousel('+i+')});');
		
		var carou = $('carousel_container'+i);
		carou.setStyle('opacity', 0).setStyle('display', 'none');
		carou.fx = carou.effect('opacity', {duration: 0, wait: false}).start(opacity_off);

		// IMPORTANT: Without doing the same to the inner divs, the carousel fade in/out did not work in IE
		// Doing it to carousel0 displays smoother than doing it to carousel00_content
		// Applies to the code here and below, in this block of code, and in function swapCarousel
		var caroucont = $('carousel'+i);
		//var caroucont = $('carousel0'+i+'_content');
		caroucont.setStyle('opacity', 0).setStyle('display', 'none');
		caroucont.fx = caroucont.effect('opacity', {duration: 0, wait: false}).start(opacity_off);

	} // end of for i=elCarousels
	
	$('carousel_container0').setStyle('display', 'block');
	$('carousel_container0').fx.setOptions({ 'duration': duration_on }).start(1);
	$('carousel0').setStyle('display', 'block');
	$('carousel0').fx.setOptions({ 'duration': duration_on }).start(1);
	//$('carousel00_content').setStyle('display', 'block');
	//$('carousel00_content').fx.setOptions({ 'duration': duration_on }).start(1);

}); // end of domready

function getCurrentNavButtonIndex(intCarouselIndex) {
	var currentNavButtonIndex = 0;
	for (var i=usesPreviousButton;i<theseNavButtons[intCarouselIndex].length-usesNextButton;i++) { // skip previous and next buttons if used
		// Find the currently highlighted button
		if (theseNavButtons[intCarouselIndex][i].firstChild.style.color.indexOf(navButtonOnStyle) > -1) { // This is the Internet Explorer check
			currentNavButtonIndex = i;
			break;
		}
		else if(theseNavButtons[intCarouselIndex][i].firstChild.style.color.search(navButtonOnStyleRGBRegEx) > -1) { // The Firefox check
			currentNavButtonIndex = i;
			break;
		}
	}
	return currentNavButtonIndex;
}

function handlePreviousClick(intCarouselIndex) {
	var currentNavButtonIndex = getCurrentNavButtonIndex(intCarouselIndex) - 1; // the -1 sets it to the previous slide
	if (currentNavButtonIndex < usesPreviousButton) {
		currentNavButtonIndex = theseNavButtons[intCarouselIndex].length-usesPreviousAndNext;
	}
	swapNavButton(intCarouselIndex, currentNavButtonIndex);
}

function handleNextClick(intCarouselIndex) {
	var currentNavButtonIndex = getCurrentNavButtonIndex(intCarouselIndex) + 1; // the +1 sets it to the next slide
	if (currentNavButtonIndex > theseNavButtons[intCarouselIndex].length-usesPreviousAndNext) {
		currentNavButtonIndex = usesPreviousButton; // 0 if no Previous button, 1, if there is
	}
	swapNavButton(intCarouselIndex, currentNavButtonIndex);
}

function swapNavButton(intCarouselIndex, currentNavButtonIndex) {
	for (var i=usesPreviousButton;i<theseNavButtons[intCarouselIndex].length-usesNextButton;++i) { // skip previous and next buttons if used
		theseNavButtons[intCarouselIndex][i].firstChild.style.color = "";
	}
	theseNavButtons[intCarouselIndex][currentNavButtonIndex].firstChild.style.color = navButtonOnStyle;
}

function swapCarousel(intCarouselIndex) {
	for (var i=0;i<objCarousels.length;++i) {
		$('carousel_container'+i).setStyle('opacity', 0).setStyle('display', 'none');
		$('carousel_container'+i).fx.setOptions({ 'duration': duration_off, wait: false }).start(opacity_off);

		$('carousel'+i).setStyle('opacity', 0).setStyle('display', 'none');
		$('carousel'+i).fx.setOptions({ 'duration': duration_off, wait: false }).start(opacity_off);
		//$('carousel0'+i+'_content').setStyle('opacity', 0).setStyle('display', 'none');
		//$('carousel0'+i+'_content').fx.setOptions({ 'duration': duration_off, wait: false }).start(opacity_off);

		theseCarouselNavs[i].setProperty('class', 'off');
	}
	$('carousel_container'+intCarouselIndex).setStyle('display', 'block');
	$('carousel_container'+intCarouselIndex).fx.setOptions({ 'duration': duration_on, wait: false }).start(1);
	$('carousel'+intCarouselIndex).setStyle('display', 'block');
	$('carousel'+intCarouselIndex).fx.setOptions({ 'duration': duration_on, wait: false }).start(1);
	//$('carousel0'+intCarouselIndex+'_content').setStyle('display', 'block');
	//$('carousel0'+intCarouselIndex+'_content').fx.setOptions({ 'duration': duration_on, wait: false }).start(1);
	theseCarouselNavs[intCarouselIndex].setProperty('class', 'active');
}