$(function(){
  //初期状態設定
  $('#gallery li').css('position','absolute');
  $('#thumbs li').css('opacity','0.8');
  $('#gallery ul').html($('#gallery li').get().reverse());

  //クリック時の動作設定
  $('#thumbsList li').click(function(){
    var name = $(this).attr('id').replace('thumbs','');
    $('#gallery li').hide();
    $('#thumbs li').removeClass();
    $('#thumbs li').css('opacity','0.5');
    $('#gallery' + name).fadeIn();
    $('#thumbs' + name).addClass('active');
    $('#thumbs .active').css('opacity','1');
  });

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

  //thumbs初期設定
  $('#thumbsInner').css('height',68*$('#thumbsInner ul li').size()+'px');
  $('#thumbsInner ul li:last').prependTo('#thumbsInner ul');
  $('#thumbsInner').css('margin-top','0');
  
  //戻るボタン
  $('#thumbsPrev').click(function(){
    $('#thumbsInner:not(:animated)').animate({
      marginTop:parseInt($('#thumbsInner').css('margin-top'))+68+'px'
    },'slow','swing',
    function(){
      $('#thumbsInner').css('margin-top','0');
      $('#thumbsInner ul li:last').prependTo('#thumbsInner ul');
    });
    $('#thumbs .active').prev().click();
  });

  //進むボタン
  $('#thumbsNext').click(function(){
    $('#thumbsInner:not(:animated)').animate({
      marginTop:parseInt($('#thumbsInner').css('margin-top'))-68+'px'
    },'slow','swing',
    function(){
      $('#thumbsInner').css('margin-top','0');
      $('#thumbsInner ul li:first').appendTo('#thumbsInner ul');
    });
    $('#thumbsList .active').next().click();
  });

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



});