
(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);
	imageview_timerID = null;
	
	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 = "toggle";

	targetObj[0].animate({opacity: viewflag},option.animationTime,"swing");
	animateObj.animate({opacity: viewflag},option.animationTime,"swing",function(){
		if(targetObj.length > 0){
			animateObj.toggleClass(option.activeClass);
			targetObj[0].toggleClass(option.activeClass);
			if(option.autoPlay){
				if(!imageview_timerID){
					imageview_timerID = setInterval(function(){ mainImageChangeTimer(option) }, option.time );
				}
			}
		}
	});
}

/**
 * 画像ボタンに、アクティブ枠を表示する
 */
function subImageActive(option){

	var sub_active = $("#"+option.subImageID+" ."+option.activeClass+"");
	var prev_sub_active = sub_active.prev().length ? sub_active.prev() : $("#"+option.subImageID).children(":last-child");

	sub_active.animate({opacity: "toggle"},option.animationTime,"swing");
	prev_sub_active.animate({opacity: "toggle"},option.animationTime,"swing");
}

/**
 * 画像ボタンクリック時の処理（対応するメイン画像を即座に表示する）
 */
function subImageClick(option, thisObj){

	var thisIndex = $("#"+option.subImageNaviID).children().index(thisObj);

	if(!option.animationLock){
		option.animationLock = true;

		$("#"+option.mainImageID).children().stop();
		clearInterval(imageview_timerID);
		imageview_timerID = null;

		$("#"+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);

		$("#"+option.subImageID).children().hide();
		$("#"+option.subImageID).children().eq(thisIndex).show();

		option.animationLock = false;
	}
}

/**
 * 初期化
 */
$.fn.imageview = function(option) {

	option = $.extend({
		time: 4000,
		animationTime: 1000,
		autoPlay: true,
		mainImageID: "mainimage",
		subFlag: false,
		subImageID: "subimage",
		activeClass: "active",
		subImageNaviID: "mainAreaSub",
		animationLock: false
	}, option);

	var active = $("#"+option.mainImageID+" ."+option.activeClass );

	if ( active.length == 0 ) {
		active = $("#"+option.mainImageID, this).children(":first-child");
		active.addClass(option.activeClass);
		$("#"+option.mainImageID, this).children().hide();
		active.show();
		$("#"+option.mainImageID).children(":not(:first-child)").hide();
		if(option.subFlag){
			$("#"+option.subImageID).children(":first-child").addClass(option.activeClass);
		}
	} else {
		$("#"+option.mainImageID, this).children().hide();
		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();
		$("#"+option.subImageID+" ."+option.activeClass+"").show();
		
		$("#"+option.subImageNaviID).children().bind("mouseover",{option:option},
			function(event){
				subImageClick(event.data.option, this);
			}
		);
		$("#"+option.subImageID).children().bind("mouseover",{option:option},
			function(event){
				clearInterval(imageview_timerID);
				imageview_timerID = null;
			}
		);
		$("#"+option.subImageID).children().bind("mouseout",{option:option},
			function(event){
				if(event.data.option.autoPlay){
					if(!imageview_timerID){
						imageview_timerID = setInterval(function(){ mainImageChangeTimer(event.data.option) }, event.data.option.time );
					}
				}
			}
		);
	}
}

})(jQuery);



