$(document).ready(function(){

$("#tks").hover(
	function(){$("#tks .submenu").slideDown("fast")},function(){	$("#tks .submenu").slideUp()}
);
$("#fts").hover(
	function(){$("#fts .submenu").slideDown("fast")},function(){	$("#fts .submenu").slideUp()}
);
$("#pos").hover(
	function(){$("#pos .submenu").slideDown("fast")},function(){	$("#pos .submenu").slideUp()}
);


$(".photobox:eq(0)").delay(500).fadeIn();

$("#itemicon img").click(function(){
	var thum_no = $("#itemicon img").index(this);
	$(".photobox:visible").fadeOut("fast");
	$(".photobox:eq("+ thum_no +")").fadeIn("fast");


});

	var postfix = '_on';
	$('.over').not('[src*="'+ postfix +'."]').each(function() {
		var img = $(this);
		var src = img.attr('src');
		var src_on = src.substr(0, src.lastIndexOf('.'))
		           + postfix
		           + src.substring(src.lastIndexOf('.'));
		$('<img>').attr('src', src_on);
		img.hover(
			function() {
				img.attr('src', src_on);
			},
			function() {
				img.attr('src', src);
			}
		);
	});
$(".info1").hide();
$(".info1:first").show();
var hmax=0;
$(".info1").each(function(){
	var theight =$(this).outerHeight();
	if(hmax<theight){
		hmax=theight;
	}
});
$(".info1").css("height",hmax+20);

$("#tabbtn li").click(function(){
	var liindex=$("#tabbtn li").index(this);
	$(".info1:visible").hide();
	$(".info1:eq("+liindex+")").show();
	$("#tabbtn li").removeClass("on");
	$(this).addClass("on");
});

var thisheight=$("#leftlayer").height()+30;
var wwidth=$(window).width()+10;
$("#leftlayer").css("top",thisheight*-1);
$("#leftlayer").hide();
$("#layermenu").click(function(){
	$("#leftlayer").show().animate({
	top:"0"},500);
});
$("#layerclose").click(function(){
	$("#leftlayer").animate({ top:thisheight*-1},400)}
);
//productページの設定

//リストページ枠ズーム　非表示
$("#colorBox").hide();

//枠ズームからボックスハイドまで
$("#colorBox").hover(
	function(){
		$(this).children().css({"border":"1px solid #aaa"});
	},
	function(){
		$(this).empty();
		$("#colorBox").hide();
	}
);


//リストページボックスhover

var agent = ScreenChecker();

if(agent == 3){
$('.listarea').hover(
	 function(){
	 var position=$(this).position();
         //コピーして追加
	 $(this).clone().prependTo("#colorBox");
$("#colorBox listarea").hide();
$("#colorBox").show();
$("#colorBox .listarea").delay(600).animate({
    width: "300px",
  }, 200 ).fadeIn();

	 $("#colorBox .inner_right").delay(900).fadeIn();
         //スタイル設定
	 $("#colorBox").children().css({"padding":"20px","margin-left":"-14px","margin-top":"-14px","z-index":"55","background-color":"#fff","position":"absolute","top": position.top,"left": position.left});
	},
	function(){
		$(this).css({"border":"1px solid #ccc"});
	}
);
}



//詳細ページギミック

$("#mainlargeimages_contena").hide();
$("#mainlargeimages").hide();
$("#thumbarea").append("<ul></ul>");
$("#colorarea").append("<ul></ul>");
$("#mainimages ul").css("position","relative");
$("#mainimages li").css("position","absolute");
$("#mainimages li").hide();
$("#mainimages li:first").show();

$("#scontena li").css("position","relative");
$("#scontena img").css("position","relative");

$("#mainimages li").each(function(){
var liindex=$("#mainimages li").index(this);
var simg=$("#mainimages img:eq("+liindex+")").attr("src");
var colorstr=$("#mainimages img:eq("+liindex+")").attr("title");
//カラーの分岐
if( $(this).hasClass("color")){
$("#colorarea ul").append('<li><img src="'+simg+'" alt="" width="90" class="colorselect" /><p class="colorstr">'+colorstr+'</p></li>');
}else{
$("#thumbarea ul").append('<li><img src="'+simg+'" alt="" width="90" /></li>');
}

//カラーの分岐2
if( $(this).hasClass("color")){
	var colorstr=$("#mainimages img:eq("+liindex+")").attr("title");
	if(colorstr==""){	colorstr="&nbsp;";	}
	$("#color").append('<li><img src="'+simg+'" alt="カラー画像'+liindex+'" width="90" class="colorselect" /><p class="colorstr">'+colorstr+'</p></li>');
}else{
	$("#thumb").append('<li><img src="'+simg+'" alt="サブ画像'+liindex+'" width="90" /></li>');
}


});


//マウスオーバー設定
$("#scontena img").hover(function(){
	$(this).animate({
		opacity:"0.6"
	})
},function(){
	$(this).animate({
		opacity:"1"
	});
}	
);


//クリック画像差し替え	
$("#scontena img").click(function(){
	var liindex=$("#scontena img").index(this);
	var ctg=$(this).parent().parent().attr("id");
	$("#mainimages li:visible").fadeOut("slow");
	$("#mainimages li:eq("+liindex+")").fadeIn("slow");
	//カラーも一緒に選択させる
	if($(this).hasClass("colorselect")){
		var selectcolor=$(this).next().text();
		var selectcolor_index=$("select[name='classcategory_id1'] option[label="+selectcolor+"]").index();
		var selectval=$("select[name='classcategory_id1'] option:eq("+selectcolor_index+")").attr("value");
		$("select[name='classcategory_id1']").val(selectval);
$("select[name='classcategory_id1']").animate({backgroundColor:"#ff7800"}, "slow","easeOutQuint").animate({backgroundColor:"#fff"}, "slow","easeOutQuint");
}
});

$("#scontena img:first").addClass("selectli");



//拡大画像セット
$("#mainlargeimages img").each(function(){
		var simg=$(this).attr("src");
		$("#largethumb").append("<img src='"+simg+"' alt='images' width='100' />");
});
$("#largethumb img").hide();



//拡大ボタンクリック
$("#large").click(function(){
	$("#large").hide();
	//隠す
	$("#scontena").hide();
	$("#infozone").hide();
	$("#thumbarea").hide();
	$("#colorarea").hide();
	$("#imagezone").css("width","98%");
	$("#productimg").css("width","931px");
	$("#imagezone").css("height","480px");
	$("#imagezone").css("margin-bottom","0px");
	var imgindex=$("#imagezone li:visible").index();
	$("#mainimages").hide();
	$("#imagezone li:visible").hide();
	//表示する
	$("#mainlargeimages_contena").show();
	$("#mainlargeimages").show();
	$("#mainlargeimages li:eq("+imgindex+")").show();

	$("#mainlargeimages img:eq("+imgindex+")").animate({width:"800px",height:"480px"},"3000");
	$("#mainlargeimages img").css("width","800px");
	$("#mainlargeimages img").css("height","480px");
	//サムネイルSHOW
	$("#largethumb").show();
	var num=$("#largethumb img").length;
    for(i=0;i<num;i++){
		var dtime=i*180;
		$("#largethumb img:eq("+i+")").delay(dtime).fadeIn("slow");
	}
});



//縮小へ戻る
$("#backto").click(function(){
	var imgindex=$("#mainlargeimages li:visible").index();
	$("#mainlargeimages li:visible").hide();
	$("#mainlargeimages").hide();
	$("#mainlargeimages_contena").hide();
	$("#imagezone li:visible").hide();
	$("#imagezone").css("width","500px");
	$("#productimg").css("width","500px");
	$("#largethumb img").hide();
	//表示する
	$("#mainimages").show();
	$("#mainimages li:visible").hide();
	$("#mainimages li:eq("+imgindex+")").show();
	$("#mainlargeimages img").css("margin-left","0px");
	$("#mainimages img:eq("+imgindex+")").css("width","800px");
	$("#mainimages img:eq("+imgindex+")").css("height","480px");
	$("#mainimages img:eq("+imgindex+")").animate({width:"500px",height:"300px"},"slow");
	$("#mainlargeimages img").css("width","500px");
	$("#mainlargeimages img").css("height","300px");
	$("#largethumb").hide();
	$("#large").delay(200).fadeIn("slow");
	$("#infozone").delay(500).fadeIn("slow");
	$("#thumbarea").delay(800).fadeIn("slow");
	$("#colorarea").delay(1200).fadeIn("slow");
	$("#scontena").show();
	$("#imagezone").css("height","auto");
 
});

//拡大画像変更アクション
$("#largethumb img").click(function(){
var liindex=$("#largethumb img").index(this);
$("#mainlargeimages li:visible").fadeOut("slow");
$("#mainlargeimages li:eq("+liindex+")").fadeIn("slow");
});


//拡大画像矢印で変更
$("#lithreecolumn1").click(function(){
	var imgindex = $("#mainlargeimages li:visible").index();
	var imgprev = imgindex-1;
	var imgcnt = $("#lithreecolumn2 li").length;
	if( imgprev<0 ) { imgprev=imgcnt-1; }
	$("#mainlargeimages li:visible").fadeOut("fast");
	$("#mainlargeimages li:eq(" + imgprev +")").fadeIn("fast");
});
//拡大画像矢印で変更
$("#lithreecolumn3").click(function(){
	var imgindex = $("#mainlargeimages li:visible").index();
	var imgnext = imgindex+1;
	var imgcnt = $("#lithreecolumn2 li").length;
	if( imgnext>imgcnt-1 ) { imgnext=0; }
	$("#mainlargeimages li:visible").fadeOut("fast");
	$("#mainlargeimages li:eq(" + imgnext +")").fadeIn("fast");
});



//高さ調整
var maxheight=$("dwrapper").height();
$("dwrapper").height(maxheight);



//FUJITAKAリストページ---------------------------------------------------//

$("#fujitaka_list #collection li img:first").show();

$("#fujitaka_list #collection_menu li").hover(function(){
	if($(this).hasClass("reyout")){
	}else{
	var ftindex = $(this).index();
	$("#fujitaka_list #collection li img").hide();
	$("#fujitaka_list #collection li img:eq(" + ftindex + ")").show();
	}
});

$("#fujitaka_list #collection_menu .reyout").click(function(){
	var imgcnt = $("#collection_clone img").length;
	var toHeight = imgcnt * 290 / 2;
$("#listsubmenu").fadeOut();
	$("#fujitaka_list").animate({ height:  toHeight },500);
	var ccnt=0;
	$("#collection_menu").fadeOut("fast");
	$("#collection").fadeOut("fast");
	$("#collection_clone img").each(function(){
		$(this).delay(300*ccnt).fadeIn();
		ccnt++;
	});
});

$(".pager").hide();
$(".pager:first").show();
$("#listsubmenu li").click(function(){
	if($(this).hasClass("nonepage")){
	}else{
	var listindex = $(this).index();
	$(".pager:visible").fadeOut("fast");
	$(".pager:eq(" + listindex + ")").fadeIn("fast");
	}
});






});





//<!--iPhoneとiPodTouchの画面サイズは320px*480px、縦でも横でもこの値は変化しない。-->
//<!--iPadは768px×1024pxらしい、実機では試してないので誰か教えてください。-->
//<!--このPGはJSでアップルスマートフォンとそれ以外を判別するものです。-->
function ScreenChecker(){
	var Swidth  = screen.width;
	var Sheight = screen.height;
	var ua =navigator.userAgent;
	//まずユーザーエージェントで判定する。
	//どれかひっかかればとりあえずOK
	if(ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('iPod')  > -1){
		//ディスプレイサイズでチェック
		if((Swidth == 320 && Sheight== 480) || (Swidth == 768 && Sheight== 1024)){
			if(Swidth == 320){
				return 1;
				//iPhone
			}else{
				return 2;
				//iPad
			}

		}else{
			//iphone,ipad以外のキャリアを拒否するならここにリダイレクトなり、エラーコードなりをいれればいい。
			return 3;
		}
	}else{
		//iphone,ipad以外のキャリアを拒否するならここにリダイレクトなり、エラーコードなりをいれればいい。
		return 3;
	}
}