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

var theDate = new Date();
var getTimeData = theDate.getTime();
var timeParam = '#' + getTimeData;

var browserName;      
var browserVersion;

var fileXml       = 'xml/img.xml';
var fileIntroIe   = 'img/intro.gif' + timeParam;
var fileIntroFf   = 'img/intro.gif' + timeParam;
var fileLoadGif   = 'img/loading.gif';
var fileSpacerGif = 'img/spacer.gif';
var ajaxTimeout   = 10000;

var introAlt = '美容室専門ホームページ制作サービス【サロンプラス】';
var introFile;
var introFadeIn;
var introFadeOut;
var introFadeStop;
var timeStart;
var timeStop;

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

var urlParam = '';
var linkURL;

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

var idArray      = new Array();
var imgPassArray = new Array();
var btnPassArray = new Array();

var timer;
var tipTimer;
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() {

	$('#main').html('<div id="loading"><img src="'+ fileLoadGif + '" width="32" height="32" alt="読み込み中"></a></div>');

	if (browserName == "msie") {
		$('#loading').show();
	} else {
		$('#loading').fadeIn(100);
	}

}

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

function ajaxError() {
	$('#loading').fadeOut(400,function(){
		$('#noxml').fadeIn(400);
	});
}

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

function ajaxSuccess(xml) {
	getImgInfo(xml); 
	setIntro();
}

/* ================================================== */
/* 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].href   = jQuery(this).find('href').text();
		imgArray[i].target = jQuery(this).find('target').text();
		imgArray[i].time   = jQuery(this).find('time').text();
	});
}

/* ================================================== */
/* intro */
/* ================================================== */

function setIntro() {

	if (browserName == "msie") {
		fileIntro    = fileIntroIe ;
		timeStart    = 0;
		introFadeIn  = 200;
		timeStop     = 1300;
		introFadeOut = 500;

	} else {
		fileIntro    = fileIntroFf ;
		timeStart    = 0;
		introFadeIn  = 600;
		timeStop     = 800;
		introFadeOut = 300;
	}

	$('#main').html('<div id="intro"><img src=' + fileIntro + ' width="200" height="101" alt="' + introAlt + '"></a></div>');

	$('#intro')
	.hide()
	.animate({'left':'+=0'},timeStart)
	.fadeIn(introFadeIn)
	.animate({'left':'+=0'},timeStop)
	.fadeOut(introFadeOut, function() {

		$(this).remove;

		setImgShow();

	});
}

/* ================================================== */
/* set main image */
/* ================================================== */

function setImgShow() {

	imgMax = imgArray.length-1;

	$('#main').prepend('<div id="spacer"><a href="javascript:void(0);" target="_self" id="hrefMain"><img src="' + fileSpacerGif + '" width="890" height="270" alt="" id="nocopy"></a></div>');
	$("#spacer").fadeIn(200);

	$("#main").append("<div id='mainBaloon'><p></p></div>");

	/* $("#main").append("<div id='toolTip'><p></p></div>"); */

	$("#mainVisualnav").append("<div id='mainBaloonBottom'><img src='img/baloonbottom.png' width='16' height='10' border='0' alt='' id='iepngfix'></div>");

	/* imgNum = Math.floor(Math.random() * imgArray.length); */
	imgNum = 0;

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

		idArray[i] = new Object();

		idArray[i].img = "wait" + 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;

		linkURL = imgArray[i].href + urlParam;

		$('#main').append('<div class="wait" id="' + idArray[i].img + '"><a href="'+ linkURL + '" target="' + imgArray[i].target + '"><img src="' + imgArray[i].src + '" width="890" height="270" alt="' + imgArray[i].alt + '"></a></div>');

/*		$('#mainVisualnav').append('<span class="btn" id="' + idArray[i].btn + '"><a href="javascript:void(0);"><img src="img/btn_off.gif" width="21" height="5" alt="' + imgArray[i].alt + '" id="' + idArray[i].btnImgOff + '" class="btnImgOff"><img src="img/btn_on.gif" width="21" height="5" alt="' + imgArray[i].alt + '" id="' + idArray[i].btnImgOn + '" class="btnImgOn"></a></span>');
*/
		$(idArray[i].btnPass).setMainBaloonText(imgArray[i].alt,i);

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

	});

	// 1st tip
	/*$('#toolTip p').text(imgArray[imgNum].alt);*/

	linkURL = imgArray[imgNum].href + urlParam;

	// 1st href
	$('#hrefMain').attr("href", linkURL);
	$('#hrefMain').attr("target",imgArray[imgNum].target);
	$('#nocopy').attr("alt",imgArray[imgNum].alt);

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

	timerImgShow();

	/* setToolTip(); */

}

/* ================================================== */
/* tool tip */
/* ================================================== */

/*
function setToolTip() {
	clearTimeout(tipTimer);
	$("#mainVisual").mousemove(
		function(e){
			$("#toolTip").css({opacity:'0.0',display:'block'}).css({opacity:'0.9'});
			$("#toolTip").css("left",e.pageX-55);
			$("#toolTip").css("top",e.pageY-32);
		}
	);
	tipTimer = setTimeout("setToolTip()",500)
}
*/


/* ================================================== */
/* init main image */
/* ================================================== */

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);

				// href

				linkURL = imgArray[imgNext].href + urlParam;

				$('#hrefMain').attr("href", linkURL);
				$('#hrefMain').attr("target",imgArray[imgNext].target);
				$('#nocopy').attr("alt",imgArray[imgNext].alt);

				// image
				$(idArray[imgNext].imgPass).css({'z-index':'700'}).css({'top':'0'}).show();
				$(idArray[imgNum].imgPass).css({'z-index':'800'}).css({'top':'0'}).animate({'top':'-=14'},{queue:false,duration:600}).fadeOut(410);

				// btn
				$(idArray[imgNum].btnImgOffPass).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;

}

/* ================================================== */
/* 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 baloon (plugin) */
/* ================================================== */

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

	var sortNum = (imgMax - navBtnNum);   // ボタンの数を左から数える
	var altCharLength = titletext.length; // altの文字数
	var initFontSize = 12;                // altのフォントサイズ
	var baloonBottomWidth = 16;           // 噴出しの下の横
	var navBtnWidth = 21                  // ボタンの横幅
	var baloonPadding = 10;               // 噴出し内の左右のパディング
	var navBtnMargin = 5;                 // 外部CSSの右マージンと同じ値
	var baloonBottomAlignCenter = (navBtnWidth/2) - (baloonBottomWidth/2);

	var baloonWidth = ((((navBtnWidth + navBtnMargin) * imgMax) - navBtnMargin) + navBtnWidth);

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

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

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

					var baloonBottomRight = ((navBtnWidth + navBtnMargin) * sortNum) + baloonBottomAlignCenter;

					/* flagBtnOver = true; */

					$('#mainBaloon p').text(titletext);
					$('#mainBaloonBottom').css({opacity:'0.0',display:'block',right:baloonBottomRight}).css({opacity:'0.9'});
					$('#mainBaloon').css({opacity:'0.0',display:'block',width:baloonWidth}).css({opacity:'0.9'});
				}
			},
			function(){
				$('#mainBaloonBottom').css({opacity:'0.0'});
				$('#mainBaloon').css({opacity:'0.0'},function(){
					flagBtnOver = false;
				});
			}
		);
	});
}

/* ================================================== */
/* end */
/* ================================================== */