var rot_box = "#rot > div";
var rot_num = "#nums > div";
var rot_desc = "#desc > div";

var first_class = 'rotator-first';
var left_class = 'rotator-left';
var right_class = 'rotator-right';

var config_first_toRight = {
	opacity: 0.5,
	left: '0',
	top: '60',
	width: '180',
	height: '100',
}
var config_first_toLeft = {
	opacity: 0.5,
	left: '320',
	top: '60',
	width: '180',
	height: '100',
}

var config_left_toRight = {
	left: '+=320',
}
var config_left_toLeft = {
	opacity: 1,
	top: '20',
	left: '100',
	width: '312',
	height: '155',
}

var config_right_toRight = {
	opacity: 1,
	top: '20',
	left: '100',
	width: '312',
	height: '155',
}
var config_right_toLeft = {
	left: '0',
}

function auto_step()
{
	var count = $(rot_box).size();
	if(count!=1)
	{
		if(count==2)
		{
			var goLeft = $(rot_box+'.'+left_class);
			var goRight = $(rot_box+'.'+right_class);
			
			var isLeft = $(rot_box).hasClass(left_class);
			var isRight = $(rot_box).hasClass(right_class);
			if(isLeft)
			{
				moveTo = goLeft.index(rot_box);
								  
				$(rot_box+'.'+left_class).css('z-index', '3').stop(true, true).animate(config_left_toLeft, 300).removeClass();
								  
				$(rot_box+'.'+first_class).css('z-index', '2').stop(true, true).animate(config_first_toLeft, 300, function()
					{
						$(goLeft).addClass(first_class);
					}).removeClass().addClass(right_class);
					
					
				$(rot_num).removeClass('act');
				$(rot_num).eq(moveTo).addClass('act');
					
				$(rot_desc+'.ac').hide().removeClass('ac');
				$(rot_desc).eq(moveTo).fadeIn("fast").addClass('ac');
			}
			else if(isRight)
			{
				moveTo = goRight.index(rot_box);
								  
				$(rot_box+'.'+right_class).css('z-index', '3').stop(true, true).animate(config_right_toRight, 300).removeClass();
								  
				$(rot_box+'.'+first_class).css('z-index', '2').stop(true, true).animate(config_first_toRight, 300, function()
					{
						$(goRight).addClass(first_class);
					}).removeClass().addClass(left_class);
					
					
				$(rot_num).removeClass('act');
				$(rot_num).eq(moveTo).addClass('act');
					
				$(rot_desc+'.ac').hide().removeClass('ac');
				$(rot_desc).eq(moveTo).fadeIn("fast").addClass('ac');
			}
		}
		else
		{
			var clicked = $(rot_box+'.'+right_class);
			moveTo = clicked.index(rot_box);
			$(rot_box+'.'+right_class).css('z-index', '3').animate(config_right_toRight, 300).removeClass();
							  
			$(rot_box+'.'+left_class).css('z-index', '2').animate(config_left_toRight, 300).removeClass().addClass(right_class);
							  
			$(rot_box+'.'+first_class).css('z-index', '2').animate(config_first_toRight, 300, function()
				{
					$(clicked).addClass(first_class);
				}).removeClass().addClass(left_class);
				
				
			$(rot_num).removeClass('act');
			$(rot_num).eq(moveTo).addClass('act');
				
			$(rot_desc+'.ac').hide().removeClass('ac');
			$(rot_desc).eq(moveTo).fadeIn("fast").addClass('ac');
		}
	}
}

$(document).ready(function()
{
	
	var num = $(rot_box).size();
	for(i=0;i<num;i++)
	{
		$("#nums").append("<div></div>");
	}		
	
	if(num<2)
	{
		$(rot_desc).removeClass();
		$(rot_desc).eq(0).addClass('ac');
		$(rot_num).eq(0).addClass('act');
		$(rot_box).removeClass();
		$(rot_box).eq(0).addClass(first_class);
	}
	else if(num>1)
	{
		$(rot_desc).removeClass();
		$(rot_desc).eq(1).addClass('ac');
		$(rot_box).eq(0).addClass(left_class).css({opacity: 0.5});
		$(rot_box).eq(1).addClass(first_class);
		$(rot_box).eq(2).addClass(right_class).css({opacity: 0.5});
		$(rot_num).eq(1).addClass('act');
	}
	
	$(rot_box).live('click', function()
	{

		if($(this).hasClass(right_class))
		{
			var clicked = $(this);
			$(rot_box+'.'+right_class).css('z-index', '3').animate(config_right_toRight, 300).removeClass();

			$(rot_box+'.'+left_class).css('z-index', '2').animate(config_left_toRight, 300).removeClass().addClass(right_class);
						  
			$(rot_box+'.'+first_class).css('z-index', '2').animate(config_first_toRight, 300, function()
			  {
				$(clicked).addClass(first_class);
			  }).removeClass().addClass(left_class);
		}
		else if($(this).hasClass(left_class))
		{
			var clicked = $(this);			  
			$(rot_box+'.'+left_class).css('z-index', '3').animate(config_left_toLeft, 300).removeClass();
						  
			$(rot_box+'.'+right_class).css('z-index', '2').animate(config_right_toLeft, 300).removeClass().addClass(left_class);
						  
			$(rot_box+'.'+first_class).css('z-index', '2').animate(config_first_toLeft, 300, function()
			  {
				$(clicked).addClass(first_class);
			  }).removeClass().addClass(right_class);
		}
				
		if(!$(this).hasClass(first_class))
		{
			var elem = $(rot_box).index(this);
				
			$(rot_num).removeClass('act');
			$(rot_num).eq(elem).addClass('act');
			
			$(rot_desc+'.ac').hide().removeClass('ac');
			$(rot_desc).eq(elem).fadeIn("fast").addClass('ac');
		}
				
	});
	
	$(rot_num).live('click', function()
	{
		var elem_num = $(rot_num).index(this);
		
		var image = $(rot_box).eq(elem_num);
		
		if(image.hasClass(left_class))
		{
			$(rot_box+'.'+left_class).css('z-index', '3').stop(true, true).animate(config_left_toLeft, 300).removeClass();
						  
			$(rot_box+'.'+right_class).css('z-index', '2').stop(true, true).animate(config_right_toLeft, 300).removeClass().addClass(left_class);
						  
			$(rot_box+'.'+first_class).css('z-index', '2').stop(true, true).animate(config_first_toLeft, 300, function()
			  {
				$(image).addClass(first_class);
			  }).removeClass().addClass(right_class);
		}
		
		if(image.hasClass(right_class))
		{
			$(rot_box+'.'+right_class).css('z-index', '3').stop(true, true).animate(config_right_toRight, 300).removeClass();

			$(rot_box+'.'+left_class).css('z-index', '2').stop(true, true).animate(config_left_toRight, 300).removeClass().addClass(right_class);
						  
			$(rot_box+'.'+first_class).css('z-index', '2').stop(true, true).animate(config_first_toRight, 300, function()
			  {
				$(image).addClass(first_class);
			  }).removeClass().addClass(left_class);
		}
		
		$(rot_num).removeClass();
		$(this).addClass('act');
		
		$(rot_desc+'.ac').hide().removeClass('ac');
		$(rot_desc).eq(elem_num).fadeIn("fast").addClass('ac');
		
	});
	rotateStep = setInterval('auto_step()', 6000);
	$("#rotator > div").mouseenter(function(){
		clearInterval(rotateStep);
	});
	$("#rotator > div").mouseleave(function(){
		rotateStep = setInterval('auto_step()', 6000);
	});

});