[Khmelevsky]

Здравствуйте.
Нужно было реализовать такую задачу.
Есть три ссылки, по клику на которые появляется картинка соответствующая этой ссылке (появляются с анимацией, простая смена opacity), картинки находятся друг под другом с разными z-index и смена картинки происходит с плавным перетеканием с одной в другую. Я это реализовал, на кроссбраузерность еще не проверял, но мое решение явно корявое, хочу попросить вас помощи оптимизировать его.
Вот код, я попытался его обильно продокументировать, чтобы было проще разобраться в моей писанине:

function next() {
	// глобальная переменная которая хранит значение прозрачности
	var opacity = 0;
	// глобальная ссылка на таймер
	var timer;

	// Функция, которая рекурсивно вызывается для смены значение прозрачнности нужного div,
	// функции передается ссылка на объект на котором сработал onclick
	function changeOpacity(handler) {
		// делаем анимацию с шагом 2
		opacity += 2;
		// блок который должен появится имеет id такой же, как и ссылка на которой сработал
		// onclick + "-inf". получаю этот блок
		block = document.getElementById(handler.id+"-inf").style;
		// устанавливаем свойство прозрачности для ie и всех остальных
		block.opacity = opacity/100;
		block.filter="alpha(opacity="+opacity+")";

		// создаю глобальную переменную, в которой хранится ссылка на объект на
		// котором сработал onclick, чтобы я смог ей воспользоваться внутри
		// анонимной функции
		// !!! очень не нравится это решение
		var _handler = handler;
		// собственно рекурсивно через таймер выполняю ету функцию, уменьшая прозрачность
		timer = setTimeout(
				function(){
					changeOpacity(_handler);
				}, 0);

		// если прозрачностьдошла до предела, очищаю таймер
		if (opacity>100) {
			clearTimeout(timer);
		};
	}

	// new-vd - div элемент-контейнерв котором расположен весь этот блок с
	// картинками и сслками-переключателями. Получаю его
	parrentBlock = document.getElementById("new-vd");

	// Проверяю отображается на верху сейчас тот объект по которому клацнули
	// (чтобы не делать анимацию того объекта который сейчас виден и так),
	// если нет, выполняю анимацию
	// не нравится, что приходится хранить идентификатор в виде атрибута
	if (parrentBlock.getAttribute("vdCur") !== this.id) {
		// z-index самого верхнего элемента также хранится в атрибуте
		// тоже кажется коряво, незнаю как исправить
		zIndex = parseInt(parrentBlock.getAttribute("zidx")) + 1;
		// увеличиваю значение атрибута zIdx на 1
		parrentBlock.setAttribute("zidx", zIndex);
		// устанавливаю текущим элементов, тот элемент по которому клацнули
		parrentBlock.setAttribute("vdCur", this.id);

		// получаю блок который буду анимировать
		block = document.getElementById(this.id+"-inf").style;
		// выставляю его прозрачность в 0
		block.opasity = 0;
		block.filter="alpha(opacity=0)";
		// и помещаю его на самый верх
		block.zIndex = zIndex;

		// ну и анимирую, описанной выше функцией
		changeOpacity(this);
	}
}

Решение явно не ахти, я плохо знаком с javascript, поэтому вышло вот так. Что мне не нравится:
1. То что приходится хранить id текущего блока который наверху и его z-index в виде атрибутов
2. То что приходится передавать handler через глобальную переменную в каждой итерации рекурсивной функции (явно плохо)

Помогите мне исправить эти проблемы, и плюс если подскажите еще улучшения, буду признателен.

PS. Советовать использовать готовую библиотеку, вроде jQuery и т.п. не нужно, скрипт не большой, ради него использовать большой фреймворк нет желания (боремся за каждый килобайт так сказать )