$(function(){
	var $preview = $('.preview');
	var $currImg = $('img', $preview);
	var isFade = false;
	var $lastFade = null;
	var speed = 700;

	$.each($('.links_wrap li'), function(i, li){
		var $link = $(li).children('a');
		var preload_image = new Image();
		var src = $link.attr('rel');
		
		$(preload_image).attr('id', 'fade_'+i).attr('src', src);
		$link.attr('rel', 'fade_'+i);
		if(i == 0)
			$(preload_image).addClass('current');
		$preview.append(preload_image);
	});
	$currImg.remove();

	function imageFade($this) {
		var rel = $this.children('a').attr('rel');
		var $nextImg = $('#'+rel, $preview);
		
		if($nextImg.hasClass('current')){
			isFade = false;
			return;
		}
		var $currentImg = $('img.current', $preview);
		$nextImg.addClass('next');

		$currentImg.animate({opacity: 0}, speed, function() {
			$(this).removeClass('current').css('opacity', '');
			$nextImg.removeClass('next').addClass('current');
			isFade = false;
			if(null != $lastFade)
				$lastFade.hover();
			$lastFade = null;
		});
	}

	$('.links_wrap li').hover(
		function(){
			if(isFade){
				$lastFade = $(this);
				return;
			}
			isFade = true;
			imageFade($(this));
		},
		function(){}
	);
});