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

$(document).ready(function() {
  current = 1;
  button = 1;
  images = 8;//☁E��像�E頁E��が増えた場合、値を変更
  width = 669;//プレビュー画面の横幁E��増やす場合変更

  $('#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)
	
	
	
	
  });
  

	

  $("#previous").click(function() {
    button = current;
    current--
    if (current == 0) { current = images }
    animateRight(current, button)
	
	
	
  });
  
  
  
  
  
  

  $("#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");
		}
  });
  

  
  	

 
});