$(function(){
	/*-------*/
	//変数
	/*-------*/
	var TimerIDAutoPlay;	//自動表示のタイマーID
	var IntervalTime = 10000;//自動表示切替間隔ミリ秒
	var TimerIDReLoad;		//クリックアクション後に自動表示に切り替わるまでのタイマーID
	var NewItemId = [];
	var ImgPos = {
		Left:{"left":"0px","opacity":"1.0"}
		,Right:{"left":"690px","opacity":"0.3"}
	}
	var ArwMarging;
	var thirdpositionText ="他にもこんな商品があります";
	//トップページ　オススメアニメーションのボタン
	var PitemListDivListArwImg = function(num){
		$("#PitemListDiv>ul>li .NowPushItem").remove();
		$("#PitemListDiv>ul>li a.selectEffect").removeClass();
		$("#PitemListDiv>ul>li:eq(" +num + ")")
			.each(
			function(){
				$(this)
					.prepend(
						$("<img />")
							.attr("src","img/parts/200809/ya3.gif")
							.addClass("NowPushItem")
							.css("marginLeft",ArwMarging + "px")
					);
				$(this)
					.find("a")
					.addClass("selectEffect");
			}
		);
	}
	var PushItemAnimate = function(){
		var targetID = $("#ItemPlace>div").eq(1).attr("id").substring(4,5);
		PitemListDivListArwImg(targetID);
		$("#ItemPlace>div")
			.eq(1)
			.animate(ImgPos.Left,800,"swing",function(){
				$("#ItemPlace>div:eq(0)")
					.insertAfter("#ItemPlace>div:last")
					.css(ImgPos.Right);
			}
		);
	}
	//アニメーション再始動用	いずれまた見直し
	var AutoPlayReset = function(){
		var matLength = NewItemId.length;
		for(var i=0;i<matLength;i++){
			var targetId = "#Item" + i;
			$(targetId).appendTo("#ItemPlace");	//整列
			var l= $(targetId).css("left");
			if(i == 0){	//アニメーションに戻るので0は表示させておく。それ以外は隠す。
				if(l != "0px"){
					$(targetId).animate(ImgPos.Left,800,"swing");
				}
			}
			if(i > 0){
				$(targetId).animate(ImgPos.Right,300,"linear");
			}
		}
		PitemListDivListArwImg(0);
		TimerIDAutoPlay = setInterval(PushItemAnimate,IntervalTime);
	}



	/*-------*/
	//Loading後のHTML生成
	/*-------*/
	/*main部*/
	/*load時のpushItemの数取得とそのボタン生成、更にはcssの設定*/
	var ItemPushMeth = $("#ItemPlace>div.Items").get();
	if(ItemPushMeth.length > 0){
		$("#ItemPlace>div.Items").each(
			function(i){
				$(this).attr("id","Item" + i);
			}
		);
		//#ItemPlaceの後にdivを入れてulスペースを設定する
		$("#ItemPlace")
			.after(
				$("<div/>")
					.attr("id","PitemListDiv")
					.addClass("clearfix")
					.append(
						$("<ul/>")
							.attr("id","PickItemList")
					)
			);
		
		//#ItemPlace>divにある画像からリストを生成してボタンとする
		$("#ItemPlace>div").each(function(){
			var PushImgId = $(this).attr("id");
			NewItemId.push(PushImgId);	//ID取得
			var ImgAlt = $(this).find("img").attr("alt");	//ボタンの名前はimgタグのaltに含まれているテキスト。
			var ImgAltStr = (ImgAlt)?ImgAlt:"Push!!";	//ImgタグのAlt取得　無い場合、エラー回避で"Push!!"というボタン名にする
			$("<li/>")
				.append(
					$("<a/>")
						.attr({"href":"javascript:void(0)","id":PushImgId + "ef"})
						.text(ImgAltStr)
						.addClass("ItemClk")
						.addClass("hovers")
				)
				.appendTo("#PitemListDiv>ul");
		
			var CssElm = (NewItemId.length > 1)?ImgPos.Right:ImgPos.Left;//css設定
			$(this).css(CssElm);
		});
		//生成したliのデザインをする
		var ulwidth = $("ul#PickItemList").width();	//リストの横幅を決定する
		var ListWidth = Math.round(ulwidth/NewItemId.length);
		var ListWidthLast = ulwidth - ListWidth*(NewItemId.length - 1)
		ArwMarging = (ListWidth/2) - 13;	//liに付く上向き矢印のpaddin-left値
		$("#PitemListDiv>ul>li")
			.css({"width":ListWidth + "px"})
			.find("a")
			.css({"width":(ListWidth - 1) + "px"});
		$("#PitemListDiv>ul>li:last")
			.css({"width":ListWidthLast + "px","background":"none"})
			.find("a")
			.css({"width":ListWidthLast + "px"});
		if(ItemPushMeth.length > 1){
			PitemListDivListArwImg(0);
			TimerIDAutoPlay = setInterval(PushItemAnimate,IntervalTime);
		}
	}
	$("#ItemPlace").css("visibility","visible");//生成完了したら表示する。スタイルシートでデフォではvisibility:hidden
	//------------------新着・オススメ部分の生成完了
	/*オススメアイテムJSON取得*/
	$.getJSON("shopjs2/shopitem.json",null,function(json,status){
		if(status == "success"){
			var ItemLength = json.item.length;
			var itemNum = [];
			//ランダムに表示させるアイテムナンバーを選択
			for(var j=0;j>=0;j++){
				var ran = Math.floor(Math.random()*ItemLength);
				if(itemNum.length == 0){
					itemNum[0] = ran;
				}else{
					for(var k=0;k>=0;k++){
						if(itemNum[k] != ran){
							if(k == (itemNum.length - 1)){
								itemNum[itemNum.length] = ran;
								break;
							}else{
								continue;
							}
						}
						else{break;}
					}
				}
				if(itemNum.length == 12){break;}	//上限数
			}
			
			//まずはh3とulタグを設定する
			$("<h3/>")
				.addClass("h3head")
				.text(thirdpositionText)
				.appendTo("#osusume")
				.after(
					$("<ul/>")
						.addClass("clearfix")
						.attr("id","osusumeList")
				);
			$("ul#osusumeList").css("visibility","hidden");
			//jsonから情報ブッコ抜き＆リスト生成
			$.each(itemNum,function(i,val){
				$("ul#osusumeList")
					.append(
						$("<li/>")
							.append(
								$("<p/>")
									.append(
										$("<a/>")
											.attr("href",json.item[val].link)
											.append(
												$("<img/>")
													.attr({
															"src":json.item[val].image.src
															,"alt":json.item[val].image.alt
													})
											)
											.append(
												$("<span/>")
													.css("display","block")
													.text(json.item[val].name)
											)
									)
									.append(
										$("<span/>")
											.addClass("price")
											.text(json.item[val].price)
									)
							)
					);
			});	//$.eachここまで
			//設定したlistのheightを取得し、220より大きければ書き換える
			var H = {
				"target":220
				,"set":220
				,"Ary":[]
			};
			$("ul#osusumeList li").each(function(i){
				 H.Ary[i] = $(this).height();
			});
			for(i in H.Ary){
				if(H.Ary[i] > H.target){
					H.set = H.Ary[i];
				}
			}
			$("ul#osusumeList li").height((H.set));
			$("ul#osusumeList").css("visibility","visible");

		}//---------------------------status=="success"
	});//-----------------------------json設定ここまで/

	/*トップページオリジナルEvent*/
	//pushのボタン押下アクション
	/*---------------------------------------------
	1.押下前はIntervalで自動切換え表示をしている
	2.押下後、Intervalを止めて、押下対象のdivを最前列にinsertAfterしてleft:690pxに移動、
	その後アニメーションさせる。アニメーション後に他のdiv要素をleft:690pxに。
	3.x秒操作が無ければ自動切り替え表示を再始動させる
	---------------------------------------------*/
	$("a.ItemClk").click(
			function(){
				if(TimerIDAutoPlay){
					clearInterval(TimerIDAutoPlay);
				}
				if(TimerIDReLoad){
					clearTimeout(TimerIDReLoad);
				}
				var PushId = $(this).attr("id").substring(0,5);	//押下されたボタンのID
				PitemListDivListArwImg(PushId.substring(4,5));
				$("#" + PushId)
					.insertAfter("#ItemPlace>div:last")
					.css(ImgPos.Right)
					.animate(ImgPos.Left,800,"swing",function(){
						for(var j=0;j<(NewItemId.length-1);j++){
							$("#ItemPlace>div")
								.eq(j)
								.css(ImgPos.Right);
						}
					});
				if(ItemPushMeth.length > 1){
					TimerIDReLoad = setTimeout(AutoPlayReset,18000);//X秒後に自動更新再スタート
				}
			}
	);
});