/**
 * @author Sergey Chikuyonok (sc@design.ru)
 * @copyright Art.Lebedev Studio (http://www.artlebedev.ru)
 */

$(function() {

	/** Элементы, в которых нужно создать анимированные стрелки */
	var items = $('#services li');
	var arrowItems = $('#services[class!=cards] li'); 
	var anim_time = 250;

	/**
	 * Обрамляет каждое слово впереданном элементе span'ом
	 *
	 * @param {Element}
	 *            node
	 */
	function wordWrap(node) {
		var text;
		if (node.hasChildNodes()) {
			// это тэг, вызываем новый цикл сканирования
			for (var i = 0, il = node.childNodes.length; i < il; i++) {
				wordWrap(node.childNodes[i]);
			}
		} else if (node.nodeType == 3 && !isWhiteSpace(node.nodeValue)) {
			// это текстовый элемент, обрамляем слова
			var span = document.createElement('span');
			span.innerHTML = node.nodeValue.replace(/(\S+)/g, '<span class="w">$1</span>');
			node.parentNode.replaceChild(span, node);
		}
	}

	/**
	 * Проверяет, является ли переданная строка последовательностью пробельных
	 * символов.
	 *
	 * @param {String}
	 *            str
	 * @return {Boolean}
	 */
	function isWhiteSpace(str) {
		return !(str.replace(/\s+/g, ''));
	}
/*
	arrowItems.each(function() {
		var arrow = $('<div class="arrow"></div>');

		$(this).prepend(arrow).find('a').hover(function() {
			arrow.stop().animate({
				left : -20,
				opacity : 1
			}, anim_time, 'show_arrow');
		},

		function() {
			arrow.stop().animate({
				left : 0,
				opacity : 0
			}, anim_time, 'hide_arrow');
		});
	});
*/
	var current_item = items.filter('.selected');
	if (current_item.size()) {
		wordWrap(current_item[0]);
		/**
		 * Размеры линий. Длина хэша — количество линий, ключ — позиция
		 * по вертикали, значение — ширина и высота линии
		 */
		var sizes = {};

		/*
		 * Считаю размеры каждой строки. Полагаюсь на то, что элементы в массиве
		 * будут идти в том порядке, в котором они лежат в дереве документа.
		 * Использую сумму offsetLeft + offsetWidth для того, чтобы учитывались
		 * пробелы между словами.
		 */
		current_item.find('span.w').each(function() {
			sizes[this.offsetTop] = {
				width : this.offsetLeft + this.offsetWidth,
				height : this.offsetHeight
			};
		});

		var counter = 0, delay = 500, time = 1000;
		$.each(sizes, function(i, n) {
			var marker = $('<div class="marker"></div>').css({
				top : parseInt(i),
				height : n.height
			});
			current_item.prepend(marker);

			setTimeout(function(){
				marker.animate({width : n.width + 0}, time, 'swing');
			}, counter * time + delay);

			counter++;
		});

		setTimeout(function(){
			current_item.addClass('marked');
			current_item.find('.marker').remove();
		}, counter * time + delay);
	}

	/**
	 * Добавляем анимаций
	 */
	jQuery.extend(jQuery.easing, {
		show_arrow : function(a, t, b, c, d) {
			return c * ((t = t / d - 1) * t * t + 1) + b;
		},

		hide_arrow : function(a, t, b, c, d) {
			return c * (t /= d) * t * t + b;
		}
	});

});

/**
 * Сканирует элемент и обрамляет каждое слово span'ом
 *
 * @param {Element}
 *            node
 */
/*
 */