Javascript-форум - Помогите разобраться с логикой поведения скрипта

Задание такое: необходимо создать скрипт наподобие галереи, но который в цикле показывает всю галерею, так же отдельно есть названия, которые активизируются соответственно картинке....
При ховере на название показывается нужная картинка, а при mouseout опять должен заработать цикл. Вот тут-то у меня и возникла проблема

JS код:

var _first = true;
var _time = null;
var _el = false;
var _note = false;
var _index = false;
var _index2 = false;

function initPage() {
	_el = $(".pic2 img");
	_note = $(".nav2 li");
	time = setTimeout((function() {
       innerfade();
    }), 2000);
}
if (window.addEventListener)
	window.addEventListener("load", initPage, false);
else if (window.attachEvent)
	window.attachEvent("onload", initPage);

function innerfade() {
	
	// расставляем классы
	if (_first) {
		_el.filter(".active").next().addClass('next');
		_note.eq(0).addClass("active");
		_first = false;	
	}

	// дисплей блок некстовому элементу
	_el.filter(".next").fadeIn(0);
	
	// манипулируем названиями
    _index = _el.index($(".next")[0]);
	_note.filter(".active").removeClass("active");
	_note.eq(_index).addClass("active");
	
	// прячем активный и показуем следующий элемент
	_el.filter(".active").fadeOut(300, function(){
		$(this).removeClass("active");
		_el.filter(".next").addClass('active').removeClass("next").next().addClass('next');
		// если последний елемент, то добовляем класс некст первому элементу
		if (!_el.filter(".active").next().is("img")) {_el.eq(0).addClass('next');}
	});

	// обрабатываем ховер на названия
	$(_note).hover(function(){
		clearTimeout(time);
		_note.removeClass("active");
		$(this).addClass("active");
		_index2 = _note.index($(this)[0]);

		_el.removeClass("next").removeClass("active");
		_el.eq(_index2).addClass("next").fadeIn(0);
		
		_el.not(".next").fadeOut(300, function(){
			_el.filter(".next").addClass("active").removeClass("next");
		});
	},function(){
		_el.eq(_index2).next().addClass("next");
		if (!_el.eq(_index2).next().is("img")) {_el.eq(0).addClass('next');}
		time = setTimeout((function() {
      		innerfade();
  		}), 6000);
	});
	
	// вызываем повторно функцию		
    time = setTimeout((function() {
       innerfade();
    }), 2000);
};

HTML код:

<div class="hold">
			<div class="pic2">
				<img src="images/1.jpg" width="500" height="380" alt="" class="active" />
				<img src="images/2.jpg" width="500" height="380" alt="" />
				<img src="images/3.jpg" width="500" height="380" alt="" />
				<img src="images/4.jpg" width="500" height="380" alt="" />
			</div>
			<ul class="nav2">
				<li><a href="#">Фото 1</a></li>
				<li><a href="#">Фото 2</a></li>
				<li><a href="#">Фото 3</a></li>
				<li><a href="#">Фото 4</a></li>
			</ul>
		</div>

Вообщем мучаюсь уже порядка 8 часов и никак у меня не получается сделать показ фоток при ховере на название... аж самому смешно...

Вообщем переберал кучу вариантов... при таком варианте работает через раз, а бывает глюки... короче помогите PLZ продумать hover функцию