/* ------------------------------------------------------------------------------------------------------------------------------------------ */
/* ホシザキco.jpサイト トップページ バナー部用スクリプト */
/* ------------------------------------------------------------------------------------------------------------------------------------------ */
/* 2011.12.18	H.HISHIDA	初期制作 */
/* 2011.12.19	H.HISHIDA	サブバナー部実装、スライダ部ロジック変更、音符画像関連を変更 */


(function($){
	/* IE6〜8判別 */
	var ltIE8 = (!jQuery.support.opacity);

	/* 音符画像の拡張子設定（※IE6,7,8に適用） */
	var top_ext;
	(ltIE8)?top_ext='.gif':top_ext='.png';

	var sbannerInterval,//サブバナータイマーのID
		pbannerCloseID,//ポップアップバナータイマーのID
		sbannerFlag = false,//サブバナー領域内フラグ
		pbannerFlag = false;//ポップアップバナー領域内フラグ

	/* ------------------------------------------------------------------------------------------------------------------------- */
	/* document.ready */
	/* ------------------------------------------------------------------------------------------------------------------------- */
	$(document).ready(function(){
		/* スライダーのパラメータ設定 */
		setupSlider();

		/* サブバナー部の初期設定 */
		$('#top_sbanner div ul li:last').remove().prependTo('#top_sbanner div ul');
		$('#top_sbanner div ul li a').hover(function(){
			sbannerFlag = true;
			var num = $(this).attr('id');
			num = num.substr(num.length-1,1);
			openPbanner(num);
		},function(){});
		$('#top_sbanner div ul').css({
			width:$('#top_sbanner div ul li').length*70+'px',
			left:'-70px'
		});

		/* サブバナー領域内ではバナースクロール停止、ロールアウトでスクロール再開 */
		/* 領域内フラグも生成 */
		$('#top_sbanner').hover(
			function(){
				sbannerFlag = true;
				clearSbannerTimer();
			},function(){
				sbannerFlag = false;
				setSbannerTimer();
				pbannerCloseID = setTimeout(closePbanner,2000);
			});

		/* ポップアップバナーを閉じる領域を設定 */
		$('#pbanner_closer').click(function(){
			pbannerFlag = false;
			closePbanner();
		});

		/* ポップアップバナー領域内ではバナースクロール停止、ロールアウトでスクロール再開 */
		/* 領域内フラグも生成 */
		$('#top_pbanner').hover(
			function(){
				pbannerFlag =true;
				clearSbannerTimer();
			},function(){
				pbannerFlag = false;
				setSbannerTimer();
				pbannerCloseID = setTimeout(closePbanner,2000);
			});
		$('#top_pbanner li a').hide();
		$('#sbanner_arrow_l').click(sbannerRight);
		$('#sbanner_arrow_r').click(sbannerLeft);

		/* 音符画像を付加 */
		$('#top_p01').append('<div class="notes"><img src="/images/top_banners/note01.png" class="note" /></div>');
		$('#top_p02').append('<div class="notes"><img src="/images/top_banners/note02.png" class="note" /></div>');
		$('#top_p03').append('<div class="notes"><img src="/images/top_banners/note03a.png" class="note" /></div>');

		/* スライダの動作準備 */
		$('#top_slider').css({left:'800px'}).hide();
		/*$('.copy_main,.copy_sub,#top_main img).hide();*/
	});

	/* ------------------------------------------------------------------------------------------------------------------------- */
	/* window.load */
	/* ------------------------------------------------------------------------------------------------------------------------- */
	$(window).load(function(){
		/* 読み込み完了後にスライダ動作開始 */
		startLoop();
		/*setSbannerTimer();*/
	});

	/*スライダループのタイムアウトID*/
	var timeoutID;

	/* スライダのパラメータ値設定 */
	var totalSec,keyframe0,keyframe1,keyframe2,keyframe3,keyframe4,frameV;
	function setupSlider(){
		var initialPos = parseInt($('#top_slider').css('left').split('px')[0]);//-1680
		totalSec = 20000;//再生時間
		keyframe0 = 2480+initialPos;//キーフレーム0（初期位置）
		keyframe1 = 2280+initialPos;//キーフレーム1
		keyframe2 = 1740+initialPos;//キーフレーム2
		keyframe3 = 1200+initialPos;//キーフレーム3
		keyframe4 = initialPos;//キーフレーム4（最終）
		frameV = totalSec / (keyframe0 - keyframe4);//再生速度
	}

	/* スライダ制御 */
	function startLoop(){
		$('#top_slider').fadeOut('slow',function(){
			$(this).css({left:keyframe0 + 'px'});
			$('.copy_main,.copy_sub,#copy_bg,#top_product01,#top_main img').hide();
		});
		$('#top_slider').fadeIn(300).animate({left:keyframe1+'px'},(keyframe0-keyframe1)*frameV,'linear',function(){
			showCopy('#top_p01',305,92,95,28,309,123);
			$(this).animate({left:keyframe2+'px'},(keyframe1-keyframe2)*frameV,'linear',function(){
				showCopy('#top_p02',318,92,120,28,322,123);
				$(this).animate({left:keyframe3+'px'},(keyframe2-keyframe3)*frameV,'linear',function(){
					showCopy('#top_p03',390,94,181,24,391,122);
					$(this).animate({left:keyframe4+'px'},(keyframe3-keyframe4)*frameV,'linear',showMainCopy);
				})
			});
		});
	}

	/* 各エリアのメインコピー・サブコピーを表示 */
	function showCopy(obj,left,top,width,height,sLeft,sTop){
		$(obj+' .copy_main').css({
			left:left+(width/2)-(width/1.5/2)+'px',
			top:top+height-(height/1.5)+'px',
			width:width/1.5+'px',
			height:height/1.5+'px'
			/*,opacity:0*/
		}).show().animate({
			left:left+'px',
			top:top+'px',
			width:width+'px',
			height:height+'px'
			/*,opacity:1*/
		},600,'easeOutBounce');

		if(obj=='#top_p03'){
			setTimeout(generateNotes2,600);
		}else{
			setTimeout(function(){generateNotes(obj)},600);
		}

		$(obj+' .copy_sub').css({
			left:sLeft+60+'px',
			top:sTop+'px',
			opacity:0
		}).fadeIn().animate({
			left:sLeft+'px',
			top:sTop+'px',
			opacity:1
		},1000,'easeOutExpo');
	}

	/* メイン画面の表示制御 */
	function showMainCopy(){
		var span = 200;
		$('#top_product01').css({opacity:0}).show().animate({opacity:1},span,function(){
			timeoutID0 = setTimeout(function(){$('#top_product02').css({opacity:0}).show().animate({opacity:1},span);},100);
			timeoutID1 = setTimeout(function(){$('#top_product03').css({opacity:0}).show().animate({opacity:1},span);},200);
			timeoutID2 = setTimeout(function(){$('#top_product04').css({opacity:0}).show().animate({opacity:1},span);},400);
			timeoutID3 = setTimeout(function(){$('#top_product05').css({opacity:0}).show().animate({opacity:1},span);},600);
			timeoutID4 = setTimeout(function(){$('#top_product06').css({opacity:0}).show().animate({opacity:1},span);},800);
			timeoutID5 = setTimeout(function(){
				$('#top_main .copy_sub').css({opacity:0}).show().animate({opacity:1},2000);
				$('#top_main .copy_main').css({
					left:649+106-53+'px',
					top:76+24-12+'px',
					width:'106px',
					height:'24px'
					/*,opacity:0*/
				}).show().animate({
					left:'649px',
					top:'76px',
					width:'213px',
					height:'48px'
					/*,opacity:1*/
				},600,'easeOutBounce',function(){
					clearTimeout(timeoutID);
					/* ループタイマー設定 */
					/*timeoutID = setTimeout(startLoop,10000);*/
					/* サブバナースライダ再生開始 */
					setSbannerTimer();
				});
			},1000);
		});
	}

	/* 音符表示 */
	function generateNotes(obj){
		for(var i=0;i<10;i++){
			$(obj+' .notes img:first')
			.hide()
			.clone(true)
			.attr('src','/images/top_banners/note0'+obj.charAt(obj.length-1)+top_ext)
			.css({
				left:'400px',
				top:'80px',
				opacity:1
			})
			.appendTo(obj+' .notes')
			.show()
			.animate({
				left:parseInt(Math.random()*800)+200+'px',
				top:parseInt(Math.random()*125)-100+'px',
				opacity:0
			},Math.max(parseInt(8000*Math.random()),6000),'easeOutSine',function(){
				$(this).remove();
			});
		}
	}

	/* 音符表示2 */
	function generateNotes2(){
		var srcArray = new Array('a','b','c');
		for(var i=0;i<51;i++){
			$('#top_p03 .notes img:first')
			.hide()
			.clone(true)
			.attr('src','/images/top_banners/note03'+srcArray[parseInt(Math.random()*3)]+top_ext)
			.css({
				left:440+parseInt(Math.random()*20)+'px',
				top:80+parseInt(Math.random()*20)+'px',
				opacity:1
			})
			.appendTo('#top_p03 .notes')
			.show()
			.animate({
				left:parseInt(Math.random()*1000)-100+'px',
				top:parseInt(Math.random()*400)-100+'px',
				opacity:0
			},Math.max(parseInt(15000*Math.random()),9000),'easeOutQuint',function(){
				$(this).remove();
			});
		}
	}

	/* サブバナー関連 */
	function setSbannerTimer(){
		clearSbannerTimer();
		sbannerInterval = setInterval(sbannerLeft,5000);
	}
	function clearSbannerTimer(){
		clearInterval(sbannerInterval);
	}
	function sbannerLeft(){
		$('#top_sbanner div ul').stop().animate({left:'-140px'},600,'swing',function(){
			$('#top_sbanner div ul li:first').appendTo('#top_sbanner div ul');
			$('#top_sbanner div ul').css('left','-70px');
		});
	}
	function sbannerRight(){
		$('#top_sbanner div ul').stop().animate({left:'0px'},600,'swing',function(){
			$('#top_sbanner div ul li:last').prependTo('#top_sbanner div ul');
			$('#top_sbanner div ul').css('left','-70px');
		});
	}

	/* ポップアップバナー関連 */
	function openPbanner(num){
		clearTimeout(pbannerCloseID);
		$('#top_pbanner').stop().show().css({top:'-220px'});
		$('#top_pbanner ul').stop().show().animate({top:'0px'},300);
		$('#pbanner_closer').show();
		$('#top_pbanner ul li a').stop().fadeTo(300,0).hide();
		$('#pbanner0'+num).show().stop().fadeTo(300,1);
	}
	function closePbanner(){
		if(!sbannerFlag&&!pbannerFlag){
			$('#top_pbanner ul').animate({top:'220px'},600,function(){
					if(!sbannerFlag&&!pbannerFlag){
						$('#top_pbanner,#pbanner_closer').hide().css({top:0});
						$('#top_pbanner ul').hide();
					}
			});
		}
		return false;
	}

})(jQuery);