(function($, undefined){

	$(function(){
		init();
	});
	
	var 
	ITEM_WIDTH    = 600,
	PAUSE_TIME    = 3000,
	CHANGE_SPEED  = 1200,
	CHANGE_EASING = 'easeInOutQuart',
	XML_FILE      = 'xml/main_image.xml',
	
	$base, $img, $nav,
	itemLength, protect, autoTimer, current;
	
	function init(){
		setupElements();
		setEvent();
		setTimer();
	}

	function setupElements(){		
		$base = $('#main_visual'),
		$img  = $('ul.mainimg>li',$base),
		$nav  = $('ul.controller>li',$base),
		itemLength = $img.length,
		current = 0;

		$img.eq(0).css({left:0});
		$nav.eq(0).addClass('current');
	}
	
	function changeImage(next, auto){
		if(protect || current === next){
			return;
		}
		killTimer();
		protect = true;
		var goal = (next < itemLength) ? next : 0,
		    pos  = (auto || goal - current > 0) ? 'left' : 'right';
		$nav
			.removeClass('current')
			.eq(goal)
					.addClass('current');
		$img
			.eq(current)
				.animate({left : (pos === 'left') ? ITEM_WIDTH * -1 : ITEM_WIDTH}, CHANGE_SPEED, CHANGE_EASING)
			.end()
			.eq(goal)
				.css('left', (pos === 'left')  ? ITEM_WIDTH : ITEM_WIDTH * -1)
				.stop(true, true)
				.animate({left:0}, CHANGE_SPEED, CHANGE_EASING, function(){
					protect = false;
					setTimer();
					current = goal;
				});
	}
	
	function setEvent(){
		$nav.click(function(){
			changeImage($nav.index(this), false);
		});
	}

	function setTimer(){
		killTimer();
		autoTimer = setTimeout(function(){changeImage(current+1, true)}, PAUSE_TIME);
	}
	
	function killTimer(){
		clearTimeout(autoTimer);
	}	

}(jQuery));