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

$(function() {

	/** До какого размера должен уменьшиться чувак после выстрела, в процентах */
	var shoot_scale = 0.1;

	var people = $('#slide2 ul li');
	var killed = 0;
	var current_slide = 1;

	/** Режим автопилота */
	var autopilot = true;

	var autopilot_timer = null;

	/**
	 * Переключалка чуваков. Когда они все убиты — показывает их
	 */
	var people_switcher = $('#people-switcher');

	// сохраню цвет ссылки, чтобы можно было его потом вернуть
	var href_color = people_switcher.css('color');

	// блокирую переключалку, чтобы она выглядела как обычный текст
	people_switcher
		.css({color: '#000000', borderBottomColor: '#ffffff'})
		.addClass('blocked')
		.click(function(){
			if (!$(this).is('.blocked')) {
				hideTinkoff();
			}
		});

	/**
	 * Флажок используется для блокировки взаимодействия пользователя с
	 * элементами на слайдах во время анимации. В частности, блокируется
	 * hover на пузырях чуваков,и чтобы при меремещении слайда не возникало
	 * неприятных эффектов
	 */
	var block_interaction = false;

	/**
	 * Добавляем анимаций
	 */
	jQuery.extend(jQuery.easing, {
		shoot: function (a, t, b, c, d) {
			//console.log(arguments);
			return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
		},

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

		slide_move: function(a, t, b, c, d, s){
			if(s == undefined) s = 1.70158;
	        if((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
	        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
        }
	});

	/**
	 * Перемещение к определенному слайду
	 *
	 * @param {Number}
	 *            num Номер слайда (1—3)
	 */
	function moveToSlide(num) {

		if (current_slide == num) {
			return;
		}

		var reel_size = $('#slides-wrapper').width();
		var obj = $('#slides-container');
		obj.css('left', obj[0].offsetLeft);

		// если переходим на второй слайд, то обязательно нужно
		// вернуть чуваков на место
		if (num == 2) {
			revertPeople();
			startAutopilot();
		}

		block_interaction = true;

		obj.animate({left: -reel_size * (num - 1)}, 800, 'slide_move', function(){
			block_interaction = false;
			obj.css('left', '-' + ((num - 1) * 100) + '%');
		});

		current_slide = num;
		$('#logo').css('cursor', (num == 2) ? 'pointer' : 'default')
	}

	/**
	 * Возвращает чуваков на исходную позицию
	 * @param {Boolean} animate Нужно ли анимировать
	 */
	function revertPeople(animate){

		var shared_props = {
			width: 'auto',
			height: 'auto',
			left: 0,
			top: 0,
			opacity: 1
		}

		var images = people.find('img').removeClass('killed');

		if (!animate) {
			images.css('display', 'block').css(shared_props);
			$('#slide2 .description').show();
		} else {
			images.each(function(i){
				var man = $(this);
				shared_props.width = man.attr('width');
				shared_props.height = man.attr('height');
				setTimeout(function(){
					man.css('display', 'block').animate(shared_props, 500, 'reveal');
				}, i * 50);
			});
			$('#slide2 .description').fadeIn(500);
		}

		killed = 0;
		$('#easter-egg').css('top', '100%');
		$('#slide2 ul').show();
	}

	function autopilotQueue(fn, time){
		time = time || 3000;
		autopilot_timer = setTimeout(fn, time);
	}

	/**
	 * Прячет случайно выбранного чувака. Используется в режиме автопилота
	 */
	function hideRandomMan(){
		// достаем случайного чувака
		var alive = people.find('img').not('.killed');

		if (alive.length) {
			var man = alive.get( Math.floor(Math.random() * alive.length) );

			autopilotQueue(function(){
				// сначала покажем подсказку
				showBubble.apply(man);

				// ...и спрячем его, независимо от автопилота
				setTimeout(function(){
					hideBubble.apply(man);
				}, 3000);

				// отстреливаем
				autopilotQueue(function(){
					shoot.apply(man);

					// начинаем все сначала
					autopilotQueue(hideRandomMan);
				});
			});
		} else {
			// люди закончились, отключаю автопилот
			stopAutopilot();
		}
	}

	/**
	 * Запуск режима автопилота. Он будет случайным образом выбирать чувака,
	 * показывать его всплывающую подсказку, а затем — прятать
	 */
	function startAutopilot(){
		if (autopilot) {
			// первоначальная задержка перед запуском автопилота
			autopilotQueue(hideRandomMan, 3000);
		}
	}

	function stopAutopilot(){
		autopilot = false;
		clearTimeout(autopilot_timer);
	}



	// вешаю события на ссылки, перемещающие слайды
	$('#slides-container .move-to').click(function() {
		var re = /slide(\d+)/;
		var m = re.exec(this.className);
		if (m) {
			moveToSlide(parseInt(m[1], 10));
		}
	});

	/**
	 * Убиваем чувака
	 */
	function kill(){
		killed++;
		if (killed >= people.length) {
			showTinkoff();
			$('#slide2 ul').hide();
		}
	}

	/**
	 * Показываем Тинькова после убийства всех чуваков
	 */
	function showTinkoff(){
		var obj = $('#easter-egg');
		var pos = obj[0].offsetTop;
		obj.css('top', pos).animate({
			top: pos - obj.height()
		}, 600, 'shoot');

		/* people_switcher.animate({
			color: href_color,
			borderBottomColor: href_color
		}, 500, function(){
			people_switcher.css({
				color: '',
				borderBottomColor: ''
			}).removeClass('blocked');
		}); */
		$('#slide2 .description').fadeOut(500);
	}

	function hideTinkoff(){
		var obj = $('#easter-egg');
		obj.animate({
			top: '+=' + obj.height()
		}, 600, 'swing', function(){
			obj.css('top', '100%');
			revertPeople(true);
		});

		people_switcher
			.animate({color: '#000000', borderBottomColor: '#ffffff'}, 500)
			.addClass('blocked');
	}

	$('#logo').click(function(){
		moveToSlide(1);
	});

	/**
	 * Обработка всплывающих подсказок: добавление им необходимых элементов
	 * для правильного внешнего вида
	 * @param {Element} elem
	 */
	function workoutTooltip(elem){
		// обрамляю тултипы нужными конструкциями
		var tooltip_text = $('p', elem);
		if (tooltip_text.length) {
			var bubble = $('<div class="bubble"></div>');

			var bubble_body = $('<div class="bubble-body"></div>');
//			bubble_body.append('<div class="border"><div class="corner tl"></div><div class="corner tr"></div></div>');
			bubble_body.append(tooltip_text);
//			bubble_body.append('<div class="border"><div class="corner bl"></div><div class="corner br"></div></div>');
			bubble.append(bubble_body);

			bubble.append('<div class="tail"></div>');
			$(elem).append(bubble);
		}
	}

	/**
	 * Показывает всплывающую подсказку для чувака. Работает в контексте
	 * элемента img чувака
	 * @param {MouseEvent} event
	 * @scope Element
	 */
	function showBubble(event){
		if (!block_interaction) {
			var bubble = $(this).siblings('.bubble');
			bubble.find('.bubble-body, .tail').fadeIn(300);

			// если пришел event — значит, вызвали подсказку при наведении
			// курсора на чувака, поэтому отключаем автопилот
			if (event) {
				stopAutopilot();
			}
		}
	}

	/**
	 * Скрывает всплывающую подсказку для чувака. Работает в контексте
	 * элемента img чувака
	 * @scope Element
	 */
	function hideBubble(){

		if (!block_interaction) {
			var bubble = $(this).siblings('.bubble');
			bubble.find('.bubble-body, .tail').fadeOut(300);
		}
	}

	/**
	 * Пристреливает чувака за стойкой (включает анимацию исчезновения).
	 * Работает в контексте элемента img чувака
	 * @scope Element
	 */
	function shoot(){
		var img = $(this);
		var target_width = Math.round(img.width() * shoot_scale);
		var target_height = Math.round(img.height() * shoot_scale);

		img.addClass('killed').animate({
			width: target_width,
			height: target_height,
			left: (img.width() - target_width) / 2,
			top: 110
		}, 600, 'shoot', kill).siblings('.bubble').find('.bubble-body, .tail').hide();

		img.fadeOut(100);
	}

	/*
	 * Проходимся по всем чувакам и на клик по картинке добавяем анимацию скрытия
	 */
	people.each(function(){
		$(this).css({
			width: this.offsetWidth,
			height: this.offsetHeight
		}).find('img').click(shoot).hover(showBubble, hideBubble);

		// обрамляю тултипы нужными конструкциями
		workoutTooltip(this);
	});
	
	
	
	
	$('.delete .pic').click(function(){
		$(this).css('cursor', 'default');
		$(this).parent().find('.x').show();
		$(this).parent().find('ul').css('visibility', 'visible');
	});

});