// for articles with multiple images
window.addEvent("domready", function() {
	
	var imageId = 'img-list'; //the id of the ul
	var imageList = $$( 'ul#'+imageId+' li' ); //an array of the image items (li)
	var thumbs = $$( 'ul#nav-list li' );
	var imageWidth = 360;
	
	var fadeCarousel = new iCarousel(imageId, {
		idPrevious: "nav-prev",
		idNext: "nav-next",
		idToggle: "undefined",
		item: {
			klass: "img_item"
		},
		animation: {
			type: "fade",
			duration: 400
		},
		
		//set nav-on indicator calls
		onPrevious: function(el){navOn(imageList[el.atScreen]);},
		onNext: function(el){navOn(imageList[el.atScreen]);} ,
		onGoTo: function(el){navOn(imageList[el.atScreen]);}
	}); 

	//set initial height of ul based on first li content
	$$('ul#'+imageId )[0].style.height = (imageList[0].offsetHeight)+"px"; 
	
	//set the click events on the nav bar
	thumbs.each( function( item, index ) {
		if (item.id.indexOf('thumb') == 0) {
			item.addEvent("click", function(event){new Event(event).stop();fadeCarousel.goTo( index - 1  )  }); 
		}
	});


	//determine which item is on and set indicator
	function navOn(currentImage){
		var image_index = parseInt( currentImage.id.split("_")[1] ); 
		for(i=0; i<thumbs.length; i++){
			if(i != image_index){
				thumbs[i].style.background = "none";
			}else{
				thumbs[i].style.background = "url(/images/v3/mi-bg.png) center center no-repeat";
			}
		};
		//tween the height of the ul
		new Fx.Style(imageId, 'height', {duration: 500}).start( currentImage.offsetHeight );
	};
	
});