/**
 * simple slider script
 * 
 * @author	sauveur@emve.org
 * @version	1.0
 */ 
(function(){
	$(function(){
		var timer = null,
			$features = $('#features'),
			$featuresHome = $('#features-home'),
			// items collection
			$items = $('.features-titles > div', $featuresHome),
			// number of items
			itemsNum = $items.length,
			activeItemIndex = 1;
			
		// show image and tab
		$('#img-fh-1, #fh-1 .active', $featuresHome).show();
		// hide tab "normal" text
		$('#fh-1 .normal').hide();

		/**
		 * Slide to specified tab
		 * 
		 * @param {integer} index Index of actually displaying item
		 * @return {void}
		 */ 
		gotoNext = function(newItemIndex){

			// switch images
			$('#img-fh-'+activeItemIndex).fadeOut();
			$('#img-fh-'+newItemIndex).fadeIn();

			// switch tabs
			$('#fh-'+activeItemIndex+' .active')
				.slideUp(300)
				.prev()
				.slideDown();
			
			$('#fh-'+newItemIndex+' .normal')
				.slideUp()
				.next()
				.slideDown();

			activeItemIndex = newItemIndex;

			newItemIndex++;

			if (newItemIndex == itemsNum + 1){
				newItemIndex = 1;
			} 

			timer = setTimeout('gotoNext('+newItemIndex+')', 4000);
			
		} // eo gotoNext

		$('.normal', $items).click(function(){
			clearTimeout(timer);			
			gotoNext(parseInt($(this).parent().attr('id').split('-')[1]));
		});

		// start slider
		timer = setTimeout('gotoNext(2)', 4000);
	});
})();