// *************************** KP GALLERY SLIDESHOW v1.1 [START BLOCK] **************************** //

// NOTE this needs to be done on LOAD to ensure images are loaded last
$(window).load(function() {

	/* 
	 * Setup
	 * -----------------------
	 */
	// if there isn't an active class, add one onto the first item
	if ( $('#bannerNav > div.active').length == 0 ) {
		$('#bannerNav > div:first').addClass('active');
	}
	if ( $('#bannerCont > div.banner.active').length == 0 ) {
		$('#bannerCont > div.banner:first').addClass('active');
	}
	// bind click events to nav
	$('#bannerNav > div').click(function() {
		thumbAction( $(this) );
		return false;
	});
	$('#bannerNav').show();

});


function thumbAction(jQ){
	// cancel timer and stop the auto rotation
	window.clearInterval(kpGalTimer);
	// find the position/order of the clicked nav-item
	var clickedIndex = $('#bannerNav > div').index( jQ );
	// show the main item (also adds class to current nav)
	showImg( clickedIndex , 200);
	// prevent the link from working
	//return false;
}

/* 
 * findIndex()
 * ---------------------
 * returns the index of the main image with the class of current
 */
function findIndex() {
	// find the current active main image
	var currentNav = $('#bannerCont > div.banner.active');
	// find its position
	var currentIndex = $('#bannerCont div.banner').index( currentNav );
	return currentIndex;
}
/* 
 * nextBanner()
 * ---------------------
 * finds the next image, and passes its index to showImg()
 */
function nextBanner() {
	// find the current tab
	var currentIndex = findIndex();
	// find the next tab
	var nextIndex = currentIndex + 1;
	// if its passed the end, restart at the first one
	if(nextIndex >= $('#bannerCont > div.banner').length) {
		nextIndex = 0;
	}
	if(nextIndex == currentIndex) {
		// console.log('only 1 image found-killing rotation');
		window.clearInterval(kpGalTimer);
		return false;
	}
	// show the correct image
	showImg(nextIndex, 1000);
}
/* 
 * showImg(imgIndex)
 * ---------------------
 * displays the image and higlights the navigation at the position imgIndex
 */
function showImg(imgIndex, fadeSpeed) {
	// check if its already showing
	if( imgIndex == findIndex() ){
		// console.log('skipped showImg as this is already current');
		return false;
	}
	// un-hilight current nav
	$('#bannerNav > div').removeClass('active');
	// hilight the current nav
	$('#bannerNav > div:eq('+imgIndex+')').addClass('active');
	// grab references to the active and next-active images
	var $activeBanner = $('#bannerCont > div.banner.active');
	var $nextBanner = $('#bannerCont > div.banner:eq('+ imgIndex +')');
	// drop the active image to 2nd position in pile (nothing in top position)
	$activeBanner.removeClass('active').addClass('last-active');
	// make the next image transparent
	// make it top of the pile
	// fade it up
	// remove the last active class
	$nextBanner.css({opacity: 0.0})
		.addClass('active')
		.animate({opacity: 1.0}, fadeSpeed, function() {
			$activeBanner.removeClass('last-active');
		});
}
// start the timer running
var kpGalTimer = setInterval("nextBanner()",7500);

// *************************** KP GALLERY SLIDESHOW [END BLOCK] **************************** //