/*
 * 
 * DynPanels script
 * 
 * FADE EFFECT
 * 
 */


function DynPBtnClicked(){
	var clicked = $(this);
	var id = clicked.attr('nr');
	
	/*START setting ul width to display inline the elements*/
	var obj = $('.DynPanels');
	var liNr = $("li", obj).length;
	var liActive = $("li:visible", obj).index();
	/*END setting ul width to display inline the elements*/
	
	$('.button').removeClass('active');
	$(this).addClass('active');
	
	if(liActive==id) return;
	
	$("li",obj).eq(liActive).fadeOut(500,function(){
		$("li",obj).eq(id).fadeIn(500);
	});
}


function AutoScroll(){	
	/*START setting ul width to display inline the elements*/
	var obj = $('.DynPanels');
	var liNr = $("li", obj).length;
	var liActive = $("li:visible", obj).index();
	/*END setting ul width to display inline the elements*/
	
	$('.button').removeClass('active');
	
	if(liActive<liNr-1){
		$("li",obj).eq(liActive).fadeOut(500,function(){
			$("li",obj).eq(liActive+1).fadeIn(500);
			$(".DynPanelsNav .button"+(liActive+1)).addClass('active');
		});
		return;
	}
	if(liActive==liNr-1){
		$("li",obj).eq(liActive).fadeOut(500,function(){
			$("li",obj).eq(0).fadeIn(500);
			$(".DynPanelsNav .button0").addClass('active');
		});
		return;
	}
}



$('.DynPanelsNav span').live('click',DynPBtnClicked);

$(function(){
	$('.button').click(function(){
		clearInterval(auto);
	});
	var auto = setInterval(AutoScroll,4000);
});