$(function(){
	$('ul#main_img').each(function(){
		var interval = 5000;
		var speed = 200;
		var speedIn = 500;
		var current = 1;
		var parentElement = $(this).css('opacity','0');
		var numChildElements = parentElement.children().size();
		var slideNav = '';		
		var prev,currentElement;
		
		parentElement.animate({ opacity:'1' },{ duration:1200 });
		parentElement.children(':gt(0)').each(function(){
			$(this).hide();
		});
		
		for ( var i=0; i<numChildElements; i++ ) {
			slideNav += '<li></li>';
		}
		$("div#segmentArea").append('<ul id="js_slideNav" class="clearfix">'+slideNav+'</ul>');
		
		var slideNav = $('#js_slideNav').children();
		slideNav.eq(0).addClass('on');
		
		var timer = setInterval(slideShow, interval);
		slideNav.click(function(){
			if ($(this).is('.on')) { return; }
			var index = $(this).index();
			current = index;
			slideShow();
			clearInterval(timer);
			setTimeout(function(){
				clearInterval(timer);
				timer = setInterval(slideShow, interval);
			},5000);
			
		});
		var currentElement = parentElement.children(':nth-child('+current+')');
		
		function slideShow () {
			prevElement = currentElement;
			++current;
			if(current > numChildElements) { current = 1; }
			currentElement = parentElement.children(':nth-child('+current+')');
			if(current == 1){				
				currentElement.fadeIn(speedIn);
				prevElement.fadeOut(speed);
			} else {
				currentElement.fadeIn(speedIn);
				prevElement.fadeOut(speed);
				
			};
			slideNav.removeClass('on');			
			slideNav.eq(current-1).addClass('on');
		}
		
		
		
	});
});