jQuery.noConflict();	
jQuery(document).ready(function() {		
	
	//Execute the slideShow, set 4 seconds for each images
	slideShow(5000, true);
	
});

function slideShow(speed, togcap) {

	//append a LI item to the UL list for displaying caption
	//if(togcap)
	//jQuery('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

	//Set the opacity of all images to 0
	jQuery('ul.slideshow > li').css({opacity: 0.0});
	
	//Get the first image and display it (set it to full opacity)
	jQuery('ul.slideshow > li:first').css({opacity: 1.0});
	
	//Get the caption of the first image from REL attribute and display it
	if(togcap) {
		jQuery('#slideshow-caption h3').html(jQuery('ul.slideshow li:first').find('img').attr('title'));
		jQuery('.caption-more').attr('href', jQuery('ul.slideshow li:first').find('img').attr('alt'));
	}
		
	var images = jQuery('ul.slideshow').children('li').length - 1;
	for(var i = 0; i < images; i++) {
		if(i == 0) {
			jQuery('ul.box-select').append('<li class="active"><a href="#"></a></li>');
		} else {
			jQuery('ul.box-select').append('<li><a href="#"></a></li>');
		}
	}
	
	//Display the caption
	jQuery('#slideshow-caption').css({opacity: 0.9, bottom:0});
	
	//Call the gallery function to run the slideshow	
	var timer = setInterval('gallery('+togcap+',0,0)',speed);
	
	jQuery('ul.box-select li').click(
		function(event) {
			event.preventDefault();
			gallery(togcap, jQuery(this).index() + 1, jQuery(this));
		}
	)
	
	//pause the slideshow on mouse over
	jQuery('ul.slideshow').hover(
		function () {
			clearInterval(timer);	
		}, 	
		function () {
			timer = setInterval('gallery('+togcap+',0,0)',speed);			
		}
	);
	
}

function gallery(togcap, index, ele) {
	var current = (jQuery('ul.slideshow > li.show')?  jQuery('ul.slideshow > li.show') : jQuery('#ul.slideshow > li:first'));
	//if no IMGs have the show class, grab the first image	
	
	var active = (jQuery('ul.box-select > li.active')?  jQuery('ul.box-select > li.active') : jQuery('#ul.box-select > li:first'));

	//Get next image, if it reached the end of the slideshow, rotate it back to the first image
	if(index) {
		var next = jQuery('#image' + (index));
		var anext = ele;
	} else {
		var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? jQuery('ul.slideshow > li:first') :current.next()) : jQuery('ul.slideshow > li:first'));
		var anext = (active.next().length) ? active.next() : jQuery('ul.box-select li:first');
	}
		
	//Get next image caption
	if(togcap) {
		var title = next.find('img').attr('title');	
		var desc = next.find('img').attr('alt');
	}
		
	//Set the fade in effect for the next image, show class has higher z-index
	next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
	anext.addClass('active');
	jQuery('.caption-more').attr('href',next.find('img').attr('alt'));
	
	//Hide the caption first, and then set and display the caption
	if(togcap) {
		jQuery('#slideshow-caption h3').fadeOut(300, function () { 
			jQuery('#slideshow-caption h3').html(title); 
			//jQuery('#slideshow-caption p').html(desc); 
			jQuery('#slideshow-caption h3').fadeIn(500); 
		});	
	}

	//Hide the current image
	current.animate({opacity: 0.0}, 1000).removeClass('show');
	active.removeClass('active');

}