//######################
//画像のプリロード
//######################

//装着イメージの数
imgCnt = 4;

for(k = 1; k <= imgCnt; k++){
	preImg = new Image();
	preImg.src = "./images/v" + k + ".jpg";
	preImgS = new Image();
	preImgS.src = "./images/p" + k + ".jpg";
	preImgOn = new Image();
	preImgOn.src = "./images/p" + k + "_on.jpg";
}
//######################
//ポップアップウィンドウ
//######################
function NewWindow(i) {
	switch(i){
		//装着イメージが増えたらcaseを増やす
		case 1:
			urlstr = "./soucyaku1.html"
			break;
		case 2:
			urlstr = "./soucyaku2.html"
			break;
		case 3:
			urlstr = "./soucyaku3.html"
			break;
		case 4:
			urlstr = "./soucyaku4.html"
			break;
	}
	window.open(urlstr,"nw","width=620,height=400,resizable");
}

//######################
//装着イメージの切り替え
//######################
function changeThumb(thumb){
	//装着イメージの数
	carCnt = 4;

	//サムネイルの初期化
	for(j = 1; j <= carCnt; j++){
		$("#thumbnail" + j).html("<img src=\"images/p" + j + ".jpg\" width=\"97\" height=\"55\" onClick=\"changeThumb(" + j + ")\" />");
	}
	switch(thumb){
		//装着イメージが増えたらcaseを増やす
		case 1:
			$("#carInfo").html("トヨタ ヴェルファイア");
			$("#carInfo2").html("<a href=\"#\" OnClick=\"NewWindow(" + thumb + ")\"><img src=\"../images/bt_kakudai.gif\" alt=\"拡大\" width=\"40\" height=\"17\" /></a>");
			break;
		case 2:
			$("#carInfo").html("トヨタ ヴォクシー");
			$("#carInfo2").html("<a href=\"#\" OnClick=\"NewWindow(" + thumb + ")\"><img src=\"../images/bt_kakudai.gif\" alt=\"拡大\" width=\"40\" height=\"17\" /></a>");
			break;
		case 3:
			$("#carInfo").html("ホンダ フィット");
			$("#carInfo2").html("<a href=\"#\" OnClick=\"NewWindow(" + thumb + ")\"><img src=\"../images/bt_kakudai.gif\" alt=\"拡大\" width=\"40\" height=\"17\" /></a>");
			break;
		case 4:
			$("#carInfo").html("スズキ ワゴンRスティングレー");
			$("#carInfo2").html("<a href=\"#\" OnClick=\"NewWindow(" + thumb + ")\"><img src=\"../images/bt_kakudai.gif\" alt=\"拡大\" width=\"40\" height=\"17\" /></a>");
			break;
	}
	//選択したサムネイルを枠付きサムネイルへの切り替え処理
	$("#carPhoto").html("<a href=\"#\" OnClick=\"NewWindow(" + thumb + ")\"><img src=\"images/v" + thumb + ".jpg\" width=\"412\" height=\"233\" border=\"0\" /></a>");
	$("#thumbnail" + thumb).html("<img src=\"images/p" + thumb + "_on.jpg\" width=\"97\" height=\"55\" onClick=\"changeThumb(" + thumb + ")\" />");
}

//######################
//ヴァリエーションイメージの切り替え
//######################
function changeVari(vari){
	switch(vari){
		//ヴァリエーションイメージが増えたらcaseを増やす
		case 1:
			$("#variInfo").html("ガンメタリックポリッシュ");
//			$("#variInfo").html("Gunmetalic Polish");
			$("#variPhoto").html("<img src=\"images/l_x9_18_gp_b.jpg\" width=\"225\" height=\"255\" border=\"0\" alt=\"ガンメタリックポリッシュ\" />");
			break;
		case 2:
			$("#variInfo").html("ガンメタリック");
//			$("#variInfo").html("Gunmetalic");
			$("#variPhoto").html("<img src=\"images/l_x9_18_g_b.jpg\" width=\"225\" height=\"255\" border=\"0\" alt=\"ガンメタリック\" />");
			break;
		case 3:
			$("#variInfo").html("ガンメタリックポリッシュ");
//			$("#variInfo").html("Gunmetalic Polish");
			$("#variPhoto").html("<img src=\"images/l_x9_16_gp_b.jpg\" width=\"225\" height=\"255\" border=\"0\" alt=\"ガンメタリックポリッシュ\" />");
			break;
		case 4:
			$("#variInfo").html("ガンメタリック");
//			$("#variInfo").html("Gunmetalic");
			$("#variPhoto").html("<img src=\"images/l_x9_16_g_b.jpg\" width=\"225\" height=\"255\" border=\"0\" alt=\"ガンメタリック\" />");
			break;
	}
}