(function($){
	$.fn.rotator2d = function(options) {
		var element		= $(this[0]);
		var width		= $(element).find('ul.vtape > li').width();
		var height		= $(element).find('ul.vtape > li').height();
		var hTapes		= $(element).find('ul.htape > li');
		var buttons		= $(element).find('ul.buttons li');
		var views		= $(element).find('ul.htape > li > ul > li');
		var opts		= $(element).find('ul.htape > li > ul > li div.options');


		var defaults	= {
		};

		var options = $.extend(defaults, options);

		var currentHIndex = 0;
		var currentVIndex = 0;
		
		var newVIndex = 0;
		var newHIndex = 0;


		var rotate = true;


		$(buttons).each(function(index) {
			$(this).click(function() {
				rotate = false;
				if (currentHIndex == newHIndex)
				{
					newHIndex = index;
					show();
				}
			});
		});

		$(hTapes).each(function() {
			$(this).find('.options img').each(function(index) {
				$(this).click(function() {
					rotate = false;

					if (currentVIndex == newVIndex)
					{
						newVIndex = index;
						show();
					}
				});
			});
		});


		var getView = function(hIndex, vIndex)
		{
			return $(hTapes).eq(hIndex).find('ul.vtape > li').eq(vIndex);
		}


		var getOptions = function(hIndex)
		{
			return $(hTapes).eq(hIndex).find('div.options');
		}


		var show = function() {
			if (currentHIndex == newHIndex && currentVIndex == newVIndex)
				return;

			if (currentHIndex != newHIndex)
				newVIndex = 0;

			var currentView = getView(currentHIndex, currentVIndex);
			var newView = getView(newHIndex, newVIndex);

			$(views).css('display', 'none');
			$(currentView).css('display', '');

			$(currentView).css('zIndex', 0);
			$(newView).css('zIndex', 10);

			if (currentHIndex != newHIndex)
			{
				$(buttons).removeClass('active');
				$(buttons).eq(newHIndex).addClass('active');

				$(hTapes).eq(newHIndex).css('marginTop', '0px');
				$(newView).css('marginLeft', width + 'px');

				var currentOptions = getOptions(currentHIndex);
				var newOptions = getOptions(newHIndex);

				$(opts).css('display', 'none');
				$(currentOptions).css('display', '');
				
				$(newOptions).css('opacity', 0);
				$(newOptions).css('zIndex', 100);

				$(currentOptions).animate({'opacity': 0}, 200, 'easeInBack', function(){
					$(currentOptions).css('display', 'none');

					$(currentView).animate({marginLeft: width + 'px'}, 500, 'easeInBack', function(){
						$(currentView).css('display', 'none');
						$(newView).css('display', '');

						$(newView).animate({marginLeft: 0 + 'px'}, 500, 'easeOutBack', function(){
							$(newOptions).css('display', '');

							$(newOptions).animate({'opacity': 1}, 200, 'easeOutBack', function(){
								currentHIndex = newHIndex;
							});
						});
					});
				});
			}
			else if (currentVIndex != newVIndex)
			{
				$(newView).css('marginTop', height + 'px');
				$(newView).css('marginLeft', '0px');

				$(currentView).animate({marginTop: height + 'px'}, 500, 'easeInBack', function(){
					$(currentView).css('display', 'none');
					$(newView).css('display', '');

					$(newView).animate({marginTop: 0 + 'px'}, 500, 'easeOutBack', function(){
						currentVIndex = newVIndex;
					});
				});
			}
		}


		var next = function()
		{
			if (!rotate)
				return;

			newHIndex = currentHIndex + 1;
			if (newHIndex >= $(buttons).length)
				newHIndex = 0;

			show(newHIndex, 0);
		}


		$(element).everyTime(10000, next);

		$(buttons).eq(0).addClass('active');
	};
})(jQuery);