/**
 * @author Sergey Chikuyonok (serge.che@gmail.com)
 * @link http://chikuyonok.ru
 */
$(function(){
	var client_list = $('#content .client-list ul'),
		client_items = client_list.find('li'),
		shade = $('<div class="shade"/>').insertAfter('#content .client-list'),
		client_content = $('#content .client-info-wrap'),
		clients_per_section = 5,
		marker = $('#content .client-list .marker span'),
		is_animating = false;
	
	
	// добавляем анимационных функций в jQuery
	jQuery.extend(jQuery.easing, {
		easeInOutCubic: function(x, t, b, c, d) {
			if((t/=d/2) < 1) return c/2*t*t*t + b;
			return c/2*((t-=2)*t*t + 2) + b;
		}
	});
		
	/**
	 * Загружает информацию о клиенте и отображает ее на странице
	 * @param {String} url
	 */
	function loadContent(url) {
		client_content.fixHeight();
		var anim_time = 500;
		
		// плавно прячем контент
		shade.css({
			opacity: 0,
			width: client_content.width(),
			height: client_content[0].offsetHeight,
			display: 'block'
		}).animate({opacity: 1}, anim_time, function() {
			// загружаем новый контент
			client_content.load(url, function(){
				// плавно показываем блок с контентом, меняя его размеры
				var old_height = client_content.height();
				client_content.releaseHeight();
				var new_height = client_content.height(),
					new_offset_height = client_content[0].offsetHeight;
				
				client_content.height(old_height).animate({height: new_height}, anim_time, function(){
					client_content.releaseHeight();
				});
				shade.animate({opacity: 0, height: new_offset_height}, anim_time, function(){
					shade.hide();
					initExpandables();
				});
			});
		})
	}
	
	/**
	 * Перемещает ленту клиентов так, чтобы клиент с указанным индексом был виден
	 * в основной секции. Если клиент уже в этой секции, то перемещения 
	 * не происходит
	 * @param {Number} item_ix
	 */
	function moveReel(item_ix) {
		var item_width = client_items.width(),
			reel_offset = client_list[0].offsetLeft,
			cur_pos = Math.abs(Math.round(reel_offset / item_width));
			
		if (!(item_ix >= cur_pos && item_ix < cur_pos + clients_per_section)) {
			// считаем правильный индекс (правильная позиция блока)
			cur_pos = Math.floor(item_ix / clients_per_section) * clients_per_section;
			
			// нужно двигать
			var new_offset = -(100 / clients_per_section * cur_pos) + '%';
			
			var cur_pix_offset = client_list[0].offsetLeft;
			client_list.css('left', new_offset);
			var new_pix_offset = client_list[0].offsetLeft;
			client_list.css('left', cur_pix_offset);
			
			$t(client_list).tween({
				left: new_pix_offset,
				time: 1,
				transition: 'easeinoutcubic',
				onComplete: function() {
					client_list.css('left', new_offset);
				}
			});
		}
		
		is_animating = true;
		marker.animate({left: Math.abs((cur_pos - item_ix) * 100 / clients_per_section) + '%'}, 1000, 'easeInOutCubic', function(){
			is_animating = false;
		});
	}
	
	client_items.click(function(evt){
		var elem = $(this);
		if (!elem.hasClass('selected') && !is_animating) {
			elem.addClass('selected').siblings().removeClass('selected');
			loadContent(elem.find('h3 a').attr('href'));
			moveReel(client_items.index(this));
		}
		evt.preventDefault();
	});
	
});