/**
 * @author Vlad Yakovlev (scorpix@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 * @version 0.1 (2009-05-19)
 * @requires jQuery
 * @requires jTweener
 */
$(window).load(function() {

	var
		bodyPrefix = 'type_',
		tweenNs = 'runner',
		tweenOptions = {
			time: 1,
			namespace: tweenNs
		},
		timeoutInterval = 5000,
		maxTimeoutInterval = 20000;

	var
		backs = $('#backs .back'),
		letters = $('#logo .letter'),
		runner = $('#logo .runner'),
		line = $('#logo .back'),
		canvases;

	var
		curIndex = -1,
		newIndex,
		loadedCount = 0,
		images = [],
		isAnimate = false,
		startDnd,
		startLeft,
		timeoutId;

	load();

	function load() {
		backs.find('img').each(function() {
			images.push(new Image());
			images[images.length - 1].onload = function() {
				loadedCount++;
				loadedCount >= backs.size() && init();
			};
			images[images.length - 1].src = $(this).attr('src');
		});

		jTweener.addNSAction({
			onComplete: function() {
				backs.eq(curIndex).css('display', '');
				backs.eq(newIndex).css({
					opacity: '',
					zIndex: ''
				});
				curIndex = newIndex;
				hideCanvases();
				isAnimate = false;
				$('body').removeClass('animated');

				timeoutId = setTimeout(next, timeoutInterval);
			}
		}, tweenNs);
	}

	function init() {
		runner.removeClass('hidden');
		createCanvases();

		$(window).resize(updateSizes).resize();

		change(0);
		letters.click(function() {
			if ('pointer' != $(this).css('cursor')) return;

			timeoutInterval = maxTimeoutInterval;
			var index = $(this).prevAll('.letter').size();
			index == curIndex || change(index);
		});
		line.click(function(evt) {
			timeoutInterval = maxTimeoutInterval;
			var index = getIndex(parseInt(evt.pageX) - line.offset().left);
			index == curIndex || change(index);
		});
		runner.mousedown(startDnd);

		timeoutId = setTimeout(next, timeoutInterval);
	}

	function next() {
		if(curIndex + 1 >= images.length && !last){
			setTimeout(next, 5000);
			last = true;
			return;
		}else{
			last = false;
		}
		change(curIndex + 1 >= images.length ? 0 : curIndex + 1);
	}

	/**
	 * @param {Event} evt
	 */
	function startDnd(evt) {
		evt.preventDefault();
		clearTimeout(timeoutId);

		if (isAnimate) return;

		timeoutInterval = maxTimeoutInterval;

		startDnd = parseInt(evt.pageX);
		startLeft = parseInt(runner.css('left'));

		$(document).bind('mousemove', dnd).bind('mouseup', stopDnd);

		return false;
	}

	/**
	 * @param {Event} evt
	 */
	function dnd(evt) {
		evt.preventDefault();

		var moved = parseInt(evt.pageX) - startDnd;
		var newLeft = startLeft + moved;
		var isStop = false;

		if (0 > newLeft) {
			newLeft = 0;
			isStop = true;
		} else if (line.width() < newLeft) {
			newLeft = line.width();
			isStop = true;
		}

		letters.filter('.hover').removeClass('hover');
		letters.eq(getIndex(newLeft)).addClass('hover');

		runner.css('left', newLeft);

		isStop && stopDnd();

		return false;
	}

	function stopDnd() {
		var index = getIndex(parseInt(runner.css('left')));

		$(document).unbind('mousemove', dnd).unbind('mouseup', stopDnd);
		change(index);
	}

	function change(index) {
		if (isAnimate) return;

		clearTimeout(timeoutId);

		isAnimate = true;
		$('body').addClass('animated');

		var newPos = parseInt(letters.eq(index).css('left')) + Math.round(letters.eq(index).width() / 2);

		newIndex = index;

		showCanvases();

		$('body').removeClass(bodyPrefix + (curIndex + 1)).addClass(bodyPrefix + (newIndex + 1));

		$t(backs.eq(curIndex), tweenOptions).tween({ opacity: 0 });
		if (curIndex != index) {
			backs.eq(index).css({
				opacity: 0,
				zIndex: 1
			});
			backs.eq(curIndex).css('display', 'block');
			$t(backs.eq(index), tweenOptions).tween({ opacity: 1 });
		}

		$t(runner, tweenOptions).tween({ left: newPos });
	}

	function getIndex(left) {
		for (var i = 0; i < letters.size(); i++) {
			var min = parseInt(letters.eq(i).css('left'));

			if (min > left) {
				return i - 1;
			}
		}

		return letters.size() - 1;
	}

	function updateSizes() {
		var
			winWidth = $('#backs').width(),
			winHeight = $('#backs').height();

		backs.each(function(index) {
			if (!$(this).hasClass('float')) return;

			if (images[index].width / images[index].height < winWidth / winHeight) {
				$(this).find('.container').removeClass('by_height');
			} else {
				$(this).find('.container').addClass('by_height');
			}
		});
		updateCanvases();
	}

	function createCanvases() {
		if (!jCommon.isCanvas) return;

		for (var i = 0; i < images.length; i++) {
			$('<canvas class="shape"></canvas>').insertBefore(backs.eq(i).find('.text'));
		}

		canvases = backs.find('canvas');
	}

	function updateCanvases() {
		if (!jCommon.isCanvas) return;

		var
			winWidth = $('#backs').width(),
			winHeight = $('#backs').height(),
			width,
			height;

		for (var i = 0; i < images.length; i++) {
			if (images[i].width / images[i].height < winWidth / winHeight) {
				width = winWidth;
				height = winWidth * images[i].height / images[i].width;
			} else {
				width = winHeight * images[i].width / images[i].height;
				height = winHeight;
			}

			var canvas = canvases.eq(i).attr({ height: height, width: width });
			var ctx = canvas.get(0).getContext('2d');

			ctx.drawImage(images[i], 0, 0, width, height);
		}
	}

	function showCanvases() {
		if (!jCommon.isCanvas) return;

		backs.filter('.float').find('img').addClass('hidden');
		canvases.removeClass('hidden');
	}

	function hideCanvases() {
		if (!jCommon.isCanvas) return;

		backs.filter('.float').find('img').removeClass('hidden');
		canvases.addClass('hidden');
	}
});