$(function() {
		//Наши 4 пункта
	var $listItems 		= $('#rm_container > ul > li'),
		totalItems		= $listItems.length,
		
		//Управление
		$rm_next		= $('#rm_next'),
		$rm_prev		= $('#rm_prev'),
		$rm_play		= $('#rm_play'),
		$rm_pause		= $('#rm_pause'),
		
		//Маски и углы для слайдера
		$rm_mask_left	= $('#rm_mask_left'),
		$rm_mask_right	= $('#rm_mask_right'),
		$rm_corner_left	= $('#rm_corner_left'),
		$rm_corner_right= $('#rm_corner_right'),
		
		//Проверка версии браузера <= IE8
		ieLte8			= ($.browser.msie && parseInt($.browser.version) <= 8),
		
		RotateImageMenu	= (function() {
				//Разница между анимациями пунктов
			var	timeDiff			= 300,
				//Время между анимациями для слайдшоу
				slideshowTime		= 3000,
				slideshowInterval,	
				//Флаг вращения изображения
				isRotating			= false,
				//Счетчик изображений в итерации слайдшоу
				completed			= 0,
				/*
				Все изображения имеют ширину 310 px и высоту 465 px.
				Данные параметры надо вычислять автоматически,
				если нужно использовать изображения разных размеров.
				
				Мы устанавливаем вращение оригинала вокруг центра
				с координатами x = ширина/2 и y = высота*2
				*/
				origin				= ['155px', '930px'],
				init				= function() {
					configure();
					initEventsHandler();
					startSlideshow();
				},
				//Инициализация некторых событий
				initEventsHandler	= function() {
					/*
					Стрелки "следующий" и "предыдущий":
					останавливаем слайдшоу, если оно активно
					и вращаем каждое изображение.
					1 	поворот вправо,
					-1 	поворот влево
					*/
					$rm_next.bind('click', function(e) {
						stopSlideshow();
						rotateImages(1);
						return false;
					});
					$rm_prev.bind('click', function(e) {
						stopSlideshow();
						rotateImages(-1);
						return false;
					});
					/*
					Остановка и запуск слайдшоу
					*/
					$rm_play.bind('click', function(e) {
						startSlideshow();
						return false;
					});
					$rm_pause.bind('click', function(e) {
						stopSlideshow();
						return false;
					});
					/*
					Добавляем события для мыши и кнопок влево/вправо
					*/
					$(document).bind('mousewheel', function(e, delta) {
						if(delta > 0) {
							stopSlideshow();
							rotateImages(0);
						}	
						else {
							stopSlideshow();
							rotateImages(1);
						}	
						return false;
					}).keydown(function(e){
						switch(e.which){
							case 37:
								stopSlideshow();
								rotateImages(0);
								break;
							case 39:
								stopSlideshow();
								rotateImages(1);
								break;
						}
					});
				},
				/*
				Вращаем каждое изображение.
				Устанавливаем задержку между анимациями пунктов.
				*/
				rotateImages		= function(dir) {
					//Если анимация в процессе выполнения.
					if(isRotating) return false;
					
					isRotating = true;
					
					$listItems.each(function(i) {
						var $item 				= $(this),
							/*
							Вычисление задержки.
							Если вращение выполняется вправо, 
							то первый пункт для вращения будет анимироваться первым,
							иначе - последним.
							*/
							interval			= (dir === 1) ? i * timeDiff : (totalItems - 1 - i) * timeDiff;
						
						setTimeout(function() {
								//Изображения, связанные с данным пунтком
							var	$otherImages		= $('#' + $item.data('images')).children('img'),
								totalOtherImages	= $otherImages.length;
								
								//Текущее изображение
								$img				= $item.children('img:last'),
								//Получаем данные current
								current				= $item.data('current');
								//Проверяем выход за пределы списка
								if(current > totalOtherImages - 1)
									current = 0;
								else if(current < 0)
									current = totalOtherImages - 1;
								
								//Следующее изображение для вывода и его начальное вращение (зависит от направлненияы)
								var otherRotation	= (dir === 1) ? '-30deg' : '30deg',
									$other			= $otherImages.eq(current).clone();
									
								//Для IE <= 8 вращений не будет, но будет затухание ... 
								//Лучше, чем ничего :)	
								if(!ieLte8)
									$other.css({
										rotate	: otherRotation,
										origin	: origin
									});
								
								(dir === 1) ? ++current : --current;
								
								//Вставляем следующее изображение для <li>
								$item.data('current', current).prepend($other);
								
								//Окончательное вращение для текущего изображения
								var rotateTo		= (dir === 1) ? '80deg' : '-80deg';
								
								if(!ieLte8) {
									$img.animate({
										rotate	: rotateTo
									}, 1200, function(){
										$(this).remove();
										++completed;
										if(completed === 4) {
											completed = 0;
											isRotating = false;
										}
									});
									$other.animate({
										rotate	: '0deg'
									}, 600);
								}
								else {
									$img.fadeOut(1200, function(){
										$(this).remove();
										++completed;
										if(completed === 4) {
											completed = 0;
											isRotating = false;
										}
									});
								}
								
						}, interval );	
					});
					
				},
				//Устанавливаем начальное вращение
				configure			= function() {
					if($.browser.msie && !ieLte8)
						rotateMaskCorners();
					else if(ieLte8)
						hideMaskCorners();
						
					$listItems.each(function(i) {
						//Начальное значение current равно 1, 
						//так как мы уже показали первое изображение
						var $item = $(this).data('current', 1);
						
						if(!ieLte8)
						$item.transform({rotate: $item.data('rotation') + 'deg'})
							 .find('img')
							 .transform({origin: origin});
					});
				},
				//Вращаем маски и углы
				rotateMaskCorners	= function() {
					$rm_mask_left.transform({rotate: '-3deg'});
					$rm_mask_right.transform({rotate: '3deg'});
					$rm_corner_left.transform({rotate: '45deg'});
					$rm_corner_right.transform({rotate: '-45deg'});
				},
				//Скрываем маски и углы
				hideMaskCorners		= function() {
					$rm_mask_left.hide();
					$rm_mask_right.hide();
					$rm_corner_left.hide();
					$rm_corner_right.hide();
				},
				startSlideshow		= function() {
					clearInterval(slideshowInterval);
					rotateImages(1);
					slideshowInterval	= setInterval(function() {
						rotateImages(1);
					}, slideshowTime);
					//Выводим кнопку паузы и скрываем кнопку запуска
					$rm_play.hide();
					$rm_pause.show();
				},
				stopSlideshow		= function() {
					clearInterval(slideshowInterval);
					//Выводим кнопку запуска и скрываем кнопку паузы
					$rm_pause.hide();
					$rm_play.show();
				};
			
			return {init : init};
		})();
		
	RotateImageMenu.init();
});