/* ================================================================ 
			プレビュー画面のスライド�Eサムネイルの表示
=================================================================== */

$(document).ready(function() {
  current = 1;
  button = 1;
  images = 64;//頁E��が増えた場合、値を変更
  width = 669;

  $('#p1').animate({ "left": "0px" }, 669, "swing");
  $('#b1').css("background-color", "#0C5AAB");
  
  //サムネイルスクロールボタンの初期ロールオーバ�E設宁E  $('#trg1').css("background-color", "#0C5AAB");
  
  //読み込み初期のサムネイルのアニメーション
  $('#section1').animate({ "left": "0px" }, 735, "swing");

  
  

  $("#next").click(function() {
    button = current;
    current++
    if (current == (images + 1)) { current = 1 }
    animateLeft(current, button)
	
	
	if(button == 64){
		$("#section1").animate({ "left": "0px" }, 735, "swing");
		$("#section2").animate({ "left": "735px" }, 735, "swing");
		$("#section3").animate({ "left": "1470px" }, 735, "swing");
		$("#section4").animate({ "left": "2205px" }, 735, "swing");
		
		//サムネイルスクロールボタンの刁E��替ぁE		$('#trg3').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#0C5AAB");
		$('#trg4').css("background-color", "#aaa");

	}

	
	
	if(button == 16){
		$("#section2").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-735px" }, 735, "swing");
		$("#section3").animate({ "left": "735px" }, 735, "swing");
		$("#section4").animate({ "left": "1460px" }, 735, "swing");
		
		//サムネイルスクロールボタンの刁E��替ぁE		
		$('#trg3').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#0C5AAB");
		$('#trg4').css("background-color", "#aaa");

	}
	
	if(button == 32){
		$("#section3").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-1460px" }, 735, "swing");
		$("#section2").animate({ "left": "-735px" }, 735, "swing");
		$("#section4").animate({ "left": "735px" }, 735, "swing");

		//サムネイルスクロールボタンの刁E��替ぁE		
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg3').css("background-color", "#0C5AAB");
		$('#trg4').css("background-color", "#aaa");

	}
	
	if(button == 48){
		$("#section4").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-2205px" }, 735, "swing");
		$("#section2").animate({ "left": "-1470px" }, 735, "swing");
		$("#section3").animate({ "left": "-735px" }, 735, "swing");

		//サムネイルスクロールボタンの刁E��替ぁE		
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg4').css("background-color", "#0C5AAB");
		$('#trg3').css("background-color", "#aaa");

	}
	

	
	
	
	
	
  });
  

	

  $("#previous").click(function() {
    button = current;
    current--
    if (current == 0) { current = images }
    animateRight(current, button)
	
	//自動でサムネイルが�Eり替わる
	if(button == 17){
		$("#section1").animate({ "left": "0px" }, 735, "swing");
		$("#section2").animate({ "left": "735px" }, 735, "swing");
		$("#section3").animate({ "left": "1470px" }, 735, "swing");
		$("#section4").animate({ "left": "2205px" }, 735, "swing");
		
		$('#trg4').css("background-color", "#aaa");
		$('#trg3').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#0C5AAB");
	}
	
	if(button == 33){
		$("#section2").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-735px" }, 735, "swing");
		$("#section3").animate({ "left": "735px" }, 735, "swing");
		$("#section4").animate({ "left": "1460px" }, 735, "swing");
		
		$('#trg4').css("background-color", "#aaa");
		$('#trg3').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#0C5AAB");
	}
	
	if(button == 49){
		$("#section3").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-1460px" }, 735, "swing");
		$("#section2").animate({ "left": "-735px" }, 735, "swing");
		$("#section4").animate({ "left": "735px" }, 735, "swing");
		
		$('#trg4').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg3').css("background-color", "#0C5AAB");
	}
	if(button == 1){
		$("#section4").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-2205px" }, 735, "swing");
		$("#section2").animate({ "left": "-1470px" }, 735, "swing");
		$("#section3").animate({ "left": "-735px" }, 735, "swing");
		
		$('#trg3').css("background-color", "#aaa");
		$('#trg2').css("background-color", "#aaa");
		$('#trg1').css("background-color", "#aaa");
		$('#trg4').css("background-color", "#0C5AAB");
	}
	
	
	
	
  });
  
  
  
  
  
  

  $("#buttons span").click(function() {
    button = current;
    clickButton = $(this).attr('id');
    current = parseInt(clickButton.slice(1));
    if (current > button) { animateLeft(current, button) }
    if (current < button) { animateRight(current, button) }
  });
  
  
  


//サムネイル画像�Eロールオーバ�E設宁E
  $("#buttons span").mouseover(function() {
    if (($(this).css("background-color")) == "#fff" || ($(this).css("background-color")) == "rgb(255, 255, 255)") { $(this).css("background-color", "#d5d5d5"); }
  });

  $("#buttons span").mouseout(function() {
    if (($(this).css("background-color")) == "#d5d5d5" || ($(this).css("background-color")) == "rgb(213, 213, 213)") { $(this).css("background-color", "#fff"); }
  });
  
  


  function animateLeft(current, button) {
    $('#p' + current).css("left", width + "px");
    $('#p' + current).animate({ "left": "0px" }, 669, "swing");
    $('#p' + button).animate({ "left": -width + "px" }, 669, "swing");
    setbutton()

  }

  function animateRight(current, button) {
    $('#p' + current).css("left", -width + "px");
    $('#p' + current).animate({ "left": "0px" }, 669, "swing");
    $('#p' + button).animate({ "left": width + "px" }, 669, "swing");
    setbutton()
  }

  function setbutton() {
    $('#b' + button).css("background-color", "#fff");
    $('#b' + current).css("background-color", "#0C5AAB");
  }
  
/*==============================================================
	サムネイルスクロールボタンのロールオーバ�E設宁E==============================================================*/

  $("#sliderTrg li").mouseover(function() {
    if (($(this).css("background-color")) == "#aaa" || ($(this).css("background-color")) == "rgb(170, 170, 170)") { $(this).css("color", "#000"); }
  });

  $("#sliderTrg li").mouseout(function() {
    if (($(this).css("color")) == "#000" || ($(this).css("color")) == "rgb(0, 0, 0)") {
		$(this).css("color", "#fff");
		}
  });
  
/*==============================================================
		サムネイルスクロールボタンクリチE��設宁E==============================================================*/

  //サムネイルボタン1
  $("#trg1").click(function() {
		$(this).css("background-color", "#0C5AAB");
		$(this).css("color", "#fff");
		$("#trg2").css("background-color", "#aaa");
		$("#trg3").css("background-color", "#aaa");
		$("#trg4").css("background-color", "#aaa");
		
		//サムネイルのスクロール
		$("#section1").animate({ "left": "0px" }, 735, "swing");
		$("#section2").animate({ "left": "735px" }, 735, "swing");
		$("#section3").animate({ "left": "1470px" }, 735, "swing");
		$("#section4").animate({ "left": "2205px" }, 735, "swing");
	
  });
  
  
  //サムネイルボタン2
   $("#trg2").click(function() {
		$(this).css("background-color", "#0C5AAB");
		$(this).css("color", "#fff");
		$("#trg1").css("background-color", "#aaa");
		$("#trg3").css("background-color", "#aaa");
		$("#trg4").css("background-color", "#aaa");
		
		//サムネイルのスクロール
		$("#section2").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-735px" }, 735, "swing");
		$("#section3").animate({ "left": "735px" }, 735, "swing");
		$("#section4").animate({ "left": "1460px" }, 735, "swing");


  });
   
   //サムネイルボタン3
   $("#trg3").click(function() {
		$(this).css("background-color", "#0C5AAB");
		$(this).css("color", "#fff");
		$("#trg1").css("background-color", "#aaa");
		$("#trg2").css("background-color", "#aaa");
		$("#trg4").css("background-color", "#aaa");
		
		//サムネイルのスクロール
		$("#section3").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-1460px" }, 735, "swing");
		$("#section2").animate({ "left": "-735px" }, 735, "swing");
		$("#section4").animate({ "left": "735px" }, 735, "swing");

  });
  
  
  //サムネイルボタン4
   $("#trg4").click(function() {
		$(this).css("background-color", "#0C5AAB");
		$(this).css("color", "#fff");
		$("#trg1").css("background-color", "#aaa");
		$("#trg2").css("background-color", "#aaa");
		$("#trg3").css("background-color", "#aaa");
		
		//サムネイルのスクロール
		$("#section4").animate({ "left": "0px" }, 735, "swing");
		$("#section1").animate({ "left": "-2205px" }, 735, "swing");
		$("#section2").animate({ "left": "-1470px" }, 735, "swing");
		$("#section3").animate({ "left": "-735px" }, 735, "swing");
  });
  
  	

 
});