/* ================================================== */
/* var */
/* ================================================== */

var browserName;      
var browserVersion;

var fileXml       = '/xml/top-visual.xml';
var fileLoadGif   = '/img/index/loading.gif';
var fileSpacerGif = '/img/index/spacer.gif';
var ajaxTimeout   = 10000;

var loadingFadeOut = 500;

var imgNum;
var imgMax;
var imgBack;
var imgNext;
var imgFade = 800;
var imgArray = new Array();

var flagBtnOver  = false;
var flagBtnClick = false;
var flagImgStart = false;

var idArray      = new Array();

var timer;
var btnTimer;

/* ================================================== */
/* browser check */
/* ================================================== */

function browserCheck() {
	jQuery.each(jQuery.browser, function(key,value) {
		if (key == "version") { 
			browserVersion = value;
		} else if (value) {
			browserName = key;
		}
	});
}

/* ================================================== */
/* document load */
/* ================================================== */

$(window).bind("load",function(){

	nowLoading();
	browserCheck();

	$.ajax({
		url: fileXml,
		type: 'GET',
		dataType: 'xml',
		cache: false,
		timeout: ajaxTimeout,

		error: function(){
			ajaxError();
		},

		success: function(xml){
			ajaxSuccess(xml);
		}

	});

});

/* ================================================== */
/* loading */
/* ================================================== */

function nowLoading() {
	$('.visualArea').html('<div class="loading"><img src="'+ fileLoadGif + '" alt="読み込み中..." width="32" height="32"></a></div>');
	$('.loading').fadeIn(150);
}

/* ================================================== */
/* xml error */
/* ================================================== */

function ajaxError() {
	$('.loading').fadeOut(500,function(){
		$('.noXml').fadeIn(500);
	});
}

/* ================================================== */
/* xml success */
/* ================================================== */

function ajaxSuccess(xml) {
	getImgInfo(xml);
	$('.loading')
	.fadeOut(loadingFadeOut, function() {
		$(this).remove;
		setImgShow();
	});
}

/* ================================================== */
/* image info */
/* ================================================== */

function getImgInfo(xml) {
	$(xml).find('img').each(function(i) {
		imgArray[i]        = new Object();
		imgArray[i].id     = jQuery(this).find('id').text();
		imgArray[i].src    = jQuery(this).find('src').text();
		imgArray[i].alt    = jQuery(this).find('alt').text();
		imgArray[i].time   = jQuery(this).find('time').text();
	});
}

/* ================================================== */
/* set visual */
/* ================================================== */

function setImgShow() {

	imgMax = imgArray.length-1;

	$('.visualArea').prepend('<div class="spacer"><img src="' + fileSpacerGif + '" alt="" width="870" height="300"></div>');
	$(".spacer").fadeIn(200);

	$(".visualArea").append("<div class='balloon'><p></p></div>");
	
	$(".switchArea").width(29 * imgArray.length + 60);

	$(".switchArea").append("<div class='balloonBtm'><img src='/img/index/balloon-btm.png' alt='' width='7' height='10'></div>");

	$(".switchArea").append('<span class="control"><img class="controlImgOff" src="/img/index/btn-stop.gif" alt="停止" width="32" height="21" /><img class="controlImgOn" src="/img/index/btn-play.gif" alt="再生" width="32" height="21" /></span>');

	imgNum = 0;

	$(imgArray).each(function(i) {

		idArray[i] = new Object();

		idArray[i].img = "visual" + i;
		idArray[i].btn = "btn" + i;
		idArray[i].btnImgOn  = "btnImgOn" + i;
		idArray[i].btnImgOff = "btnImgOff" + i;

		idArray[i].imgPass       = "#" + idArray[i].img;
		idArray[i].btnPass       = "#" + idArray[i].btn;
		idArray[i].btnImgOnPass  = "#" + idArray[i].btnImgOn;
		idArray[i].btnImgOffPass = "#" + idArray[i].btnImgOff;

		$('.visualArea').append('<div class="visual" id="' + idArray[i].img + '"><img src="' + imgArray[i].src + '" width="870" height="300" alt="' + imgArray[i].alt + '"></div>');

		$('.switchArea').append('<span class="btn" id="' + idArray[i].btn + '"><a href="javascript:void(0);"><img src="/img/index/btn-switch.gif" width="17" height="17" alt="' + imgArray[i].alt + '" id="' + idArray[i].btnImgOff + '" class="btnImgOff"><img src="/img/index/btn-switch-on.gif" width="17" height="17" alt="' + imgArray[i].alt + '" id="' + idArray[i].btnImgOn + '" class="btnImgOn"></a></span>');

		$(idArray[i].btnPass).setBalloonText(imgArray[i].alt,i);

		$(idArray[i].btnPass).bind("click",i,function(event){timerImgShow(event.data)});

	});

	$('.spacer img').attr("alt",imgArray[imgNum].alt);

	// 1st image
	$(idArray[imgNum].imgPass).fadeIn(imgFade);
	$(idArray[imgNum].btnImgOffPass).hide();

	timerControl();
	timerImgShow();

}

/* ================================================== */
/* init visual */
/* ================================================== */

function timerImgShow(btnNum) {
	
	clearTimeout(timer);

	$(imgArray).each(function(i) {
		$(idArray[i].btnPass).unbind("click");
	});

	if(!flagBtnClick) {

		flagBtnClick = true;

		if(btnNum != imgNum) {

			if(flagImgStart) {

				imgBack = imgNum-1;

				if (!isNaN(btnNum)) {
					imgNext = btnNum;
				} else {
			  	imgNext = imgNum+1;
					if (imgNext > imgMax) {
						imgNext = 0;
					}
				}

				if (imgBack < 0) {
					imgBack = imgMax;
				}

				$('#toolTip p').text(imgArray[imgNext].alt);

				$('.spacer img').attr("alt",imgArray[imgNext].alt);

				// image
				$(".visual").each(function() {
					if ( $(this).attr("id").indexOf("visual" + imgNext) !== -1) {		
						$(this).css({'z-index':'500'}).fadeIn(3000);
					} else {
						$(this).css({'z-index':'600'}).fadeOut(3000);
					}
				});

				// btn
				$(".btnImgOff").show();
				$(idArray[imgNext].btnImgOffPass).hide();

				// next imgNum
				if (isNaN(btnNum)) {
					if(imgNum == imgMax) {
						imgNum = 0;
					} else {
						imgNum++;
					}
				} else {
					imgNum = btnNum;
				}
			}
		}

		setBtnTimeout();
		flagImgStart = true;
		timer = setTimeout("timerImgShow()", imgArray[imgNum].time);

	}

	flagBtnClick = false;

}

/* ================================================== */
/* timer control */
/* ================================================== */

function timerControl() {
	$(".controlImgOff").click(function(){

		var saveImgNum = imgNum;

		flagBtnClick = true;
		$(".controlImgOff").css({'z-index':'100'});
		$(".controlImgOn").css({'z-index':'200'});
		
		$(imgArray).each(function(i) {
			$(idArray[i].btnPass).find("img").click(function(){

				$('.spacer img').attr("alt",imgArray[i].alt);

				// image
				$(".visual").each(function() {
										   
					if ( $(this).attr("id").indexOf("visual" + i) !== -1) {		
						$(this).css({'z-index':'500'}).fadeIn(500);
					} else {
						$(this).css({'z-index':'600'}).fadeOut(500);
					}
					
				});

				// btn
				$(".btnImgOff").show();
				$(idArray[i].btnImgOffPass).hide();

				// next imgNum
				imgNum = i;

			});
		});

	});
	$(".controlImgOn").click(function(){
		$(".controlImgOff").css({'z-index':'200'});
		$(".controlImgOn").css({'z-index':'100'});
		flagBtnClick = false;
		flagImgStart = false;
		timerImgShow();
	});
} 

/* ================================================== */
/* set btn */
/* ================================================== */

function setBtn() {
	$(imgArray).each(function(i) {
		$(idArray[i].btnPass).bind("click",i,function(event){timerImgShow(event.data)});
	});
}

function setBtnTimeout() {
	btnTimer = setTimeout("setBtn()", 500)
}

/* ================================================== */
/* set balloon (plugin) */
/* ================================================== */

$.fn.setBalloonText = function(titletext,navBtnNum) {

	var altCharLength = titletext.length;
	var initFontSize = 12;
	var navBtnWidth = 17;
	var balloonPadding = 10;

	var balloonWidth = (navBtnWidth * imgMax) + navBtnWidth;
	
	var switchWidth = $(".switchArea").width();
	var switchLeft = (870 - switchWidth)/2;

	var altCharLengthWidth = (altCharLength * initFontSize) + (balloonPadding * 2);

	if (balloonWidth < altCharLengthWidth) {
		balloonWidth = "";
	}

	return this.each(function() {
		$(this).hover(
			function(){
				if(!flagBtnOver) {

					var balloonBtmLeft = ((navBtnWidth + 12) * (navBtnNum+1)) - 18 + 60;

					var balloonBtmLeftMost = switchLeft + balloonBtmLeft;
					var balloonLeft = balloonBtmLeftMost - (altCharLengthWidth/2) + 3;

					$('.balloon p').text(titletext);
					$('.balloonBtm').css({display:'block',left:balloonBtmLeft});
					$('.balloon').css({opacity:'0.0',display:'block',width:balloonWidth,left:balloonLeft}).css({opacity:'0.9'});
				}
			},
			function(){
				$('.balloonBtm').css({display:'none'});
				$('.balloon').css({opacity:'0.0'},function(){
					flagBtnOver = false;
				});
			}
		);
	});
}