$(document).ready(function(){
		$(function(){
			/*************************Editable Variables****************************/
			//the two variables below should be edited to achieve the disired effect
			var frequency = 6000; //effect interval in ms
			var animationSpeed = 1; //total animation time in ms
			/*************************End Editable Variables************************/

			var count = 1;
			var current = 1;
			var to = -1;
			var pause = false;
			var force = false;
			var rotateElements = $('.rotatable').children('ul');
			var timer = setInterval(rotate, frequency);

			//elements with class pause can block the rotation
			$('.pause').mouseover(function(){
				pause = true;
			}).mouseout(function(){
				pause = false;
			});

			//rotate link clicked
			$('a.rotate').click(function(){
				force = true;
				to = $(this).html(); 
				rotate();
				force = false;
				return(false);
			});


			function rotate(){
				//console.log('rotateCurrent: '+current);
				//console.log('rotateTo: '+to);

				if(!pause || force){
					var next = 1;

					if(to == current)
					return;

					//remove the active attribute from the current element
					rotateElements.children(".active").attr('class','');
					
					//if no index was provided just go to the next one
					if(to == -1){
						next = current / 2 * 2 + 1;
						
						if(next >= count)
						next = 1;

						current = next;
					}
					else{
						next = to / 2 * 2;
						current = next;
						to = -1;
					}

					//console.log('rotateNext: '+next);

					//activate the next element
					rotateElements.each(function(){
						var width = $(this).parent().css('width');
						width = width.substr(0,width.length-2) * -1;

						//activate node based on id
						var nextNode = $(this).children('#'+next).attr('class','active');

						//run animation
						/*
						$(this).stop().animate({"opacity": "0.0"}, animationSpeed, function(){
							$(this).children(":not(.active)").attr('class','inactive');
							$(this).prepend(nextNode.remove());
							$(this).css('opacity','1.0');
						});*/
						
						//swap without animation
						$(this).children(":not(.active)").attr('class','inactive');
						$(this).prepend(nextNode.remove());

					});
					
					//activate correct link
					$('.links').children('ul').children('.active').attr('class','');
					$('.links').children('ul').children('#'+next).attr('class','active');
				}
			}

			//hide all elements that are not active initially
			rotateElements.children(":not(.active)").attr('class','inactive');

			//add initial index to li elements
			rotateElements.each(function(){
				count = 1;
				$(this).children().each(function(){
					$(this).attr('id',count);
					count++;
				});
			});

		});
	});