jQuery.noConflict();
jQuery(document).ready(function($){
	
	var fadeoutTime = 2500;
	var fadeinTime = 2000;
	var autoRefreshTime = 16000;
	var strActiveSlideClassName = "activeslide";
	
	var arySlides = $("#slides div");
	$(arySlides[0]).addClass(strActiveSlideClassName);

	var switchNavAndSlide = function(curIdx, nextIdx, onAuto) {
		$(arySlides).removeClass(strActiveSlideClassName);
		$(arySlides).eq(nextIdx).addClass(strActiveSlideClassName);
		$(arySlides[curIdx]).fadeOut(fadeoutTime);
		$(arySlides[nextIdx]).fadeIn(fadeinTime);
	};
	
	var getCurrentIndex = function() {
		// since the elements have a second class name, use *=
		var thisActiveSlideEl = $(arySlides).filter("[class*='"+strActiveSlideClassName+"']");
		return $(arySlides).index(thisActiveSlideEl);
	};
	
	var refreshId = '';
	var startAuto = function() {
		refreshId = setInterval(function() {
			var onAuto = 1;
			var curIdx = getCurrentIndex();
			var nextIdx = curIdx + 1;
			switchNavAndSlide(curIdx, nextIdx == $(arySlides).length ? 0 : nextIdx, onAuto);
		}, autoRefreshTime);
	};
	var stopAuto = function() {
		clearInterval(refreshId);
	}
	startAuto();
});