(function($) {


function mainImageChangeTimer(option){
	var active = $("#"+option.mainImageID+" ."+option.activeClass );
	var next_active = active.next().length ? active.next() : $("#"+option.mainImageID).children(":first-child");
	clearInterval(imageview_timerID);
//	active.toggleClass(option.activeClass);
//	next_active.toggleClass(option.activeClass);
	
	if(option.subFlag){
		var activeIndex = $("#"+option.mainImageID).children().index(next_active);
		
		$("#"+option.subImageID).children().removeClass(option.activeClass);
		$("#"+option.subImageID).children().eq(activeIndex).addClass(option.activeClass);
		subImageActive(option);
	}
	animationTask(option, new Array(active, next_active));
	
	
}


function animationTask(option, targetObj){

	if(targetObj.length > 0){
		var animateObj = targetObj.shift();
	}

//	var viewflag = animateObj.hasClass(option.activeClass) ? "show" : "hide";
	var viewflag = "toggle";

	animateObj.animate({opacity: viewflag},option.animationTime,"swing",function(){
		if(targetObj.length > 0){
			animateObj.toggleClass(option.activeClass);
			targetObj[0].toggleClass(option.activeClass);
			animationTask(option, targetObj);
		} else {
			if(option.autoPlay) imageview_timerID = setInterval(function(){ mainImageChangeTimer(option) }, option.time );
		}
	});

}

function subImageClick(option, thisObj){

	var thisIndex = $("#"+option.subImageID).children().index(thisObj);

	if(!option.animationLock){
		option.animationLock = true;

		$("#"+option.mainImageID).children().stop();
		clearInterval(imageview_timerID);

		$("#"+option.mainImageID).children().hide().css("opacity", "").removeClass(option.activeClass);
		$("#"+option.mainImageID).children().eq(thisIndex).show().css("opacity", "").addClass(option.activeClass);

		$("#"+option.subImageID).children().removeClass(option.activeClass);
		$("#"+option.subImageID).children().eq(thisIndex).addClass(option.activeClass);

		subImageActive(option);

		if(option.autoPlay) imageview_timerID = setInterval(function(){ mainImageChangeTimer(option) }, option.time );

		option.animationLock = false;
	}
}

function navigationClick(option, thisObj){

	var active = $("#"+option.mainImageID+" ."+option.activeClass);
	var nowIndex = $("#"+option.mainImageID).children().index(active);
	
	if($(thisObj).hasClass(option.naviPrevClass)){
		var next_active = active.prev().length ? active.prev() : $("#"+option.mainImageID).children(":last-child");
	} else if($(thisObj).hasClass(option.naviNextClass)){
		var next_active = active.next().length ? active.next() : $("#"+option.mainImageID).children(":first-child");
	}
	var toIndex = $("#"+option.mainImageID).children().index(next_active);

	if(!option.animationLock){
		option.animationLock = true;

		$("#"+option.mainImageID).children().stop();
		clearInterval(imageview_timerID);

		$("#"+option.mainImageID).children().hide().css("opacity", "").removeClass(option.activeClass);
		$("#"+option.mainImageID).children().eq(toIndex).show().css("opacity", "").addClass(option.activeClass);

		$("#"+option.subImageID).children().removeClass(option.activeClass);
		$("#"+option.subImageID).children().eq(toIndex).addClass(option.activeClass);

		subImageActive(option);

		if(option.autoPlay) imageview_timerID = setInterval(function(){ mainImageChangeTimer(option) }, option.time );

		option.animationLock = false;
	}

}



function subImageActive(option){
	$("#"+option.subImageID+" img").each(function(){
		var tmpsrc = $(this).attr("src");
		tmpsrc = tmpsrc.match(/^(.+)..(\..+?)$/);
		$(this).attr("src", tmpsrc[1]+option.rolloutImageText+tmpsrc[2]);
	});

	$("#"+option.subImageID+" ."+option.activeClass+" img").each(function(){
		var tmpsrc = $(this).attr("src");
		tmpsrc = tmpsrc.match(/^(.+)..(\..+?)$/);
		$(this).attr("src", tmpsrc[1]+option.rolloverImageText+tmpsrc[2]);
	});


}






$.fn.imageview = function(option) {

	option = $.extend({
		time: 4500,
		animationTime: 800,
		autoPlay: true,
		mainImageID: "mainimage",
		subFlag: false,
		subImageID: "subimage",
		naviFlag: false,
		naviImageID: "naviimage",
		naviPrevClass: "prev",
		naviNextClass: "next",
		activeClass: "active",
		
		rolloverImageText: "_r",
		rolloutImageText: "_n",
		
		animationLock: false
	}, option);

	var active = $("#"+option.mainImageID+" ."+option.activeClass );

	if ( active.length == 0 ) {
		active = $("#"+option.mainImageID, this).children(":first-child");
		active.addClass(option.activeClass);
		active.show();
		$("#"+option.mainImageID).children(":not(:first-child)").hide();
		if(option.subFlag){
			$("#"+option.subImageID).children(":first-child").addClass(option.activeClass);
		}
	} else {
		active.show();
		var thisIndex = $("#"+option.mainImageID).children().index(active);
		if(option.subFlag){
			$("#"+option.subImageID).children().eq(thisIndex).addClass(option.activeClass);
		}
	}

	var heightlock = $("#"+option.mainImageID).height();
	$("#"+option.mainImageID).css("height", heightlock);

	if(option.autoPlay) imageview_timerID = setInterval(function(){ mainImageChangeTimer(option) }, option.time );

	if(option.subFlag){
		$("#"+option.subImageID).show();

		var readimage = new Array();
		var count = 0;
		$("#"+option.subImageID+" img").each(function(){
			var tmpimageurl = $(this).attr("src");
			tmpimageurl = tmpimageurl.match(/^(.+)..(\..+?)$/);
			
			readimage[count] = new Image();
			readimage[count].src = tmpimageurl[1]+option.rolloutImageText+tmpimageurl[2];
			count++;
			readimage[count] = new Image();
			readimage[count].src = tmpimageurl[1]+option.rolloverImageText+tmpimageurl[2];
			count++;
		});

		$("#"+option.subImageID).children().click({option:option},
			function(event){
				subImageClick(event.data.option, this);
			}
		);
		$("#"+option.subImageID).children().mouseout({option:option},
			function(event){
				subImageActive(event.data.option);
			}
		);
		$("#"+option.subImageID).children().mouseover({option:option},
			function(event){
				var tmpsrc = $(this).find("img").attr("src");
				tmpsrc = tmpsrc.match(/^(.+)..(\..+?)$/);
				$(this).find("img").attr("src", tmpsrc[1]+event.data.option.rolloverImageText+tmpsrc[2]);
			}
		);
		
		subImageActive(option);
	}

	if(option.naviFlag){
		$("#"+option.naviImageID).show();
		$("#"+option.naviImageID).children().click({option:option},
			function(event){
				navigationClick(event.data.option, this);
			}
		);
	}



}




})(jQuery);