/**
 * @projectDescription
 * Аниматор смены изображений.
 *
 * @author Vlad Yakovlev (scorpix@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @requires jQuery
 */

/**
 * Класс для анимации смены изображений.
 * @param {Object} options Настройки аниматора:
 * <ul>
 *  <li><code>previews</code></li> - объект jQuery превьюшек,</li>
 *  <li><code>image</code> - объект jQuery большого изображения,</li>
 *  <li><code>description</code> - объект jQuery описания изображения.</li>
 * </ul>
 */
function ImageSelector(options) {
	/**
	 * Элемент, содержащий описание для текущего изображения.
	 * @type jQuery
	 */
	var description;

	/**
	 * Элемент-декоратор, видимый при анимации.
	 * @type jQuery
	 */
	var decor;

	/**
	 * Элемент большого изображения.
	 * @type jQuery
	 */
	var image;

	/**
	 * Флаг анимации. Если включен, превьюшки не кликабельны.
	 */
	var isAnimate = false;

	/**
	 * Ассоциативный массив путей уже загруженных изображений.
	 * @type {Object}
	 */
	var loaded = {};

	/**
	 * Элемент временного изображения.
	 * @type jQuery
	 */
	var newImage;

	/**
	 * Элементы превьюшек.
	 * @type jQuery
	 */
	var previews;

	var isLoad = false;

	$(function() {
		image = options.image;
		previews = options.previews;

		if (options.description) {
			description = options.description;
		}

		// Добавляем в html элементы временного изображения и фейдера и задаем им размеры большого изображения.
		image.after('<img alt="" class="new_image hidden" />');
		newImage = image.next();
		image.after('<ins class="image_decor png hidden"></ins>');
		decor = image.next();

		previews.find('a').click(function() {
			if (isLoad && !$(this).parent().hasClass('selected') && $(this).attr('href')) {
				onImageClick($(this).parent());
			}

			return false;
		});
	});

	$(window).load(function() {
		var sizes = {
			height: image.height(),
			width: image.width()
		};
		decor.css(sizes);
		newImage.css(sizes);

		isLoad = true;
	});

	/**
	 * Событие при нажатии на превьюшку.
	 * @param {jQuery} preview Элемент превьюшки, на ссылку которой нажали.
	 */
	function onImageClick(preview) {
		// Происходит смена картинки - ничего не делаем.
		if (isAnimate) {
			return;
		}

		// Защищаем юзера от несанкционированных действий.
		isAnimate = true;
		previews.find('a').addClass('animating');

		/** @type String */
		var href = preview.find('a').attr('href');

		if (loaded[href]) {
			// Изображение уже загружали, поэтому не ждем, а сразу меняем его.
			changeImage(preview);
		} else {
			// Подгружаем изображение.
			var loadingImage = new Image();
			loadingImage.onload = function() {
				changeImage(preview);
				loaded[href] = true;
			};
			loadingImage.src = href;
		}
	}

	/**
	 * Меняет изображение.
	 * @param {jQuery} preview Элемент превьюшки, на ссылку которой нажали.
	 */
	function changeImage(preview) {
		/** @type String */
		var src = preview.find('a').attr('href');

		// Во временное изображение загоняем текущее, показываем его и кладем под него фейдер.
		newImage.attr('src', image.attr('src')).removeClass('hidden');
		decor.removeClass('hidden');
		// В это время меняем оказавшееся внизу изображение на новое.
		image.attr('src', src);

		newImage.animate({ opacity: 0 }, 300, function() {
			// Теперь меняем временное изображение на новое, чтоб потом его фейдить.
			newImage.attr('src', src);

			// Меняем описание у изображения.
			if (description) {
				description.html(preview.find('.description').html());
			}

			// Меняем превьюшки.
			previews.filter('.selected').removeClass('selected');
			preview.addClass('selected');

			newImage.animate({ opacity: 1 }, 300, function() {
				// Убираем декор и изображение, очищаем стили.
				decor.addClass('hidden');
				newImage.addClass('hidden').css('opacity', '');

				// Смену изображения завершили - теперь юзер снова может кликать по превьюшкам.
				isAnimate = false;
				previews.find('a').removeClass('animating');
			});
		});
	}
}