var stay_time = 5000; //in ms
$(document).ready(function(){
	$('.slider-list').each(function(){
		var _list = $(this).children('li');
		var _btn = $('<ul class="gall-nav"></ul>');
		var _t;
		var _flag = true;
		$(this).after(_btn);
		_list.each(function(_i){
			_btn.append('<li><a href="#">'+(_i+1)+'</a></li>');
		});
		_btn = _btn.find('a');
		var _a = _list.index(_list.filter('.active:eq(0)'));
		if(_a == -1) _a = 0;
		
		_list.removeClass('active').css('opacity', 0).eq(_a).addClass('active').css('opacity', 1);
		_btn.eq(_a).addClass('active');
		_btn.click(function(){
			if(_t) clearTimeout(_t);
			_flag = false;
			changeEl(_btn.index(this));
			return false;
		}).parents('ul:eq(0)').mouseenter(function(){
			_flag = false;
			if(_t) clearTimeout(_t);
		});
		$(this).mouseenter(function(){
			_flag = false;
			if(_t) clearTimeout(_t);
		}).mouseleave(function(){
			_flag = true;
			_t = setTimeout(function(){
				if(_a == _list.length - 1) changeEl(0);
				else changeEl(_a + 1);
			}, stay_time);
		});
		function changeEl(_ind){
			if(_t) clearTimeout(_t);
			if(_ind != _a){

					_list.eq(_a).removeClass('active').animate({opacity: 0}, {queue:false, duration:500});
					_list.eq(_ind).addClass('active').animate({opacity: 1}, {queue:false, duration:500});

				_btn.eq(_a).removeClass('active');
				_btn.eq(_ind).addClass('active');
				_a = _ind;
				if(_flag) _t = setTimeout(function(){
					if(_a == _list.length - 1) changeEl(0);
					else changeEl(_a + 1);
				}, stay_time);
			}
		}
		if(_flag) _t = setTimeout(function(){
			if(_a == _list.length - 1) changeEl(0);
			else changeEl(_a + 1);
		}, stay_time);
	});
});