$(document).ready(function(){
	var _holder = $('#content-holder');
	var _prev = $('a.link-prev', _holder);
	var _next = $('a.link-next', _holder);
	var _animBlock = $('div.gallery ul', _holder);
	var _els = $('div.gallery li', _holder);
	var _images = $('div.visual span > div', _holder)
	var _durationFade = 400;
	var _durationSlide = 300;
	
	var _step = 78;
	
	var _activeIndex = _els.index(_els.filter('.active'));
	var _elsLenght = _els.length;
	_images.not(':eq('+_activeIndex+')').hide();
	_animBlock.animate({marginLeft:-(_activeIndex*_step)}, {queue:false, duration:0, complete:function(){
		_els.eq(_activeIndex).addClass('active');
	}});
	
	_next.click(function(){
		if (_activeIndex+1 < _elsLenght) {
			_activeIndex += 1;
			_els.removeClass('active');
			_images.not(':eq('+_activeIndex+')').fadeOut(_durationFade);
			_images.eq(_activeIndex).fadeIn(_durationFade);
			_animBlock.animate({marginLeft:-(_activeIndex*_step)+78}, {queue:false, duration:_durationSlide, complete:function(){
				_els.eq(_activeIndex).addClass('active');
			}});
		} 
		return false;
	});
	_prev.click(function(){
		if (_activeIndex-1 > -1) {
			_activeIndex -= 1;
			_els.removeClass('active');
			_images.not(':eq('+_activeIndex+')').fadeOut(_durationFade);
			_images.eq(_activeIndex).fadeIn(_durationFade);
			_animBlock.animate({marginLeft:-(_activeIndex*_step)+78}, {queue:false, duration:_durationSlide, complete:function(){
				_els.eq(_activeIndex).addClass('active');
			}});
		}
		return false;
	});
	_els.find('a').click(function(){
		if (!$(this).parent().hasClass('active')) {
			_activeIndex = _els.index($(this).parent());
			_els.removeClass('active');
			_images.not(':eq('+_activeIndex+')').fadeOut(_durationFade);
			_images.eq(_activeIndex).fadeIn(_durationFade);
			_animBlock.animate({marginLeft:-(_activeIndex*_step)+78}, {queue:false, duration:_durationSlide, complete:function(){
				_els.eq(_activeIndex).addClass('active');
			}});
		}
		return false;
	});
});