$(function(){
  //初期状態設定(すべてCSSで設定済)
//  $('#gallery li').css('position','absolute');
//  $('#thumbs').css({
//    paddingTop:'282px',
//    height:'69px',
//    overflow:'hidden'
//  });
//  $('#thumbs li').css('opacity','0.5');
  $('#gallery ul').html($('#gallery li').get().reverse());

  //クリック時の動作設定
  $('#thumbsList li').hover(function(){
     var name = $(this).attr('id').replace('thumbs','');
     changeImage(name);
  }, $('#thumbs .active'));

  $('#thumbsList li').click(function(){
      var name = $(this).attr('id'); 
      var url = $('#'+ name + ' a').attr('href');
      window.location.href = url;
  });

  //初期は１をクリック
  //$('#thumbsList a').eq(0).trigger('click');
  changeImage('02');

  //thumbs初期設定
  $('#thumbsInner').css('width',180*$('#thumbsInner ul li').size()+'px');
  $('#thumbsInner ul li:last').prependTo('#thumbsInner ul');
  $('#thumbsInner').css('margin-left','-180px');
  
  //戻るボタン
  $('#thumbsPrev').click(function(){
    $('#thumbsInner:not(:animated)').animate({
      marginLeft:parseInt($('#thumbsInner').css('margin-left'))+180+'px'
    },'slow','swing',
    function(){
      $('#thumbsInner').css('margin-left','-180px');
      $('#thumbsInner ul li:last').prependTo('#thumbsInner ul');
    });
//    $('#thumbs .active').prev().click();
      var name = $('#thumbsList .active').prev().attr('id').replace('thumbs','');
      changeImage(name);
  });

  //進むボタン
  $('#thumbsNext').click(function(){
    $('#thumbsInner:not(:animated)').animate({
      marginLeft:parseInt($('#thumbsInner').css('margin-left'))-180+'px'
    },'slow','swing',
    function(){
      $('#thumbsInner').css('margin-left','-180px');
      $('#thumbsInner ul li:first').appendTo('#thumbsInner ul');
    });
      //$('#thumbsList .active').next().click();
      var name = $('#thumbsList .active').next().attr('id').replace('thumbs','');
      changeImage(name);
  });

  //自動再生
  var timerID = setInterval(function(){
    $('#thumbsNext').click();
  },13500);

  function changeImage(name) {
    $('#gallery li').hide();
    $('#thumbs li').removeClass();
    $('#thumbs' + name).addClass('active');
    $('#gallery' + name).fadeIn();

  }
  //クリック時停止
//  $("#thumbsList a").click(function(){
//   clearInterval(timerID);
//  })

});