/**
 * @requires jQuery
 * @requires jTweener
 */

function linePictures(rootEl) {
	rootEl = $(rootEl);

	var
		sectionsEl = rootEl.find('.sections'),
		sectionsEls = sectionsEl.find('.section'),
		linksEls = rootEl.find('.picture_panel .item'),
		isAnimate = false,
		selected = random(0, linksEls.length - 1),
		cornerEl = $('<ins class="ar"/>'),
		tweenTime = 0.7,
		tweenNs = 'linePictures' + Math.random(),
		turn = false,
		timeoutId,
		timeout = 3000,
		userAction = false;

	init();

	function init() {
		var selLinkEl = linksEls.filter('.selected');

		if (selLinkEl.length) {
			selected = selLinkEl.prevAll('.item').length;
		} else {
			sectionsEls.eq(selected).addClass('section_selected');
			linksEls.eq(selected).addClass('selected');
		}

		cornerEl.appendTo(linksEls.eq(selected));

		if ($c.browser.msie && 6 >= parseInt($c.browser.version)) {
			var pngEl = $('<ins />').appendTo(cornerEl);
			jCommon.fixIePng(pngEl[0]);
		}

		selectInterval(selected);

		linksEls.each(function(index) {
			var el = $(this);

			el.find('img').click(function() {
				if (el.hasClass('selected')) return;

				userAction = true;

				if (isAnimate) {
					turn = index;
					return;
				}

				clearTimeout(timeoutId);
				select(index);
			});
		});
	}

	function selectInterval(index) {
		if (1 < linksEls.length && $('#logo b').length) {
			timeoutId = setTimeout(function() {
				var newIndex = index + 1;

				if (newIndex >= linksEls.length) {
					newIndex = 0;
				}

				select(newIndex);
			}, timeout);
		}
	}

	function select(index) {
		isAnimate = true;

		var
			curSection = sectionsEls.eq(selected),
			newSection = sectionsEls.eq(index),
			curLink = linksEls.eq(selected),
			newLink = linksEls.eq(index);

		var
			layoutWidth = $('#layout').width(),
			winWidth = $(window).width(),
			fullWidth = layoutWidth > winWidth ? layoutWidth : winWidth,
			sectionsLeft = Math.round(sectionsEl.offset().left),
			sectionWidth = sectionsEl.width(),
			curCornerLeft = Math.round(curLink.width() / 2),
			newCornerLeft = Math.round(newLink.offset().left - curLink.offset().left + newLink.width() / 2);

		var tempEl = $(document.createElement('div')).css('height', sectionsEl.height()).prependTo(rootEl);

		sectionsEl.css({
			left: 0,
			marginLeft: -sectionsLeft,
			overflow: 'hidden',
			position: 'absolute',
			top: 0,
			width: fullWidth
		});
		curSection.css({
			left: sectionsLeft,
			width: sectionWidth
		});
		newSection.css({
			left: index < selected ? -sectionWidth : fullWidth,
			top: 0,
			visibility: 'visible',
			width: sectionWidth
		});
		cornerEl.css('left', curCornerLeft);

		jTweener.addNSAction({
			onComplete: function() {

				tempEl.remove();
				sectionsEl.css({
					left: '',
					marginLeft: '',
					overflow: '',
					position: '',
					top: '',
					width: ''
				});
				curSection.removeClass('section_selected').css({
					left: '',
					width: ''
				});
				newSection.addClass('section_selected').css({
					left: '',
					top: '',
					visibility: '',
					width: ''
				});
				selected = index;

				cornerEl.css('left', '').appendTo(newLink);

				jTweener.removeNSActions(tweenNs);
				isAnimate = false;

				if (false === turn) {
					if (!userAction) {
						selectInterval(index);
					}
				} else {
					select(turn);
					turn = false;
				}
			}
		}, tweenNs);

		$t(newSection, {
			time: tweenTime,
			left: sectionsLeft,
			'namespace': tweenNs,
			'transition': 'easeNone'
		}).tween();
		$t(curSection, {
			time: tweenTime,
			left: index < selected ? fullWidth : -sectionWidth,
			'namespace': tweenNs,
			'transition': 'easeNone'
		}).tween();
		$t(cornerEl, {
			time: tweenTime,
			left: newCornerLeft,
			'namespace': tweenNs,
			'transition': 'easeNone'
		}).tween();

		curLink.removeClass('selected');
		newLink.addClass('selected');
	}

	function random(min, max) {
		min = parseInt(min);
		max = parseInt(max);

		return Math.floor(Math.random() * (max - min + 1)) + min;
	}
}

$(function() {
	$('#content .line_pictures').each(function() {
		linePictures(this);
	});
});