var navCellBgColor = '#176fb4'; // IE makes it lower case
var theseAnchs = ''; // When there is only one carousel on a page, just create this once
// TODO: create usesNext and usesPrevious usesNextPrev(0,1,2) variables, then use them in the for statements and comparison statements
// Can do this without id's. Just objects and theseAnchs array

window.addEvent("domready", function() {
	var Carousel = new iCarousel("carousel_content", {
		idPrevious: "carousel_previous",
		idNext: "carousel_next",
		idToggle: "undefined",
		item: {
			klass: "carousel_item",
			size: 950
		},
		animation: {
			type: "scroll",
			duration: 2000,
			amount: 1
		}
	});

$("frame-0").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0);swapNavNumber("frame-0")});
$("frame-1").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(1);swapNavNumber("frame-1")});
$("frame-2").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(2);swapNavNumber("frame-2")});
$("frame-3").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(3);swapNavNumber("frame-3")});
$("frame-4").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(4);swapNavNumber("frame-4")});
$("frame-5").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(5);swapNavNumber("frame-5")});
$("frame-6").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(6);swapNavNumber("frame-6")});
$("frame-7").addEvent("click", function(event){new Event(event).stop();Carousel.goTo(7);swapNavNumber("frame-7")});

$("carousel_previous").addEvent("click", function(event){new Event(event).stop();handlePreviousClick()});
$("carousel_next").addEvent("click", function(event){new Event(event).stop();handleNextClick()});

	// Highlight each carousel's first navigation number.
	var theseNavs = document.getElements('ul#nav');
	for (var i=0;i<theseNavs.length;++i) {
		theseAnchs = theseNavs[i].getElementsByTagName('a');
		theseAnchs[1].style.background = navCellBgColor; // 1 because 0 is the previous arrow
	}

}); // end of domready

function getCurrentNavArrayNum() {
	var currentNavArrayNum = 0; // previous arrow is 0
	for (var i=1;i<theseAnchs.length-1;i++) { // i=1 to skip previous arrow, length-1 because the next arrow is in this group of anchors
		// Find the currently highlighted number
		if (theseAnchs[i].style.background.indexOf(navCellBgColor) > -1) { // MAKE THIS CASE INSENSITIVE
			// Which NavNum is it? id looks like "frame-2"
			currentNavArrayNum = i;
			break;
		}
		else if(theseAnchs[i].style.background.indexOf('rgb(23, 111, 180)') > -1) {
			currentNavArrayNum = i;
			break;
		}
	}
	return currentNavArrayNum;
}

// This function should only be called by the "previous" link
function handlePreviousClick() {
	var currentNavArrayNum = getCurrentNavArrayNum() - 1;
	//alert("currentNavArrayNum: " + currentNavArrayNum);
	if (currentNavArrayNum < 1) {
		currentNavArrayNum = theseAnchs.length-2;
	}
	// Create the id of the nav num to highlight
	swapNavNumber("frame-" + (currentNavArrayNum-1));
}

// This function should only be called by the "next" link
function handleNextClick() {
	var currentNavArrayNum = getCurrentNavArrayNum() + 1;
	if (currentNavArrayNum > theseAnchs.length-2) { // -2 to not count the previous and next buttons
		currentNavArrayNum = 1;
	}
	// Create the id of the nav num to highlight
	swapNavNumber("frame-" + (currentNavArrayNum-1));
}

function swapNavNumber(itemid) {
	//alert("itemid: " + itemid);
	for (var i=1;i<theseAnchs.length-1;++i) { // i=1 to skip previous arrow, length-1 because the next arrow is in this group of anchors
		theseAnchs[i].style.background = "";
	}
	$(itemid).style.background = navCellBgColor;
}