var theseImages = [];
var opacity_off = 0.4;
var duration_on = 200;
var duration_off = 950;

window.addEvent("domready", function() {
	var Carousel = new iCarousel("carousel_content", {
		idPrevious: "carousel_previous",
		idNext: "carousel_next",
		idToggle: "undefined",
		item: {
			klass: "carousel_item",
			size: 630
		},
		animation: {
			//type: "scroll",
			//amount: 1,
			duration: 200
		}
	});
	
	theseImages = document.getElementById('nav').getElementsByTagName('img');

	// Add the click event without reference to element ids, just the elements
	//$(theseImages[0]).getParent().addEvent("click", function(event){new Event(event).stop();Carousel.goTo(0);swapNavButton($(theseImages[0]));});
	
	// 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 i=0;i<theseImages.length;++i) {
		eval('$(theseImages['+i+']).getParent().addEvent("click", function(event){new Event(event).stop();Carousel.goTo(' + i + ');swapNavButton($(theseImages['+i+']));});');
	}
	
	//var myCarouselNavOpacity = new CarouselNavOpacity();
	
	for (var i=0;i<theseImages.length;++i) {
		var image = $(theseImages[i]);
		image.setStyle('opacity', 1).setProperty('class', 'off');
		image.fx = image.effect('opacity', {duration: 0, wait: false}).start(opacity_off);
		image.addEvents({
			mouseenter: function(event) {
				this.fx.setOptions({ 'duration': duration_on }).start(1);
			},
			mouseleave: function(event) {
				if (this.getProperty('class') == "off") {
					this.fx.setOptions({ 'duration': duration_off }).start(opacity_off);
				}
			}
		});
	}
	$(theseImages[0]).fx.setOptions({ 'duration': duration_off }).start(1);
	$(theseImages[0]).setProperty('class', 'on');
}); // end of domready

function swapNavButton(thisImage) {
	for (var i=0;i<theseImages.length;++i) {
		$(theseImages[i]).setStyle('opacity', opacity_off).setProperty('class', 'off');
	}
	$(thisImage).setStyle('opacity', 1).setProperty('class', 'on');
}