/*------------------------------------------------------*/
/* Updated: 2011/08 */
/*------------------------------------------------------*/

// *************************************************************** //
// 変数の宣言 //
// *************************************************************** //

var xmlFile = "/xml/top.xml";
var ajaxTimeout = 10000;
var visMax;
var visNow = 0;
var visNext;
var numFlag;
var sets = new Array();
var duration = 750;
var pngTag =
	"#thumbCr," +
	"#arrowL," +
	"#arrowL_on," +
	"#arrowR," +
	"#arrowR_on";
var animateFlag = false;
var clickPos;
var nextIds = new Array(5);
var outLs = [-374, -187, 935, 1122];
var anStartLs = new Array();
anStartLs[-2] = 0, anStartLs[-1] = 0, anStartLs[1] = -187, anStartLs[2] = -374;





// *************************************************************** //
// 関数の定義 //
// *************************************************************** //

// PNG透過表示を処理する関数 --------------------------------- //

function runFixPng(tag) {
	if (navigator.userAgent.indexOf("MSIE 6") != -1) {
		if (tag != undefined) {
			$j(tag).pngfix();
		} else {
			$j(pngTag).pngfix();
		}
	}
}





// 要素の番号を取得する関数 --------------------------------- //

function getElementIndex(el) {
    var i = 0, tmp = el;
    while (tmp = tmp.previousSibling) {
        if (tmp.nodeType == 1) i++;
    }
    return i;
}





// 要素数外の番号を再算出する関数 --------------------------------- //

function getOutNum(num) {
	var i = num;
	if (i < 0) {
		i = i + (visMax + 1);
	} else if (visMax < i) {
		i = i - (visMax + 1);
	}
	return i;
}





// 初期設定用関数 --------------------------------- //

function setVis() {

	// 初期設定 ***************

	// 大枠
	if (numFlag == "a") {
		$j("#mainvisual").addClass("mv_" + (visMax+1)).html(
			'<div id="mainvisual_inner">' +
				'<div id="wrapVisual"></div>' +
				'<a id="visualGuard" href="' + sets[visNow].url + '" target="' + sets[visNow].target + '" title="' + sets[visNow].alt + '"></a>' +
				'<div id="wrapThumbBg"></div>' +
			'</div>'
		);
	} else if (numFlag == "b") {
		$j("#mainvisual").addClass("mv_" + (visMax+1)).html(
			'<div id="mainvisual_inner">' +
				'<div id="wrapVisual"></div>' +
				'<a id="visualGuard" href="' + sets[visNow].url + '" target="' + sets[visNow].target + '" title="' + sets[visNow].alt + '"></a>' +
				'<div id="wrapThumbBg"></div>' +
				'<div id="wrapThumb"></div>' +
				'<p id="thumbCr"></p>' +
				'<div id="wrapThumbTrap"></div>' +
			'</div>'
		);
	} else {
		$j("#mainvisual").addClass("mv_c").html(
			'<div id="mainvisual_inner">' +
				'<div id="wrapVisual"></div>' +
				'<a id="visualGuard" href="' + sets[visNow].url + '" target="' + sets[visNow].target + '" title="' + sets[visNow].alt + '"></a>' +
				'<div id="wrapThumbBg"></div>' +
				'<div id="wrapThumb"></div>' +
				'<p id="thumbCr"></p>' +
				'<div id="arrowWrap">' +
					'<p id="arrowL"></p>' +
					'<p id="arrowL_on"></p>' +
					'<p id="arrowR"></p>' +
					'<p id="arrowR_on"></p>' +
				'</div>' +
				'<div id="arrowTrapWrap">' +
					'<p id="arrowTrapL"></p>' +
					'<p id="arrowTrapR"></p>' +
				'</div>' +
				'<div id="wrapThumbTrap"></div>' +
			'</div>'
		);
	}
	runFixPng();



	// ビジュアル、サムネイル
	for (i=0; i<=visMax; i++) {
		$j("#wrapVisual").append('<p id="visual_' + (i+1) + '"><img src="' + sets[i].visualSrc + '" alt="" width="978" height="285"></p>');
		$j("#wrapThumbBg").append('<p style="background-color:' + sets[i].bannerBg + ';"></p>');
		if (numFlag == "b") {
			$j("#wrapThumb").append('<p id="thumb_' + (i+1) + '"><img src="' + sets[i].bannerSrc + '" alt="" width="181" height="52"></p>');
			$j("#wrapThumbTrap").append('<p id="thumbTrap_' + (i+1) + '" title="' + sets[i].alt + '"></p>');
		}
	}
	if (numFlag == "c") {
		$j("#wrapThumb").append(
			'<p style="left:' + 187*0 + 'px"><img src="' + sets[visMax-1].bannerSrc + '" alt="" width="181" height="52"></p>' +
			'<p style="left:' + 187*1 + 'px"><img src="' + sets[visMax].bannerSrc + '" alt="" width="181" height="52"></p>' +
			'<p style="left:' + 187*2 + 'px"><img src="' + sets[0].bannerSrc + '" alt="" width="181" height="52"></p>' +
			'<p style="left:' + 187*3 + 'px"><img src="' + sets[1].bannerSrc + '" alt="" width="181" height="52"></p>' +
			'<p style="left:' + 187*4 + 'px"><img src="' + sets[2].bannerSrc + '" alt="" width="181" height="52"></p>'
		);
		$j("#wrapThumbTrap").append(
			'<p style="left:' + 187*0 + 'px" title="' + sets[visMax-1].alt + '"></p>' +
			'<p style="left:' + 187*1 + 'px" title="' + sets[visMax].alt + '"></p>' +
			'<p style="left:' + 187*2 + 'px" title="' + sets[0].alt + '"></p>' +
			'<p style="left:' + 187*3 + 'px" title="' + sets[1].alt + '"></p>' +
			'<p style="left:' + 187*4 + 'px" title="' + sets[2].alt + '"></p>'
		);
	}
	if (numFlag == "b") {
		$j("#wrapThumbTrap p").eq(0).css("cursor", "default");
	} else if (numFlag == "c") {
		$j("#wrapThumbTrap p").eq(2).css("cursor", "default");
	}
	$j("#wrapVisual p").eq(visNow).css("z-index", 1).show();
	$j("#wrapThumbBg p").eq(visNow).css("z-index", 1).show();

	$j("#mainvisual_inner").fadeIn(duration);



	// サムネイルをマウスオーバー／マウスアウト時 ***************
	$j("#wrapThumbTrap p").mouseover(function() {
		num = getElementIndex(this);
		if (numFlag == "c" && animateFlag && 0 < clickPos) {
			$j("#wrapThumb p").eq(num+clickPos).css("border-color", "#f3761a");
		} else {
			$j("#wrapThumb p").eq(num).css("border-color", "#f3761a");
		}
	});
	$j("#wrapThumbTrap p").mouseout(function() {
		$j("#wrapThumb p").css("border-color", "#eeeeee");
	});



	// サムネイルをクリック時 ***************
	$j("#wrapThumbTrap p").click(function() {
		if (!animateFlag) {
			clickNum = getElementIndex(this);
			$j("#wrapThumb p").eq(clickNum).css("border-color", "#eeeeee");
			if (numFlag == "b") {
				if (clickNum != visNow) {
					switchB(clickNum);
				}
			} else if (numFlag == "c") {
				if (clickNum != 2) {
					switchC(clickNum);
					$j(this).trigger("mouseover");
				}
			}
		}
	});



	// 矢印をマウスオーバー／マウスアウト時 ***************
	$j("#arrowTrapWrap p").mouseover(function() {
		arrowId = $j(this).attr("id").replace("Trap", "");
		$j("#" + arrowId).hide();
		$j("#" + arrowId + "_on").show();
	});
	$j("#arrowTrapWrap p").mouseout(function() {
		arrowId = $j(this).attr("id").replace("Trap", "");
		$j("#" + arrowId + "_on").hide();
		$j("#" + arrowId).show();
	});



	// 矢印をクリック時 ***************
	$j("#arrowTrapL").click(function() {
		if (!animateFlag) {
			switchC(1);
		}
	});
	$j("#arrowTrapR").click(function() {
		if (!animateFlag) {
			switchC(3);
		}
	});
}





// 切り替えを制御する関数（ビジュアルの数が2〜5の場合） --------------------------------- //

function switchB(clickNum) {
	
	animateFlag = true;
	visNext = clickNum;

	$j("#thumbTrap_" + (visNow+1)).css("cursor", "pointer");
	$j("#thumbTrap_" + (visNext+1)).css("cursor", "default");
	$j("#thumbCr").animate({
		"left": Math.floor(978 - (183 * (visMax + 1) + 8 * visMax)) / 2 + 191 * visNext
	}, {
		queue: false,
		duration: duration,
		easing: "easeOutQuart"
	});

	$j("#visualGuard").attr({
		"href": sets[visNext].url,
		"target": sets[visNext].target,
		"title": sets[visNext].alt
	});

	$j("#wrapThumbBg p:eq(" + visNext + ")").show();
	$j("#wrapThumbBg p:eq(" + visNow + ")").fadeOut(duration);

	$j("#visual_" + (visNext+1)).show();
	$j("#visual_" + (visNow+1)).fadeOut(duration, function() {
		$j(this).css("z-index", 0);
		$j("#visual_" + (visNext+1)).css("z-index", 1);
		$j("#wrapThumbBg p:eq(" + visNow + ")").css("z-index", 0);
		$j("#wrapThumbBg p:eq(" + visNext + ")").css("z-index", 1);
		visNow = visNext;
		animateFlag = false;
	});
}





// 切り替えを制御する関数（ビジュアルの数が6以上の場合） --------------------------------- //

function switchC(clickNum) {
		
	animateFlag = true;
	clickPos = clickNum - 2;
	for (i=0; i<nextIds.length; i++) {
		nextIds[i] = visNow + clickPos + (i-2);
		nextIds[i] = getOutNum(nextIds[i]);
	}
	visNext = nextIds[2];
	var outIds = [visNow-4, visNow-3, visNow+3, visNow+4];
	var outTags = new Array(4);
	for (i=0; i<outIds.length; i++) {
		outIds[i] = getOutNum(outIds[i]);
		outTags[i] = '<p style="left: ' + outLs[i] + 'px"><img src="' + sets[outIds[i]].bannerSrc + '" alt="" width="181" height="52"></p>';
	}

	if (clickPos == -2) {
		$j("#wrapThumb").prepend(outTags[0] + outTags[1]);
		$j("#wrapThumb p:eq(5), #wrapThumb p:eq(6)").addClass("remove");
	} else if (clickPos == -1) {
		$j("#wrapThumb").prepend(outTags[1]);
		$j("#wrapThumb p:eq(5)").addClass("remove");
	} else if (clickPos == 1) {
		$j("#wrapThumb").append(outTags[2]);
		$j("#wrapThumb p:eq(0)").addClass("remove");
	} else if (clickPos == 2) {
		$j("#wrapThumb").append(outTags[2] + outTags[3]);
		$j("#wrapThumb p:eq(0), #wrapThumb p:eq(1)").addClass("remove");
	}

	for (i=0; i<5+Math.abs(clickPos); i++) {
		$j("#wrapThumb p").eq(i).animate({
			"left": anStartLs[clickPos] + 187 * i
		}, {
			queue: false,
			duration: duration,
			easing: "easeOutQuart"
		});
	}

	$j("#visualGuard").attr({
		"href": sets[visNext].url,
		"target": sets[visNext].target,
		"title": sets[visNext].alt
	});

	$j("#wrapThumbBg p:eq(" + visNext + ")").show();
	$j("#wrapThumbBg p:eq(" + visNow + ")").fadeOut(duration);

	$j("#visual_" + (visNext+1)).show();
	$j("#visual_" + (visNow+1)).fadeOut(duration, function() {
		$j("#wrapThumb .remove").remove();
		for (i=0; i<5; i++) {
			$j("#wrapThumbTrap p").eq(i).attr("title", sets[nextIds[i]].alt);
		}
		$j(this).css("z-index", 0);
		$j("#visual_" + (visNext+1)).css("z-index", 1);
		$j("#wrapThumbBg p:eq(" + visNow + ")").css("z-index", 0);
		$j("#wrapThumbBg p:eq(" + visNext + ")").css("z-index", 1);
		visNow = visNext;
		animateFlag = false;
	});
}





// *************************************************************** //
// 処理の実行 //
// *************************************************************** //

// ページ読み込み時 --------------------------------- //

$j(function() {
	$j.ajax({
		url: xmlFile,
		type: "GET",
		dataType: "xml",
		cache: false,
		timeout: ajaxTimeout,
		success: function(xml){
			visMax = $j(xml).find("set").length - 1;
			if (visMax < 1) {
				numFlag = "a";
			} else if (visMax < 5) {
				numFlag = "b";
			} else {
				numFlag = "c";
			}
			$j(xml).find("set").each(function(i) {
				sets[i] = new Array();
				sets[i].url = $j(this).find("url").text();
				sets[i].target = $j(this).find("target").text();
				sets[i].alt = $j(this).find("alt").text();
				sets[i].visualSrc = $j(this).find("visualSrc").text();
				sets[i].bannerSrc = $j(this).find("bannerSrc").text();
				sets[i].bannerBg = $j(this).find("bannerBg").text();
				if (i==visMax) setVis();
			});
		}
	});
});





/*------------------------------------------------------*/
/* End */
/*------------------------------------------------------*/