/**
 * @author Vlad Yakovlev (red.scorpix@gmail.com)
 * @link www.scorpix.ru
 * @requires jQuery
 * @requires jTweener
 */

$(function() {
	var
		rootEl = $('#content .humans'),
		wrapEl = rootEl.find('.wrap'),
		itemEls = rootEl.find('.item'),
		arrowEls = rootEl.find('.line .icon');

	var
		turn = 0,
		isAnimate = false;

	arrowEls.eq(0).click(prev);
	arrowEls.eq(1).click(next);

	update();

	function prev() {
		if (isAnimate) {
			turn = -1;
			return;
		}

		turn = 0;
		isAnimate = true;

		var
			selEls = itemEls.filter('.item_selected'),
			el = selEls.eq(0).prev('.item'),
			columns = selEls.length,
			width = rootEl.width(),
			moveWidth = Math.round(width / columns);

		wrapEl.width(width);
		el.css({
			left: -moveWidth,
			position: 'absolute'
		}).addClass('item_selected');
		selEls.eq(selEls.length - 1).css({
			left: 0,
			position: 'relative',
			top: 0,
			visibility: 'visible'
		}).removeClass('item_selected');
		update();

		$t(wrapEl, {
			time: .5,
			left: moveWidth,
			onComplete: function() {
				wrapEl.css({
					left: '',
					width: ''
				});
				el.css({
					left: '',
					position: ''
				});
				selEls.eq(selEls.length - 1).css({
					left: '',
					position: '',
					top: '',
					visibility: ''
				});
				isAnimate = false;

				if (-1 == turn) {
					prev();
				} else if (1 == turn) {
					next();
				}
			}
		}).tween();
	}

	function next() {
		if (isAnimate) {
			turn = 1;
			return;
		}

		turn = 0;
		isAnimate = true;

		var
			selEls = itemEls.filter('.item_selected'),
			el = selEls.eq(0),
			columns = selEls.length,
			width = rootEl.width(),
			moveWidth = Math.round(width / columns);

		wrapEl.css({
			left: moveWidth,
			width: width
		});
		wrapEl.width(width);
		el.removeClass('item_selected').css({
			left: -moveWidth,
			top: 0,
			visibility: 'visible'
		});
		selEls.eq(selEls.length - 1).next('.item').addClass('item_selected');
		update();

		$t(wrapEl, {
			time: .5,
			left: 0,
			onComplete: function() {
				wrapEl.css({
					left: '',
					width: ''
				});
				el.css({
					left: '',
					top: '',
					visibility: ''
				});
				isAnimate = false;

				if (-1 == turn) {
					prev();
				} else if (1 == turn) {
					next();
				}
			}
		}).tween();
	}

	function update() {
		arrowEls.eq(0).css('visibility', itemEls.eq(0).hasClass('item_selected') ? 'hidden' : '');
		arrowEls.eq(1).css('visibility', itemEls.eq(itemEls.length - 1).hasClass('item_selected') ? 'hidden' : '');
	}
});