$(function(){
	
	
/*------------------------------------------------
	main image
--------------------------------------------------*/
	var mainCount = 0;
	var mainCount2 = 0;
	var mainDiv = $('div.topMainImg > div');
	var mainButton = $('div.topMainChange > ul > li');
	var setTimer = 0;
	var setTimer2 = 0;
	
	var imgChangeSpeed = 5000;
	
	$('div.topMainImg > div')
		.each(function(){
			$(this).css('display', 'block');
			return false;
		})
		
	$('div.topMainChange > ul > li')
		.each(function(){
			$(this).css('background-position', 'left -8px');
			return false;
		})
		.click(function(){
			$('div.topMainChange > ul > li')
				.each(function(){
					$(this).css('background-position', 'left top');
				})
			$(this).css('background-position', 'left -8px');
			var thisId = $(this).attr('id').split('imgchange0');
			var thisCount = thisId[1] - 1;
			mainCount = thisCount;
			$('div.topMainImg > div')
				.each(function(){
					$(this).css('display', 'none');
				})
			$(mainDiv[mainCount]).fadeIn(1500);
			clearInterval(setTimer);
			clearInterval(setTimer2);
			
			setTimer2 = setInterval(function(){
				imgChange();
			}, imgChangeSpeed);
			return false;
		})
	
	function imgChange(){
		mainCount++;
		if( mainCount >= mainButton.length ) mainCount = 0;
		if( mainCount == 0 ) mainCount2 = mainButton.length -1;
		else  mainCount2 = mainCount -1;
		
		$(mainDiv[mainCount2]).fadeOut(1000);
		$(mainDiv[mainCount]).fadeIn(1500);
		
		$(mainButton[mainCount2]).css('background-position', 'left top');
		$(mainButton[mainCount]).css('background-position', 'left -8px');
	}
	
	setTimer = setInterval(function(){
		imgChange();
	}, imgChangeSpeed);
	
	
});